@misael703/ui 1.16.0 → 1.18.0

package/dist/components/AppShell.d.mts

@@ -26,42 +26,87 @@ interface AppShellHeader {
     /** Right slot — notifications, user avatar, utilities. */
     right?: React.ReactNode;
 }
-interface AppShellProps {
-    brand?: React.ReactNode;
-    brandCollapsed?: React.ReactNode;
+/**
+ * Props shared by both layouts. The layout-specific props live in
+ * `AppShellSideProps` / `AppShellTopProps`; `AppShellProps` is the
+ * discriminated union of the two, keyed on `headerLayout`.
+ */
+interface AppShellBaseProps {
     sections: NavSection[];
-    topbar?: React.ReactNode;
     footer?: React.ReactNode;
-    user?: React.ReactNode;
     defaultCollapsed?: boolean;
     collapsed?: boolean;
     onCollapsedChange?: (c: boolean) => void;
     children: React.ReactNode;
     className?: string;
     /**
-     * Sidebar color theme:
+     * Color theme (applies to both layouts):
      * - `default` (light): claro, mejor para apps data-heavy de uso prolongado.
-     * - `brand`: sidebar azul de marca con texto blanco. Mayor brand recall.
+     * - `brand`: superficie azul de marca con texto blanco. Mayor brand recall.
+     *   En `side` tiñe el sidebar; en `top` tiñe header + sidebar (un solo knob).
      */
     theme?: AppShellTheme;
     /** Render-prop for navigation links so the host app can use Next.js Link, etc. */
     linkAs?: (item: NavItem, content: React.ReactNode, className: string) => React.ReactNode;
+}
+/**
+ * Sidebar layout (default, `headerLayout="side"` or omitted). The brand
+ * block + collapse rail live in the sidebar; the topbar sits over the
+ * content with a mobile hamburger. `header` is **not** valid here — that
+ * slot belongs to the `top` layout.
+ */
+interface AppShellSideProps extends AppShellBaseProps {
+    headerLayout?: 'side';
+    /** Brand node in the sidebar header (expanded state). */
+    brand?: React.ReactNode;
+    /** Brand node shown when the rail is collapsed. Falls back to `brand`. */
+    brandCollapsed?: React.ReactNode;
+    /** Content of the topbar over the page (search, etc.). */
+    topbar?: React.ReactNode;
+    /** User slot at the right of the topbar (avatar/menu). */
+    user?: React.ReactNode;
+    /** Not valid in the `side` layout — the header slots belong to `top`. */
+    header?: never;
+}
+/**
+ * Top-header layout (`headerLayout="top"`, v1.15.0). Full-width header
+ * above the body with three slots (`header.{left,center,right}`); the
+ * centre slot lands at the **true viewport centre** (1fr·auto·1fr grid).
+ * The sidebar has no brand block and `collapsed` hides it entirely (no
+ * 72px rail); the header is **invariant** to the collapse. `theme="brand"`
+ * tints both bands. The `side`-only props are **not** valid here — put your
+ * chrome in `header`.
+ */
+interface AppShellTopProps extends AppShellBaseProps {
+    headerLayout: 'top';
+    /** Slots for the full-width header. Brand usually goes in `center`. */
+    header?: AppShellHeader;
     /**
-     * Where the chrome lives. Default `'side'` is the legacy layout. `'top'`
-     * renders a full-width header above the body with three slots
-     * (`header.left/center/right`); the centre slot lands at the **true
-     * viewport centre** (1fr·auto·1fr column grid). The sidebar has no brand
-     * block (brand goes in `header.center`) and `collapsed` hides the
-     * sidebar entirely — no 72px rail. The topbar is **invariant** to the
-     * collapse (only the sidebar changes width). `theme="brand"` tints both
-     * header and sidebar with the same brand colour (single knob). `brand`,
-     * `brandCollapsed` and `topbar` are ignored when `'top'`.
+     * Theme of the **header band only**, independent of the sidebar (`theme`).
+     * Defaults to `theme`, so `theme="brand"` still tints both bands (no
+     * change for existing consumers). Set `theme="default" headerTheme="brand"`
+     * for a branded top bar over a neutral, legible sidebar — common in
+     * data-heavy admin apps.
      */
-    headerLayout?: AppShellHeaderLayout;
-    /** Slots for the top-layout header (only used when `headerLayout="top"`). */
-    header?: AppShellHeader;
+    headerTheme?: AppShellTheme;
+    /** Not valid in `top` — use `header.center` for the brand. */
+    brand?: never;
+    /** Not valid in `top` — the sidebar collapses entirely. */
+    brandCollapsed?: never;
+    /** Not valid in `top` — use the `header` slots. */
+    topbar?: never;
+    /** Not valid in `top` — use `header.right`. */
+    user?: never;
 }
-declare function AppShell({ brand, brandCollapsed, sections, topbar, footer, user, defaultCollapsed, collapsed: ctrlCollapsed, onCollapsedChange, children, className, theme, linkAs, headerLayout, header, }: AppShellProps): react_jsx_runtime.JSX.Element;
+/**
+ * Discriminated union keyed on `headerLayout`. TypeScript enforces that
+ * `header` is only accepted with `headerLayout="top"` and that
+ * `brand`/`brandCollapsed`/`topbar`/`user` are only accepted with the
+ * (default) `side` layout — passing the wrong prop for the layout is a
+ * compile error instead of being silently ignored at runtime.
+ */
+type AppShellProps = AppShellSideProps | AppShellTopProps;
+declare function AppShell(props: AppShellProps): react_jsx_runtime.JSX.Element;
 interface PageHeaderProps {
     title: React.ReactNode;
     description?: React.ReactNode;
@@ -75,4 +120,4 @@ interface PageHeaderProps {
 }
 declare function PageHeader({ title, description, breadcrumbs, actions, meta, className }: PageHeaderProps): react_jsx_runtime.JSX.Element;
 
-export { AppShell, type AppShellHeader, type AppShellHeaderLayout, type AppShellProps, type AppShellTheme, type NavItem, type NavSection, PageHeader, type PageHeaderProps };
+export { AppShell, type AppShellBaseProps, type AppShellHeader, type AppShellHeaderLayout, type AppShellProps, type AppShellSideProps, type AppShellTheme, type AppShellTopProps, type NavItem, type NavSection, PageHeader, type PageHeaderProps };

package/dist/components/AppShell.d.ts

@@ -26,42 +26,87 @@ interface AppShellHeader {
     /** Right slot — notifications, user avatar, utilities. */
     right?: React.ReactNode;
 }
-interface AppShellProps {
-    brand?: React.ReactNode;
-    brandCollapsed?: React.ReactNode;
+/**
+ * Props shared by both layouts. The layout-specific props live in
+ * `AppShellSideProps` / `AppShellTopProps`; `AppShellProps` is the
+ * discriminated union of the two, keyed on `headerLayout`.
+ */
+interface AppShellBaseProps {
     sections: NavSection[];
-    topbar?: React.ReactNode;
     footer?: React.ReactNode;
-    user?: React.ReactNode;
     defaultCollapsed?: boolean;
     collapsed?: boolean;
     onCollapsedChange?: (c: boolean) => void;
     children: React.ReactNode;
     className?: string;
     /**
-     * Sidebar color theme:
+     * Color theme (applies to both layouts):
      * - `default` (light): claro, mejor para apps data-heavy de uso prolongado.
-     * - `brand`: sidebar azul de marca con texto blanco. Mayor brand recall.
+     * - `brand`: superficie azul de marca con texto blanco. Mayor brand recall.
+     *   En `side` tiñe el sidebar; en `top` tiñe header + sidebar (un solo knob).
      */
     theme?: AppShellTheme;
     /** Render-prop for navigation links so the host app can use Next.js Link, etc. */
     linkAs?: (item: NavItem, content: React.ReactNode, className: string) => React.ReactNode;
+}
+/**
+ * Sidebar layout (default, `headerLayout="side"` or omitted). The brand
+ * block + collapse rail live in the sidebar; the topbar sits over the
+ * content with a mobile hamburger. `header` is **not** valid here — that
+ * slot belongs to the `top` layout.
+ */
+interface AppShellSideProps extends AppShellBaseProps {
+    headerLayout?: 'side';
+    /** Brand node in the sidebar header (expanded state). */
+    brand?: React.ReactNode;
+    /** Brand node shown when the rail is collapsed. Falls back to `brand`. */
+    brandCollapsed?: React.ReactNode;
+    /** Content of the topbar over the page (search, etc.). */
+    topbar?: React.ReactNode;
+    /** User slot at the right of the topbar (avatar/menu). */
+    user?: React.ReactNode;
+    /** Not valid in the `side` layout — the header slots belong to `top`. */
+    header?: never;
+}
+/**
+ * Top-header layout (`headerLayout="top"`, v1.15.0). Full-width header
+ * above the body with three slots (`header.{left,center,right}`); the
+ * centre slot lands at the **true viewport centre** (1fr·auto·1fr grid).
+ * The sidebar has no brand block and `collapsed` hides it entirely (no
+ * 72px rail); the header is **invariant** to the collapse. `theme="brand"`
+ * tints both bands. The `side`-only props are **not** valid here — put your
+ * chrome in `header`.
+ */
+interface AppShellTopProps extends AppShellBaseProps {
+    headerLayout: 'top';
+    /** Slots for the full-width header. Brand usually goes in `center`. */
+    header?: AppShellHeader;
     /**
-     * Where the chrome lives. Default `'side'` is the legacy layout. `'top'`
-     * renders a full-width header above the body with three slots
-     * (`header.left/center/right`); the centre slot lands at the **true
-     * viewport centre** (1fr·auto·1fr column grid). The sidebar has no brand
-     * block (brand goes in `header.center`) and `collapsed` hides the
-     * sidebar entirely — no 72px rail. The topbar is **invariant** to the
-     * collapse (only the sidebar changes width). `theme="brand"` tints both
-     * header and sidebar with the same brand colour (single knob). `brand`,
-     * `brandCollapsed` and `topbar` are ignored when `'top'`.
+     * Theme of the **header band only**, independent of the sidebar (`theme`).
+     * Defaults to `theme`, so `theme="brand"` still tints both bands (no
+     * change for existing consumers). Set `theme="default" headerTheme="brand"`
+     * for a branded top bar over a neutral, legible sidebar — common in
+     * data-heavy admin apps.
      */
-    headerLayout?: AppShellHeaderLayout;
-    /** Slots for the top-layout header (only used when `headerLayout="top"`). */
-    header?: AppShellHeader;
+    headerTheme?: AppShellTheme;
+    /** Not valid in `top` — use `header.center` for the brand. */
+    brand?: never;
+    /** Not valid in `top` — the sidebar collapses entirely. */
+    brandCollapsed?: never;
+    /** Not valid in `top` — use the `header` slots. */
+    topbar?: never;
+    /** Not valid in `top` — use `header.right`. */
+    user?: never;
 }
-declare function AppShell({ brand, brandCollapsed, sections, topbar, footer, user, defaultCollapsed, collapsed: ctrlCollapsed, onCollapsedChange, children, className, theme, linkAs, headerLayout, header, }: AppShellProps): react_jsx_runtime.JSX.Element;
+/**
+ * Discriminated union keyed on `headerLayout`. TypeScript enforces that
+ * `header` is only accepted with `headerLayout="top"` and that
+ * `brand`/`brandCollapsed`/`topbar`/`user` are only accepted with the
+ * (default) `side` layout — passing the wrong prop for the layout is a
+ * compile error instead of being silently ignored at runtime.
+ */
+type AppShellProps = AppShellSideProps | AppShellTopProps;
+declare function AppShell(props: AppShellProps): react_jsx_runtime.JSX.Element;
 interface PageHeaderProps {
     title: React.ReactNode;
     description?: React.ReactNode;
@@ -75,4 +120,4 @@ interface PageHeaderProps {
 }
 declare function PageHeader({ title, description, breadcrumbs, actions, meta, className }: PageHeaderProps): react_jsx_runtime.JSX.Element;
 
-export { AppShell, type AppShellHeader, type AppShellHeaderLayout, type AppShellProps, type AppShellTheme, type NavItem, type NavSection, PageHeader, type PageHeaderProps };
+export { AppShell, type AppShellBaseProps, type AppShellHeader, type AppShellHeaderLayout, type AppShellProps, type AppShellSideProps, type AppShellTheme, type AppShellTopProps, type NavItem, type NavSection, PageHeader, type PageHeaderProps };

package/dist/components/AppShell.js

@@ -1,7 +1,7 @@
 'use client';
 'use strict';
 
-var chunk7LCZ6ABE_js = require('../chunk-7LCZ6ABE.js');
+var chunkSZWROXKE_js = require('../chunk-SZWROXKE.js');
 require('../chunk-4VMQLSHV.js');
 require('../chunk-RQOTH7I7.js');
 require('../chunk-PASF6T4H.js');
@@ -10,11 +10,11 @@ require('../chunk-PASF6T4H.js');
 
 Object.defineProperty(exports, "AppShell", {
   enumerable: true,
-  get: function () { return chunk7LCZ6ABE_js.AppShell; }
+  get: function () { return chunkSZWROXKE_js.AppShell; }
 });
 Object.defineProperty(exports, "PageHeader", {
   enumerable: true,
-  get: function () { return chunk7LCZ6ABE_js.PageHeader; }
+  get: function () { return chunkSZWROXKE_js.PageHeader; }
 });
 //# sourceMappingURL=AppShell.js.map
 //# sourceMappingURL=AppShell.js.map

package/dist/components/AppShell.mjs

@@ -1,5 +1,5 @@
 'use client';
-export { AppShell, PageHeader } from '../chunk-Y6AYAE4O.mjs';
+export { AppShell, PageHeader } from '../chunk-E462CF6P.mjs';
 import '../chunk-PQV7HHCJ.mjs';
 import '../chunk-CIBJKJV3.mjs';
 import '../chunk-IEPCH3JB.mjs';

package/dist/components/Display.d.mts

@@ -2,7 +2,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { Extensible } from '../utils/types.mjs';
 
-type CardAccent = 'brand' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+type CategoryAccent = 'cat-1' | 'cat-2' | 'cat-3' | 'cat-4' | 'cat-5' | 'cat-6';
+type CardAccent = 'brand' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | CategoryAccent;
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     interactive?: boolean;
     accent?: Extensible<CardAccent>;
@@ -17,7 +18,7 @@ declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttribu
 declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const CardBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-type BadgeVariant = 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+type BadgeVariant = 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | CategoryAccent;
 interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     variant?: Extensible<BadgeVariant>;
     dot?: boolean;
@@ -84,4 +85,4 @@ interface ProductCardProps extends React.HTMLAttributes<HTMLElement> {
 }
 declare function ProductCard({ sku, name, price, image, imageAlt, tag, footer, className, ...rest }: ProductCardProps): react_jsx_runtime.JSX.Element;
 
-export { Alert, type AlertProps, type AlertVariant, Badge, type BadgeProps, type BadgeVariant, Card, type CardAccent, CardBody, CardFooter, CardHeader, type CardProps, Chip, ChipGroup, type ChipProps, ProductCard, type ProductCardProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps };
+export { Alert, type AlertProps, type AlertVariant, Badge, type BadgeProps, type BadgeVariant, Card, type CardAccent, CardBody, CardFooter, CardHeader, type CardProps, type CategoryAccent, Chip, ChipGroup, type ChipProps, ProductCard, type ProductCardProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps };

package/dist/components/Display.d.ts

@@ -2,7 +2,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { Extensible } from '../utils/types.js';
 
-type CardAccent = 'brand' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+type CategoryAccent = 'cat-1' | 'cat-2' | 'cat-3' | 'cat-4' | 'cat-5' | 'cat-6';
+type CardAccent = 'brand' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | CategoryAccent;
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     interactive?: boolean;
     accent?: Extensible<CardAccent>;
@@ -17,7 +18,7 @@ declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttribu
 declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const CardBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-type BadgeVariant = 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+type BadgeVariant = 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | CategoryAccent;
 interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     variant?: Extensible<BadgeVariant>;
     dot?: boolean;
@@ -84,4 +85,4 @@ interface ProductCardProps extends React.HTMLAttributes<HTMLElement> {
 }
 declare function ProductCard({ sku, name, price, image, imageAlt, tag, footer, className, ...rest }: ProductCardProps): react_jsx_runtime.JSX.Element;
 
-export { Alert, type AlertProps, type AlertVariant, Badge, type BadgeProps, type BadgeVariant, Card, type CardAccent, CardBody, CardFooter, CardHeader, type CardProps, Chip, ChipGroup, type ChipProps, ProductCard, type ProductCardProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps };
+export { Alert, type AlertProps, type AlertVariant, Badge, type BadgeProps, type BadgeVariant, Card, type CardAccent, CardBody, CardFooter, CardHeader, type CardProps, type CategoryAccent, Chip, ChipGroup, type ChipProps, ProductCard, type ProductCardProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps };

package/dist/components/Display.js

@@ -1,7 +1,7 @@
 'use client';
 'use strict';
 
-var chunkOXX5RSZQ_js = require('../chunk-OXX5RSZQ.js');
+var chunkIZELILHK_js = require('../chunk-IZELILHK.js');
 require('../chunk-4VMQLSHV.js');
 require('../chunk-EUB4PHPI.js');
 require('../chunk-RQOTH7I7.js');
@@ -11,47 +11,47 @@ require('../chunk-PASF6T4H.js');
 
 Object.defineProperty(exports, "Alert", {
   enumerable: true,
-  get: function () { return chunkOXX5RSZQ_js.Alert; }
+  get: function () { return chunkIZELILHK_js.Alert; }
 });
 Object.defineProperty(exports, "Badge", {
   enumerable: true,
-  get: function () { return chunkOXX5RSZQ_js.Badge; }
+  get: function () { return chunkIZELILHK_js.Badge; }
 });
 Object.defineProperty(exports, "Card", {
   enumerable: true,
-  get: function () { return chunkOXX5RSZQ_js.Card; }
+  get: function () { return chunkIZELILHK_js.Card; }
 });
 Object.defineProperty(exports, "CardBody", {
   enumerable: true,
-  get: function () { return chunkOXX5RSZQ_js.CardBody; }
+  get: function () { return chunkIZELILHK_js.CardBody; }
 });
 Object.defineProperty(exports, "CardFooter", {
   enumerable: true,
-  get: function () { return chunkOXX5RSZQ_js.CardFooter; }
+  get: function () { return chunkIZELILHK_js.CardFooter; }
 });
 Object.defineProperty(exports, "CardHeader", {
   enumerable: true,
-  get: function () { return chunkOXX5RSZQ_js.CardHeader; }
+  get: function () { return chunkIZELILHK_js.CardHeader; }
 });
 Object.defineProperty(exports, "Chip", {
   enumerable: true,
-  get: function () { return chunkOXX5RSZQ_js.Chip; }
+  get: function () { return chunkIZELILHK_js.Chip; }
 });
 Object.defineProperty(exports, "ChipGroup", {
   enumerable: true,
-  get: function () { return chunkOXX5RSZQ_js.ChipGroup; }
+  get: function () { return chunkIZELILHK_js.ChipGroup; }
 });
 Object.defineProperty(exports, "ProductCard", {
   enumerable: true,
-  get: function () { return chunkOXX5RSZQ_js.ProductCard; }
+  get: function () { return chunkIZELILHK_js.ProductCard; }
 });
 Object.defineProperty(exports, "Skeleton", {
   enumerable: true,
-  get: function () { return chunkOXX5RSZQ_js.Skeleton; }
+  get: function () { return chunkIZELILHK_js.Skeleton; }
 });
 Object.defineProperty(exports, "Spinner", {
   enumerable: true,
-  get: function () { return chunkOXX5RSZQ_js.Spinner; }
+  get: function () { return chunkIZELILHK_js.Spinner; }
 });
 //# sourceMappingURL=Display.js.map
 //# sourceMappingURL=Display.js.map

package/dist/components/Display.mjs

@@ -1,5 +1,5 @@
 'use client';
-export { Alert, Badge, Card, CardBody, CardFooter, CardHeader, Chip, ChipGroup, ProductCard, Skeleton, Spinner } from '../chunk-BBZESXFJ.mjs';
+export { Alert, Badge, Card, CardBody, CardFooter, CardHeader, Chip, ChipGroup, ProductCard, Skeleton, Spinner } from '../chunk-2I7NE7QR.mjs';
 import '../chunk-PQV7HHCJ.mjs';
 import '../chunk-IEPKSPBX.mjs';
 import '../chunk-CIBJKJV3.mjs';

package/dist/components/Display3.js

@@ -1,9 +1,9 @@
 'use client';
 'use strict';
 
-var chunkZMRN4DMC_js = require('../chunk-ZMRN4DMC.js');
+var chunkXCZVZVYJ_js = require('../chunk-XCZVZVYJ.js');
 require('../chunk-56NJXIH7.js');
-require('../chunk-HHEYTMBY.js');
+require('../chunk-MVJITG75.js');
 require('../chunk-XMLBKK7X.js');
 require('../chunk-7I5LFBQR.js');
 require('../chunk-WAGWB35Q.js');
@@ -16,27 +16,27 @@ require('../chunk-PASF6T4H.js');
 
 Object.defineProperty(exports, "Calendar", {
   enumerable: true,
-  get: function () { return chunkZMRN4DMC_js.Calendar; }
+  get: function () { return chunkXCZVZVYJ_js.Calendar; }
 });
 Object.defineProperty(exports, "StatusIndicator", {
   enumerable: true,
-  get: function () { return chunkZMRN4DMC_js.StatusIndicator; }
+  get: function () { return chunkXCZVZVYJ_js.StatusIndicator; }
 });
 Object.defineProperty(exports, "Timeline", {
   enumerable: true,
-  get: function () { return chunkZMRN4DMC_js.Timeline; }
+  get: function () { return chunkXCZVZVYJ_js.Timeline; }
 });
 Object.defineProperty(exports, "TimelineItem", {
   enumerable: true,
-  get: function () { return chunkZMRN4DMC_js.TimelineItem; }
+  get: function () { return chunkXCZVZVYJ_js.TimelineItem; }
 });
 Object.defineProperty(exports, "Tree", {
   enumerable: true,
-  get: function () { return chunkZMRN4DMC_js.Tree; }
+  get: function () { return chunkXCZVZVYJ_js.Tree; }
 });
 Object.defineProperty(exports, "UserCell", {
   enumerable: true,
-  get: function () { return chunkZMRN4DMC_js.UserCell; }
+  get: function () { return chunkXCZVZVYJ_js.UserCell; }
 });
 //# sourceMappingURL=Display3.js.map
 //# sourceMappingURL=Display3.js.map

package/dist/components/Display3.mjs

@@ -1,7 +1,7 @@
 'use client';
-export { Calendar, StatusIndicator, Timeline, TimelineItem, Tree, UserCell } from '../chunk-YL2IWHUZ.mjs';
+export { Calendar, StatusIndicator, Timeline, TimelineItem, Tree, UserCell } from '../chunk-PKCLA2FD.mjs';
 import '../chunk-OJNEGJ3P.mjs';
-import '../chunk-N5D6AC6M.mjs';
+import '../chunk-4QHE5H36.mjs';
 import '../chunk-6P2TKRTL.mjs';
 import '../chunk-PRML6VEF.mjs';
 import '../chunk-FKBQYQQD.mjs';

package/dist/components/Layout.d.mts

@@ -56,12 +56,42 @@ interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
     size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
 }
 declare function Container({ size, className, style, ...rest }: ContainerProps): react_jsx_runtime.JSX.Element;
+/**
+ * Column count. A number/string is fixed; an object is responsive per
+ * breakpoint (each breakpoint inherits the previous one if omitted).
+ * Breakpoints match the kit tokens: sm 480 · md 768 · lg 1024 · xl 1280.
+ */
+type ResponsiveColumns = number | string | {
+    base?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+};
 interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
-    columns?: number | string;
+    columns?: ResponsiveColumns;
     gap?: SpaceToken;
+    /** Intrinsically responsive auto-fit columns; takes precedence over `columns`. */
     minColWidth?: number | string;
 }
 declare function Grid({ columns, gap, minColWidth, className, style, ...rest }: GridProps): react_jsx_runtime.JSX.Element;
+/**
+ * Horizontal group that wraps — the "cluster" layout primitive (Braid /
+ * Every Layout). Sugar for `<Stack direction="row" wrap>`. Use for tag
+ * lists, button rows, filter chips: items flow and wrap, gap stays even.
+ */
+declare const Cluster: React.ForwardRefExoticComponent<Omit<StackProps, "wrap" | "direction"> & React.RefAttributes<HTMLDivElement>>;
+interface SpacerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Fixed size on a space token. Omit for a flexible spacer (`flex: 1`). */
+    size?: SpaceToken;
+}
+/**
+ * Spacing element. With `size`, a fixed gap on the space scale. Without it,
+ * a flexible spacer that eats remaining space in a flex container (pushes
+ * siblings apart) — e.g. a toolbar with left items + `<Spacer />` + right
+ * items.
+ */
+declare function Spacer({ size, style, ...rest }: SpacerProps): react_jsx_runtime.JSX.Element;
 interface KeyValueProps extends React.HTMLAttributes<HTMLDListElement> {
     /** Override del ancho de la columna de keys (default 200px) */
     keyWidth?: number | string;
@@ -87,4 +117,4 @@ interface StepperProps {
 }
 declare function Stepper({ steps, current, className }: StepperProps): react_jsx_runtime.JSX.Element;
 
-export { Container, type ContainerProps, Divider, type DividerProps, Grid, type GridProps, HStack, KeyValue, type KeyValueProps, KeyValueRow, type KeyValueRowProps, ListGroup, ListGroupItem, type ListGroupItemProps, Stack, type StackProps, Stepper, type StepperProps, Tab, TabList, TabPanel, type TabProps, Table, Tabs, type TabsProps, Tooltip, type TooltipProps, VStack };
+export { Cluster, Container, type ContainerProps, Divider, type DividerProps, Grid, type GridProps, HStack, KeyValue, type KeyValueProps, KeyValueRow, type KeyValueRowProps, ListGroup, ListGroupItem, type ListGroupItemProps, type ResponsiveColumns, Spacer, type SpacerProps, Stack, type StackProps, Stepper, type StepperProps, Tab, TabList, TabPanel, type TabProps, Table, Tabs, type TabsProps, Tooltip, type TooltipProps, VStack };

package/dist/components/Layout.d.ts

@@ -56,12 +56,42 @@ interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
     size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
 }
 declare function Container({ size, className, style, ...rest }: ContainerProps): react_jsx_runtime.JSX.Element;
+/**
+ * Column count. A number/string is fixed; an object is responsive per
+ * breakpoint (each breakpoint inherits the previous one if omitted).
+ * Breakpoints match the kit tokens: sm 480 · md 768 · lg 1024 · xl 1280.
+ */
+type ResponsiveColumns = number | string | {
+    base?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+};
 interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
-    columns?: number | string;
+    columns?: ResponsiveColumns;
     gap?: SpaceToken;
+    /** Intrinsically responsive auto-fit columns; takes precedence over `columns`. */
     minColWidth?: number | string;
 }
 declare function Grid({ columns, gap, minColWidth, className, style, ...rest }: GridProps): react_jsx_runtime.JSX.Element;
+/**
+ * Horizontal group that wraps — the "cluster" layout primitive (Braid /
+ * Every Layout). Sugar for `<Stack direction="row" wrap>`. Use for tag
+ * lists, button rows, filter chips: items flow and wrap, gap stays even.
+ */
+declare const Cluster: React.ForwardRefExoticComponent<Omit<StackProps, "wrap" | "direction"> & React.RefAttributes<HTMLDivElement>>;
+interface SpacerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Fixed size on a space token. Omit for a flexible spacer (`flex: 1`). */
+    size?: SpaceToken;
+}
+/**
+ * Spacing element. With `size`, a fixed gap on the space scale. Without it,
+ * a flexible spacer that eats remaining space in a flex container (pushes
+ * siblings apart) — e.g. a toolbar with left items + `<Spacer />` + right
+ * items.
+ */
+declare function Spacer({ size, style, ...rest }: SpacerProps): react_jsx_runtime.JSX.Element;
 interface KeyValueProps extends React.HTMLAttributes<HTMLDListElement> {
     /** Override del ancho de la columna de keys (default 200px) */
     keyWidth?: number | string;
@@ -87,4 +117,4 @@ interface StepperProps {
 }
 declare function Stepper({ steps, current, className }: StepperProps): react_jsx_runtime.JSX.Element;
 
-export { Container, type ContainerProps, Divider, type DividerProps, Grid, type GridProps, HStack, KeyValue, type KeyValueProps, KeyValueRow, type KeyValueRowProps, ListGroup, ListGroupItem, type ListGroupItemProps, Stack, type StackProps, Stepper, type StepperProps, Tab, TabList, TabPanel, type TabProps, Table, Tabs, type TabsProps, Tooltip, type TooltipProps, VStack };
+export { Cluster, Container, type ContainerProps, Divider, type DividerProps, Grid, type GridProps, HStack, KeyValue, type KeyValueProps, KeyValueRow, type KeyValueRowProps, ListGroup, ListGroupItem, type ListGroupItemProps, type ResponsiveColumns, Spacer, type SpacerProps, Stack, type StackProps, Stepper, type StepperProps, Tab, TabList, TabPanel, type TabProps, Table, Tabs, type TabsProps, Tooltip, type TooltipProps, VStack };