@codefast/ui 0.0.13 → 0.0.15

package/dist/textarea.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/textarea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"./utils\";\n\n/* -----------------------------------------------------------------------------\n * Component: Textarea\n * -------------------------------------------------------------------------- */\n\ntype TextareaElement = HTMLTextAreaElement;\ntype TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nconst Textarea = React.forwardRef<TextareaElement, TextareaProps>(({ className, ...props }, ref) => {\n  return (\n    <textarea\n      className={cn(\n        \"border-input placeholder:text-muted-foreground flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm disabled:cursor-not-allowed disabled:opacity-50\",\n        \"focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2\",\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  );\n});\n\nTextarea.displayName = \"Textarea\";\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport { Textarea, type TextareaProps };\n"],"mappings":";;;;;AAAA,YAAY,WAAW;AAYnB;AAFJ,IAAM,WAAiB,iBAA2C,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,SAAS,cAAc;","names":[]}
+{"version":3,"sources":["../src/textarea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"./utils\";\n\n/* -----------------------------------------------------------------------------\n * Component: Textarea\n * -------------------------------------------------------------------------- */\n\ntype TextareaElement = HTMLTextAreaElement;\ntype TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nconst Textarea = React.forwardRef<TextareaElement, TextareaProps>(({ className, ...props }, ref) => {\n  return (\n    <textarea\n      className={cn(\n        \"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  );\n});\n\nTextarea.displayName = \"Textarea\";\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport { Textarea, type TextareaProps };\n"],"mappings":";;;;;AAAA,YAAY,WAAW;AAYnB;AAFJ,IAAM,WAAiB,iBAA2C,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,SAAS,cAAc;","names":[]}

package/dist/toggle-group.js

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";
 
 
-var _chunk7S4DOWLBjs = require('./chunk-7S4DOWLB.js');
+var _chunkAOIW2XNKjs = require('./chunk-AOIW2XNK.js');
 
 
 var _chunkG3NP7M2Njs = require('./chunk-G3NP7M2N.js');
@@ -41,7 +41,7 @@ var ToggleGroupItem = React.forwardRef(
       ToggleGroupPrimitive.Item,
       {
         ref,
-        className: _chunk7S4DOWLBjs.toggleVariants.call(void 0, { ...context, className }),
+        className: _chunkAOIW2XNKjs.toggleVariants.call(void 0, { ...context, className }),
         ...toggleGroupScope,
         ...props,
         children

package/dist/toggle-group.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   toggleVariants
-} from "./chunk-6J6VPUBP.mjs";
+} from "./chunk-AUQEMOIM.mjs";
 import {
   cn
 } from "./chunk-UG3URV2Z.mjs";

package/dist/toggle.js

@@ -2,10 +2,10 @@
 
 
 
-var _chunk7S4DOWLBjs = require('./chunk-7S4DOWLB.js');
+var _chunkAOIW2XNKjs = require('./chunk-AOIW2XNK.js');
 require('./chunk-G3NP7M2N.js');
 
 
 
-exports.Toggle = _chunk7S4DOWLBjs.Toggle; exports.toggleVariants = _chunk7S4DOWLBjs.toggleVariants;
+exports.Toggle = _chunkAOIW2XNKjs.Toggle; exports.toggleVariants = _chunkAOIW2XNKjs.toggleVariants;
 //# sourceMappingURL=toggle.js.map

package/dist/toggle.mjs

@@ -2,7 +2,7 @@
 import {
   Toggle,
   toggleVariants
-} from "./chunk-6J6VPUBP.mjs";
+} from "./chunk-AUQEMOIM.mjs";
 import "./chunk-UG3URV2Z.mjs";
 export {
   Toggle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codefast/ui",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "license": "MIT",
   "sideEffects": [
     "**/*.css"
@@ -386,11 +386,10 @@
     "postcss": "^8.4.38",
     "react": "^18.2.0",
     "tailwindcss": "^3.4.3",
-    "tailwindcss-animate": "^1.0.7",
     "tsup": "^8.0.2",
     "typescript": "^5.4.4",
-    "@codefast/eslint-config": "0.0.7",
-    "@codefast/typescript-config": "0.0.1"
+    "@codefast/eslint-config": "0.0.8",
+    "@codefast/typescript-config": "0.0.2"
   },
   "peerDependencies": {
     "@types/react": "*",

package/src/accordion.tsx

@@ -38,8 +38,7 @@ const AccordionTrigger = React.forwardRef<AccordionTriggerElement, AccordionTrig
       <AccordionPrimitive.Trigger
         ref={ref}
         className={cn(
-          "group flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all",
-          "hover:underline",
+          "group flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline",
           className,
         )}
         {...props}
@@ -47,8 +46,7 @@ const AccordionTrigger = React.forwardRef<AccordionTriggerElement, AccordionTrig
         {children}
         <ChevronDownIcon
           className={cn(
-            "text-muted-foreground size-4 shrink-0 transition-transform duration-200",
-            "group-data-[state=open]:rotate-180",
+            "text-muted-foreground size-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180",
           )}
         />
       </AccordionPrimitive.Trigger>
@@ -69,11 +67,7 @@ const AccordionContent = React.forwardRef<AccordionContentElement, AccordionCont
   ({ className, children, ...props }, ref) => (
     <AccordionPrimitive.Content
       ref={ref}
-      className={cn(
-        "overflow-hidden text-sm",
-        "data-[state=open]:animate-accordion-down",
-        "data-[state=closed]:animate-accordion-up",
-      )}
+      className="data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up overflow-hidden text-sm"
       {...props}
     >
       <div className={cn("pb-4 pt-0", className)}>{children}</div>

package/src/alert-dialog.tsx

@@ -29,21 +29,11 @@ type AlertDialogContentProps = React.ComponentPropsWithoutRef<typeof AlertDialog
 const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDialogContentProps>(
   ({ className, ...props }, ref) => (
     <AlertDialogPrimitive.Portal>
-      <AlertDialogPrimitive.Overlay
-        className={cn(
-          "fixed inset-0 z-50 bg-black/80",
-          "data-[state=open]:animate-in data-[state=open]:fade-in-0",
-          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
-        )}
-      />
+      <AlertDialogPrimitive.Overlay className="data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/80" />
       <AlertDialogPrimitive.Content
         ref={ref}
         className={cn(
-          "bg-background fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200",
-          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/3",
-          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/3",
-          "focus:outline-none",
-          "sm:rounded-lg",
+          "bg-background data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/3 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/3 animation-duration-200 fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 focus:outline-none sm:rounded-lg",
           className,
         )}
         {...props}

package/src/alert.tsx

@@ -7,7 +7,7 @@ import { cn, cva } from "./utils";
  * -------------------------------------------------------------------------- */
 
 const alertVariants = cva({
-  base: "relative w-full rounded-lg border p-4 text-sm [&>svg+div]:-translate-y-[3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
+  base: "[&>svg+div]:-translate-y-0.75 relative w-full rounded-lg border p-4 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
   variants: {
     variant: {
       default: "bg-background text-foreground [&>svg]:text-foreground",

package/src/breadcrumb.tsx

@@ -30,8 +30,7 @@ const BreadcrumbList = React.forwardRef<BreadcrumbListElement, BreadcrumbListPro
   <ol
     ref={ref}
     className={cn(
-      "text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm",
-      "sm:gap-2.5",
+      "text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
       className,
     )}
     {...props}

package/src/button.tsx

@@ -11,11 +11,7 @@ import { cva } from "./utils";
  * -------------------------------------------------------------------------- */
 
 const buttonVariants = cva({
-  base: [
-    "inline-flex select-none items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors",
-    "disabled:pointer-events-none disabled:opacity-50",
-    "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-  ],
+  base: "focus-visible:ring-ring inline-flex select-none items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   variants: {
     variant: {
       default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow",

package/src/checkbox-cards.tsx

@@ -33,8 +33,7 @@ const CheckboxCardsItem = React.forwardRef<CheckboxCardsItemElement, CheckboxCar
     return (
       <label
         className={cn(
-          "border-compound/70 flex items-center justify-center gap-4 rounded-md border p-4",
-          "hover:border-compound",
+          "border-compound/70 hover:border-compound flex items-center justify-center gap-4 rounded-md border p-4",
           className,
         )}
       >
@@ -42,10 +41,7 @@ const CheckboxCardsItem = React.forwardRef<CheckboxCardsItemElement, CheckboxCar
         <CheckboxGroupPrimitive.Item
           ref={ref}
           className={cn(
-            "border-compound/70 peer size-4 shrink-0 cursor-default rounded-sm border shadow",
-            "aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground",
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+            "border-compound/70 aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground focus-visible:ring-ring peer size-4 shrink-0 cursor-default rounded-sm border shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
             checkboxClassName,
           )}
           {...props}

package/src/checkbox-group.tsx

@@ -31,11 +31,7 @@ const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGro
       <CheckboxGroupPrimitive.Item
         ref={ref}
         className={cn(
-          "border-compound/70 peer size-4 shrink-0 rounded-sm border shadow",
-          "hover:border-compound",
-          "aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+          "border-compound/70 hover:border-compound aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground focus-visible:ring-ring peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         {...props}

package/src/checkbox.tsx

@@ -16,11 +16,7 @@ const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>(({ className,
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "border-compound/70 peer size-4 shrink-0 rounded-sm border shadow",
-      "hover:border-compound",
-      "aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground",
-      "disabled:cursor-not-allowed disabled:opacity-50",
-      "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+      "border-compound/70 hover:border-compound aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground focus-visible:ring-ring peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}

package/src/data-table.tsx

@@ -91,7 +91,7 @@ function DataTablePagination<TData>({
         <div className="flex items-center space-x-2">
           <p className="text-sm font-medium">Rows per page</p>
           <Select
-            value={`${table.getState().pagination.pageSize}`}
+            value={String(table.getState().pagination.pageSize)}
             onValueChange={(value) => {
               table.setPageSize(Number(value));
             }}
@@ -246,5 +246,3 @@ export {
   type DataTablePaginationProps,
   type DataTableColumnHeaderProps,
 };
-
-export * from "@tanstack/react-table";

package/src/dialog.tsx

@@ -36,29 +36,17 @@ type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.
 const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>(
   ({ className, children, ...props }, ref) => (
     <DialogPrimitive.Portal>
-      <DialogPrimitive.Overlay
-        className={cn(
-          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/80",
-        )}
-      />
+      <DialogPrimitive.Overlay className="data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/80" />
       <DialogPrimitive.Content
         ref={ref}
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/3 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/3 fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 focus:outline-none sm:rounded-lg",
+          "bg-background data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/3 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/3 animation-duration-200 fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 focus:outline-none sm:rounded-lg",
           className,
         )}
         {...props}
       >
         {children}
-        <DialogPrimitive.Close
-          className={cn(
-            "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity",
-            "hover:opacity-100",
-            "disabled:pointer-events-none",
-            "data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
-            "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-          )}
-        >
+        <DialogPrimitive.Close className="data-[state=open]:bg-accent data-[state=open]:text-muted-foreground focus-visible:ring-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none">
           <Cross2Icon className="size-4" />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>

package/src/input-otp.tsx

@@ -71,7 +71,7 @@ const InputOTPSlot = React.forwardRef<InputOTPSlotElement, InputOTPSlotProps>(({
       {slot?.char}
       {slot?.hasFakeCaret ? (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+          <div className="animate-caret-blink bg-foreground animation-duration-1000 h-4 w-px" />
         </div>
       ) : null}
     </div>

package/src/input.tsx

@@ -7,13 +7,7 @@ import { cva } from "./utils";
  * -------------------------------------------------------------------------- */
 
 const inputVariants = cva({
-  base: [
-    "border-input flex w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm transition-colors",
-    "file:border-0 file:bg-transparent file:text-sm file:font-medium",
-    "disabled:cursor-not-allowed disabled:opacity-50",
-    "placeholder:text-muted-foreground",
-    "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-  ],
+  base: "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
   variants: {
     inputSize: {
       default: "h-10",

package/src/navigation-menu.tsx

@@ -78,9 +78,9 @@ const NavigationMenuTrigger = React.forwardRef<NavigationMenuTriggerElement, Nav
       })}
       {...props}
     >
-      {children}{" "}
+      {children}
       <ChevronDownIcon
-        className={cn("relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180")}
+        className={cn("relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180")}
         aria-hidden="true"
       />
     </NavigationMenuPrimitive.Trigger>
@@ -131,7 +131,7 @@ const NavigationMenuViewport = React.forwardRef<NavigationMenuViewportElement, N
     <div className={cn("perspective-[2000px] absolute left-0 top-full flex justify-center")}>
       <NavigationMenuPrimitive.Viewport
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:zoom-in-90 data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-90 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-md border shadow transition-[width,height] duration-200 md:w-[var(--radix-navigation-menu-viewport-width)]",
           className,
         )}
         ref={ref}

package/src/radio-cards.tsx

@@ -29,11 +29,7 @@ const RadioCardsItem = React.forwardRef<RadioCardsItemElement, RadioCardsItemPro
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "border-compound/70 text-compound-foreground group peer flex cursor-default items-center justify-center rounded-md border p-4",
-        "hover:border-compound",
-        "aria-checked:border-primary",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        "focus-visible:bg-primary/10 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        "border-compound/70 text-compound-foreground hover:border-compound aria-checked:border-primary focus-visible:bg-primary/10 focus-visible:ring-ring group peer flex cursor-default items-center justify-center rounded-md border p-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}

package/src/radio-group.tsx

@@ -29,17 +29,12 @@ const RadioGroupItem = React.forwardRef<RadioGroupItemElement, RadioGroupItemPro
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "border-compound/70 hover:border-compound text-compound-foreground aria-checked:border-primary group peer aspect-square size-4 rounded-full border disabled:cursor-not-allowed disabled:opacity-50",
-        "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        "border-compound/70 hover:border-compound text-compound-foreground aria-checked:border-primary focus-visible:ring-ring group peer aspect-square size-4 rounded-full border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
     >
-      <RadioGroupPrimitive.Indicator
-        className={cn(
-          "after:bg-primary relative flex h-full w-full items-center justify-center after:block after:size-2.5 after:rounded-full",
-        )}
-      />
+      <RadioGroupPrimitive.Indicator className="after:bg-primary relative flex h-full w-full items-center justify-center after:block after:size-2.5 after:rounded-full" />
     </RadioGroupPrimitive.Item>
   );
 });

package/src/radio.tsx

@@ -21,13 +21,7 @@ const Radio = React.forwardRef<RadioElement, RadioProps>(({ className, onValueCh
       type="radio"
       onChange={composeEventHandlers(onChange, (event) => onValueChange?.(event.currentTarget.value))}
       className={cn(
-        "peer relative flex appearance-none items-center justify-center rounded-full",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        "before:border-compound/70 before:size-4 before:rounded-full before:border",
-        "hover:before:border-compound",
-        "checked:before:border-primary",
-        "checked:after:bg-primary checked:after:absolute checked:after:size-2.5 checked:after:rounded-full",
-        "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        "before:border-compound/70 hover:before:border-compound checked:before:border-primary checked:after:bg-primary focus-visible:ring-ring peer relative flex appearance-none items-center justify-center rounded-full before:size-4 before:rounded-full before:border checked:after:absolute checked:after:size-2.5 checked:after:rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}

package/src/resizable.tsx

@@ -41,8 +41,7 @@ function ResizableHandle({
   return (
     <ResizablePrimitive.PanelResizeHandle
       className={cn(
-        "bg-border relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-        "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
         className,
       )}
       {...props}

package/src/select.tsx

@@ -38,8 +38,7 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
     <SelectPrimitive.Trigger
       ref={ref}
       className={cn(
-        "border-input placeholder:text-muted-foreground flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 text-sm shadow-sm disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-        "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
         className,
       )}
       {...props}

package/src/sheet.tsx

@@ -11,7 +11,7 @@ import { cn, cva } from "./utils";
  * -------------------------------------------------------------------------- */
 
 const sheetVariants = cva({
-  base: "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  base: "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out animation-ease-in-out data-[state=closed]:animation-duration-300 data-[state=open]:animation-duration-500 fixed z-50 gap-4 p-6 shadow-lg",
   variants: {
     side: {
       top: "data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top inset-x-0 top-0 border-b",
@@ -60,19 +60,10 @@ type SheetContentProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Co
 const SheetContent = React.forwardRef<SheetContentElement, SheetContentProps>(
   ({ side = "right", className, children, ...props }, ref) => (
     <SheetPrimitive.Portal>
-      <SheetPrimitive.Overlay
-        className={cn(
-          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/80",
-        )}
-      />
+      <SheetPrimitive.Overlay className="data-[state=open]:animate-in animation-duration-200 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/80" />
       <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
         {children}
-        <SheetPrimitive.Close
-          className={cn(
-            "data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none",
-            "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-          )}
-        >
+        <SheetPrimitive.Close className="data-[state=open]:bg-secondary focus-visible:ring-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none">
           <Cross2Icon className="size-4" />
           <span className="sr-only">Close</span>
         </SheetPrimitive.Close>

package/src/slider.tsx

@@ -20,12 +20,15 @@ const Slider = React.forwardRef<SliderElement, SliderProps>(({ className, ...pro
     <SliderPrimitive.Track className="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full">
       <SliderPrimitive.Range className="bg-primary absolute h-full" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb
-      className={cn(
-        "border-primary/50 bg-background block size-4 rounded-full border shadow transition-colors disabled:pointer-events-none disabled:opacity-50",
-        "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-      )}
-    />
+
+    {(props.value ?? props.defaultValue ?? []).map((value, index) => (
+      <SliderPrimitive.Thumb
+        // eslint-disable-next-line react/no-array-index-key -- index is stable
+        key={index}
+        className="border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+        {...(props.tabIndex !== undefined ? { tabIndex: props.tabIndex } : undefined)}
+      />
+    ))}
   </SliderPrimitive.Root>
 ));
 

package/src/spinner.tsx

@@ -29,10 +29,7 @@ const Spinner = React.forwardRef<SpinnerElement, SpinnerProps>(
         {Array.from({ length: spinnerCount }, (_, i) => (
           <span
             key={i}
-            className={cn(
-              "absolute h-full rotate-[var(--spinner-rotate)]",
-              "before:fade-out-25 before:animate-out before:repeat-infinite before:block before:h-1/3 before:w-full before:rounded-full before:bg-current before:[animation-delay:var(--spinner-delay)] before:[animation-duration:var(--spinner-duration)]",
-            )}
+            className="before:fade-out-25 before:animate-out before:animation-repeat-infinite before:animation-delay-[var(--spinner-delay)] before:animation-duration-[var(--spinner-duration)] absolute h-full rotate-[var(--spinner-rotate)] before:block before:h-1/3 before:w-full before:rounded-full before:bg-current"
             style={
               {
                 width: `${(100 / spinnerCount).toString()}%`,

package/src/switch.tsx

@@ -14,8 +14,7 @@ type SwitchProps = React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>;
 const Switch = React.forwardRef<SwitchElement, SwitchProps>(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent shadow-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50",
-      "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+      "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:ring-ring peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}

package/src/tabs.tsx

@@ -42,8 +42,7 @@ const TabsTrigger = React.forwardRef<TabsTriggerElement, TabsTriggerProps>(({ cl
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
-      "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+      "data-[state=active]:bg-background data-[state=active]:text-foreground focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
       className,
     )}
     {...props}
@@ -63,8 +62,7 @@ const TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(({ cl
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2",
-      "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+      "focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
       className,
     )}
     {...props}

package/src/textarea.tsx

@@ -12,8 +12,7 @@ const Textarea = React.forwardRef<TextareaElement, TextareaProps>(({ className,
   return (
     <textarea
       className={cn(
-        "border-input placeholder:text-muted-foreground flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm disabled:cursor-not-allowed disabled:opacity-50",
-        "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       ref={ref}

package/src/toggle.tsx

@@ -10,13 +10,7 @@ import { cva } from "./utils";
  * -------------------------------------------------------------------------- */
 
 const toggleVariants = cva({
-  base: [
-    "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors",
-    "hover:bg-muted hover:text-muted-foreground",
-    "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-    "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
-    "disabled:pointer-events-none disabled:opacity-50",
-  ],
+  base: "hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   variants: {
     variant: {
       default: "bg-transparent",

package/tailwind.config.ts

@@ -1,7 +1,7 @@
 import type { Config } from "tailwindcss";
 import { fontFamily } from "tailwindcss/defaultTheme";
-import tailwindcssAnimate from "tailwindcss-animate";
 import plugin from "tailwindcss/plugin";
+import tailwindcssAnimate from "./animate.plugin";
 
 const config: Config = {
   content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
@@ -109,6 +109,12 @@ const config: Config = {
           },
         },
       },
+      spacing: {
+        0.75: "0.1875rem", // 3px
+      },
+      transitionDuration: {
+        250: "250ms",
+      },
     },
   },
 };

package/dist/chunk-6J6VPUBP.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport { type VariantProps } from \"cva\";\nimport { cva } from \"./utils\";\n\n/* -----------------------------------------------------------------------------\n * Variant: Toggle\n * -------------------------------------------------------------------------- */\n\nconst toggleVariants = cva({\n  base: [\n    \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors\",\n    \"hover:bg-muted hover:text-muted-foreground\",\n    \"focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2\",\n    \"data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n  ],\n  variants: {\n    variant: {\n      default: \"bg-transparent\",\n      outline: \"border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-sm\",\n    },\n    size: {\n      default: \"h-10 px-3\",\n      sm: \"h-9 px-2.5\",\n      lg: \"h-11 px-5\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n});\n\ntype ToggleVariantsProps = VariantProps<typeof toggleVariants>;\n\n/* -----------------------------------------------------------------------------\n * Component: Toggle\n * -------------------------------------------------------------------------- */\n\ntype ToggleElement = React.ElementRef<typeof TogglePrimitive.Root>;\ntype ToggleProps = React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & ToggleVariantsProps;\n\nconst Toggle = React.forwardRef<ToggleElement, ToggleProps>(({ className, variant, size, ...props }, ref) => (\n  <TogglePrimitive.Root ref={ref} className={toggleVariants({ variant, size, className })} {...props} />\n));\n\nToggle.displayName = TogglePrimitive.Root.displayName;\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\nexport { Toggle, toggleVariants, type ToggleProps, type ToggleVariantsProps };\n"],"mappings":";;;;;AAEA,YAAY,WAAW;AACvB,YAAY,qBAAqB;AA2C/B;AAnCF,IAAM,iBAAiB,IAAI;AAAA,EACzB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AACF,CAAC;AAWD,IAAM,SAAe,iBAAuC,CAAC,EAAE,WAAW,SAAS,MAAM,GAAG,MAAM,GAAG,QACnG,oBAAiB,sBAAhB,EAAqB,KAAU,WAAW,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,GAAI,GAAG,OAAO,CACrG;AAED,OAAO,cAA8B,qBAAK;","names":[]}

package/dist/chunk-7S4DOWLB.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/toggle.tsx"],"names":[],"mappings":";;;;;AAEA,YAAY,WAAW;AACvB,YAAY,qBAAqB;AA2C/B;AAnCF,IAAM,iBAAiB,IAAI;AAAA,EACzB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AACF,CAAC;AAWD,IAAM,SAAe,iBAAuC,CAAC,EAAE,WAAW,SAAS,MAAM,GAAG,MAAM,GAAG,QACnG,oBAAiB,sBAAhB,EAAqB,KAAU,WAAW,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,GAAI,GAAG,OAAO,CACrG;AAED,OAAO,cAA8B,qBAAK","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport { type VariantProps } from \"cva\";\nimport { cva } from \"./utils\";\n\n/* -----------------------------------------------------------------------------\n * Variant: Toggle\n * -------------------------------------------------------------------------- */\n\nconst toggleVariants = cva({\n  base: [\n    \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors\",\n    \"hover:bg-muted hover:text-muted-foreground\",\n    \"focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2\",\n    \"data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n  ],\n  variants: {\n    variant: {\n      default: \"bg-transparent\",\n      outline: \"border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-sm\",\n    },\n    size: {\n      default: \"h-10 px-3\",\n      sm: \"h-9 px-2.5\",\n      lg: \"h-11 px-5\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n});\n\ntype ToggleVariantsProps = VariantProps<typeof toggleVariants>;\n\n/* -----------------------------------------------------------------------------\n * Component: Toggle\n * -------------------------------------------------------------------------- */\n\ntype ToggleElement = React.ElementRef<typeof TogglePrimitive.Root>;\ntype ToggleProps = React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & ToggleVariantsProps;\n\nconst Toggle = React.forwardRef<ToggleElement, ToggleProps>(({ className, variant, size, ...props }, ref) => (\n  <TogglePrimitive.Root ref={ref} className={toggleVariants({ variant, size, className })} {...props} />\n));\n\nToggle.displayName = TogglePrimitive.Root.displayName;\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\nexport { Toggle, toggleVariants, type ToggleProps, type ToggleVariantsProps };\n"]}

package/dist/chunk-BWCO2ZQQ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/button.tsx"],"names":[],"mappings":";;;;;;;;AAAA,YAAY,WAAW;AACvB,SAAS,YAAY;AAErB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAuErB,SACE,KADF;AA/DV,IAAM,iBAAiB,IAAI;AAAA,EACzB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,MACb,OAAO;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,IACb;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,IACb;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AACF,CAAC;AAcD,IAAM,SAAe;AAAA,EACnB,CAAC,EAAE,UAAU,WAAW,SAAS,MAAM,UAAU,OAAO,UAAU,OAAO,GAAG,MAAM,GAAG,QAAQ;AAC3F,UAAM,YAAY,UAAU,OAAO;AACnC,UAAM,mBAAmB,UAAU,SAAS;AAC5C,UAAM,WAAW,WAAW,MAAM;AAElC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAM,UAAU,SAAY;AAAA,QAC5B,WAAW,eAAe,EAAE,SAAS,MAAM,SAAS,UAAU,CAAC;AAAA,QAC9D,GAAG;AAAA,QACJ;AAAA,QAEC,oBACC,qBAAC,oBACC;AAAA,8BAAC,UAAK,eAAW,MAAC,WAAU,sBACzB,UACH;AAAA,UACA,oBAAC,kBAAgB,UAAS;AAAA,UAC1B,oBAAC,UAAK,WAAU,qDACd,8BAAC,WAAQ,GACX;AAAA,WACF,IAEA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc","sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { type VariantProps } from \"cva\";\nimport { Fragment } from \"react\";\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\nimport { Spinner } from \"./spinner\";\nimport { cva } from \"./utils\";\n\n/* -----------------------------------------------------------------------------\n * Variant: Button\n * -------------------------------------------------------------------------- */\n\nconst buttonVariants = cva({\n  base: [\n    \"inline-flex select-none items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n    \"focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2\",\n  ],\n  variants: {\n    variant: {\n      default: \"bg-primary text-primary-foreground hover:bg-primary/90 shadow\",\n      destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm\",\n      ghost: \"hover:bg-accent hover:text-accent-foreground\",\n      link: \"text-primary underline-offset-4 hover:underline\",\n      outline: \"border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm\",\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm\",\n    },\n    size: {\n      default: \"h-10 px-4\",\n      xs: \"h-8 px-2\",\n      sm: \"h-9 px-3\",\n      lg: \"h-11 px-8\",\n      icon: \"size-10\",\n      \"icon-xs\": \"size-8\",\n      \"icon-sm\": \"size-9\",\n      \"icon-lg\": \"size-11\",\n    },\n    loading: {\n      true: \"relative\",\n    },\n  },\n  defaultVariants: {\n    size: \"default\",\n    variant: \"default\",\n    loading: false,\n  },\n});\n\ntype ButtonVariantsProps = VariantProps<typeof buttonVariants>;\n\n/* -----------------------------------------------------------------------------\n * Component: Button\n * -------------------------------------------------------------------------- */\n\ntype ButtonElement = HTMLButtonElement;\n\ninterface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonVariantsProps {\n  asChild?: boolean;\n}\n\nconst Button = React.forwardRef<ButtonElement, ButtonProps>(\n  ({ children, className, variant, size, loading = false, asChild = false, ...props }, ref) => {\n    const Component = asChild ? Slot : \"button\";\n    const ComponentLoading = asChild ? \"span\" : Fragment;\n    const disabled = loading || props.disabled;\n\n    return (\n      <Component\n        ref={ref}\n        type={asChild ? undefined : \"button\"}\n        className={buttonVariants({ variant, size, loading, className })}\n        {...props}\n        disabled={disabled}\n      >\n        {loading ? (\n          <ComponentLoading>\n            <span aria-hidden className=\"invisible contents\">\n              {children}\n            </span>\n            <VisuallyHidden>{children}</VisuallyHidden>\n            <span className=\"absolute inset-0 flex items-center justify-center\">\n              <Spinner />\n            </span>\n          </ComponentLoading>\n        ) : (\n          children\n        )}\n      </Component>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport { Button, buttonVariants, type ButtonProps, type ButtonVariantsProps };\n"]}