refactor(components): make shared version and update import in components

packages/react/components/Button.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { vcn, VariantProps, Slot, AsChild } from "../shared";
+import { vcn, VariantProps, Slot, AsChild } from "../lib/shared@1.0.0";
 
 const colors = {
   outline: {
@@ -118,7 +118,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     };
 
     return <Comp ref={ref} {...compProps} />;
-  }
+  },
 );
 
 export { Button };

packages/react/components/Checkbox.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { VariantProps, vcn } from "../shared";
+import { VariantProps, vcn } from "../lib/shared@1.0.0";
 
 const checkboxColors = {
   background: {
@@ -107,7 +107,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
         </label>
       </>
     );
-  }
+  },
 );
 
 export { Checkbox };

packages/react/components/Dialog.tsx

@@ -1,5 +1,5 @@
 import React, { Dispatch, SetStateAction, useState } from "react";
-import { Slot, VariantProps, vcn } from "../shared";
+import { Slot, VariantProps, vcn } from "../lib/shared@1.0.0";
 import ReactDOM from "react-dom";
 
 /**
@@ -20,7 +20,7 @@ const DialogContext = React.createContext<
   () => {
     if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
       console.warn(
-        "It seems like you're using DialogContext outside of a provider."
+        "It seems like you're using DialogContext outside of a provider.",
       );
     }
   },
@@ -135,11 +135,11 @@ const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>(
           >
             {children}
           </div>,
-          document.body
+          document.body,
         )}
       </>
     );
-  }
+  },
 );
 
 /**
@@ -210,7 +210,7 @@ const DialogContent = React.forwardRef<HTMLDivElement, DialogContent>(
         {children}
       </div>
     );
-  }
+  },
 );
 
 /**
@@ -273,7 +273,7 @@ const DialogHeader = React.forwardRef<HTMLElement, DialogHeaderProps>(
         {children}
       </header>
     );
-  }
+  },
 );
 
 /**
@@ -348,7 +348,7 @@ const DialogTitle = React.forwardRef<HTMLHeadingElement, DialogTitleProps>(
         {children}
       </h1>
     );
-  }
+  },
 );
 
 const DialogSubtitle = React.forwardRef<
@@ -407,7 +407,7 @@ const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(
         {children}
       </div>
     );
-  }
+  },
 );
 
 export {

packages/react/components/Drawer.tsx

@@ -7,7 +7,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { AsChild, Slot, VariantProps, vcn } from "../shared";
+import { AsChild, Slot, VariantProps, vcn } from "../lib/shared@1.0.0";
 import { createPortal } from "react-dom";
 
 interface IDrawerContext {
@@ -31,7 +31,7 @@ const DrawerContext = React.createContext<
   () => {
     if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
       console.warn(
-        "It seems like you're using DrawerContext outside of a provider."
+        "It seems like you're using DrawerContext outside of a provider.",
       );
     }
   },
@@ -114,8 +114,8 @@ const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
       state.isDragging
         ? state.movePercentage + DRAWER_OVERLAY_BACKDROP_FILTER_BRIGHTNESS
         : state.opened
-        ? DRAWER_OVERLAY_BACKDROP_FILTER_BRIGHTNESS
+          ? DRAWER_OVERLAY_BACKDROP_FILTER_BRIGHTNESS
-        : 1
+          : 1
     })`;
 
     return createPortal(
@@ -133,9 +133,9 @@ const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
         }}
         ref={ref}
       />,
-      document.body
+      document.body,
     );
-  }
+  },
 );
 
 const drawerContentColors = {
@@ -250,8 +250,8 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
                 ? e.movementY
                 : e.touches[0].pageY - prev.prevTouch.y
               : "movementX" in e
-              ? e.movementX
+                ? e.movementX
-              : e.touches[0].pageX - prev.prevTouch.x;
+                : e.touches[0].pageX - prev.prevTouch.x;
             if (
               (["top", "left"].includes(position) &&
                 dragState.delta >= 0 &&
@@ -261,7 +261,8 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
                 movement < 0)
             ) {
               movement =
-                movement / Math.abs(dragState.delta === 0 ? 1 : dragState.delta);
+                movement /
+                Math.abs(dragState.delta === 0 ? 1 : dragState.delta);
             }
             return {
               ...prev,
@@ -370,7 +371,7 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
         />
       </div>
     );
-  }
+  },
 );
 
 const DrawerClose = forwardRef<
@@ -410,7 +411,7 @@ const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(
         ref={ref}
       />
     );
-  }
+  },
 );
 
 const [drawerBodyVariant, resolveDrawerBodyVariantProps] = vcn({
@@ -460,7 +461,7 @@ const DrawerFooter = forwardRef<HTMLDivElement, DrawerFooterProps>(
         ref={ref}
       />
     );
-  }
+  },
 );
 
 export {

packages/react/components/Input.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { VariantProps, vcn } from "../shared";
+import { VariantProps, vcn } from "../lib/shared@1.0.0";
 
 const inputColors = {
   background: {
@@ -61,7 +61,7 @@ const InputFrame = React.forwardRef<HTMLLabelElement, InputFrameProps>(
         {children}
       </label>
     );
-  }
+  },
 );
 
 interface InputProps

packages/react/components/Label.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { VariantProps, vcn } from "../shared";
+import { VariantProps, vcn } from "../lib/shared@1.0.0";
 
 const [labelVariant, resolveLabelVariantProps] = vcn({
   base: "has-[input[disabled]]:brightness-75 has-[input[disabled]]:cursor-not-allowed has-[input:invalid]:text-red-500",

packages/react/components/Popover.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useRef } from "react";
-import { AsChild, Slot, VariantProps, vcn } from "../shared";
+import { AsChild, Slot, VariantProps, vcn } from "../lib/shared@1.0.0";
 
 interface IPopoverContext {
   opened: boolean;
@@ -14,7 +14,7 @@ const PopoverContext = React.createContext<
   () => {
     if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
       console.warn(
-        "It seems like you're using PopoverContext outside of a provider."
+        "It seems like you're using PopoverContext outside of a provider.",
       );
     }
   },
@@ -133,7 +133,7 @@ const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
         {children}
       </div>
     );
-  }
+  },
 );
 
 export { Popover, PopoverTrigger, PopoverContent };

packages/react/components/Switch.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { VariantProps, vcn } from "../shared";
+import { VariantProps, vcn } from "../lib/shared@1.0.0";
 
 const switchColors = {
   background: {

packages/react/components/Tabs.tsx

@@ -1,4 +1,4 @@
-import { AsChild, Slot, VariantProps, vcn } from "../shared";
+import { AsChild, Slot, VariantProps, vcn } from "../lib/shared@1.0.0";
 import React from "react";
 
 interface Tab {
@@ -20,7 +20,7 @@ const TabContext = React.createContext<
   () => {
     if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
       console.warn(
-        "It seems like you're using TabContext outside of provider."
+        "It seems like you're using TabContext outside of provider.",
       );
     }
   },
@@ -60,7 +60,7 @@ const useTabState = () => {
           console.error(
             `Invalid index passed to setActiveTab: ${param}, valid indices are 0 to ${
               state.tabs.length - 1
-            }`
+            }`,
           );
         }
         return;
@@ -79,7 +79,7 @@ const useTabState = () => {
           console.error(
             `Invalid name passed to setActiveTab: ${param}, valid names are ${state.tabs
               .map((tab) => tab.name)
-              .join(", ")}`
+              .join(", ")}`,
           );
         }
         return;

packages/react/components/Toast.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useId, useRef } from "react";
 import ReactDOM from "react-dom";
-import { VariantProps, vcn } from "../shared";
+import { VariantProps, vcn } from "../lib/shared@1.0.0";
 
 interface ToastOption {
   closeButton: boolean;
@@ -79,7 +79,7 @@ function subscribeSingle(id: `${number}`) {
     toasts[id].subscribers.push(callback);
     return () => {
       toasts[id].subscribers = toasts[id].subscribers.filter(
-        (subscriber) => subscriber !== callback
+        (subscriber) => subscriber !== callback,
       );
     };
   };
@@ -111,7 +111,7 @@ function close(id: `${number}`) {
 
 function update(
   id: `${number}`,
-  toast: Partial<Omit<ToastBody, "life"> & Partial<ToastOption>>
+  toast: Partial<Omit<ToastBody, "life"> & Partial<ToastOption>>,
 ) {
   toasts[id] = {
     ...toasts[id],
@@ -153,7 +153,7 @@ const ToastTemplate = ({
   globalOption: ToastOption;
 }) => {
   const [toast, setToast] = React.useState<(typeof toasts)[`${number}`]>(
-    toasts[id]
+    toasts[id],
   );
   const ref = React.useRef<HTMLDivElement | null>(null);
 
@@ -199,7 +199,7 @@ const ToastTemplate = ({
           .get("transition-duration") as { value: number; unit: string };
       } else {
         const style = /(\d+(\.\d+)?)(.+)/.exec(
-          window.getComputedStyle(ref.current).transitionDuration
+          window.getComputedStyle(ref.current).transitionDuration,
         );
         transitionDuration = style
           ? {
@@ -297,7 +297,7 @@ const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
   if (toasterInstance && id !== toasterInstance.id) {
     if (process.env.NODE_ENV === "development" && !muteDuplicationWarning) {
       console.warn(
-        `Multiple Toaster instances detected. Only one Toaster is allowed.`
+        `Multiple Toaster instances detected. Only one Toaster is allowed.`,
       );
     }
     return null;
@@ -328,7 +328,7 @@ const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
             />
           ))}
         </div>,
-        document.body
+        document.body,
       )}
     </>
   );

packages/react/components/Tooltip.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { VariantProps, vcn } from "../shared";
+import { VariantProps, vcn } from "../lib/shared@1.0.0";
 
 interface TooltipContextBody {
   position: "top" | "bottom" | "left" | "right";
@@ -15,7 +15,7 @@ const TooltipContext = React.createContext<
   () => {
     if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
       console.warn(
-        "It seems like you're using TooltipContext outside of a provider."
+        "It seems like you're using TooltipContext outside of a provider.",
       );
     }
   },
@@ -101,7 +101,7 @@ const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(
         {...rest}
       />
     );
-  }
+  },
 );
 
 export { Tooltip, TooltipContent };