orbital-ds 0.7.0 → 0.9.0

package/dist/ui/accordion.js

@@ -8,7 +8,7 @@ function Accordion({ className, ...props }) {
     {
       "data-slot": "accordion",
       className: cn(
-        "flex w-full flex-col overflow-hidden rounded-2xl border",
+        "flex w-full flex-col overflow-hidden rounded-panel border",
         className
       ),
       ...props
@@ -20,7 +20,7 @@ function AccordionItem({ className, ...props }) {
     AccordionPrimitive.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("not-last:border-b data-open:bg-muted/50", className),
+      className: cn("not-last:border-b data-open:bg-(--ds-row-hover)", className),
       ...props
     }
   );
@@ -30,12 +30,12 @@ function AccordionTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { "data-slot": "accordion-header", className: "flex", children: /* @__PURE__ */ jsxs(
     AccordionPrimitive.Trigger,
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 border border-transparent p-4 text-left text-sm font-medium transition-all outline-none hover:underline aria-disabled:pointer-events-none aria-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-6 border border-transparent p-4 text-left text-sm font-medium transition-all duration-(--ds-motion-snap) outline-none hover:underline aria-disabled:pointer-events-none aria-disabled:opacity-(--ds-disabled-opacity) **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
         className
       ),
       ...props,
@@ -56,7 +56,7 @@ function AccordionContent({
     AccordionPrimitive.Panel,
     {
       "data-slot": "accordion-content",
-      className: "overflow-hidden px-4 text-sm data-open:animate-accordion-down data-closed:animate-accordion-up",
+      className: "overflow-hidden px-4 text-sm data-open:animate-accordion-open data-closed:animate-accordion-close",
       ...props,
       children: /* @__PURE__ */ jsx(
         "div",

package/dist/ui/alert-dialog.js

@@ -20,7 +20,7 @@ function AlertDialogOverlay({
     {
       "data-slot": "alert-dialog-overlay",
       className: cn(
-        "fixed inset-0 isolate z-(--ds-z-overlay) bg-scrim duration-(--ds-motion-fast) supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 isolate z-(--ds-z-overlay) bg-scrim duration-(--ds-motion-fast) supports-backdrop-filter:backdrop-blur-(--ds-scrim-blur) data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       ),
       ...props
@@ -40,7 +40,7 @@ function AlertDialogContent({
         "data-slot": "alert-dialog-content",
         "data-size": size,
         className: cn(
-          "group/alert-dialog-content fixed top-1/2 left-1/2 z-(--ds-z-overlay) grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-control bg-popover p-6 text-popover-foreground ring-1 ring-foreground/5 duration-(--ds-motion-fast) outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-(--ds-z-overlay) grid w-full -translate-x-1/2 -translate-y-1/2 gap-(--ds-overlay-gap) rounded-overlay bg-popover p-(--ds-overlay-p) text-popover-foreground shadow-dialog ring-(length:--ds-layer-ring-w) ring-(--ds-layer-ring) duration-(--ds-motion-fast) outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         ),
         ...props
@@ -105,7 +105,7 @@ function AlertDialogTitle({
     {
       "data-slot": "alert-dialog-title",
       className: cn(
-        "text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        "text-lg font-(--ds-overlay-title-weight) sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
         className
       ),
       ...props

package/dist/ui/alert.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const alertVariants: (props?: ({
-    variant?: "default" | "destructive" | null | undefined;
+    variant?: "default" | "destructive" | "info" | "success" | "warning" | "danger" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React.JSX.Element;
 declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/ui/alert.js

@@ -2,12 +2,17 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils";
 const alertVariants = cva(
-  "group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 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.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-(--ds-alert-px) py-(--ds-alert-py) 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.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-card text-card-foreground",
-        destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current"
+        destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+        // Estados: fondo suave y texto del estado (pares con contraste AA comprobado por check:ds).
+        info: "border-info/30 bg-info-soft text-info *:data-[slot=alert-description]:text-info",
+        success: "border-success/30 bg-success-soft text-success *:data-[slot=alert-description]:text-success",
+        warning: "border-warning/30 bg-warning-soft text-warning *:data-[slot=alert-description]:text-warning",
+        danger: "border-danger/30 bg-danger-soft text-danger *:data-[slot=alert-description]:text-danger"
       }
     },
     defaultVariants: {
@@ -24,6 +29,7 @@ function Alert({
     "div",
     {
       "data-slot": "alert",
+      "data-variant": variant ?? "default",
       role: "alert",
       className: cn(alertVariants({ variant }), className),
       ...props
@@ -36,7 +42,7 @@ function AlertTitle({ className, ...props }) {
     {
       "data-slot": "alert-title",
       className: cn(
-        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        "font-(--ds-overlay-title-weight) group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
         className
       ),
       ...props

package/dist/ui/attachment.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from 'class-variance-authority';
 import { Button } from './button.js';
 
 declare const attachmentVariants: (props?: ({
-    size?: "default" | "sm" | "xs" | null | undefined;
+    size?: "default" | "xs" | "sm" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Attachment({ className, state, size, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentVariants> & {

package/dist/ui/attachment.js

@@ -5,13 +5,13 @@ import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils";
 import { Button } from "./button";
 const attachmentVariants = cva(
-  "group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-2xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed",
+  "group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-chip border bg-card text-card-foreground transition-colors duration-(--ds-motion-snap) focus-within:ring-(length:--ds-ring-width) focus-within:ring-(--ds-ring-color) has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-danger/30 data-[state=idle]:border-dashed",
   {
     variants: {
       size: {
         default: "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
         sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
-        xs: "gap-1.5 rounded-xl text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1"
+        xs: "gap-1.5 rounded-item text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1"
       },
       orientation: {
         horizontal: "min-w-40 items-center",
@@ -40,7 +40,7 @@ function Attachment({
   );
 }
 const attachmentMediaVariants = cva(
-  "relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-lg group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5",
+  "relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-lg group-data-[state=error]/attachment:bg-danger-soft group-data-[state=error]/attachment:text-danger group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5",
   {
     variants: {
       variant: {
@@ -109,7 +109,7 @@ function AttachmentDescription({
     {
       "data-slot": "attachment-description",
       className: cn(
-        "mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80",
+        "mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-danger",
         "max-w-full",
         className
       ),

package/dist/ui/avatar.js

@@ -12,7 +12,7 @@ function Avatar({
       "data-slot": "avatar",
       "data-size": size,
       className: cn(
-        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        "group/avatar relative flex size-(--ds-avatar-md) shrink-0 rounded-avatar select-none after:absolute after:inset-0 after:rounded-avatar after:border after:border-border after:mix-blend-darken data-[size=lg]:size-(--ds-avatar-lg) data-[size=sm]:size-(--ds-avatar-sm) dark:after:mix-blend-lighten",
         className
       ),
       ...props
@@ -25,7 +25,7 @@ function AvatarImage({ className, ...props }) {
     {
       "data-slot": "avatar-image",
       className: cn(
-        "aspect-square size-full rounded-full object-cover",
+        "aspect-square size-full rounded-avatar object-cover",
         className
       ),
       ...props
@@ -41,7 +41,7 @@ function AvatarFallback({
     {
       "data-slot": "avatar-fallback",
       className: cn(
-        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        "flex size-full items-center justify-center rounded-avatar bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
         className
       ),
       ...props
@@ -54,7 +54,7 @@ function AvatarBadge({ className, ...props }) {
     {
       "data-slot": "avatar-badge",
       className: cn(
-        "absolute right-0 bottom-0 z-(--ds-z-raised) inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
+        "absolute right-0 bottom-0 z-(--ds-z-raised) inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-(length:--ds-avatar-ring-w) ring-background select-none",
         "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
         "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
         "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
@@ -70,7 +70,7 @@ function AvatarGroup({ className, ...props }) {
     {
       "data-slot": "avatar-group",
       className: cn(
-        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-(length:--ds-avatar-ring-w) *:data-[slot=avatar]:ring-background",
         className
       ),
       ...props
@@ -86,7 +86,7 @@ function AvatarGroupCount({
     {
       "data-slot": "avatar-group-count",
       className: cn(
-        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        "relative flex size-(--ds-avatar-md) shrink-0 items-center justify-center rounded-avatar bg-muted text-sm text-muted-foreground ring-(length:--ds-avatar-ring-w) ring-background group-has-data-[size=lg]/avatar-group:size-(--ds-avatar-lg) group-has-data-[size=sm]/avatar-group:size-(--ds-avatar-sm) [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
         className
       ),
       ...props

package/dist/ui/ayuda.js

@@ -10,13 +10,14 @@ function Ayuda({ children, etiqueta }) {
     /* @__PURE__ */ jsx(
       PopoverTrigger,
       {
+        "data-slot": "help-trigger",
         type: "button",
         "aria-label": `Qu\xE9 es: ${etiqueta}`,
-        className: "text-muted-foreground hover:text-foreground inline-flex shrink-0 items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
+        className: "text-muted-foreground hover:text-foreground inline-flex shrink-0 items-center rounded-full outline-none focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-(--ds-ring-color)",
         children: /* @__PURE__ */ jsx(CircleHelpIcon, { "aria-hidden": "true", className: "size-3.5" })
       }
     ),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "w-72 text-sm font-normal", side: "top", children })
+    /* @__PURE__ */ jsx(PopoverContent, { "data-slot": "help-content", className: "w-72 text-sm font-normal", side: "top", children })
   ] });
 }
 export {

package/dist/ui/badge.d.ts

@@ -4,7 +4,7 @@ import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
+    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | "info" | "success" | "warning" | "danger" | "neutral" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 

package/dist/ui/badge.js

@@ -3,16 +3,22 @@ import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils";
 const badgeVariants = cva(
-  "group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border border-transparent px-(--ds-badge-px) py-1 text-xs font-semibold whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  "group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-badge border border-transparent px-(--ds-badge-px) py-(--ds-badge-py) text-xs font-(--ds-label-weight) whitespace-nowrap transition-all duration-(--ds-motion-snap) focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-(--ds-ring-color) has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-(--ds-invalid-border) aria-invalid:ring-(--ds-invalid-ring) [&>svg]:pointer-events-none [&>svg]:size-3!",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
         secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
         destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
-        outline: "border-border bg-input/30 text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        outline: "border-border bg-(--ds-field-bg) text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
         ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-        link: "text-primary underline-offset-4 hover:underline"
+        link: "text-primary underline-offset-4 hover:underline",
+        // Estados: etiqueta suave con el texto del estado (contraste AA comprobado por check:ds).
+        info: "bg-info-soft text-info",
+        success: "bg-success-soft text-success",
+        warning: "bg-warning-soft text-warning",
+        danger: "bg-danger-soft text-danger",
+        neutral: "bg-neutral-soft text-neutral"
       }
     },
     defaultVariants: {

package/dist/ui/banner.d.ts

@@ -0,0 +1,14 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const bannerVariants: (props?: ({
+    variant?: "default" | "info" | "success" | "warning" | "danger" | "brand" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Banner({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof bannerVariants>): React.JSX.Element;
+declare function BannerContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function BannerTitle({ className, ...props }: React.ComponentProps<"strong">): React.JSX.Element;
+declare function BannerDescription({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function BannerActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+
+export { Banner, BannerActions, BannerContent, BannerDescription, BannerTitle, bannerVariants };

package/dist/ui/banner.js

@@ -0,0 +1,88 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+const bannerVariants = cva(
+  "group/banner flex w-full items-center gap-3 border-b px-(--ds-banner-px) py-(--ds-banner-py) text-sm [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "border-border bg-inset text-inset-foreground",
+        brand: "border-transparent bg-primary text-primary-foreground [&_a]:text-primary-foreground",
+        info: "border-info/30 bg-info-soft text-info",
+        success: "border-success/30 bg-success-soft text-success",
+        warning: "border-warning/30 bg-warning-soft text-warning",
+        danger: "border-danger/30 bg-danger-soft text-danger"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Banner({
+  className,
+  variant,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "banner",
+      "data-variant": variant ?? "default",
+      role: "status",
+      className: cn(bannerVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function BannerContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "banner-content",
+      className: cn(
+        "flex min-w-0 flex-1 flex-wrap items-baseline gap-x-2 gap-y-1 [&_a]:font-medium [&_a]:underline [&_a]:underline-offset-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function BannerTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "strong",
+    {
+      "data-slot": "banner-title",
+      className: cn("font-semibold", className),
+      ...props
+    }
+  );
+}
+function BannerDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "banner-description",
+      className: cn("opacity-90", className),
+      ...props
+    }
+  );
+}
+function BannerActions({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "banner-actions",
+      className: cn("ml-auto flex shrink-0 items-center gap-2", className),
+      ...props
+    }
+  );
+}
+export {
+  Banner,
+  BannerActions,
+  BannerContent,
+  BannerDescription,
+  BannerTitle,
+  bannerVariants
+};

package/dist/ui/breadcrumb.js

@@ -1,13 +1,16 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cn } from "../lib/utils";
 import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import { useDsMessages } from "../hooks/use-ds-messages";
 function Breadcrumb({ className, ...props }) {
+  const t = useDsMessages();
   return /* @__PURE__ */ jsx(
     "nav",
     {
-      "aria-label": "breadcrumb",
+      "aria-label": t.breadcrumb,
       "data-slot": "breadcrumb",
       className: cn(className),
       ...props
@@ -46,7 +49,7 @@ function BreadcrumbLink({
     defaultTagName: "a",
     props: mergeProps(
       {
-        className: cn("transition-colors hover:text-foreground", className)
+        className: cn("transition-colors duration-(--ds-motion-snap) hover:text-foreground", className)
       },
       props
     ),
@@ -90,6 +93,7 @@ function BreadcrumbEllipsis({
   className,
   ...props
 }) {
+  const t = useDsMessages();
   return /* @__PURE__ */ jsxs(
     "span",
     {
@@ -103,7 +107,7 @@ function BreadcrumbEllipsis({
       ...props,
       children: [
         /* @__PURE__ */ jsx(MoreHorizontalIcon, {}),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: t.breadcrumbMore })
       ]
     }
   );

package/dist/ui/bubble.js

@@ -14,17 +14,17 @@ function BubbleGroup({ className, ...props }) {
   );
 }
 const bubbleVariants = cva(
-  "group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
+  "group/bubble relative flex w-fit max-w-(--ds-bubble-max-w) min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
   {
     variants: {
       variant: {
         default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
         secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
         muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
-        tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
-        outline: "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+        tinted: "*:data-[slot=bubble-content]:bg-(--ds-bubble-tinted) *:data-[slot=bubble-content]:text-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-(--ds-bubble-tinted-hover)",
+        outline: "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-(--ds-field-bg)",
         ghost: "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
-        destructive: "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30"
+        destructive: "*:data-[slot=bubble-content]:bg-danger-soft *:data-[slot=bubble-content]:text-danger [&>[data-slot=bubble-content]:is(button,a):hover]:bg-danger-soft"
       }
     },
     defaultVariants: {
@@ -59,7 +59,7 @@ function BubbleContent({
     props: mergeProps(
       {
         className: cn(
-          "w-fit max-w-full min-w-0 overflow-hidden rounded-overlay border border-transparent px-3.5 py-2.5 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-(length:--ds-ring-width) [button,a]:focus-visible:ring-ring/50",
+          "w-fit max-w-full min-w-0 overflow-hidden rounded-bubble border border-transparent px-(--ds-bubble-px) py-(--ds-bubble-py) text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:duration-(--ds-motion-snap) [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-(length:--ds-ring-width) [button,a]:focus-visible:ring-(--ds-ring-color)",
           className
         )
       },
@@ -72,7 +72,7 @@ function BubbleContent({
   });
 }
 const bubbleReactionsVariants = cva(
-  "absolute z-(--ds-z-raised) flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0",
+  "absolute z-(--ds-z-raised) flex w-fit shrink-0 items-center justify-center gap-1 rounded-(--ds-radius-pill) bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0",
   {
     variants: {
       side: {

package/dist/ui/button-group.js

@@ -5,12 +5,12 @@ import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils";
 import { Separator } from "./separator";
 const buttonGroupVariants = cva(
-  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-(--ds-z-raised) has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-4xl [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-(--ds-z-raised) has-[>[data-slot=button-group]]:gap-2 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
     variants: {
       orientation: {
-        horizontal: "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-4xl! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
-        vertical: "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-4xl! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0"
+        horizontal: "[&>[data-slot]:has(~[data-slot])]:rounded-r-none [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+        vertical: "flex-col [&>[data-slot]:has(~[data-slot])]:rounded-b-none [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0"
       }
     },
     defaultVariants: {
@@ -44,7 +44,7 @@ function ButtonGroupText({
     props: mergeProps(
       {
         className: cn(
-          "flex items-center gap-2 rounded-control border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+          "flex items-center gap-2 rounded-button border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
           className
         )
       },

package/dist/ui/button.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
-    size?: "default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, render, nativeButton: _nativeButton, ...props }: useRender.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     nativeButton?: boolean;

package/dist/ui/button.js

@@ -3,12 +3,12 @@ import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils";
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-semibold whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) 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-(length:--ds-ring-width) 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",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-button border border-transparent bg-clip-padding text-sm font-(--ds-button-weight) whitespace-nowrap transition-all duration-(--ds-motion-snap) outline-none select-none focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-(--ds-ring-color) active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-(--ds-disabled-opacity) aria-invalid:border-(--ds-invalid-border) aria-invalid:ring-(length:--ds-ring-width) aria-invalid:ring-(--ds-invalid-ring) [&_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-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+        outline: "border-border bg-(--ds-field-bg) hover:bg-(--ds-field-bg-hover) hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
         secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] 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",
@@ -16,13 +16,13 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-(--ds-control-h-md) gap-1.5 px-(--ds-button-px-md) has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
-        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+        xs: "h-(--ds-control-h-xs) gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
         sm: "h-(--ds-control-h-sm) gap-1 px-(--ds-button-px-sm) has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
         lg: "h-(--ds-control-h-lg) gap-1.5 px-(--ds-button-px-lg) has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
         icon: "size-(--ds-control-h-md)",
-        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+        "icon-xs": "size-(--ds-control-h-xs) [&_svg:not([class*='size-'])]:size-3",
         "icon-sm": "size-(--ds-control-h-sm)",
-        "icon-lg": "size-10"
+        "icon-lg": "size-(--ds-control-h-lg)"
       }
     },
     defaultVariants: {

package/dist/ui/calendar.js

@@ -25,7 +25,7 @@ function Calendar({
     {
       showOutsideDays,
       className: cn(
-        "group/calendar bg-background p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        "group/calendar bg-background p-3 [--cell-radius:var(--radius-control)] [--cell-size:var(--ds-control-h-sm)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className
@@ -49,12 +49,12 @@ function Calendar({
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-(--ds-disabled-opacity)",
           defaultClassNames.button_previous
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-(--ds-disabled-opacity)",
           defaultClassNames.button_next
         ),
         month_caption: cn(
@@ -81,7 +81,7 @@ function Calendar({
         month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
-          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
+          "flex-1 rounded-(--cell-radius) text-xs font-normal text-muted-foreground select-none",
           defaultClassNames.weekday
         ),
         week: cn("mt-2 flex w-full", defaultClassNames.week),
@@ -90,7 +90,7 @@ function Calendar({
           defaultClassNames.week_number_header
         ),
         week_number: cn(
-          "text-[0.8rem] text-muted-foreground select-none",
+          "text-xs text-muted-foreground select-none",
           defaultClassNames.week_number
         ),
         day: cn(
@@ -143,6 +143,33 @@ function Calendar({
           }
           return /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("size-4", className2), ...props2 });
         },
+        // Ganchos para la PERSONALIDAD de un tema: mismas etiquetas que las de
+        // react-day-picker, con `data-slot` (y las flechas, como botones).
+        Day: ({ day: _day, modifiers: _modifiers, ...props2 }) => /* @__PURE__ */ jsx("td", { "data-slot": "calendar-day", ...props2 }),
+        Weekday: (props2) => /* @__PURE__ */ jsx("th", { "data-slot": "calendar-weekday", ...props2 }),
+        MonthCaption: ({
+          calendarMonth: _calendarMonth,
+          displayIndex: _displayIndex,
+          ...props2
+        }) => /* @__PURE__ */ jsx("div", { "data-slot": "calendar-caption", ...props2 }),
+        PreviousMonthButton: (props2) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            "data-slot": "button",
+            "data-variant": buttonVariant,
+            "data-calendar-nav": "previous",
+            ...props2
+          }
+        ),
+        NextMonthButton: (props2) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            "data-slot": "button",
+            "data-variant": buttonVariant,
+            "data-calendar-nav": "next",
+            ...props2
+          }
+        ),
         DayButton: ({ ...props2 }) => /* @__PURE__ */ jsx(CalendarDayButton, { locale, ...props2 }),
         WeekNumber: ({ children, ...props2 }) => {
           return /* @__PURE__ */ jsx("td", { ...props2, children: /* @__PURE__ */ jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
@@ -176,7 +203,7 @@ function CalendarDayButton({
       "data-range-end": modifiers.range_end,
       "data-range-middle": modifiers.range_middle,
       className: cn(
-        "relative isolate z-(--ds-z-raised) flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-(--ds-z-raised) group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-(length:--ds-ring-width) group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
+        "relative isolate z-(--ds-z-raised) flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-(--ds-z-raised) group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-(length:--ds-ring-width) group-data-[focused=true]/day:ring-(--ds-ring-color) data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className
       ),