@doscientos/ui 0.1.16 → 0.1.18

package/dist/index.js

@@ -95,6 +95,12 @@ function useFormDirty() {
   return { formRef, isDirty, markDirty: () => setIsDirty(true), reset };
 }
 
+// src/lib/action-ripple.ts
+import { cva } from "class-variance-authority";
+var actionRipple = cva(
+  "relative isolate overflow-hidden after:pointer-events-none after:absolute after:top-1/2 after:left-1/2 after:aspect-square after:w-full after:-translate-x-1/2 after:-translate-y-1/2 after:scale-0 after:rounded-full after:bg-current after:opacity-0 after:content-[''] after:transition-[scale,opacity] after:duration-300 after:ease-out active:after:scale-150 active:after:opacity-10 data-pressed:after:scale-150 data-pressed:after:opacity-10 motion-reduce:after:hidden"
+);
+
 // src/lib/cn.ts
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -233,9 +239,9 @@ function AccordionContent({
 }
 
 // src/ui/alert/alert.tsx
-import { cva } from "class-variance-authority";
+import { cva as cva2 } from "class-variance-authority";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var alertVariants = cva(
+var alertVariants = cva2(
   "group/alert relative grid w-full gap-0.5 rounded-lg border border-border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
   {
     variants: {
@@ -408,10 +414,10 @@ function AvatarGroupCount({ className, ...props }) {
 }
 
 // src/ui/badge/badge.tsx
-import { cva as cva2 } from "class-variance-authority";
+import { cva as cva3 } from "class-variance-authority";
 import { Link } from "react-aria-components";
 import { jsx as jsx5 } from "react/jsx-runtime";
-var badgeVariants = cva2(
+var badgeVariants = cva3(
   "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&>svg]:pointer-events-none [&>svg]:size-3",
   {
     variants: {
@@ -474,80 +480,14 @@ function BreadcrumbSeparator({ children = "/", className, ...props }) {
   return /* @__PURE__ */ jsx6("span", { "data-slot": "breadcrumb-separator", "aria-hidden": "true", className: cn("text-muted-foreground/60", className), ...props, children });
 }
 
-// src/ui/button/button.tsx
-import { cva as cva3 } from "class-variance-authority";
-import {
-  Button as ButtonPrimitive,
-  Link as LinkPrimitive
-} from "react-aria-components";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var buttonVariants = cva3(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80",
-        outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
-        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        icon: "size-8",
-        "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
-        "icon-lg": "size-9"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Button({ className, variant = "default", size = "default", ...props }) {
-  return /* @__PURE__ */ jsx7(
-    ButtonPrimitive,
-    {
-      "data-slot": "button",
-      "data-variant": variant,
-      "data-size": size,
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
-function LinkButton({
-  className,
-  variant = "default",
-  size = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx7(
-    LinkPrimitive,
-    {
-      "data-slot": "button",
-      "data-variant": variant,
-      "data-size": size,
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
-
 // src/ui/button-group/button-group.tsx
 import { cva as cva4 } from "class-variance-authority";
 
 // src/ui/separator/separator.tsx
 import { Separator as SeparatorPrimitive } from "react-aria-components";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function Separator({ className, orientation = "horizontal", ...props }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     SeparatorPrimitive,
     {
       "data-slot": "separator",
@@ -562,7 +502,7 @@ function Separator({ className, orientation = "horizontal", ...props }) {
 }
 
 // src/ui/button-group/button-group.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var buttonGroupVariants = cva4(
   "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
@@ -584,7 +524,7 @@ function ButtonGroup({
 }) {
   return (
     // biome-ignore lint/a11y/useSemanticElements: fieldset would impose form semantics on a generic action group.
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx8(
       "div",
       {
         role: "group",
@@ -612,7 +552,7 @@ function ButtonGroupText({
     };
     return render(renderProps);
   }
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       "data-slot": "button-group-text",
@@ -629,7 +569,7 @@ function ButtonGroupSeparator({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx8(
     Separator,
     {
       "data-slot": "button-group-separator",
@@ -643,6 +583,75 @@ function ButtonGroupSeparator({
   );
 }
 
+// src/ui/button/button.tsx
+import { cva as cva5 } from "class-variance-authority";
+import {
+  Button as ButtonPrimitive,
+  Link as LinkPrimitive
+} from "react-aria-components";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var buttonVariants = cva5(
+  cn(
+    "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    actionRipple()
+  ),
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline after:hidden"
+      },
+      size: {
+        default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({ className, variant = "default", size = "default", ...props }) {
+  return /* @__PURE__ */ jsx9(
+    ButtonPrimitive,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+function LinkButton({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(
+    LinkPrimitive,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
 // src/ui/card/card.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
 function Card({ className, size = "default", ...props }) {
@@ -972,7 +981,7 @@ function DrawerDescription({ className, ...props }) {
 
 // src/ui/dropdown-menu/dropdown-menu.tsx
 import "react";
-import { cva as cva5 } from "class-variance-authority";
+import { cva as cva6 } from "class-variance-authority";
 import { CheckIcon, ChevronRightIcon } from "lucide-react";
 import {
   composeRenderProps,
@@ -1042,7 +1051,7 @@ function DropdownMenuLabel({
     }
   );
 }
-var dropdownMenuItemVariants = cva5(
+var dropdownMenuItemVariants = cva6(
   "group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
@@ -1169,7 +1178,7 @@ function DropdownMenuShortcut({
 }
 
 // src/ui/empty-state/empty-state.tsx
-import { cva as cva6 } from "class-variance-authority";
+import { cva as cva7 } from "class-variance-authority";
 import { jsx as jsx18 } from "react/jsx-runtime";
 function EmptyState({ className, ...props }) {
   return /* @__PURE__ */ jsx18(
@@ -1194,7 +1203,7 @@ function EmptyStateHeader({ className, ...props }) {
     }
   );
 }
-var emptyStateMediaVariants = cva6(
+var emptyStateMediaVariants = cva7(
   "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
@@ -1259,7 +1268,7 @@ function EmptyStateContent({ className, ...props }) {
 }
 
 // src/ui/field/field.tsx
-import { cva as cva7 } from "class-variance-authority";
+import { cva as cva8 } from "class-variance-authority";
 
 // src/ui/label/label.tsx
 import { forwardRef } from "react";
@@ -1305,7 +1314,7 @@ function FieldGroup({ className, ...props }) {
     }
   );
 }
-var fieldVariants = cva7(
+var fieldVariants = cva8(
   "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
   {
     variants: {
@@ -1590,6 +1599,9 @@ function IconButton({
   ] });
 }
 
+// src/ui/input-group/input-group.tsx
+import { cva as cva9 } from "class-variance-authority";
+
 // src/ui/input/input.tsx
 import { forwardRef as forwardRef2 } from "react";
 import { Input as AriaInput2 } from "react-aria-components";
@@ -1599,9 +1611,6 @@ var InputImpl = forwardRef2(function Input2({ className, type, ...props }, ref)
 });
 var Input3 = InputImpl;
 
-// src/ui/input-group/input-group.tsx
-import { cva as cva8 } from "class-variance-authority";
-
 // src/ui/textarea/textarea.tsx
 import { forwardRef as forwardRef3 } from "react";
 import { TextArea as AriaTextArea } from "react-aria-components";
@@ -1630,7 +1639,7 @@ function InputGroup({ className, ...props }) {
     )
   );
 }
-var inputGroupAddonVariants = cva8(
+var inputGroupAddonVariants = cva9(
   "flex cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
@@ -1669,7 +1678,7 @@ function InputGroupAddon({
     )
   );
 }
-var inputGroupButtonVariants = cva8("shrink-0 shadow-none", {
+var inputGroupButtonVariants = cva9("shrink-0 shadow-none", {
   variants: {
     size: { xs: "h-6 px-1.5 text-xs", sm: "h-7 px-2", "icon-xs": "size-6", "icon-sm": "size-7" }
   },
@@ -2455,18 +2464,27 @@ import { Fragment as Fragment10, jsx as jsx42, jsxs as jsxs20 } from "react/jsx-
 var switchSizes = {
   sm: {
     control: "h-4 w-[1.875rem] p-0.5",
-    thumb: "h-3 w-4",
-    offset: "0.625rem"
+    thumb: "h-3",
+    idleWidth: "0.75rem",
+    activeWidth: "1rem",
+    selectedOffset: "0.875rem",
+    activeSelectedOffset: "0.625rem"
   },
   md: {
     control: "h-5 w-9 p-0.5",
-    thumb: "h-4 w-5",
-    offset: "0.75rem"
+    thumb: "h-4",
+    idleWidth: "1rem",
+    activeWidth: "1.25rem",
+    selectedOffset: "1rem",
+    activeSelectedOffset: "0.75rem"
   },
   lg: {
     control: "h-6 w-11 p-0.5",
-    thumb: "h-5 w-6",
-    offset: "1rem"
+    thumb: "h-5",
+    idleWidth: "1.25rem",
+    activeWidth: "1.5rem",
+    selectedOffset: "1.25rem",
+    activeSelectedOffset: "1rem"
   }
 };
 function Switch({
@@ -2512,43 +2530,50 @@ function Switch({
         className
       ),
       ...props,
-      children: (state) => /* @__PURE__ */ jsxs20(Fragment10, { children: [
-        /* @__PURE__ */ jsx42(
-          "span",
-          {
-            "aria-hidden": "true",
-            "data-slot": "switch-control",
-            className: cn(
-              "relative inline-flex shrink-0 items-center overflow-hidden rounded-full border border-border bg-input shadow-inner",
-              "transition-[background-color,border-color,box-shadow] duration-200 ease-out motion-reduce:transition-none",
-              "group-data-hovered/switch:bg-muted-foreground/25",
-              "group-data-selected/switch:border-primary group-data-selected/switch:bg-primary",
-              "group-data-selected/switch:group-data-hovered/switch:bg-primary/85",
-              "group-data-focus-visible/switch:ring-3 group-data-focus-visible/switch:ring-ring/50",
-              styles.control
-            ),
-            children: /* @__PURE__ */ jsx42(
-              "span",
-              {
-                "data-slot": "switch-thumb",
-                style: { transform: state.isSelected ? `translate3d(${styles.offset}, 0, 0)` : "translate3d(0, 0, 0)" },
-                className: cn(
-                  "grid shrink-0 place-items-center rounded-full border border-border/60 bg-background text-[0.625rem] text-muted-foreground shadow-sm",
-                  "will-change-transform transition-[transform,background-color,color,border-color] duration-[240ms] ease-[cubic-bezier(0.2,0.8,0.2,1)] motion-reduce:transition-none",
-                  "group-data-selected/switch:border-primary-foreground/20",
-                  "group-data-selected/switch:bg-primary-foreground group-data-selected/switch:text-primary",
-                  styles.thumb
-                ),
-                children: state.isSelected ? selectedIcon ?? icon : icon
-              }
-            )
-          }
-        ),
-        children || description ? /* @__PURE__ */ jsxs20("span", { className: "grid gap-0.5 leading-tight", children: [
-          children ? /* @__PURE__ */ jsx42("span", { "data-slot": "switch-label", className: "font-medium", children: typeof children === "function" ? children(state) : children }) : null,
-          description ? /* @__PURE__ */ jsx42("span", { "data-slot": "switch-description", className: "text-xs font-normal text-muted-foreground", children: description }) : null
-        ] }) : null
-      ] })
+      children: (state) => {
+        const isThumbActive = state.isHovered || state.isPressed;
+        const thumbOffset = state.isSelected ? isThumbActive ? styles.activeSelectedOffset : styles.selectedOffset : "0";
+        return /* @__PURE__ */ jsxs20(Fragment10, { children: [
+          /* @__PURE__ */ jsx42(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-slot": "switch-control",
+              className: cn(
+                "relative inline-flex shrink-0 items-center overflow-hidden rounded-full border border-border bg-input shadow-inner",
+                "transition-[background-color,border-color,box-shadow] duration-200 ease-out motion-reduce:transition-none",
+                "group-data-hovered/switch:bg-muted-foreground/25",
+                "group-data-selected/switch:border-primary group-data-selected/switch:bg-primary",
+                "group-data-selected/switch:group-data-hovered/switch:bg-primary/85",
+                "group-data-focus-visible/switch:ring-3 group-data-focus-visible/switch:ring-ring/50",
+                styles.control
+              ),
+              children: /* @__PURE__ */ jsx42(
+                "span",
+                {
+                  "data-slot": "switch-thumb",
+                  style: {
+                    transform: `translate3d(${thumbOffset}, 0, 0)`,
+                    width: isThumbActive ? styles.activeWidth : styles.idleWidth
+                  },
+                  className: cn(
+                    "grid shrink-0 place-items-center rounded-full border border-border/60 bg-background text-[0.625rem] text-muted-foreground shadow-sm",
+                    "will-change-[transform,width] transition-[transform,width,background-color,color,border-color] duration-[240ms] ease-[cubic-bezier(0.2,0.8,0.2,1)] motion-reduce:transition-none",
+                    "group-data-selected/switch:border-primary-foreground/20",
+                    "group-data-selected/switch:bg-primary-foreground group-data-selected/switch:text-primary",
+                    styles.thumb
+                  ),
+                  children: state.isSelected ? selectedIcon ?? icon : icon
+                }
+              )
+            }
+          ),
+          children || description ? /* @__PURE__ */ jsxs20("span", { className: "grid gap-0.5 leading-tight", children: [
+            children ? /* @__PURE__ */ jsx42("span", { "data-slot": "switch-label", className: "font-medium", children: typeof children === "function" ? children(state) : children }) : null,
+            description ? /* @__PURE__ */ jsx42("span", { "data-slot": "switch-description", className: "text-xs font-normal text-muted-foreground", children: description }) : null
+          ] }) : null
+        ] });
+      }
     }
   );
 }
@@ -2709,7 +2734,7 @@ function ToastProvider({ children }) {
   ] });
 }
 function Toaster({ position }) {
-  return /* @__PURE__ */ jsx45(SileoToaster, { position });
+  return /* @__PURE__ */ jsx45(SileoToaster, { position, options: { fill: "var(--ui-secondary)" } });
 }
 function ToastViewport({ position, visiblePosition, className }) {
   void className;
@@ -2911,6 +2936,7 @@ export {
   ToolbarSpacer,
   Tooltip,
   TooltipTrigger,
+  actionRipple,
   alertVariants,
   badgeVariants,
   buttonGroupVariants,