orbital-ds 0.5.0 → 0.6.2

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" | "xs" | "sm" | null | undefined;
+    size?: "default" | "sm" | "xs" | 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/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" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "default" | "sm" | "xs" | "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/icon-tile.d.ts

@@ -0,0 +1,11 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+declare const iconTileVariants: (props?: ({
+    tone?: "neutral" | "primary" | "accent" | "success" | "warning" | "danger" | "info" | null | undefined;
+    size?: "sm" | "lg" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function IconTile({ className, tone, size, ...props }: React.ComponentProps<"div"> & VariantProps<typeof iconTileVariants>): React.JSX.Element;
+
+export { IconTile, iconTileVariants };

package/dist/ui/icon-tile.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+const iconTileVariants = cva(
+  "inline-flex shrink-0 items-center justify-center rounded-(--ds-icon-tile-radius) [&>svg]:size-1/2",
+  {
+    variants: {
+      tone: {
+        neutral: "bg-muted text-foreground",
+        primary: "bg-primary text-primary-foreground",
+        accent: "bg-accent text-accent-foreground",
+        success: "bg-success-soft text-success",
+        warning: "bg-warning-soft text-warning",
+        danger: "bg-danger-soft text-danger",
+        info: "bg-info-soft text-info"
+      },
+      size: {
+        sm: "size-(--ds-icon-tile-sm)",
+        md: "size-(--ds-icon-tile-md)",
+        lg: "size-(--ds-icon-tile-lg)"
+      }
+    },
+    defaultVariants: { tone: "accent", size: "md" }
+  }
+);
+function IconTile({
+  className,
+  tone,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "icon-tile",
+      "data-tone": tone ?? "accent",
+      "data-size": size ?? "md",
+      "aria-hidden": "true",
+      className: cn(iconTileVariants({ tone, size }), className),
+      ...props
+    }
+  );
+}
+export {
+  IconTile,
+  iconTileVariants
+};

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

@@ -10,7 +10,7 @@ declare const inputGroupAddonVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({
-    size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
+    size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & {
     type?: "button" | "submit" | "reset";

package/dist/ui/item.d.ts

@@ -9,7 +9,7 @@ declare function ItemGroup({ className, ...props }: React.ComponentProps<"div">)
 declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
 declare const itemVariants: (props?: ({
     variant?: "default" | "outline" | "muted" | null | undefined;
-    size?: "default" | "xs" | "sm" | null | undefined;
+    size?: "default" | "sm" | "xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Item({ className, variant, size, render, ...props }: useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare const itemMediaVariants: (props?: ({

package/dist/ui/marker.d.ts

@@ -4,7 +4,7 @@ import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 
 declare const markerVariants: (props?: ({
-    variant?: "separator" | "default" | "border" | null | undefined;
+    variant?: "default" | "separator" | "border" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Marker({ className, variant, render, ...props }: useRender.ComponentProps<"div"> & VariantProps<typeof markerVariants>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare function MarkerIcon({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;

package/dist/ui/sidebar.js

@@ -26,7 +26,7 @@ const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = "17.5rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
-const SIDEBAR_WIDTH_ICON = "4rem";
+const SIDEBAR_WIDTH_ICON = "var(--ds-sidebar-rail-w, 4rem)";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 const SidebarContext = React.createContext(null);
 function useSidebar() {
@@ -180,7 +180,7 @@ function Sidebar({
             "data-slot": "sidebar-container",
             "data-side": side,
             className: cn(
-              "fixed inset-y-0 z-(--ds-z-raised) hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-(--ds-motion-base) ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+              "fixed inset-y-0 z-(--ds-z-sidebar) hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-(--ds-motion-base) ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
               // Adjust the padding for floating and inset variants.
               variant === "floating" || variant === "inset" ? "p-(--ds-sidebar-pad) group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(var(--ds-sidebar-pad)*2)+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
               className

package/docs/CONTRACT.md

@@ -74,9 +74,10 @@ Los define la estructura con un valor neutro; un tema los sobrescribe si quiere.
 | 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` |
+| Capas | `--ds-z-raised`, `--ds-z-sticky`, `--ds-z-sidebar` (sobre la cabecera sticky), `--ds-z-overlay` |
 | Movimiento | `--ds-motion-fast`, `--ds-motion-base`, `--ds-motion-slow`, `--ds-motion-blink` |
 | Foco | `--ds-ring-width` |
+| Sidebar | `--ds-sidebar-rail-w` (ancho del lateral contraído; por defecto `4rem`) |
 | 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`) |
 

package/package.json

@@ -1,140 +1,142 @@
-{
-  "name": "orbital-ds",
-  "version": "0.5.0",
-  "description": "Sistema de diseño genérico: estructura común + temas con personalidad (qratia, zyro) + ~60 componentes sobre Base UI y Tailwind v4, con contrato verificable y legible por agentes.",
-  "keywords": [
-    "design-system",
-    "design-tokens",
-    "theme",
-    "tailwindcss",
-    "base-ui",
-    "shadcn",
-    "react"
-  ],
-  "license": "MIT",
-  "type": "module",
-  "sideEffects": [
-    "*.css"
-  ],
-  "files": [
-    "dist",
-    "scripts/doctor.mjs",
-    "contract.json",
-    "components.manifest.json",
-    "docs",
-    "AGENTS.md",
-    "README.md",
-    "LICENSE",
-    "scripts/init.mjs",
-    "scripts/manifest.mjs"
-  ],
-  "exports": {
-    "./styles.css": "./dist/styles.css",
-    "./themes/*.css": "./dist/themes/*.css",
-    "./ui/*": {
-      "types": "./dist/ui/*.d.ts",
-      "import": "./dist/ui/*.js"
-    },
-    "./lib/*": {
-      "types": "./dist/lib/*.d.ts",
-      "import": "./dist/lib/*.js"
-    },
-    "./hooks/*": {
-      "types": "./dist/hooks/*.d.ts",
-      "import": "./dist/hooks/*.js"
-    },
-    "./package.json": "./package.json",
-    "./contract.json": "./contract.json",
-    "./components.manifest.json": "./components.manifest.json"
-  },
-  "scripts": {
-    "build": "tsup && node scripts/build-css.mjs",
-    "dev": "tsup --watch --onSuccess \"node scripts/copy-css.mjs\"",
-    "typecheck": "tsc --noEmit",
-    "verify": "pnpm check:ds && pnpm typecheck && pnpm build",
-    "manifest": "node scripts/manifest.mjs",
-    "check:ds": "node scripts/doctor.mjs"
-  },
-  "peerDependencies": {
-    "@base-ui/react": ">=1.9",
-    "class-variance-authority": ">=0.7",
-    "clsx": ">=2",
-    "lucide-react": ">=0.400",
-    "react": ">=19",
-    "react-dom": ">=19",
-    "tailwind-merge": ">=3",
-    "tailwindcss": ">=4.1",
-    "tw-animate-css": ">=1.3",
-    "next-themes": ">=0.4",
-    "recharts": ">=3",
-    "sonner": ">=2",
-    "@shadcn/react": ">=0.3",
-    "cmdk": ">=1.1",
-    "date-fns": ">=4",
-    "embla-carousel-react": ">=8.6",
-    "input-otp": ">=1.5",
-    "react-day-picker": ">=10",
-    "react-resizable-panels": ">=4"
-  },
-  "peerDependenciesMeta": {
-    "next-themes": {
-      "optional": true
-    },
-    "recharts": {
-      "optional": true
-    },
-    "sonner": {
-      "optional": true
-    },
-    "@shadcn/react": {
-      "optional": true
-    },
-    "cmdk": {
-      "optional": true
-    },
-    "date-fns": {
-      "optional": true
-    },
-    "embla-carousel-react": {
-      "optional": true
-    },
-    "input-otp": {
-      "optional": true
-    },
-    "react-day-picker": {
-      "optional": true
-    },
-    "react-resizable-panels": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@base-ui/react": "^1.9.0",
-    "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.2.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.577.0",
-    "next-themes": "^0.4.6",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "recharts": "3.8.0",
-    "sonner": "^2.0.8",
-    "tailwind-merge": "^3.0.2",
-    "tailwindcss": "^4.1.18",
-    "tsup": "^8.5.0",
-    "tw-animate-css": "^1.3.6",
-    "typescript": "^5.9.0",
-    "@shadcn/react": "^0.3.1",
-    "cmdk": "^1.1.1",
-    "date-fns": "^4.4.0",
-    "embla-carousel-react": "^8.6.0",
-    "input-otp": "^1.5.0",
-    "react-day-picker": "^10.0.2",
-    "react-resizable-panels": "^4.14.4"
-  },
-  "bin": {
-    "orbital-ds-doctor": "./scripts/doctor.mjs",
-    "orbital-ds-init": "./scripts/init.mjs"
-  }
-}
+{
+  "name": "orbital-ds",
+  "version": "0.6.2",
+  "description": "Sistema de diseño genérico: estructura común + temas con personalidad (qratia, zyro) + ~60 componentes sobre Base UI y Tailwind v4, con contrato verificable y legible por agentes.",
+  "keywords": [
+    "design-system",
+    "design-tokens",
+    "theme",
+    "tailwindcss",
+    "base-ui",
+    "shadcn",
+    "react"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "scripts/doctor.mjs",
+    "contract.json",
+    "components.manifest.json",
+    "docs",
+    "AGENTS.md",
+    "README.md",
+    "LICENSE",
+    "scripts/init.mjs",
+    "scripts/manifest.mjs"
+  ],
+  "exports": {
+    "./styles.css": "./dist/styles.css",
+    "./themes/*.css": "./dist/themes/*.css",
+    "./themes/*.md": "./dist/themes/*.md",
+    "./themes/*.meta.json": "./dist/themes/*.meta.json",
+    "./ui/*": {
+      "types": "./dist/ui/*.d.ts",
+      "import": "./dist/ui/*.js"
+    },
+    "./lib/*": {
+      "types": "./dist/lib/*.d.ts",
+      "import": "./dist/lib/*.js"
+    },
+    "./hooks/*": {
+      "types": "./dist/hooks/*.d.ts",
+      "import": "./dist/hooks/*.js"
+    },
+    "./package.json": "./package.json",
+    "./contract.json": "./contract.json",
+    "./components.manifest.json": "./components.manifest.json"
+  },
+  "scripts": {
+    "build": "tsup && node scripts/build-css.mjs",
+    "dev": "tsup --watch --onSuccess \"node scripts/copy-css.mjs\"",
+    "typecheck": "tsc --noEmit",
+    "verify": "pnpm check:ds && pnpm typecheck && pnpm build",
+    "manifest": "node scripts/manifest.mjs",
+    "check:ds": "node scripts/doctor.mjs"
+  },
+  "peerDependencies": {
+    "@base-ui/react": ">=1.9",
+    "class-variance-authority": ">=0.7",
+    "clsx": ">=2",
+    "lucide-react": ">=0.400",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "tailwind-merge": ">=3",
+    "tailwindcss": ">=4.1",
+    "tw-animate-css": ">=1.3",
+    "next-themes": ">=0.4",
+    "recharts": ">=3",
+    "sonner": ">=2",
+    "@shadcn/react": ">=0.3",
+    "cmdk": ">=1.1",
+    "date-fns": ">=4",
+    "embla-carousel-react": ">=8.6",
+    "input-otp": ">=1.5",
+    "react-day-picker": ">=10",
+    "react-resizable-panels": ">=4"
+  },
+  "peerDependenciesMeta": {
+    "next-themes": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    },
+    "sonner": {
+      "optional": true
+    },
+    "@shadcn/react": {
+      "optional": true
+    },
+    "cmdk": {
+      "optional": true
+    },
+    "date-fns": {
+      "optional": true
+    },
+    "embla-carousel-react": {
+      "optional": true
+    },
+    "input-otp": {
+      "optional": true
+    },
+    "react-day-picker": {
+      "optional": true
+    },
+    "react-resizable-panels": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@base-ui/react": "^1.9.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.577.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "recharts": "3.8.0",
+    "sonner": "^2.0.8",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss": "^4.1.18",
+    "tsup": "^8.5.0",
+    "tw-animate-css": "^1.3.6",
+    "typescript": "^5.9.0",
+    "@shadcn/react": "^0.3.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.5.0",
+    "react-day-picker": "^10.0.2",
+    "react-resizable-panels": "^4.14.4"
+  },
+  "bin": {
+    "orbital-ds-doctor": "./scripts/doctor.mjs",
+    "orbital-ds-init": "./scripts/init.mjs"
+  }
+}