@dashforge/tw 0.11.0-beta → 1.1.0

package/dist/src/components/Box/box.types.d.ts

@@ -1,4 +1,6 @@
 import type { ElementType, HTMLAttributes } from 'react';
+import type { Engine } from '@dashforge/ui-core';
+import type { AccessRequirement } from '@dashforge/rbac';
 import type { BoxVariants } from './box.variants.js';
 /**
  * Props for `<Box>` — the surface primitive.
@@ -50,5 +52,56 @@ export interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'classNam
      * position, animation, etc.).
      */
     sx?: string;
+    /**
+     * Reactive visibility predicate — added in 1.1.0 (Sprint 4.4
+     * surface alignment). When the predicate returns `false`, the
+     * component renders `null`. Inside a `<DashForm>` it subscribes
+     * reactively to engine state changes; outside a form, it's
+     * evaluated as a plain closure.
+     *
+     * Use for state-driven hiding of dashboard cards, conditional
+     * sections, gated content, etc. **For permission-driven hiding,
+     * prefer `access` with `onUnauthorized: 'hide'`** — it's semantically
+     * the correct path and surfaces better in RBAC dev tools.
+     *
+     * @example
+     * ```tsx
+     * // Dashboard card visible only when there are pending shipments
+     * <Box variant="outlined" rounded="lg" p={4}
+     *   visibleWhen={() => pendingCount > 0}>
+     *   <Typography variant="h3">{pendingCount} pending</Typography>
+     * </Box>
+     * ```
+     */
+    visibleWhen?: (engine: Engine) => boolean;
+    /**
+     * RBAC requirement — added in 1.1.0 (Sprint 4.4 surface alignment).
+     * Controls Box visibility / disabled-state via the centralized
+     * `@dashforge/rbac` policy engine.
+     *
+     * - `onUnauthorized: 'hide'`     → Box does not render
+     * - `onUnauthorized: 'disable'`  → adds `aria-disabled` + dimmed
+     *   visual; interactive children should derive their disabled state
+     *   from `data-disabled` on the Box or pass their own `access`
+     * - `onUnauthorized: 'readonly'` → adds `aria-readonly`; mostly used
+     *   when Box wraps form sections that propagate readonly to children
+     *
+     * Use for permission-gated dashboard cards, admin-only sections,
+     * tenant-aware layouts. The hide path is the common case.
+     *
+     * @example
+     * ```tsx
+     * // Revenue card visible only to users with billing:read permission
+     * <Box variant="elevated" rounded="lg" elevation={2} p={4}
+     *   access={{
+     *     resource: 'billing',
+     *     action: 'read',
+     *     onUnauthorized: 'hide'
+     *   }}>
+     *   <Typography variant="h3">Q3 Revenue</Typography>
+     * </Box>
+     * ```
+     */
+    access?: AccessRequirement;
 }
 //# sourceMappingURL=box.types.d.ts.map

package/dist/src/components/Box/box.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"box.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/box.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,EAC3D,IAAI,CAAC,WAAW,EACd,SAAS,GAAG,OAAO,GAAG,WAAW,GAAG,SAAS,GAC3C,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GACrC,WAAW,GAAG,YAAY,CAAC;IACvC;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb"}
+{"version":3,"file":"box.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/box.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,EAC3D,IAAI,CAAC,WAAW,EACd,SAAS,GAAG,OAAO,GAAG,WAAW,GAAG,SAAS,GAC3C,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GACrC,WAAW,GAAG,YAAY,CAAC;IACvC;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;IAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B"}

package/dist/src/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AA8BrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,MAAM,2GAyEjB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAarD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,MAAM,2GAwFjB,CAAC"}

package/dist/src/components/Button/button.types.d.ts

@@ -1,4 +1,5 @@
 import type { ButtonHTMLAttributes } from 'react';
+import type { Engine } from '@dashforge/ui-core';
 import type { AccessRequirement } from '@dashforge/rbac';
 import type { ButtonVariants } from './button.variants.js';
 /**
@@ -37,6 +38,40 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
      * Combines with `disabled` and `loading` props via OR logic.
      */
     access?: AccessRequirement;
+    /**
+     * Reactive visibility predicate. Re-evaluated on every engine state
+     * change when the button is mounted inside a `<DashForm>`; outside
+     * a form, evaluated as a plain predicate (the consumer captures
+     * any external state in the closure).
+     *
+     * When the predicate returns `false`, the component renders `null`.
+     *
+     * **Added in 1.1.0 (Sprint 4.4 alignment)** — extends the
+     * engine-reactive visibility pattern previously available only on
+     * form fields + `<Alert>` to every interactive component in the
+     * Dashforge TW catalog (Button, IconButton, Chip, …).
+     *
+     * Note: `visibleWhen` is for **state-driven** hide. For
+     * **permission-driven** hide, use `access` with
+     * `onUnauthorized: 'hide'` — it's the semantically correct path
+     * and provides better error messages in RBAC dev tools.
+     *
+     * @example
+     * ```tsx
+     * // Inside a DashForm — reactive on engine state
+     * <Button
+     *   visibleWhen={(engine) =>
+     *     engine.getNode('plan')?.value === 'premium'
+     *   }
+     * >
+     *   Upgrade extras
+     * </Button>
+     *
+     * // Outside a form — closure over external React state
+     * <Button visibleWhen={() => itemCount > 0}>Bulk delete</Button>
+     * ```
+     */
+    visibleWhen?: (engine: Engine) => boolean;
     /**
      * When `true`, the immediate child element is rendered with the
      * Button's classes merged in (via `@radix-ui/react-slot`). The

package/dist/src/components/Button/button.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,WAAW,WAKf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,EAC1E,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;IAC9E;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAE3B;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb"}
+{"version":3,"file":"button.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,WAAW,WAKf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,EAC1E,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;IAC9E;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAE3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgCG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;IAE1C;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb"}

package/dist/src/components/Card/Card.d.ts

@@ -0,0 +1,107 @@
+import type { CardActionAreaProps, CardContentProps, CardProps } from './card.types.js';
+/**
+ * `<Card>` — opinionated surface preset over `<Box>`.
+ *
+ * Thin alias that pre-fills card-shaped Box defaults (`outlined`,
+ * `rounded='lg'`, `elevation=1`, no padding). Reads as `<Card>` in
+ * consumer code while reusing every Box affordance: surface variants,
+ * 7 intent colors, spacing scale, polymorphism, and the bridge
+ * integration (`access` + `visibleWhen`) retrofitted to Box in 1.1.0.
+ *
+ * Restricted variant axis: only `'outlined' | 'elevated' | 'plain'`.
+ * `'soft'` and `'solid'` are deliberately excluded — they belong to
+ * Box (as `<Alert>`-shaped callouts) and to banners, not to cards.
+ *
+ * @example
+ * ```tsx
+ * // Most common — outlined card with content padding via CardContent
+ * <Card>
+ *   <CardContent>
+ *     <Typography variant="h3">Title</Typography>
+ *     <Typography variant="body">Body</Typography>
+ *   </CardContent>
+ * </Card>
+ *
+ * // Elevated, clickable, gated by RBAC (inherits access from Box)
+ * <Card
+ *   variant="elevated"
+ *   elevation={2}
+ *   access={{ resource: 'billing', action: 'read', onUnauthorized: 'hide' }}
+ * >
+ *   <CardActionArea onClick={openBilling}>
+ *     <CardContent>
+ *       <Typography variant="h3">Revenue</Typography>
+ *     </CardContent>
+ *   </CardActionArea>
+ * </Card>
+ * ```
+ */
+export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLElement>>;
+/**
+ * `<CardContent>` — padded inner section of a Card.
+ *
+ * Semantic alias for an inner `<Box p={4}>`. The default padding step
+ * (4) maps to `--df-tw-spacing-4` (1rem) via the dashforgePreset,
+ * matching common card-content paddings across MUI / shadcn / Chakra.
+ * Override `p` to dial up/down per the spacing token scale.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <CardContent p={6}>  {/* bigger inner padding *}/}
+ *     <Typography variant="h3">Spacious card</Typography>
+ *   </CardContent>
+ * </Card>
+ * ```
+ */
+export declare function CardContent({ p, children, className, sx, }: CardContentProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CardContent {
+    var displayName: string;
+}
+/**
+ * `<CardActionArea>` — clickable wrapper for Card content.
+ *
+ * Adds focus ring + hover tint + Radix Slot polymorphism. Renders as
+ * `<button type="button">` by default, or as the immediate child via
+ * `asChild` (typical pattern: wrap a router `<Link>`).
+ *
+ * Bridge integration is local — CardActionArea is an action trigger
+ * (not a surface), so it carries `access` + `visibleWhen` directly
+ * (rather than relying on the wrapping Card's props). This lets the
+ * consumer differentiate "the card is visible but not clickable" from
+ * "the card is not visible at all".
+ *
+ * @example
+ * ```tsx
+ * // Card-as-CTA
+ * <Card>
+ *   <CardActionArea onClick={navigate}>
+ *     <CardContent>
+ *       <Typography variant="h3">Open dashboard</Typography>
+ *       <Typography variant="body">Hover to see the focus ring.</Typography>
+ *     </CardContent>
+ *   </CardActionArea>
+ * </Card>
+ *
+ * // Polymorphic — wrap a router Link
+ * <Card>
+ *   <CardActionArea asChild>
+ *     <Link to="/billing">
+ *       <CardContent>
+ *         <Typography variant="h3">Billing</Typography>
+ *       </CardContent>
+ *     </Link>
+ *   </CardActionArea>
+ * </Card>
+ *
+ * // Selectable card (filter / option pattern)
+ * <CardActionArea
+ *   selected={selected === 'monthly'}
+ *   onClick={() => setSelected('monthly')}
+ * >
+ *   <CardContent>Monthly plan</CardContent>
+ * </CardActionArea>
+ * ```
+ */
+export declare const CardActionArea: import("react").ForwardRefExoticComponent<CardActionAreaProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=Card.d.ts.map

package/dist/src/components/Card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,mBAAmB,EACnB,gBAAgB,EAChB,SAAS,EACV,MAAM,iBAAiB,CAAC;AAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,IAAI,mGAyBf,CAAC;AAIH;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,CAAK,EACL,QAAQ,EACR,SAAS,EACT,EAAE,GACH,EAAE,gBAAgB,2CAMlB;yBAXe,WAAW;;;AAe3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,cAAc,mHAmF1B,CAAC"}

package/dist/src/components/Card/card.types.d.ts

@@ -0,0 +1,119 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { ClassValue } from 'tailwind-variants';
+import type { Engine } from '@dashforge/ui-core';
+import type { AccessRequirement } from '@dashforge/rbac';
+import type { BoxProps } from '../Box/box.types.js';
+/**
+ * `<Card>` — opinionated surface preset over `<Box>`.
+ *
+ * Architectural note: `<Box>` already implements the full surface
+ * vocabulary (variant × color, elevation, rounded, spacing). `<Card>`
+ * exists for **two reasons** on top of Box:
+ *
+ *   1. **MUI mental model** — devs migrating from `@mui/material/Card`
+ *      reach for `<Card>` reflexively. Having the component (as a
+ *      thin Box alias with card-shaped defaults) removes adoption
+ *      friction without duplicating the surface system.
+ *   2. **Restricted variant axis** — Card excludes `'soft'` and
+ *      `'solid'` from Box's 5 variants. A "solid card" is semantically
+ *      a banner; a "soft card" is a callout (use `<Alert>`). Restricting
+ *      to `'outlined' | 'elevated' | 'plain'` is opinionated typing
+ *      that catches misuse at compile time.
+ *
+ * Card inherits `access` + `visibleWhen` from Box (Sprint 4.4 surface
+ * alignment) automatically — no per-component wiring needed.
+ *
+ * Defaults set by Card (override at the call site):
+ *   - `variant='outlined'`  → soft border + bg tint (most card-like)
+ *   - `rounded='lg'`        → 8px radius
+ *   - `elevation={1}`       → faint shadow for visual weight
+ *   - `p={0}`               → no inner padding (use `<CardContent>`)
+ */
+export interface CardProps extends Omit<BoxProps, 'variant'> {
+    /**
+     * Restricted variant — only the three card-appropriate Box variants.
+     * - `'outlined'` (default) — bordered surface with subtle tint.
+     * - `'elevated'` — surface with shadow, no border.
+     * - `'plain'` — bare surface (background + radius), no border, no
+     *   shadow. Use when wrapping content that already provides chrome.
+     *
+     * @default 'outlined'
+     */
+    variant?: 'outlined' | 'elevated' | 'plain';
+}
+/**
+ * `<CardContent>` — padded inner section of a Card.
+ *
+ * A semantic alias for `<Box p={4}>` (or the equivalent spacing
+ * step). Reads better in starter-kit code than the equivalent Box
+ * call — the consumer expresses "this is the content area of the
+ * card" rather than "this is a box with padding-4 inside a card".
+ *
+ * No surface props — CardContent inherits its background from the
+ * parent Card. The only configurable axis is the padding step.
+ */
+export interface CardContentProps {
+    /**
+     * Inner padding token step (same scale as `<Box p>`).
+     * @default 4
+     */
+    p?: BoxProps['p'];
+    /** Content of the section. */
+    children: ReactNode;
+    /** Standard React `className` — appended to the root via `cn()`. */
+    className?: string;
+    /** Root-element class shortcut (string or clsx-compatible value). */
+    sx?: ClassValue;
+}
+/**
+ * `<CardActionArea>` — clickable wrapper inside (or around) a Card.
+ *
+ * The single value-add over a raw `<Box>` wrapper: focus ring +
+ * hover state + Radix Slot polymorphism so the wrapper can become a
+ * router `<Link>` without nesting `<a>` inside `<button>` (a11y
+ * violation).
+ *
+ * Use cases:
+ *   - "Card-as-CTA" patterns where the whole card surface should be
+ *     clickable (e.g. "Open dashboard" tile)
+ *   - Card-shaped router links in dashboards / navigation grids
+ *   - Selectable cards in galleries (with `selected` + `onClick`)
+ *
+ * Always renders as `<button>` (or the asChild element) — focusable,
+ * keyboard-accessible by default. `aria-pressed` when `selected=true`
+ * for the toggle pattern (filter card / option card).
+ */
+export interface CardActionAreaProps extends Omit<ComponentPropsWithoutRef<'button'>, 'className' | 'color'> {
+    /** The card body / content to wrap. */
+    children: ReactNode;
+    /**
+     * Render-as-child via Radix Slot. The CardActionArea styles paint
+     * onto the immediate child element (typically a router `<Link>`).
+     * No `<button>` DOM emitted.
+     */
+    asChild?: boolean;
+    /**
+     * Selected state — for toggle / option-card patterns. Adds
+     * `aria-pressed="true"` and a primary-toned focus ring even when
+     * not focused.
+     */
+    selected?: boolean;
+    /**
+     * RBAC requirement — controls clickability via the centralized
+     * `@dashforge/rbac` policy engine.
+     *   - `onUnauthorized: 'hide'`     → action area does not render
+     *   - `onUnauthorized: 'disable'`  → clicks suppressed + dimmed
+     *   - `onUnauthorized: 'readonly'` → mapped to disabled
+     */
+    access?: AccessRequirement;
+    /**
+     * Engine-reactive visibility predicate — Sprint 4.4 alignment.
+     * When the predicate returns `false`, the action area renders `null`.
+     */
+    visibleWhen?: (engine: Engine) => boolean;
+    /** Root-element class shortcut. */
+    sx?: ClassValue;
+    /** Standard React className — appended via `cn()`. */
+    className?: string;
+}
+//# sourceMappingURL=card.types.d.ts.map

package/dist/src/components/Card/card.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/card.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;IACjC;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;CAC7C;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAElB,8BAA8B;IAC9B,QAAQ,EAAE,SAAS,CAAC;IAEpB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qEAAqE;IACrE,EAAE,CAAC,EAAE,UAAU,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IACvE,uCAAuC;IACvC,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAE3B;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;IAE1C,mCAAmC;IACnC,EAAE,CAAC,EAAE,UAAU,CAAC;IAEhB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/src/components/Chip/Chip.d.ts

@@ -0,0 +1,67 @@
+import type { ChipProps } from './chip.types.js';
+/**
+ * Dashforge TW Chip — status / filter / tag pill.
+ *
+ * Promoted from the internal `Table/cells/RenderChip` (Sprint 4.4):
+ * preserves the 3 × 7 variant × color matrix byte-identical and adds
+ * the public API (label, icon, avatar, clickable, onClick, onDelete,
+ * selected, access).
+ *
+ * **Rendering modes** (chosen at runtime from props):
+ *   - **Static** (default) → `<span>`. Pure display.
+ *   - **Clickable** (`clickable` true OR `onClick` provided) →
+ *     `<button type="button">` with focus ring + hover state.
+ *   - **Deletable** (`onDelete` provided) → root + trailing `<button>`
+ *     for the delete glyph. Static or clickable root depending on
+ *     whether `onClick` is also set.
+ *
+ * **Variant axis** is `soft | solid | outline` (Dashforge chip
+ * vocabulary, default `'soft'`). Distinct from Button's
+ * (`solid | outline | ghost | link`) and Alert's
+ * (`standard | filled | outlined`) by design — see CHANGELOG.
+ *
+ * **A11y**:
+ *   - Static chip → no role (it's a `<span>`).
+ *   - Clickable chip → native `<button>` semantics.
+ *   - `selected` → `aria-pressed="true"` (so it announces as a toggle
+ *     button in pressed state).
+ *   - Delete button → its own `<button>` with `aria-label`
+ *     (defaults to `'Remove'`).
+ *
+ * @example
+ * ```tsx
+ * // Static status chip
+ * <Chip label="Active" color="success" />
+ *
+ * // With icon
+ * import { CheckIcon } from 'lucide-react';
+ * <Chip label="Verified" color="success" icon={<CheckIcon size={14} />} />
+ *
+ * // Filter chip (clickable + toggle via selected)
+ * <Chip
+ *   label="Last 7 days"
+ *   color="primary"
+ *   clickable
+ *   selected={range === '7d'}
+ *   onClick={() => setRange('7d')}
+ * />
+ *
+ * // Removable tag
+ * <Chip
+ *   label="design-system"
+ *   color="info"
+ *   variant="outline"
+ *   onDelete={() => removeTag('design-system')}
+ * />
+ *
+ * // RBAC-gated admin chip
+ * <Chip
+ *   label="Admin"
+ *   color="danger"
+ *   variant="solid"
+ *   access={{ resource: 'role', action: 'read', onUnauthorized: 'hide' }}
+ * />
+ * ```
+ */
+export declare const Chip: import("react").ForwardRefExoticComponent<ChipProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=Chip.d.ts.map

package/dist/src/components/Chip/Chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AA0BjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,eAAO,MAAM,IAAI,mGAgIf,CAAC"}

package/dist/src/components/Chip/chip.types.d.ts

@@ -0,0 +1,113 @@
+import type { ReactNode } from 'react';
+import type { ClassValue } from 'tailwind-variants';
+import type { Engine } from '@dashforge/ui-core';
+import type { AccessRequirement } from '@dashforge/rbac';
+import type { ChipVariants } from './chip.variants.js';
+/**
+ * Props for `<Chip>` — status / filter / tag pill.
+ *
+ * Mirrors MUI Chip's API surface where it makes sense (label, icon,
+ * avatar, clickable, onDelete) and extends with Dashforge-specific
+ * affordances (`selected` for filter chips, `access` for RBAC).
+ *
+ * Variant axis (`soft | solid | outline`) is the **Dashforge chip
+ * vocabulary** — distinct from Button's (`solid | outline | ghost |
+ * link`) and Alert's (`standard | filled | outlined`). The asymmetry
+ * is intentional and category-scoped: each component family uses the
+ * vocabulary that maps to its design needs (see CHANGELOG +
+ * MIGRATION.md for the design note).
+ *
+ * @see https://mui.com/material-ui/api/chip/
+ */
+export interface ChipProps extends Pick<ChipVariants, 'color' | 'variant' | 'size' | 'selected' | 'disabled'> {
+    /**
+     * The chip's textual content. Named `label` for MUI parity — most
+     * design systems (MUI, Radix Themes, Mantine, Tremor) use `label`
+     * as the canonical content prop on Chip / Badge / Pill primitives.
+     */
+    label: ReactNode;
+    /**
+     * Leading icon — typically a small SVG (16px). Consumer brings
+     * their iconography. Rendered inside the chip BEFORE the label.
+     * Falls back to `avatar` if not provided.
+     */
+    icon?: ReactNode;
+    /**
+     * Leading avatar — alternative to `icon`, typically a small
+     * circular image (Avatar component or `<img>`). When BOTH `icon`
+     * and `avatar` are set, `avatar` wins (matches MUI behaviour).
+     */
+    avatar?: ReactNode;
+    /**
+     * Makes the chip interactive — renders as `<button>` (instead of
+     * `<span>`), adds focus ring + hover state. Set automatically to
+     * `true` when `onClick` is provided.
+     */
+    clickable?: boolean;
+    /**
+     * Click handler. Implies `clickable=true`. Fires on chip-body
+     * click (NOT on the delete button — `onDelete` is the dedicated
+     * path for that).
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * When set, renders a trailing × delete button. The handler fires
+     * on delete-button click and stops propagation so the chip's
+     * `onClick` doesn't also fire.
+     */
+    onDelete?: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Custom delete icon. Defaults to an inline stroke-style × SVG.
+     * `currentColor` flows through, so the icon inherits the chip's
+     * text colour.
+     */
+    deleteIcon?: ReactNode;
+    /**
+     * `aria-label` for the delete button. Required for screen readers
+     * since the × glyph alone is not semantic.
+     * @default 'Remove'
+     */
+    deleteLabel?: string;
+    /**
+     * Reactive visibility predicate. Re-evaluated on every engine state
+     * change when the chip is mounted inside a `<DashForm>`; outside
+     * a form, evaluated as a plain predicate (the consumer captures
+     * any external state in the closure).
+     *
+     * When the predicate returns `false`, the component renders `null`
+     * — same contract as `<Alert>` / `<TextField>` / other bridge-aware
+     * components. Useful for status chips that should appear / disappear
+     * based on form values without forcing JSX guards on the consumer.
+     *
+     * @example
+     * ```tsx
+     * // Inside a DashForm — engine-reactive
+     * <Chip
+     *   label="Premium"
+     *   color="primary"
+     *   visibleWhen={(engine) => engine.getNode('plan')?.value === 'premium'}
+     * />
+     *
+     * // Outside a form — closure over external state
+     * <Chip
+     *   label={`${count} results`}
+     *   visibleWhen={() => count > 0}
+     * />
+     * ```
+     */
+    visibleWhen?: (engine: Engine) => boolean;
+    /**
+     * RBAC requirement. Same contract as `<Button>` / `<IconButton>` —
+     * `onUnauthorized: 'hide' | 'disable' | 'readonly'`.
+     * (`readonly` maps to `disabled` for chips, matching Button.)
+     */
+    access?: AccessRequirement;
+    /**
+     * Root-element class shortcut (string or clsx-compatible value).
+     * Last-wins via `tailwind-merge` inside `cn()`.
+     */
+    sx?: ClassValue;
+    /** Standard React `className` — appended to the root via `cn()`. */
+    className?: string;
+}
+//# sourceMappingURL=chip.types.d.ts.map

package/dist/src/components/Chip/chip.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Chip/chip.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,SACf,SAAQ,IAAI,CACV,YAAY,EACZ,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CACvD;IACD;;;;OAIG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAE1D;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;;;;;;;;;;;;;;;;;;;;OA0BG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;IAE1C;;;;OAIG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAE3B;;;OAGG;IACH,EAAE,CAAC,EAAE,UAAU,CAAC;IAEhB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}