orbital-ds 0.1.1 → 0.2.0

package/dist/ui/switch.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import { cn } from "../lib/utils";
+function Switch({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SwitchPrimitive.Root,
+    {
+      "data-slot": "switch",
+      "data-size": size,
+      className: cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-(length:--ds-ring-width) aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        SwitchPrimitive.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+        }
+      )
+    }
+  );
+}
+export {
+  Switch
+};

package/dist/ui/table.js

@@ -69,7 +69,7 @@ function TableHead({ className, ...props }) {
     {
       "data-slot": "table-head",
       className: cn(
-        "h-12 px-3 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        "h-12 px-(--ds-cell-p) text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
         className
       ),
       ...props
@@ -82,7 +82,7 @@ function TableCell({ className, ...props }) {
     {
       "data-slot": "table-cell",
       className: cn(
-        "p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        "p-(--ds-cell-p) align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
         className
       ),
       ...props

package/dist/ui/tabs.js

@@ -56,7 +56,7 @@ function TabsTrigger({ className, ...props }) {
     {
       "data-slot": "tabs-trigger",
       className: cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[orientation=vertical]/tabs:px-2.5 group-data-[orientation=vertical]/tabs:py-1.5 hover:text-foreground focus-visible:border-ring focus-visible:ring-(length:--ring-width) focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[orientation=vertical]/tabs:px-2.5 group-data-[orientation=vertical]/tabs:py-1.5 hover:text-foreground focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
         "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",

package/dist/ui/textarea.js

@@ -6,7 +6,7 @@ function Textarea({ className, ...props }) {
     {
       "data-slot": "textarea",
       className: cn(
-        "min-h-16 w-full min-w-0 rounded-md border border-input bg-input/30 px-3 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-(length:--ring-width) focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-(length:--ring-width) aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "min-h-16 w-full min-w-0 rounded-md border border-input bg-input/30 px-(--ds-field-px) py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-(length:--ds-ring-width) aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       ),
       ...props

package/dist/ui/toast.d.ts

@@ -0,0 +1,19 @@
+import * as _base_ui_react from '@base-ui/react';
+import * as React from 'react';
+import { Toast as Toast$1 } from '@base-ui/react/toast';
+
+declare const toast: _base_ui_react.ToastManager<any>;
+declare function ToastProvider({ ...props }: Toast$1.Provider.Props): React.JSX.Element;
+declare function ToastPortal({ ...props }: Toast$1.Portal.Props): React.JSX.Element;
+declare function ToastViewport({ className, ...props }: Toast$1.Viewport.Props): React.JSX.Element;
+declare function Toast({ className, ...props }: Toast$1.Root.Props): React.JSX.Element;
+declare function ToastContent({ className, ...props }: Toast$1.Content.Props): React.JSX.Element;
+declare function ToastTitle({ className, ...props }: Toast$1.Title.Props): React.JSX.Element;
+declare function ToastDescription({ className, ...props }: Toast$1.Description.Props): React.JSX.Element;
+declare function ToastAction({ className, render, ...props }: Toast$1.Action.Props): React.JSX.Element;
+declare function ToastClose({ className, children, render, ...props }: Toast$1.Close.Props): React.JSX.Element;
+declare function Toaster({ children, toastManager, ...props }: Toast$1.Provider.Props): React.JSX.Element;
+declare const createToastManager: typeof Toast$1.createToastManager;
+declare const useToastManager: typeof Toast$1.useToastManager;
+
+export { Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, createToastManager, toast, useToastManager };

package/dist/ui/toast.js

@@ -0,0 +1,193 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toast as ToastPrimitive } from "@base-ui/react/toast";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import { XIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react";
+const toast = ToastPrimitive.createToastManager();
+function ToastProvider({ ...props }) {
+  return /* @__PURE__ */ jsx(ToastPrimitive.Provider, { ...props });
+}
+function ToastPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(ToastPrimitive.Portal, { "data-slot": "toast-portal", ...props });
+}
+function ToastViewport({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ToastPrimitive.Viewport,
+    {
+      "data-slot": "toast-viewport",
+      className: cn(
+        "pointer-events-none fixed inset-x-4 bottom-4 z-(--ds-z-overlay) mx-auto w-auto max-w-sm outline-none sm:right-4 sm:left-auto sm:mx-0 sm:w-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Toast({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ToastPrimitive.Root,
+    {
+      "data-slot": "toast",
+      className: cn(
+        "group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom rounded-2xl border bg-popover text-popover-foreground shadow-overlay will-change-transform outline-none select-none focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring/50",
+        "[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]",
+        "h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]",
+        "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
+        "data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]",
+        "data-limited:opacity-0 data-starting-style:[transform:translateY(150%)]",
+        "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]",
+        "data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+        "data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
+        "data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
+        "data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ToastContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ToastPrimitive.Content,
+    {
+      "data-slot": "toast-content",
+      className: cn(
+        "flex h-full items-center gap-3 overflow-hidden p-4 transition-opacity duration-(--ds-motion-base) ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ToastTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ToastPrimitive.Title,
+    {
+      "data-slot": "toast-title",
+      className: cn("text-sm font-medium", className),
+      ...props
+    }
+  );
+}
+function ToastDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ToastPrimitive.Description,
+    {
+      "data-slot": "toast-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function ToastAction({
+  className,
+  render = /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm" }),
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ToastPrimitive.Action,
+    {
+      "data-slot": "toast-action",
+      render,
+      className: cn("shrink-0", className),
+      ...props
+    }
+  );
+}
+function ToastClose({
+  className,
+  children,
+  render = /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm" }),
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ToastPrimitive.Close,
+    {
+      "data-slot": "toast-close",
+      "aria-label": "Close toast",
+      render,
+      className: cn(
+        "relative shrink-0 text-muted-foreground after:absolute after:-inset-2 after:content-[''] hover:text-foreground",
+        className
+      ),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" })
+    }
+  );
+}
+function ToastIcon({ type }) {
+  let icon = null;
+  if (type === "success") {
+    icon = /* @__PURE__ */ jsx(CircleCheckIcon, { "aria-hidden": "true" });
+  }
+  if (type === "info") {
+    icon = /* @__PURE__ */ jsx(InfoIcon, { "aria-hidden": "true" });
+  }
+  if (type === "warning") {
+    icon = /* @__PURE__ */ jsx(TriangleAlertIcon, { "aria-hidden": "true" });
+  }
+  if (type === "error") {
+    icon = /* @__PURE__ */ jsx(OctagonXIcon, { className: "text-destructive", "aria-hidden": "true" });
+  }
+  if (type === "loading") {
+    icon = /* @__PURE__ */ jsx(Loader2Icon, { className: "animate-spin", "aria-hidden": "true" });
+  }
+  if (!icon) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "toast-icon",
+      className: "shrink-0 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+      children: icon
+    }
+  );
+}
+function ToastList() {
+  const { toasts } = ToastPrimitive.useToastManager();
+  return toasts.map((toastItem) => /* @__PURE__ */ jsx(Toast, { toast: toastItem, children: /* @__PURE__ */ jsxs(ToastContent, { children: [
+    /* @__PURE__ */ jsx(ToastIcon, { type: toastItem.type }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+      /* @__PURE__ */ jsx(ToastTitle, {}),
+      /* @__PURE__ */ jsx(ToastDescription, {})
+    ] }),
+    /* @__PURE__ */ jsx(ToastAction, {}),
+    /* @__PURE__ */ jsx(ToastClose, {})
+  ] }) }, toastItem.id));
+}
+function Toaster({
+  children,
+  toastManager = toast,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(ToastProvider, { toastManager, ...props, children: [
+    children,
+    /* @__PURE__ */ jsx(ToastPortal, { children: /* @__PURE__ */ jsx(ToastViewport, { children: /* @__PURE__ */ jsx(ToastList, {}) }) })
+  ] });
+}
+const createToastManager = ToastPrimitive.createToastManager;
+const useToastManager = ToastPrimitive.useToastManager;
+export {
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastContent,
+  ToastDescription,
+  ToastPortal,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  Toaster,
+  createToastManager,
+  toast,
+  useToastManager
+};

package/dist/ui/toggle-group.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Toggle } from '@base-ui/react/toggle';
+import { ToggleGroup as ToggleGroup$1 } from '@base-ui/react/toggle-group';
+import { VariantProps } from 'class-variance-authority';
+import { toggleVariants } from './toggle.js';
+import 'class-variance-authority/types';
+
+declare function ToggleGroup({ className, variant, size, spacing, orientation, children, ...props }: ToggleGroup$1.Props & VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+    orientation?: "horizontal" | "vertical";
+}): React.JSX.Element;
+declare function ToggleGroupItem({ className, children, variant, size, ...props }: Toggle.Props & VariantProps<typeof toggleVariants>): React.JSX.Element;
+
+export { ToggleGroup, ToggleGroupItem };

package/dist/ui/toggle-group.js

@@ -0,0 +1,77 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
+import { cn } from "../lib/utils";
+import { toggleVariants } from "./toggle";
+const ToggleGroupContext = React.createContext({
+  size: "default",
+  variant: "default",
+  spacing: 2,
+  orientation: "horizontal"
+});
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 2,
+  orientation = "horizontal",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive,
+    {
+      "data-slot": "toggle-group",
+      "data-variant": variant,
+      "data-size": size,
+      "data-spacing": spacing,
+      "data-orientation": orientation,
+      style: { "--gap": spacing },
+      className: cn(
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[spacing=0]:data-[variant=outline]:rounded-control data-vertical:flex-col data-vertical:items-stretch",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ToggleGroupContext.Provider,
+        {
+          value: { variant, size, spacing, orientation },
+          children
+        }
+      )
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  const context = React.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    TogglePrimitive,
+    {
+      "data-slot": "toggle-group-item",
+      "data-variant": context.variant || variant,
+      "data-size": context.size || size,
+      "data-spacing": context.spacing,
+      className: cn(
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-3 group-data-[spacing=0]/toggle-group:shadow-none focus:z-(--ds-z-raised) focus-visible:z-(--ds-z-raised) group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-2.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-2.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-3xl group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-3xl group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-3xl group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-3xl data-[state=on]:bg-muted group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+export {
+  ToggleGroup,
+  ToggleGroupItem
+};

package/dist/ui/toggle.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { Toggle as Toggle$1 } from '@base-ui/react/toggle';
+import { VariantProps } from 'class-variance-authority';
+
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Toggle({ className, variant, size, ...props }: Toggle$1.Props & VariantProps<typeof toggleVariants>): React.JSX.Element;
+
+export { Toggle, toggleVariants };

package/dist/ui/toggle.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+const toggleVariants = cva(
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-control text-sm font-medium whitespace-nowrap transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-muted"
+      },
+      size: {
+        default: "h-9 min-w-9 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+        sm: "h-8 min-w-8 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        lg: "h-10 min-w-10 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TogglePrimitive,
+    {
+      "data-slot": "toggle",
+      className: cn(toggleVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+export {
+  Toggle,
+  toggleVariants
+};

package/dist/ui/tooltip.js

@@ -36,19 +36,19 @@ function TooltipContent({
       alignOffset,
       side,
       sideOffset,
-      className: "isolate z-(--z-overlay)",
+      className: "isolate z-(--ds-z-overlay)",
       children: /* @__PURE__ */ jsxs(
         TooltipPrimitive.Popup,
         {
           "data-slot": "tooltip-content",
           className: cn(
-            "z-(--z-overlay) inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-2xl bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-(--z-overlay) **:data-[slot=kbd]:rounded-control data-starting-style:animate-in data-starting-style:fade-in-0 data-starting-style:zoom-in-95 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95",
+            "z-(--ds-z-overlay) inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-2xl bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-(--ds-z-overlay) **:data-[slot=kbd]:rounded-control data-starting-style:animate-in data-starting-style:fade-in-0 data-starting-style:zoom-in-95 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95",
             className
           ),
           ...props,
           children: [
             children,
-            /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "z-(--z-overlay) size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px]" })
+            /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "z-(--ds-z-overlay) size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px]" })
           ]
         }
       )

package/docs/CONTRACT.md

@@ -0,0 +1,113 @@
+# Contrato de tema de orbital-ds
+
+Un **tema** es un fichero CSS (`themes/<nombre>.css`) que da valores a un conjunto
+cerrado de variables. Los componentes **solo** leen esas variables: ninguno lleva
+colores, medidas, sombras, capas ni duraciones escritos a mano. Por eso cambiar de
+tema cambia todo el aspecto sin tocar un componente.
+
+El contrato vive en [`contract.json`](../contract.json) y lo comprueba
+`pnpm doctor` (que forma parte de `pnpm verify`): si a un tema le falta un token
+obligatorio, el build falla.
+
+## Cómo se usa
+
+```css
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@import 'orbital-ds/styles.css';        /* 1. la ESTRUCTURA común */
+@import 'orbital-ds/themes/qratia.css'; /* 2. un TEMA (después, para poder sobrescribir) */
+
+@source '../node_modules/orbital-ds/dist'; /* que Tailwind vea las clases del paquete */
+```
+
+El tema se importa **después** de la estructura: así puede sobrescribir también la
+escala de radios y las sombras, que viven en `@theme`.
+
+Para ajustar un valor sin crear un tema, se sobrescribe la variable al final:
+
+```css
+:root { --primary: oklch(0.55 0.2 260); }
+```
+
+## Tokens obligatorios (todo tema, en `:root`)
+
+| Grupo | Tokens |
+|---|---|
+| Forma | `--radius` |
+| Superficies y texto | `--background`, `--foreground`, `--card`, `--card-foreground`, `--popover`, `--popover-foreground` |
+| Acción | `--primary`, `--primary-foreground`, `--secondary`, `--secondary-foreground`, `--accent`, `--accent-foreground` |
+| Atenuado | `--muted`, `--muted-foreground` |
+| Destructivo | `--destructive`, `--destructive-foreground` |
+| Líneas y foco | `--border`, `--input`, `--ring` |
+| Gráficos | `--chart-1` … `--chart-5` |
+| Sidebar | `--sidebar`, `--sidebar-foreground`, `--sidebar-primary`, `--sidebar-primary-foreground`, `--sidebar-accent`, `--sidebar-accent-foreground`, `--sidebar-border`, `--sidebar-ring` |
+| Estados | `--danger`, `--warning`, `--success`, `--info`, `--neutral` y cada uno con su `-soft` |
+| Texto acentuado | `--link`, `--link-hover` |
+| Superficie hundida | `--inset`, `--inset-foreground` |
+| Marca | `--brand`, `--brand-bright` |
+| Tipografía | `--font-sans` (en `:root` o en `@theme`) |
+
+En `.dark` se redefine lo que cambie; `doctor` avisa (no falla) de los tokens
+principales que se hereden de la piel clara.
+
+`--destructive` es el rojo de **acciones** (botón de borrar); `--danger` es el rojo
+de **estado** (etiqueta de nivel crítico). Pueden coincidir, pero son huecos distintos.
+
+## Tokens con valor por defecto (el tema los puede cambiar)
+
+Los define la estructura con un valor neutro; un tema los sobrescribe si quiere.
+
+| Hueco | Variables |
+|---|---|
+| Radios semánticos | `--radius-control`, `--radius-overlay` (y la rampa `--radius-sm … 2xl`, derivada de `--radius`) |
+| Sombras | `--shadow-card`, `--shadow-card-hover`, `--shadow-control`, `--shadow-raised`, `--shadow-overlay`, `--shadow-popover` |
+| Altura de controles | `--ds-control-h-sm`, `-md`, `-lg` |
+| Espaciado interno | `--ds-card-spacing`, `--ds-card-spacing-sm`, `--ds-field-px`, `--ds-cell-p`, `--ds-overlay-p`, `--ds-overlay-gap`, `--ds-popover-p`, `--ds-menu-p`, `--ds-menu-item-px`, `--ds-menu-item-py`, `--ds-button-px-sm/md/lg`, `--ds-badge-px` |
+| Capas | `--ds-z-raised`, `--ds-z-sticky`, `--ds-z-overlay` |
+| Movimiento | `--ds-motion-fast`, `--ds-motion-base`, `--ds-motion-slow`, `--ds-motion-blink` |
+| Foco | `--ds-ring-width` |
+| Velo | `--color-scrim` |
+| **Materiales** | `--ds-card-backdrop`, `--ds-overlay-backdrop`, `--ds-field-backdrop`, `--ds-sidebar-backdrop` (un `backdrop-filter` completo; por defecto `none`) y `--ds-page-backdrop` (un `background-image` para el fondo de la página; por defecto `none`) |
+
+Los **materiales** son lo que hace posible un tema de cristal como `zyro`: con valores
+neutros no hay efecto ni coste; con `blur(28px) saturate(180%)` las superficies se
+vuelven translúcidas.
+
+## Reglas de nombres
+
+- Todo en **inglés**: tokens, props y valores de variantes.
+- Los nombres que Tailwind convierte en utilidades (`--color-*`, `--radius-*`,
+  `--shadow-*`) siguen su convención y **no llevan prefijo**. El resto de variables
+  propias llevan el prefijo **`--ds-`** para no chocar con las de una app.
+- Un componente que necesite un hueco nuevo **añade el token** con un valor que deje
+  el aspecto como estaba; nunca escribe el valor en el componente.
+
+## Qué comprueba `pnpm doctor`
+
+1. **Contrato**: cada tema define todos los tokens obligatorios.
+2. **Repetidos**: ninguna variable se define dos veces en el mismo bloque.
+3. **Valores fijos** en `src/ui/*.tsx`: colores literales (hex, `rgb()`, `oklch()`
+   salvo derivados de un token), `z-<n>`, `duration-<n>`, `bg-black`/`bg-white`,
+   sombras de la escala de Tailwind, `text-[<n>px]`, radios fuera de la rampa y
+   colores de la paleta de Tailwind.
+
+También se puede pasar el CSS de una app: `orbital-ds-doctor --css src/styles.css`
+(detecta variables repetidas).
+
+## Crear un tema nuevo
+
+1. Copia `themes/qratia.css` (o `zyro.css`) a `themes/<nombre>.css`.
+2. Cambia los valores; no quites ninguno.
+3. `pnpm doctor`: te dice qué falta.
+4. Opcional: usa los materiales para dar cristal, relieve o un fondo propio.
+
+Se puede partir de un tema de shadcn (por ejemplo exportado desde tweakcn): usa los
+mismos nombres estándar (`--background`, `--primary`…). Habrá que añadir los tokens
+propios (`danger`, `warning`, `success`, `info`, `neutral`, `link`, `inset`, `brand`).
+
+## Cosas que un tema NO puede cambiar
+
+La **anatomía** de un componente (otro diseño de sidebar o de tarjeta) no es un valor,
+es estructura: se resuelve con variantes del componente. Un fondo animado (como la
+malla WebGL de zyro) es código, no una variable: se ofrece como componente opcional.