@doscientos/ui 0.1.15 → 0.1.17

package/dist/index.d.cts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import { RefCallback, ReactNode, ComponentPropsWithRef } from 'react';
 import { ClassValue } from 'clsx';
 import * as react_aria_components from 'react-aria-components';
-import { DisclosureGroupProps, DisclosurePanelProps, DisclosureProps, ButtonProps as ButtonProps$1, LinkProps, Breadcrumb as Breadcrumb$1, Link, Breadcrumbs as Breadcrumbs$1, Separator as Separator$1, CheckboxProps as CheckboxProps$1, ComboBoxProps, Key, Popover as Popover$1, InputProps as InputProps$1, ListBoxItemProps, ListBoxProps, Input as Input$1, ListBox, ModalOverlayProps, Menu as Menu$1, MenuSectionProps, MenuItemProps, Header, SubmenuTrigger, MenuTrigger as MenuTrigger$1, TextAreaProps, MenuProps, PopoverProps as PopoverProps$1, DialogTrigger, NumberFieldProps, SearchFieldProps, SelectProps, SelectValue as SelectValue$1, Modal, Text, Heading, DialogTriggerProps, SwitchFieldProps, SwitchButtonRenderProps, TabPanelProps as TabPanelProps$1, TabProps as TabProps$1, TabsProps as TabsProps$1, TabListProps, TabPanelsProps, Tooltip as Tooltip$1, TooltipTrigger as TooltipTrigger$1 } from 'react-aria-components';
+import { DisclosureGroupProps, DisclosurePanelProps, DisclosureProps, ButtonProps as ButtonProps$1, LinkProps, Breadcrumb as Breadcrumb$1, Link, Breadcrumbs as Breadcrumbs$1, Separator as Separator$1, CheckboxProps as CheckboxProps$1, ComboBoxProps, Key, Popover as Popover$1, InputProps as InputProps$1, ListBoxItemProps, ListBoxProps, Input as Input$1, ListBox, ModalOverlayProps, Menu as Menu$1, MenuSectionProps, MenuItemProps, Header, SubmenuTrigger, MenuTrigger as MenuTrigger$1, TextAreaProps, MenuProps, PopoverProps as PopoverProps$1, DialogTrigger, NumberFieldProps, SearchFieldProps, SelectProps, SelectValue as SelectValue$1, Modal, Text, Heading, DialogTriggerProps, SwitchProps as SwitchProps$1, TabPanelProps as TabPanelProps$1, TabProps as TabProps$1, TabsProps as TabsProps$1, TabListProps, TabPanelsProps, Tooltip as Tooltip$1, TooltipTrigger as TooltipTrigger$1 } from 'react-aria-components';
 export { ComboBoxProps, ComboBoxValue as ComboboxValue, DialogTriggerProps as PopoverTriggerProps, SearchFieldProps, SelectProps, DialogProps as SheetPrimitiveProps, DialogTriggerProps as SheetTriggerPrimitiveProps } from 'react-aria-components';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -516,11 +516,41 @@ interface SubmitButtonProps extends Omit<ButtonProps, "type"> {
 }
 declare function SubmitButton({ pendingLabel, loading, children, isDisabled, size, ...props }: SubmitButtonProps): React$1.JSX.Element;
 
-type SwitchProps = Omit<SwitchFieldProps, "className"> & {
-    className?: string | ((values: SwitchButtonRenderProps) => string);
-    size?: "sm" | "md";
+declare const switchSizes: {
+    readonly sm: {
+        readonly control: "h-4 w-[1.875rem] p-0.5";
+        readonly thumb: "h-3";
+        readonly idleWidth: "0.75rem";
+        readonly activeWidth: "1rem";
+        readonly selectedOffset: "0.875rem";
+        readonly activeSelectedOffset: "0.625rem";
+    };
+    readonly md: {
+        readonly control: "h-5 w-9 p-0.5";
+        readonly thumb: "h-4";
+        readonly idleWidth: "1rem";
+        readonly activeWidth: "1.25rem";
+        readonly selectedOffset: "1rem";
+        readonly activeSelectedOffset: "0.75rem";
+    };
+    readonly lg: {
+        readonly control: "h-6 w-11 p-0.5";
+        readonly thumb: "h-5";
+        readonly idleWidth: "1.25rem";
+        readonly activeWidth: "1.5rem";
+        readonly selectedOffset: "1.25rem";
+        readonly activeSelectedOffset: "1rem";
+    };
+};
+type SwitchProps = Omit<SwitchProps$1, "className"> & {
+    className?: string;
+    size?: keyof typeof switchSizes;
+    description?: ReactNode;
+    icon?: ReactNode;
+    selectedIcon?: ReactNode;
 };
-declare function Switch({ className, children, size, ...props }: SwitchProps): React$1.JSX.Element;
+/** Accessible React Aria switch with semantic tokens and a compact capsule thumb. */
+declare function Switch({ className, children, description, icon, inputRef, isDisabled, isReadOnly, selectedIcon, size, ...props }: SwitchProps): React$1.JSX.Element;
 
 /** Presentational table primitives. Sorting, pagination and data state stay in the application. */
 declare function Table({ className, ...props }: React$1.ComponentProps<"table">): React$1.JSX.Element;

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import { RefCallback, ReactNode, ComponentPropsWithRef } from 'react';
 import { ClassValue } from 'clsx';
 import * as react_aria_components from 'react-aria-components';
-import { DisclosureGroupProps, DisclosurePanelProps, DisclosureProps, ButtonProps as ButtonProps$1, LinkProps, Breadcrumb as Breadcrumb$1, Link, Breadcrumbs as Breadcrumbs$1, Separator as Separator$1, CheckboxProps as CheckboxProps$1, ComboBoxProps, Key, Popover as Popover$1, InputProps as InputProps$1, ListBoxItemProps, ListBoxProps, Input as Input$1, ListBox, ModalOverlayProps, Menu as Menu$1, MenuSectionProps, MenuItemProps, Header, SubmenuTrigger, MenuTrigger as MenuTrigger$1, TextAreaProps, MenuProps, PopoverProps as PopoverProps$1, DialogTrigger, NumberFieldProps, SearchFieldProps, SelectProps, SelectValue as SelectValue$1, Modal, Text, Heading, DialogTriggerProps, SwitchFieldProps, SwitchButtonRenderProps, TabPanelProps as TabPanelProps$1, TabProps as TabProps$1, TabsProps as TabsProps$1, TabListProps, TabPanelsProps, Tooltip as Tooltip$1, TooltipTrigger as TooltipTrigger$1 } from 'react-aria-components';
+import { DisclosureGroupProps, DisclosurePanelProps, DisclosureProps, ButtonProps as ButtonProps$1, LinkProps, Breadcrumb as Breadcrumb$1, Link, Breadcrumbs as Breadcrumbs$1, Separator as Separator$1, CheckboxProps as CheckboxProps$1, ComboBoxProps, Key, Popover as Popover$1, InputProps as InputProps$1, ListBoxItemProps, ListBoxProps, Input as Input$1, ListBox, ModalOverlayProps, Menu as Menu$1, MenuSectionProps, MenuItemProps, Header, SubmenuTrigger, MenuTrigger as MenuTrigger$1, TextAreaProps, MenuProps, PopoverProps as PopoverProps$1, DialogTrigger, NumberFieldProps, SearchFieldProps, SelectProps, SelectValue as SelectValue$1, Modal, Text, Heading, DialogTriggerProps, SwitchProps as SwitchProps$1, TabPanelProps as TabPanelProps$1, TabProps as TabProps$1, TabsProps as TabsProps$1, TabListProps, TabPanelsProps, Tooltip as Tooltip$1, TooltipTrigger as TooltipTrigger$1 } from 'react-aria-components';
 export { ComboBoxProps, ComboBoxValue as ComboboxValue, DialogTriggerProps as PopoverTriggerProps, SearchFieldProps, SelectProps, DialogProps as SheetPrimitiveProps, DialogTriggerProps as SheetTriggerPrimitiveProps } from 'react-aria-components';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -516,11 +516,41 @@ interface SubmitButtonProps extends Omit<ButtonProps, "type"> {
 }
 declare function SubmitButton({ pendingLabel, loading, children, isDisabled, size, ...props }: SubmitButtonProps): React$1.JSX.Element;
 
-type SwitchProps = Omit<SwitchFieldProps, "className"> & {
-    className?: string | ((values: SwitchButtonRenderProps) => string);
-    size?: "sm" | "md";
+declare const switchSizes: {
+    readonly sm: {
+        readonly control: "h-4 w-[1.875rem] p-0.5";
+        readonly thumb: "h-3";
+        readonly idleWidth: "0.75rem";
+        readonly activeWidth: "1rem";
+        readonly selectedOffset: "0.875rem";
+        readonly activeSelectedOffset: "0.625rem";
+    };
+    readonly md: {
+        readonly control: "h-5 w-9 p-0.5";
+        readonly thumb: "h-4";
+        readonly idleWidth: "1rem";
+        readonly activeWidth: "1.25rem";
+        readonly selectedOffset: "1rem";
+        readonly activeSelectedOffset: "0.75rem";
+    };
+    readonly lg: {
+        readonly control: "h-6 w-11 p-0.5";
+        readonly thumb: "h-5";
+        readonly idleWidth: "1.25rem";
+        readonly activeWidth: "1.5rem";
+        readonly selectedOffset: "1.25rem";
+        readonly activeSelectedOffset: "1rem";
+    };
+};
+type SwitchProps = Omit<SwitchProps$1, "className"> & {
+    className?: string;
+    size?: keyof typeof switchSizes;
+    description?: ReactNode;
+    icon?: ReactNode;
+    selectedIcon?: ReactNode;
 };
-declare function Switch({ className, children, size, ...props }: SwitchProps): React$1.JSX.Element;
+/** Accessible React Aria switch with semantic tokens and a compact capsule thumb. */
+declare function Switch({ className, children, description, icon, inputRef, isDisabled, isReadOnly, selectedIcon, size, ...props }: SwitchProps): React$1.JSX.Element;
 
 /** Presentational table primitives. Sorting, pagination and data state stay in the application. */
 declare function Table({ className, ...props }: React$1.ComponentProps<"table">): React$1.JSX.Element;

package/dist/index.js

@@ -142,6 +142,7 @@ function getTextMatchParts(text, query) {
 }
 
 // src/ui/accordion/accordion.tsx
+import "react";
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import {
   DisclosurePanel as AccordionContentPrimitive,
@@ -156,7 +157,7 @@ function Accordion({ className, ...props }) {
     AccordionPrimitive,
     {
       "data-slot": "accordion",
-      className: cn("flex w-full flex-col", className),
+      className: cn("flex w-full flex-col text-foreground", className),
       ...props
     }
   );
@@ -182,7 +183,7 @@ function AccordionTrigger({
       slot: "trigger",
       "data-slot": "accordion-trigger",
       className: cn(
-        "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+        "group/accordion-trigger relative flex flex-1 items-start justify-between gap-3 rounded-lg border border-transparent px-2.5 py-2.5 text-left text-sm font-medium text-foreground transition-colors outline-none hover:bg-muted/50 aria-expanded:bg-muted/50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
         className
       ),
       ...props,
@@ -206,18 +207,22 @@ function AccordionTrigger({
     }
   ) });
 }
-function AccordionContent({ className, children, ...props }) {
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
     AccordionContentPrimitive,
     {
       "data-slot": "accordion-content",
-      className: "h-(--disclosure-panel-height) overflow-clip text-sm transition-[height] data-open:animate-accordion-down data-closed:animate-accordion-up",
+      className: "h-(--disclosure-panel-height) overflow-clip text-sm text-muted-foreground transition-[height] data-open:animate-accordion-down data-closed:animate-accordion-up",
       ...props,
       children: /* @__PURE__ */ jsx(
         "div",
         {
           className: cn(
-            "pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+            "px-2.5 pt-0 pb-3 [&_a]:text-foreground [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-primary [&_p:not(:last-child)]:mb-4",
             className
           ),
           children
@@ -1479,7 +1484,7 @@ function FormRow({ label, htmlFor, required, hint, error, className, children })
 import { Link as Link2 } from "react-aria-components";
 
 // src/ui/tooltip/tooltip.tsx
-import * as React2 from "react";
+import * as React3 from "react";
 import {
   Focusable,
   OverlayArrow,
@@ -1492,7 +1497,7 @@ function TooltipTrigger({
   children,
   ...props
 }) {
-  const [trigger, tooltip] = React2.Children.toArray(children);
+  const [trigger, tooltip] = React3.Children.toArray(children);
   return /* @__PURE__ */ jsxs10(
     TooltipTriggerPrimitive,
     {
@@ -2442,62 +2447,126 @@ function SubmitButton({ pendingLabel = "Guardando\u2026", loading = false, child
 }
 
 // src/ui/switch/switch.tsx
+import { useEffect as useEffect5, useRef as useRef5 } from "react";
 import {
-  SwitchButton as AriaSwitchButton,
-  SwitchField as AriaSwitchField
+  Switch as AriaSwitch
 } from "react-aria-components";
 import { Fragment as Fragment10, jsx as jsx42, jsxs as jsxs20 } from "react/jsx-runtime";
-var sizeStyles = {
-  sm: { track: "h-5 w-9 p-0.5", thumb: "size-4", travel: "group-data-selected/switch:translate-x-4" },
-  md: { track: "h-6 w-11 p-0.5", thumb: "size-5", travel: "group-data-selected/switch:translate-x-5" }
+var switchSizes = {
+  sm: {
+    control: "h-4 w-[1.875rem] p-0.5",
+    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",
+    idleWidth: "1rem",
+    activeWidth: "1.25rem",
+    selectedOffset: "1rem",
+    activeSelectedOffset: "0.75rem"
+  },
+  lg: {
+    control: "h-6 w-11 p-0.5",
+    thumb: "h-5",
+    idleWidth: "1.25rem",
+    activeWidth: "1.5rem",
+    selectedOffset: "1.25rem",
+    activeSelectedOffset: "1rem"
+  }
 };
-function Switch({ className, children, size = "sm", ...props }) {
-  const styles = sizeStyles[size];
-  return /* @__PURE__ */ jsx42(AriaSwitchField, { ...props, children: /* @__PURE__ */ jsx42(
-    AriaSwitchButton,
+function Switch({
+  className,
+  children,
+  description,
+  icon,
+  inputRef,
+  isDisabled,
+  isReadOnly,
+  selectedIcon,
+  size = "sm",
+  ...props
+}) {
+  const styles = switchSizes[size];
+  const fallbackInputRef = useRef5(null);
+  const resolvedInputRef = inputRef ?? fallbackInputRef;
+  useEffect5(() => {
+    const input = resolvedInputRef.current;
+    if (!input) return;
+    const handleDirectionalKey = (event) => {
+      if (event.target !== input || event.defaultPrevented || isDisabled || isReadOnly || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+      const nextSelected = event.key === "ArrowRight" ? true : event.key === "ArrowLeft" ? false : null;
+      if (nextSelected === null) return;
+      event.preventDefault();
+      if (input.checked !== nextSelected) input.click();
+    };
+    const ownerDocument = input.ownerDocument;
+    ownerDocument.addEventListener("keydown", handleDirectionalKey);
+    return () => ownerDocument.removeEventListener("keydown", handleDirectionalKey);
+  }, [isDisabled, isReadOnly, resolvedInputRef]);
+  return /* @__PURE__ */ jsx42(
+    AriaSwitch,
     {
       "data-slot": "switch",
       "data-size": size,
-      className: (state) => cn(
-        "group/switch inline-flex w-max items-center gap-2 text-sm text-foreground outline-none",
+      inputRef: resolvedInputRef,
+      isDisabled,
+      isReadOnly,
+      className: cn(
+        "group/switch inline-flex cursor-pointer items-center gap-3 text-sm text-foreground outline-none select-none",
         "data-disabled:cursor-not-allowed data-disabled:opacity-50",
-        typeof className === "function" ? className(state) : className
+        className
       ),
-      children: (state) => /* @__PURE__ */ jsxs20(Fragment10, { children: [
-        /* @__PURE__ */ jsx42(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: cn(
-              "relative inline-flex shrink-0 items-center rounded-full border border-transparent bg-secondary",
-              "shadow-[inset_0_1px_2px_rgb(0_0_0/0.08)]",
-              "transition-[background-color,box-shadow] duration-200 ease-out",
-              "group-data-selected/switch:bg-primary group-data-hovered/switch:bg-secondary/80",
-              "group-data-selected/switch:group-data-hovered/switch:bg-primary/90",
-              "group-data-focus-visible/switch:ring-3 group-data-focus-visible/switch:ring-ring/40",
-              "group-data-pressed/switch:ring-4 group-data-pressed/switch:ring-primary/10",
-              "motion-reduce:transition-none",
-              styles.track
-            ),
-            children: /* @__PURE__ */ jsx42(
-              "span",
-              {
-                className: cn(
-                  "pointer-events-none block rounded-full bg-background shadow-[0_1px_2px_rgb(0_0_0/0.18)]",
-                  "transition-[transform,background-color,box-shadow] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)]",
-                  "group-data-selected/switch:bg-primary-foreground group-data-selected/switch:shadow-[0_1px_3px_rgb(0_0_0/0.22)]",
-                  "group-data-pressed/switch:scale-[0.94] motion-reduce:transition-none",
-                  styles.travel,
-                  styles.thumb
-                )
-              }
-            )
-          }
-        ),
-        children != null && /* @__PURE__ */ jsx42("span", { className: "select-none font-medium leading-5 text-foreground", children: typeof children === "function" ? children(state) : children })
-      ] })
+      ...props,
+      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
+        ] });
+      }
     }
-  ) });
+  );
 }
 
 // src/ui/table/table.tsx
@@ -2609,7 +2678,7 @@ function TabsContent({ className, ...props }) {
 }
 
 // src/ui/toast/toast.tsx
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 import { sileo, Toaster as SileoToaster } from "sileo";
 import { Fragment as Fragment11, jsx as jsx45, jsxs as jsxs21 } from "react/jsx-runtime";
 function toSileoOptions({ title, description, duration, position, action }) {
@@ -2664,7 +2733,7 @@ function ToastViewport({ position, visiblePosition, className }) {
   return /* @__PURE__ */ jsx45(Toaster, { position });
 }
 function Toast({ id, title, description, variant = "default", action, state = "open", duration = 0, position, onDismiss }) {
-  useEffect5(() => {
+  useEffect6(() => {
     if (state !== "open") return;
     const toastId = create({ title, description, variant, action, duration, position });
     return () => {