@mbao01/common 0.1.4 → 0.2.0

package/src/components/Menu/Menubar/constants.ts

@@ -32,11 +32,11 @@ const triggerVariant = {
 };
 
 export const getMenubarClasses = cva(
-  "flex h-9 items-center space-x-1 rounded-md border bg-base-100 p-1 shadow-sm"
+  "flex h-9 items-center space-x-1 rounded-md border bg-base-100 p-1 shadow-xs"
 );
 
 export const getMenubarTriggerClasses = cva(
-  "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none",
+  "flex cursor-default select-none items-center rounded-xs px-3 py-1 text-sm font-medium outline-hidden",
   {
     variants: {
       variant: triggerVariant,
@@ -45,7 +45,7 @@ export const getMenubarTriggerClasses = cva(
 );
 
 export const getMenubarSubTriggerClasses = cva(
-  "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+  "flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden",
   {
     variants: {
       variant: triggerVariant,
@@ -65,7 +65,7 @@ export const getMenubarSubContentClasses = cva(
 );
 
 export const getMenubarItemClasses = cva(
-  "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  "relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
   {
     variants: {
       variant: itemVariant,
@@ -77,7 +77,7 @@ export const getMenubarItemClasses = cva(
 );
 
 export const getMenubarCheckboxItemClasses = cva(
-  "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  "relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
   {
     variants: {
       variant: itemVariant,
@@ -86,7 +86,7 @@ export const getMenubarCheckboxItemClasses = cva(
 );
 
 export const getMenubarRadioItemClasses = cva(
-  "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  "relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
   {
     variants: {
       variant: itemVariant,

package/src/components/Menu/NavigationMenu/constants.ts

@@ -9,26 +9,26 @@ export const getNavigationMenuListClasses = cva(
 );
 
 export const getNavigationMenuTriggerClasses = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50",
+  "group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus:outline-hidden disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
         primary:
-          "hover:bg-primary hover:text-primary-content focus:bg-primary focus:text-primary-content data-[active]:bg-primary/50 data-[state=open]:bg-primary/50",
+          "hover:bg-primary hover:text-primary-content focus:bg-primary focus:text-primary-content data-active:bg-primary/50 data-[state=open]:bg-primary/50",
         secondary:
-          "hover:bg-secondary hover:text-secondary-content focus:bg-secondary focus:text-secondary-content data-[active]:bg-secondary/50 data-[state=open]:bg-secondary/50",
+          "hover:bg-secondary hover:text-secondary-content focus:bg-secondary focus:text-secondary-content data-active:bg-secondary/50 data-[state=open]:bg-secondary/50",
         accent:
-          "hover:bg-accent hover:text-accent-content focus:bg-accent focus:text-accent-content data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
+          "hover:bg-accent hover:text-accent-content focus:bg-accent focus:text-accent-content data-active:bg-accent/50 data-[state=open]:bg-accent/50",
         neutral:
-          "hover:bg-neutral hover:text-neutral-content focus:bg-neutral focus:text-neutral-content data-[active]:bg-neutral/50 data-[state=open]:bg-neutral/50",
-        base: "hover:bg-base-300 hover:text-base-content focus:bg-base-300 focus:text-base-content data-[active]:bg-base-300/50 data-[state=open]:bg-base-300/50",
-        info: "hover:bg-info hover:text-info-content focus:bg-info focus:text-info-content data-[active]:bg-info/50 data-[state=open]:bg-info/50",
+          "hover:bg-neutral hover:text-neutral-content focus:bg-neutral focus:text-neutral-content data-active:bg-neutral/50 data-[state=open]:bg-neutral/50",
+        base: "hover:bg-base-300 hover:text-base-content focus:bg-base-300 focus:text-base-content data-active:bg-base-300/50 data-[state=open]:bg-base-300/50",
+        info: "hover:bg-info hover:text-info-content focus:bg-info focus:text-info-content data-active:bg-info/50 data-[state=open]:bg-info/50",
         success:
-          "hover:bg-success hover:text-success-content focus:bg-success focus:text-success-content data-[active]:bg-success/50 data-[state=open]:bg-success/50",
+          "hover:bg-success hover:text-success-content focus:bg-success focus:text-success-content data-active:bg-success/50 data-[state=open]:bg-success/50",
         warning:
-          "hover:bg-warning hover:text-warning-content focus:bg-warning focus:text-warning-content data-[active]:bg-warning/50 data-[state=open]:bg-warning/50",
+          "hover:bg-warning hover:text-warning-content focus:bg-warning focus:text-warning-content data-active:bg-warning/50 data-[state=open]:bg-warning/50",
         error:
-          "hover:bg-error hover:text-error-content focus:bg-error focus:text-error-content data-[active]:bg-error/50 data-[state=open]:bg-error/50",
+          "hover:bg-error hover:text-error-content focus:bg-error focus:text-error-content data-active:bg-error/50 data-[state=open]:bg-error/50",
       },
     },
   }
@@ -39,9 +39,9 @@ export const getNavigationMenuContentClasses = cva(
 );
 
 export const getNavigationMenuViewportClasses = cva(
-  "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-base-100 shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]"
+  "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-base-100 shadow-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]"
 );
 
 export const getNavigationMenuIndicatorClasses = cva(
-  "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in"
+  "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in"
 );

package/src/components/Popover/constants.ts

@@ -1,5 +1,5 @@
 import { cva } from "../../libs";
 
 export const getPopoverContentClasses = cva(
-  "z-50 w-72 rounded-md border bg-base-100 p-4 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+  "z-50 w-72 rounded-md border bg-base-100 p-4 shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
 );

package/src/components/Sidebar/SidebarMenu.tsx

@@ -144,7 +144,7 @@ const SidebarMenuSkeleton = forwardRef<HTMLDivElement, SidebarMenuSkeletonProps>
           <Skeleton width={4} height={4} className="rounded-md" data-sidebar="menu-skeleton-icon" />
         )}
         <Skeleton
-          className="h-4 flex-1 max-w-[--skeleton-width]"
+          className="h-4 flex-1 max-w-(--skeleton-width)"
           data-sidebar="menu-skeleton-text"
           style={
             {

package/src/components/Sidebar/constants.ts

@@ -15,7 +15,7 @@ export const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 export const getSidebarClasses = cva([], {
   variants: {
     collapsible: {
-      none: "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+      none: "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
     },
   },
 });
@@ -23,9 +23,9 @@ export const getSidebarClasses = cva([], {
 export const getSidebarMobileClasses = cva([], {
   variants: {
     isMobile: {
-      true: "w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
+      true: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
       false:
-        "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow",
+        "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm",
     },
   },
 });
@@ -33,7 +33,7 @@ export const getSidebarMobileClasses = cva([], {
 export const getSidebarOuterClasses = cva("group peer hidden md:block text-sidebar-foreground");
 
 export const getSidebarInnerClasses = cva(
-  "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
+  "duration-200 fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] ease-linear md:flex",
   {
     variants: {
       side: {
@@ -42,11 +42,11 @@ export const getSidebarInnerClasses = cva(
       },
       variant: {
         floating:
-          "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]",
+          "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]",
         inset:
-          "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]",
+          "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]",
         sidebar:
-          "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
       },
     },
   }
@@ -54,7 +54,7 @@ export const getSidebarInnerClasses = cva(
 
 export const getSidebarGapClasses = cva(
   [
-    "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
+    "duration-200 relative h-svh w-(--sidebar-width) bg-transparent transition-[width] ease-linear",
     "group-data-[collapsible=offcanvas]:w-0",
     "group-data-[side=right]:rotate-180",
   ],
@@ -62,16 +62,16 @@ export const getSidebarGapClasses = cva(
     variants: {
       variant: {
         floating:
-          "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]",
+          "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]",
         inset:
-          "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]",
-        sidebar: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
+          "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]",
+        sidebar: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
       },
     },
     compoundVariants: [
       {
         variant: null,
-        className: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
+        className: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
       },
     ],
   }
@@ -81,16 +81,16 @@ export const getSidebarTriggerClasses = cva("h-7 w-7 p-0");
 
 export const getSidebarRailClasses = cva([
   "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
-  "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+  "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
   "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-  "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+  "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
   "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
   "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
 ]);
 
 export const getSidebarInsetClasses = cva([
   "relative flex min-h-svh flex-1 flex-col bg-background",
-  "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+  "peer-data-[variant=inset]:min-h-[calc(100svh-(--spacing(4)))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm",
 ]);
 
 // TODO
@@ -109,20 +109,20 @@ export const getSidebarContentClasses = cva(
 );
 
 export const getSidebarProviderClasses = cva(
-  "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar"
+  "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar"
 );
 
 export const getSidebarGroupClasses = cva("relative flex w-full min-w-0 flex-col p-2");
 
 export const getSidebarGroupLabelClasses = cva([
-  "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+  "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-hidden ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
   "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
 ]);
 
 export const getSidebarGroupActionClasses = cva([
-  "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+  "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
   // Increases the hit area of the button on mobile.
-  "after:absolute after:-inset-2 after:md:hidden",
+  "after:absolute after:-inset-2 md:after:hidden",
   "group-data-[collapsible=icon]:hidden",
 ]);
 
@@ -133,7 +133,7 @@ export const getSidebarMenuClasses = cva("flex w-full min-w-0 flex-col gap-1");
 export const getSidebarMenuItemClasses = cva("group/menu-item relative");
 
 export const getSidebarMenuButtonClasses = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -144,7 +144,7 @@ export const getSidebarMenuButtonClasses = cva(
       size: {
         default: "h-8 text-sm",
         sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
       },
     },
     defaultVariants: {
@@ -156,9 +156,9 @@ export const getSidebarMenuButtonClasses = cva(
 
 export const getSidebarMenuActionClasses = cva(
   [
-    "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+    "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
     // Increases the hit area of the button on mobile.
-    "after:absolute after:-inset-2 after:md:hidden",
+    "after:absolute after:-inset-2 md:after:hidden",
     "peer-data-[size=sm]/menu-button:top-1",
     "peer-data-[size=default]/menu-button:top-1.5",
     "peer-data-[size=lg]/menu-button:top-2.5",
@@ -191,7 +191,7 @@ export const getSidebarMenuSubClasses = cva([
 
 export const getSidebarMenuSubItemClasses = cva(
   [
-    "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+    "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
     "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
     "group-data-[collapsible=icon]:hidden",
   ],

package/src/components/Sidebar/stories/examples/components/AppMain.tsx

@@ -20,7 +20,7 @@ export const AppMain = ({
             <Breadcrumb.Page>Data Fetching</Breadcrumb.Page>
           </Breadcrumb.List>
         </Breadcrumb>
-        {side === "right" ? <Sidebar.Trigger className="-mr-1 ml-auto !rotate-180" /> : null}
+        {side === "right" ? <Sidebar.Trigger className="-mr-1 ml-auto rotate-180!" /> : null}
       </header>
       <div className="flex flex-1 flex-col gap-4 p-4">
         <div className="grid auto-rows-min gap-4 md:grid-cols-3">

package/src/components/Sidebar/stories/examples/components/VersionSwitcher.tsx

@@ -31,7 +31,7 @@ export const VersionSwitcher = ({
               <ChevronsUpDown className="ml-auto" />
             </SidebarMenu.Button>
           </DropdownMenu.Trigger>
-          <DropdownMenu.Content className="w-[--radix-dropdown-menu-trigger-width]" align="start">
+          <DropdownMenu.Content className="w-(--radix-dropdown-menu-trigger-width)" align="start">
             {versions.map((version) => (
               <DropdownMenu.Item key={version} onSelect={() => setSelectedVersion(version)}>
                 v{version} {version === selectedVersion && <Check className="ml-auto" />}

package/src/components/Sonner/constants.ts

@@ -38,60 +38,60 @@ export const getToastClasses = cva("sonner group", {
 export const getToastButtonClasses = cva("", {
   variants: {
     variant: {
-      base: "group-[.sonner]:!bg-base-300 group-[.sonner]:!text-base-content",
-      accent: "group-[.sonner]:!bg-accent group-[.sonner]:!text-accent-content",
-      error: "group-[.sonner]:!bg-error group-[.sonner]:!text-error-content",
-      info: "group-[.sonner]:!bg-info group-[.sonner]:!text-info-content",
-      neutral: "group-[.sonner]:!bg-neutral group-[.sonner]:!text-neutral-content",
-      primary: "group-[.sonner]:!bg-primary group-[.sonner]:!text-primary-content",
-      secondary: "group-[.sonner]:!bg-secondary group-[.sonner]:!text-secondary-content",
-      success: "group-[.sonner]:!bg-success group-[.sonner]:!text-success-content",
-      warning: "group-[.sonner]:!bg-warning group-[.sonner]:!text-warning-content",
+      base: "group-[.sonner]:bg-base-300! group-[.sonner]:text-base-content!",
+      accent: "group-[.sonner]:bg-accent! group-[.sonner]:text-accent-content!",
+      error: "group-[.sonner]:bg-error! group-[.sonner]:text-error-content!",
+      info: "group-[.sonner]:bg-info! group-[.sonner]:text-info-content!",
+      neutral: "group-[.sonner]:bg-neutral! group-[.sonner]:text-neutral-content!",
+      primary: "group-[.sonner]:bg-primary! group-[.sonner]:text-primary-content!",
+      secondary: "group-[.sonner]:bg-secondary! group-[.sonner]:text-secondary-content!",
+      success: "group-[.sonner]:bg-success! group-[.sonner]:text-success-content!",
+      warning: "group-[.sonner]:bg-warning! group-[.sonner]:text-warning-content!",
     },
     outline: {
-      true: "group-[.sonner]:!border group-[.sonner]:!border-solid group-[.sonner]:!bg-transparent",
+      true: "group-[.sonner]:border! group-[.sonner]:border-solid! group-[.sonner]:bg-transparent!",
     },
   },
   compoundVariants: [
     {
       outline: true,
       variant: "accent",
-      className: "group-[.sonner]:!border-accent group-[.sonner]:!text-accent",
+      className: "group-[.sonner]:border-accent! group-[.sonner]:text-accent!",
     },
     {
       outline: true,
       variant: "error",
-      className: "group-[.sonner]:!border-error group-[.sonner]:!text-error",
+      className: "group-[.sonner]:border-error! group-[.sonner]:text-error!",
     },
     {
       outline: true,
       variant: "info",
-      className: "group-[.sonner]:!text-info",
+      className: "group-[.sonner]:text-info!",
     },
     {
       outline: true,
       variant: "neutral",
-      className: "group-[.sonner]:!border-neutral group-[.sonner]:!text-neutral",
+      className: "group-[.sonner]:border-neutral! group-[.sonner]:text-neutral!",
     },
     {
       outline: true,
       variant: "primary",
-      className: "group-[.sonner]:!border-primary group-[.sonner]:!text-primary",
+      className: "group-[.sonner]:border-primary! group-[.sonner]:text-primary!",
     },
     {
       outline: true,
       variant: "secondary",
-      className: "group-[.sonner]:!border-secondary group-[.sonner]:!text-secondary",
+      className: "group-[.sonner]:border-secondary! group-[.sonner]:text-secondary!",
     },
     {
       outline: true,
       variant: "success",
-      className: "group-[.sonner]:!border-success group-[.sonner]:!text-success",
+      className: "group-[.sonner]:border-success! group-[.sonner]:text-success!",
     },
     {
       outline: true,
       variant: "warning",
-      className: "group-[.sonner]:!border-warning group-[.sonner]:!text-warning",
+      className: "group-[.sonner]:border-warning! group-[.sonner]:text-warning!",
     },
   ],
 });

package/src/components/Tabs/constants.ts

@@ -5,9 +5,9 @@ export const getTabsListClasses = cva(
 );
 
 export const getTabsTriggerClasses = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-base-100 data-[state=active]:text-foreground data-[state=active]:shadow"
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-base-100 data-[state=active]:text-foreground data-[state=active]:shadow-sm"
 );
 
 export const getTabsContentClasses = cva(
-  "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+  "mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
 );

package/src/components/Timeline/constants.ts

@@ -34,7 +34,7 @@ export const getTimelineDotClasses = cva(
   {
     variants: {
       status: {
-        default: "[&>*]:hidden",
+        default: "*:hidden",
         active: "[&>*:not(.lucide-circle)]:hidden",
         success: "[&>*:not(.lucide-check)]:hidden",
         failed: "[&>*:not(.lucide-x)]:hidden",

package/src/components/Toggle/Toggle.tsx

@@ -13,7 +13,7 @@ const Toggle = React.forwardRef<React.ElementRef<typeof TogglePrimitive.Root>, T
       ref={ref}
       className={cn(
         getButtonClasses({ size, wide, outline }),
-        getToggleClasses({ variant }),
+        getToggleClasses({ variant, outline }),
         className
       )}
       {...props}

package/src/components/Toggle/constants.ts

@@ -16,6 +16,56 @@ export const getToggleClasses = cva(
         success: "data-[state=on]:btn-success",
         warning: "data-[state=on]:btn-warning",
       },
+      outline: {
+        true: "data-[state=on]:btn-outline",
+      },
     },
+    compoundVariants: [
+      {
+        outline: true,
+        variant: "accent",
+        className: "data-[state=on]:border-accent",
+      },
+      {
+        outline: true,
+        variant: "default",
+        className: "data-[state=on]:border-default",
+      },
+      {
+        outline: true,
+        variant: "error",
+        className: "data-[state=on]:border-error",
+      },
+      {
+        outline: true,
+        variant: "info",
+        className: "data-[state=on]:border-info",
+      },
+      {
+        outline: true,
+        variant: "neutral",
+        className: "data-[state=on]:border-neutral",
+      },
+      {
+        outline: true,
+        variant: "primary",
+        className: "data-[state=on]:border-primary",
+      },
+      {
+        outline: true,
+        variant: "secondary",
+        className: "data-[state=on]:border-secondary",
+      },
+      {
+        outline: true,
+        variant: "success",
+        className: "data-[state=on]:border-success",
+      },
+      {
+        outline: true,
+        variant: "warning",
+        className: "data-[state=on]:border-warning",
+      },
+    ],
   }
 );

package/src/components/Widget/Widgets.example.tsx

@@ -89,7 +89,7 @@ const Widgets = () => {
             key={widget.id}
             id={widget.id}
             actions={({ draggable, deleteWidget }) => (
-              <div className="absolute top-1 right-1 opacity-0 flex gap-1 [&>*]:cursor-pointer [&_svg]:size-4 pointer-events-none transition-opacity duration-300 hover:opacity-100 group-hover:pointer-events-auto">
+              <div className="absolute top-1 right-1 opacity-0 flex gap-1 *:cursor-pointer [&_svg]:size-4 pointer-events-none transition-opacity duration-300 hover:opacity-100 group-hover:pointer-events-auto">
                 <Draggable.Action
                   ref={draggable?.ref}
                   {...draggable?.listeners}
@@ -107,7 +107,7 @@ const Widgets = () => {
                 </Draggable.Action>
               </div>
             )}
-            className="group flex items-center justify-center w-32 h-32 bg-base-100 border border-primary-content/30 rounded-md text-sm p-2 cursor-default data-[draggable]:shadow data-[draggable-active]:z-20"
+            className="group flex items-center justify-center w-32 h-32 bg-base-100 border border-primary-content/30 rounded-md text-sm p-2 cursor-default data-draggable:shadow-sm data-draggable-active:z-20"
           >
             {widget.id}
           </Widget>

package/dist/types/components/Form/components/FormControl/FormControl.d.ts

@@ -1,2 +0,0 @@
-import { As, FormControlProps } from './types';
-export declare const FormControl: <T extends As>({ as, children, className, ...props }: FormControlProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/components/FormControl/constants.d.ts

@@ -1 +0,0 @@
-export declare const getFormControlClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/types/components/Form/components/FormControl/index.d.ts

@@ -1 +0,0 @@
-export { FormControl } from './FormControl';

package/dist/types/components/Form/components/FormControl/types.d.ts

@@ -1,8 +0,0 @@
-import { VariantProps } from '../../../../libs';
-import { getFormControlClasses } from './constants';
-export type As = "div" | "span" | "label";
-type AllowedElements = Pick<React.JSX.IntrinsicElements, As>;
-export type FormControlProps<T extends As> = (T extends "label" ? React.LabelHTMLAttributes<HTMLLabelElement> : React.HTMLAttributes<HTMLElement & AllowedElements[T]>) & VariantProps<typeof getFormControlClasses> & {
-    as?: T;
-};
-export {};

package/plugin.d.ts

@@ -1,4 +0,0 @@
-import { type Config } from "tailwindcss";
-
-declare const plugin: { handler: () => void; config?: Config };
-export = plugin;

package/plugin.js

@@ -1,5 +0,0 @@
-module.exports = [
-  require("@tailwindcss/typography"),
-  require("daisyui"),
-  require("tailwindcss-animate"),
-];

package/src/components/Form/components/FormControl/FormControl.tsx

@@ -1,21 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import type { As, FormControlProps } from "./types";
-import { cn } from "../../../../utilities";
-import { Label } from "../Label";
-import { getFormControlClasses } from "./constants";
-
-export const FormControl = <T extends As>({
-  as,
-  children,
-  className,
-  ...props
-}: FormControlProps<T>) => {
-  const SlotChild = !as || as === "label" ? Label : as;
-
-  return (
-    <Slot className={cn(getFormControlClasses(), className)} {...props}>
-      {/* slot merges it's prop into it's immediate child */}
-      <SlotChild>{children}</SlotChild>
-    </Slot>
-  );
-};

package/src/components/Form/components/FormControl/constants.ts

@@ -1,3 +0,0 @@
-import { cva } from "../../../../libs";
-
-export const getFormControlClasses = cva("form-control w-full");

package/src/components/Form/components/FormControl/index.ts

@@ -1 +0,0 @@
-export { FormControl } from "./FormControl";

package/src/components/Form/components/FormControl/types.ts

@@ -1,13 +0,0 @@
-import { type VariantProps } from "../../../../libs";
-import { getFormControlClasses } from "./constants";
-
-export type As = "div" | "span" | "label";
-
-type AllowedElements = Pick<React.JSX.IntrinsicElements, As>;
-
-export type FormControlProps<T extends As> = (T extends "label"
-  ? React.LabelHTMLAttributes<HTMLLabelElement>
-  : React.HTMLAttributes<HTMLElement & AllowedElements[T]>) &
-  VariantProps<typeof getFormControlClasses> & {
-    as?: T;
-  };