@doscientos/ui 0.1.15 → 0.1.17

package/README.md

@@ -55,11 +55,28 @@ El combobox es composable: la aplicación controla datos, peticiones y caché; l
 ## Desarrollo
 
 - `pnpm test`: pruebas unitarias y de renderizado.
+- `pnpm test:storybook`: renderizado, accesibilidad e interacciones de todas las stories en Chromium.
 - `pnpm typecheck`: contrato TypeScript.
 - `pnpm build`: distribución JS, tipos y CSS Tailwind compilado.
 - `pnpm storybook`: catálogo local en el puerto 6006.
 - `pnpm build-storybook`: sitio estático en `storybook-static/`, listo para publicar en `ui.doscientos.es`.
 
+Storybook genera documentación automática para todo el catálogo y ofrece temas
+claro/oscuro y viewports móvil, tablet y escritorio. Chromatic captura cada
+story en claro escritorio, oscuro escritorio y claro móvil. Para activar el job
+visual de CI, configura `CHROMATIC_PROJECT_TOKEN` como secreto del repositorio;
+el valor se consume mediante el entorno y nunca se pasa como argumento del CLI.
+
+### Criterio de stories
+
+Cada componente público debe tener una story propia. Cuando apliquen, incluye
+estado por defecto, variantes, disabled o read-only, error, carga o vacío,
+contenido largo y viewport estrecho. Los controles interactivos deben añadir
+un flujo `play` que cubra su comportamiento principal con teclado y foco.
+
+Las stories deben usar datos ficticios y permanecer independientes de rutas,
+APIs, autenticación y estado de producto.
+
 ## Criterio de crecimiento
 
 Un componente entra cuando ya resuelve dos contextos reales o una necesidad transversal de accesibilidad. No se incorporan entidades de negocio, consultas, rutas ni variaciones visuales exclusivas de un cliente.

package/dist/index.cjs

@@ -364,6 +364,7 @@ function getTextMatchParts(text, query) {
 }
 
 // src/ui/accordion/accordion.tsx
+var React = require("react");
 var import_lucide_react = require("lucide-react");
 var import_react_aria_components = require("react-aria-components");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -372,7 +373,7 @@ function Accordion({ className, ...props }) {
     import_react_aria_components.DisclosureGroup,
     {
       "data-slot": "accordion",
-      className: cn("flex w-full flex-col", className),
+      className: cn("flex w-full flex-col text-foreground", className),
       ...props
     }
   );
@@ -398,7 +399,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,
@@ -422,18 +423,22 @@ function AccordionTrigger({
     }
   ) });
 }
-function AccordionContent({ className, children, ...props }) {
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_react_aria_components.DisclosurePanel,
     {
       "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__ */ (0, import_jsx_runtime.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
@@ -1171,7 +1176,7 @@ function DrawerDescription({ className, ...props }) {
 }
 
 // src/ui/dropdown-menu/dropdown-menu.tsx
-var React = require("react");
+var React2 = require("react");
 var import_class_variance_authority5 = require("class-variance-authority");
 var import_lucide_react4 = require("lucide-react");
 var import_react_aria_components11 = require("react-aria-components");
@@ -1674,7 +1679,7 @@ function FormRow({ label, htmlFor, required, hint, error, className, children })
 var import_react_aria_components14 = require("react-aria-components");
 
 // src/ui/tooltip/tooltip.tsx
-var React2 = __toESM(require("react"), 1);
+var React3 = __toESM(require("react"), 1);
 var import_react_aria_components13 = require("react-aria-components");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function TooltipTrigger({
@@ -1682,7 +1687,7 @@ function TooltipTrigger({
   children,
   ...props
 }) {
-  const [trigger, tooltip] = React2.Children.toArray(children);
+  const [trigger, tooltip] = React3.Children.toArray(children);
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     import_react_aria_components13.TooltipTrigger,
     {
@@ -2586,59 +2591,124 @@ function SubmitButton({ pendingLabel = "Guardando\u2026", loading = false, child
 }
 
 // src/ui/switch/switch.tsx
+var import_react12 = require("react");
 var import_react_aria_components25 = require("react-aria-components");
 var import_jsx_runtime42 = require("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__ */ (0, import_jsx_runtime42.jsx)(import_react_aria_components25.SwitchField, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    import_react_aria_components25.SwitchButton,
+function Switch({
+  className,
+  children,
+  description,
+  icon,
+  inputRef,
+  isDisabled,
+  isReadOnly,
+  selectedIcon,
+  size = "sm",
+  ...props
+}) {
+  const styles = switchSizes[size];
+  const fallbackInputRef = (0, import_react12.useRef)(null);
+  const resolvedInputRef = inputRef ?? fallbackInputRef;
+  (0, import_react12.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime42.jsx)(
+    import_react_aria_components25.Switch,
     {
       "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__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          "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__ */ (0, import_jsx_runtime42.jsx)(
-              "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__ */ (0, import_jsx_runtime42.jsx)("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__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            "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__ */ (0, import_jsx_runtime42.jsx)(
+                "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__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "grid gap-0.5 leading-tight", children: [
+            children ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { "data-slot": "switch-label", className: "font-medium", children: typeof children === "function" ? children(state) : children }) : null,
+            description ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { "data-slot": "switch-description", className: "text-xs font-normal text-muted-foreground", children: description }) : null
+          ] }) : null
+        ] });
+      }
     }
-  ) });
+  );
 }
 
 // src/ui/table/table.tsx
@@ -2743,7 +2813,7 @@ function TabsContent({ className, ...props }) {
 }
 
 // src/ui/toast/toast.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_sileo = require("sileo");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 function toSileoOptions({ title, description, duration, position, action }) {
@@ -2798,7 +2868,7 @@ function ToastViewport({ position, visiblePosition, className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Toaster, { position });
 }
 function Toast({ id, title, description, variant = "default", action, state = "open", duration = 0, position, onDismiss }) {
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (state !== "open") return;
     const toastId = create({ title, description, variant, action, duration, position });
     return () => {