@dashforge/tw 1.7.1 → 2.0.0

package/CHANGELOG.md

@@ -12,6 +12,148 @@ This project follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 > duplicated intentionally — no shared "lowest common denominator" headless
 > layer.
 
+## [2.0.0] — 2026-09-28
+
+**Every `@dashforge/*` package moves to `2.0.0` together.** Internal
+dependencies are declared with `workspace:*`, which pnpm rewrites at pack
+time to the EXACT sibling version, so a mixed 1.x / 2.0.0 install will not
+resolve. Upgrade them in the same step.
+
+See [MIGRATION-2.0.md](https://github.com/kensaadi/dashforge/blob/main/libs/dashforge/MIGRATION-2.0.md) for every breaking change with
+a before and after.
+
+### Changed
+
+- **BREAKING. `<Select>`'s trigger ref is `HTMLDivElement`, not
+  `HTMLButtonElement`** (BUG 23). `<Select multiple>` nested a `<button>`
+  inside the trigger button, which is invalid HTML and, worse, silently
+  strips the inner control from the accessibility tree: `role="button"`
+  makes its descendants presentational, so the delete control existed for
+  a mouse and not for a screen reader. The trigger is now a
+  `div role="combobox"` with an explicit `tabIndex`. The `name` prop is
+  untouched and still keys react-hook-form.
+
+- **BREAKING. `<Slider>`'s ref is `HTMLDivElement`, not
+  `HTMLSpanElement`, and it now actually arrives** (BUG 39). The component
+  was wrapped in `forwardRef`, named the parameter, and never attached it,
+  so `ref.current` stayed `null` forever with no type error and no
+  warning. The declared element type was wrong in the same breath: a
+  `span` over a `div` root.
+
+- **BREAKING. `<AppShell>` defaults to `layout="viewport"`**, which
+  changes which element scrolls (BUG 27). `min-h-screen` on the root made
+  `main`'s scroller dead code, so the window scrolled and the header, nav
+  and footer scrolled away with it. Pass `layout="page"` for the old
+  behaviour.
+
+- **BREAKING. `<Chip>`'s clickable root is a `div role="button"`**
+  (BUG 35), for the same reason as `<Select>`: a chip that was both
+  clickable and deletable nested a button in a button.
+
+- **BREAKING. `<Divider orientation="vertical">` no longer spans the
+  container width** (BUG 25). It came out `w-full`, so in a nowrap row it
+  squeezed its siblings and with wrap it pushed every group onto its own
+  line.
+
+- **BREAKING. `<TopBar>`'s `start` slot can shrink** (BUG 42). It carried
+  `min-w-0` and `shrink-0` together, which cancel: the first exists to let
+  an item shrink, the second forbids it. A long brand kept its full width
+  and pushed `center` and `end` out of the bar.
+
+- **`<Chip variant="outline" color="neutral">`'s border moved from
+  `neutral-300` to `neutral-500`** (BUG 40). At 1.42:1 light and 1.91:1
+  dark it failed WCAG 1.4.11, and an outline chip IS its border. It was
+  also the only colour row at `-300` while the other six sat at `-500`.
+
+- **`<Stack divider>` supplies the orientation you did not choose**
+  (BUG 41). A `<Divider>` defaults to horizontal, which is `h-0 w-full`:
+  in a row that is nothing to see plus a claim on the whole width, so the
+  items were squeezed rather than separated. An explicit `orientation`
+  still wins, and a divider that is not ours is passed through untouched.
+
+### Added
+
+- **`<Button color="inverse">`** for surfaces that are dark whatever the
+  theme does. Reads the theme-invariant `inverse` role.
+
+- **`<Button pressed>`**, a toggle state. The ARIA is opt-in: omit the
+  prop and nothing is emitted, not even `aria-pressed="false"`, because
+  announcing "not pressed" on an ordinary action would make every plain
+  button in the catalog lie. The "on" look is LeftNav's active-row
+  treatment rather than something invented; `solid` deepens to its own
+  `active:` tier; `link` gets the ARIA and no paint.
+
+- **`access` and `visibleWhen` on `<Stack>` and `<Grid>`**, for parity
+  with `<Box>`. A consumer passing neither gets byte-identical output.
+
+- **`<Box borderStyle>`** (`solid | dashed | dotted | double`), orthogonal
+  to `variant`: a `soft` box can be dashed.
+
+- **`<Chip draggable>`**, plus `onDragStart` and `onDragEnd`. Native HTML5
+  drag-and-drop, so no dnd dependency is pulled in and the `dataTransfer`
+  payload stays yours. **A drag is a pointer gesture**: native DnD is not
+  keyboard operable, so pair it with an `onClick` that does the same thing
+  or the palette fails WCAG 2.1.1 in your app.
+
+- **`<Kbd>`**, a keycap. Renders the semantic `<kbd>` element, which is
+  the only reason it needs to exist. Chords compose rather than taking a
+  `keys` array.
+
+- **`<TopBarBrand>`**, the mark-plus-text block for a `<TopBar>`'s `start`
+  slot. A sibling export rather than `TopBar.Brand`, matching this
+  catalog's convention. Layout only: a brand that navigates home is a link
+  wrapped around it.
+
+- **`<Calendar showSiblingDays>`** and **`slotProps.day` as a function of
+  the day's state**. The flat object form still type-checks.
+
+- **`<Stack>` warns in development** on `direction="column"` and on
+  `spacing`, naming the value, the accepted set and the likely intent.
+  `spacing` is also pulled out of the spread so it cannot land on the DOM
+  as an unknown attribute. Accepting both spellings was the alternative
+  and was not taken: a second name for one axis is a fork every consumer,
+  theme default and doc example has to pick a side of, forever.
+
+### Fixed
+
+- **A selectable sibling-month day in `<Calendar>` failed WCAG contrast**
+  (BUG 31): 2.42:1 light and 2.53:1 dark, where the floor for an active
+  control's text at 14px is 4.5:1. `neutral-500` clears light and fails
+  dark, because it is the pivot of the scale and stays rgb(115,115,115) in
+  both themes, so the fix is `neutral-600`.
+
+- **Bare `rounded` ignored the radius tokens** (BUG 26), in ten places
+  across eight components. The preset extends `borderRadius` and defines
+  no `DEFAULT`, so the bare utility keeps Tailwind's hard-coded 0.25rem
+  and is immune to the scale by construction. Bare `shadow` is NOT the
+  same case and was left alone.
+
+- **`<Dialog>` and `<Drawer>` ringed the close button on `:focus`**
+  rather than `:focus-visible`, so it lit up on every mouse click
+  (BUG 28).
+
+- **Radix's hidden input escaped to the `body`** and lengthened the page
+  (BUG 36).
+
+- **`<Drawer>` sat on MUI's z ladder**, so a `<Dialog>` opened from inside
+  it rendered behind (BUG 37).
+
+- Eighteen hard-coded font sizes moved onto the new `2xs` token tier, with
+  catalog-wide guards against hard-coded colour, shadow and font size, off
+  the shared z ladder, and ungated motion.
+
+### Fixed (build)
+
+- **A clean checkout could not be built.** `tsBuildInfoFile` sat outside
+  `dist`, so deleting `dist` left a valid incremental cache describing
+  declarations that no longer existed: `tsc --build` emitted nothing and
+  dependents failed with `TS6305`.
+
+- **Declaration output is deterministic**, and the published tarball
+  dropped from 394 files to 200. Two build steps were writing the same
+  declarations in two layouts, and whichever ran last decided what
+  shipped.
+
 ## [1.7.1] — 2026-09-25
 
 Patch: closes the half of BUG 17 that never reached this package.

package/dist/{src/components → components}/Accordion/accordion.variants.d.ts

@@ -3,10 +3,10 @@ export declare const accordionVariants: import("tailwind-variants").TVReturnType
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             content?: import("tailwind-merge").ClassNameValue;
+            header?: import("tailwind-merge").ClassNameValue;
             root?: import("tailwind-merge").ClassNameValue;
             trigger?: import("tailwind-merge").ClassNameValue;
             item?: import("tailwind-merge").ClassNameValue;
-            header?: import("tailwind-merge").ClassNameValue;
             chevron?: import("tailwind-merge").ClassNameValue;
         };
     };
@@ -14,10 +14,10 @@ export declare const accordionVariants: import("tailwind-variants").TVReturnType
     [x: string]: {
         [x: string]: import("tailwind-merge").ClassNameValue | {
             content?: import("tailwind-merge").ClassNameValue;
+            header?: import("tailwind-merge").ClassNameValue;
             root?: import("tailwind-merge").ClassNameValue;
             trigger?: import("tailwind-merge").ClassNameValue;
             item?: import("tailwind-merge").ClassNameValue;
-            header?: import("tailwind-merge").ClassNameValue;
             chevron?: import("tailwind-merge").ClassNameValue;
         };
     };
@@ -32,10 +32,10 @@ export declare const accordionVariants: import("tailwind-variants").TVReturnType
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             content?: import("tailwind-merge").ClassNameValue;
+            header?: import("tailwind-merge").ClassNameValue;
             root?: import("tailwind-merge").ClassNameValue;
             trigger?: import("tailwind-merge").ClassNameValue;
             item?: import("tailwind-merge").ClassNameValue;
-            header?: import("tailwind-merge").ClassNameValue;
             chevron?: import("tailwind-merge").ClassNameValue;
         };
     };

package/dist/{src/components → components}/AppShell/appShell.types.d.ts

@@ -62,6 +62,14 @@ export interface AppShellProps extends AppShellVariants {
 declare module '@dashforge/tw-tokens' {
     interface TWComponentDefaults {
         AppShell?: {
+            /**
+             * Theme-level variant defaults, same shape as every other component
+             * in the catalog. AppShell carried only `slotProps` until the
+             * `layout` axis landed (BUG 27), at which point the new axis could
+             * be set per instance but not once for the app, which is backwards
+             * for a shell.
+             */
+            defaults?: Partial<AppShellVariants>;
             slotProps?: AppShellSlotProps;
         };
     }

package/dist/{src/components → components}/AppShell/appShell.variants.d.ts

@@ -3,16 +3,33 @@ import { type VariantProps } from 'tailwind-variants';
  * Tailwind-variants recipe for `<AppShell>`.
  *
  * Slots:
- *   - `root`      — outer flex column (full viewport)
+ *   - `root`      — outer flex column
  *   - `header`    — top region
  *   - `body`      — flex row holding nav + main
  *   - `nav`       — desktop nav rail (md+)
  *   - `navMobile` — mobile drawer (slide-in)
- *   - `main`      — scrollable content area
+ *   - `main`      — content area
  *   - `footer`    — bottom region
  *   - `backdrop`  — semi-opaque overlay behind the mobile drawer
+ *
+ * Which element scrolls is decided by the `layout` axis, NOT by the
+ * slots. Before BUG 27 it was decided by neither: `root` carried
+ * `min-h-screen` while `main` carried `overflow-y-auto`, which describe
+ * two different layouts, and `min-h-screen` won. The root grew with the
+ * content, the window scrolled, and `main` never overflowed, so its
+ * `overflow-y-auto` was dead on every page long enough to need it.
  */
 export declare const appShellVariants: import("tailwind-variants").TVReturnType<{
+    layout: {
+        viewport: {
+            root: string;
+            nav: string;
+            main: string;
+        };
+        page: {
+            root: string;
+        };
+    };
     navOpen: {
         true: {
             navMobile: string;
@@ -29,6 +46,16 @@ export declare const appShellVariants: import("tailwind-variants").TVReturnType<
     footer: string;
     backdrop: string[];
 }, undefined, {
+    layout: {
+        viewport: {
+            root: string;
+            nav: string;
+            main: string;
+        };
+        page: {
+            root: string;
+        };
+    };
     navOpen: {
         true: {
             navMobile: string;
@@ -45,6 +72,16 @@ export declare const appShellVariants: import("tailwind-variants").TVReturnType<
     footer: string;
     backdrop: string[];
 }, import("tailwind-variants").TVReturnType<{
+    layout: {
+        viewport: {
+            root: string;
+            nav: string;
+            main: string;
+        };
+        page: {
+            root: string;
+        };
+    };
     navOpen: {
         true: {
             navMobile: string;

package/dist/{src/components → components}/Box/box.types.d.ts

@@ -12,7 +12,7 @@ import type { BoxVariants } from './box.variants.js';
  * a layout choice, not a component identity, and would encourage
  * antipattern global-margin/padding overrides.
  */
-export type BoxVariantProps = Pick<BoxVariants, 'variant' | 'color' | 'elevation' | 'rounded' | 'fullWidth' | 'fullHeight'>;
+export type BoxVariantProps = Pick<BoxVariants, 'variant' | 'color' | 'elevation' | 'rounded' | 'borderStyle' | 'fullWidth' | 'fullHeight'>;
 declare module '@dashforge/tw-tokens' {
     interface TWComponentDefaults {
         Box?: {
@@ -66,6 +66,24 @@ export interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'classNam
      * Border-radius identity.
      * @default 'none'
      */
+    /**
+     * Border style, for wireframe and placeholder surfaces (a dashed drop
+     * target, a dotted "empty state" frame).
+     *
+     * Only renders where a border-width already exists: pair it with
+     * `variant="outlined"`, which sets one. On `plain` / `elevated` there
+     * is no border for the style to apply to.
+     *
+     * @default undefined (Tailwind's own `solid` applies)
+     *
+     * @example
+     * ```tsx
+     * <Box variant="outlined" borderStyle="dashed" rounded="lg" p={4}>
+     *   Drop a file here
+     * </Box>
+     * ```
+     */
+    borderStyle?: BoxVariants['borderStyle'];
     rounded?: BoxVariants['rounded'];
     /** Uniform padding — spacing token step. */
     p?: BoxVariants['p'];

package/dist/{src/components → components}/Box/box.variants.d.ts

@@ -68,6 +68,12 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         4: string;
         5: string;
     };
+    borderStyle: {
+        solid: string;
+        dashed: string;
+        dotted: string;
+        double: string;
+    };
     rounded: {
         none: string;
         sm: string;
@@ -186,6 +192,12 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         4: string;
         5: string;
     };
+    borderStyle: {
+        solid: string;
+        dashed: string;
+        dotted: string;
+        double: string;
+    };
     rounded: {
         none: string;
         sm: string;
@@ -304,6 +316,12 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         4: string;
         5: string;
     };
+    borderStyle: {
+        solid: string;
+        dashed: string;
+        dotted: string;
+        double: string;
+    };
     rounded: {
         none: string;
         sm: string;

package/dist/{src/components → components}/Button/button.types.d.ts

@@ -70,6 +70,27 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
      * click handlers, and set `aria-busy="true"`.
      * @default false
      */
+    /**
+     * Toggle state. Pass it and the button becomes a toggle: `aria-pressed`
+     * is emitted so assistive tech announces on/off, and the "on" look is
+     * painted. Leave it out and nothing changes, including the ARIA: a plain
+     * button must not be announced as a toggle.
+     *
+     * The "on" treatment is LeftNav's active-row shape, so a pressed button
+     * and a current nav item read the same. `variant="link"` is the one
+     * exception: it gets the ARIA but no background, because a surface behind
+     * inline text fights the underline.
+     *
+     * @default undefined
+     *
+     * @example
+     * ```tsx
+     * <Button variant="ghost" pressed={bold} onClick={() => setBold(!bold)}>
+     *   Bold
+     * </Button>
+     * ```
+     */
+    pressed?: boolean;
     loading?: ButtonVariants['loading'];
     /**
      * Stretch the button to fill its container's width (`w-full`).

package/dist/{src/components → components}/Button/button.variants.d.ts

@@ -37,6 +37,13 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         success: string;
         warning: string;
         danger: string;
+        /**
+         * For a surface that is dark regardless of the theme: a dark hero,
+         * an ink footer, an inverted panel. Reads the theme-invariant
+         * `inverse` token role, so it does NOT flip with light/dark the way
+         * a `neutral`-based treatment would. See kensaadi/dashforge#140.
+         */
+        inverse: string;
     };
     size: {
         sm: string;
@@ -49,6 +56,19 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     loading: {
         true: string;
     };
+    /**
+     * Toggle state. Styling lives in `compoundVariants` because "on" reads
+     * differently on a filled button than on a quiet one: the quiet
+     * variants gain a surface, `solid` deepens the one it already has.
+     *
+     * The treatment is not invented. It is LeftNav's `itemActive`
+     * (`bg-*-100 text-*-900 font-medium`), the catalog's existing way of
+     * saying "this is the current thing". kensaadi/dashforge#63 gap C.
+     */
+    pressed: {
+        true: string;
+        false: string;
+    };
 }, undefined, string[], {
     variant: {
         solid: string;
@@ -62,6 +82,13 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         success: string;
         warning: string;
         danger: string;
+        /**
+         * For a surface that is dark regardless of the theme: a dark hero,
+         * an ink footer, an inverted panel. Reads the theme-invariant
+         * `inverse` token role, so it does NOT flip with light/dark the way
+         * a `neutral`-based treatment would. See kensaadi/dashforge#140.
+         */
+        inverse: string;
     };
     size: {
         sm: string;
@@ -74,6 +101,19 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     loading: {
         true: string;
     };
+    /**
+     * Toggle state. Styling lives in `compoundVariants` because "on" reads
+     * differently on a filled button than on a quiet one: the quiet
+     * variants gain a surface, `solid` deepens the one it already has.
+     *
+     * The treatment is not invented. It is LeftNav's `itemActive`
+     * (`bg-*-100 text-*-900 font-medium`), the catalog's existing way of
+     * saying "this is the current thing". kensaadi/dashforge#63 gap C.
+     */
+    pressed: {
+        true: string;
+        false: string;
+    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
         solid: string;
@@ -87,6 +127,13 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         success: string;
         warning: string;
         danger: string;
+        /**
+         * For a surface that is dark regardless of the theme: a dark hero,
+         * an ink footer, an inverted panel. Reads the theme-invariant
+         * `inverse` token role, so it does NOT flip with light/dark the way
+         * a `neutral`-based treatment would. See kensaadi/dashforge#140.
+         */
+        inverse: string;
     };
     size: {
         sm: string;
@@ -99,6 +146,19 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     loading: {
         true: string;
     };
+    /**
+     * Toggle state. Styling lives in `compoundVariants` because "on" reads
+     * differently on a filled button than on a quiet one: the quiet
+     * variants gain a surface, `solid` deepens the one it already has.
+     *
+     * The treatment is not invented. It is LeftNav's `itemActive`
+     * (`bg-*-100 text-*-900 font-medium`), the catalog's existing way of
+     * saying "this is the current thing". kensaadi/dashforge#63 gap C.
+     */
+    pressed: {
+        true: string;
+        false: string;
+    };
 }, undefined, string[], unknown, unknown, undefined>>;
 export type ButtonVariants = VariantProps<typeof buttonVariants>;
 //# sourceMappingURL=button.variants.d.ts.map

package/dist/{src/components → components}/Calendar/calendar.types.d.ts

@@ -15,6 +15,27 @@ declare module '@dashforge/tw-tokens' {
         };
     }
 }
+/**
+ * The four booleans the day recipe is keyed on, handed to a functional
+ * `slotProps.day` so a consumer can restyle ONE state without touching the
+ * others.
+ *
+ * Before this existed, `slotProps.day.className` was a flat string applied
+ * to all 42 cells, so an app that wanted, say, sibling-month days to read
+ * as selectable had to restyle every cell identically (which also erased
+ * the disabled treatment), reach into the DOM after render, or fork the
+ * component. See README-BUG § BUG 31.
+ */
+export interface CalendarDayState {
+    /** The cell belongs to the previous or next month. */
+    siblingMonth: boolean;
+    /** The cell is today. */
+    today: boolean;
+    /** The cell is the selected date. */
+    selected: boolean;
+    /** The cell cannot be picked (outside min/max, or explicitly disabled). */
+    disabled: boolean;
+}
 /** Per-slot `className` overrides for `<Calendar>`. */
 export interface CalendarSlotProps {
     root?: {
@@ -26,10 +47,26 @@ export interface CalendarSlotProps {
     grid?: {
         className?: string;
     };
-    /** Applied to every day-cell button. */
+    /**
+     * Applied to every day-cell button.
+     *
+     * Accepts either a flat object, which lands on all 42 cells, or a
+     * function of the cell's state, which is what lets a theme address a
+     * single state. Passing an object keeps working unchanged.
+     *
+     * @example
+     * ```tsx
+     * slotProps={{
+     *   day: ({ siblingMonth }) =>
+     *     siblingMonth ? { className: 'opacity-100 text-neutral-500' } : {},
+     * }}
+     * ```
+     */
     day?: {
         className?: string;
-    };
+    } | ((state: CalendarDayState) => {
+        className?: string;
+    } | undefined);
 }
 /**
  * Props for the `<Calendar>` primitive — a standalone, inline month grid.
@@ -74,6 +111,19 @@ export interface CalendarProps {
     today?: ISODate;
     /** Disables the whole calendar. */
     disabled?: boolean;
+    /**
+     * Render the leading and trailing cells that belong to the neighbouring
+     * months. Default `true`, which is the convention React Day Picker, MUI's
+     * `DateCalendar` and the native pickers all follow.
+     *
+     * Set `false` and those cells become empty placeholders that keep the
+     * 7-column geometry. Worth doing for any form where "a day of the next
+     * month" is not a distinct concept, because a muted-but-selectable day
+     * reads as unavailable at a glance. See README-BUG § BUG 31.
+     *
+     * @default true
+     */
+    showSiblingDays?: boolean;
     /** Moves DOM focus to the active day cell on mount. */
     autoFocus?: boolean;
     /** Accessible label for the grid. Default `"Calendar"`. */

package/dist/{src/components → components}/Chip/chip.types.d.ts

@@ -107,6 +107,48 @@ export interface ChipProps {
      * @default 'Remove'
      */
     deleteLabel?: string;
+    /**
+     * Makes the chip a native drag source: sets the `draggable` attribute and
+     * the grab cursor. Use it for a palette of items dragged onto a canvas,
+     * which is the shape `<Stack>` + `<Chip>` already composes; what was
+     * missing was only the affordance and the event.
+     *
+     * Native HTML5 drag-and-drop, so no dnd dependency is pulled in and the
+     * `dataTransfer` payload stays yours to define in `onDragStart`.
+     *
+     * ⚠️ **A drag is a pointer gesture and nothing else.** Native DnD is not
+     * keyboard operable, so a chip whose ONLY route is dragging fails WCAG
+     * 2.1.1 in your app. Give the same action a second path: an `onClick`
+     * that adds the item, a context menu, a button beside the palette. The
+     * library cannot supply that for you, and it will not pretend otherwise.
+     *
+     * @default undefined
+     *
+     * @example
+     * ```tsx
+     * <Chip
+     *   label="Heading"
+     *   draggable
+     *   onDragStart={(e) => e.dataTransfer.setData('text/plain', 'heading')}
+     *   onClick={() => insertAtCursor('heading')}
+     * />
+     * ```
+     */
+    draggable?: boolean;
+    /**
+     * Fires when a drag begins. Set the `dataTransfer` payload here.
+     * Only meaningful together with `draggable`.
+     *
+     * @default undefined
+     */
+    onDragStart?: (event: React.DragEvent<HTMLElement>) => void;
+    /**
+     * Fires when the drag ends, whether it was dropped or abandoned. Use it
+     * to clear any drag-in-progress state.
+     *
+     * @default undefined
+     */
+    onDragEnd?: (event: React.DragEvent<HTMLElement>) => void;
     /**
      * Reactive visibility predicate. Re-evaluated on every engine state
      * change when the chip is mounted inside a `<DashForm>`; outside

package/dist/{src/components → components}/Chip/chip.variants.d.ts

@@ -61,6 +61,9 @@ export declare const chipVariants: import("tailwind-variants").TVReturnType<{
      * Compound rules below apply the actual shift per (variant, color)
      * cell.
      */
+    draggable: {
+        true: string;
+    };
     selected: {
         true: string;
     };
@@ -102,6 +105,9 @@ export declare const chipVariants: import("tailwind-variants").TVReturnType<{
      * Compound rules below apply the actual shift per (variant, color)
      * cell.
      */
+    draggable: {
+        true: string;
+    };
     selected: {
         true: string;
     };
@@ -143,6 +149,9 @@ export declare const chipVariants: import("tailwind-variants").TVReturnType<{
      * Compound rules below apply the actual shift per (variant, color)
      * cell.
      */
+    draggable: {
+        true: string;
+    };
     selected: {
         true: string;
     };

package/dist/{src/components → components}/Grid/grid.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';
 /**
  * Grid types — discriminated union for container vs item role.
  *
@@ -94,6 +96,46 @@ interface GridCommonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'classNam
     asChild?: boolean;
     /** Utility-class override, merged via tailwind-merge. */
     sx?: string;
+    /**
+     * Reactive visibility predicate. When it returns `false` the component
+     * renders `null`. Inside a `<DashForm>` it subscribes reactively to
+     * engine state; outside a form it is evaluated as a plain closure.
+     *
+     * Use it for state-driven hiding. **For permission-driven hiding prefer
+     * `access` with `onUnauthorized: 'hide'`**, which is the semantically
+     * correct path and surfaces properly in RBAC dev tools.
+     *
+     * @default undefined
+     *
+     * @example
+     * ```tsx
+     * <Grid visibleWhen={() => pendingCount > 0}>
+     *   <Typography variant="h3">{pendingCount} pending</Typography>
+     * </Grid>
+     * ```
+     */
+    visibleWhen?: (engine: Engine) => boolean;
+    /**
+     * RBAC requirement, evaluated by the centralized `@dashforge/rbac`
+     * policy engine. Brings Grid to parity with `<Box>`, which has
+     * carried both props since 1.1.0.
+     *
+     * - `onUnauthorized: 'hide'`     → does not render
+     * - `onUnauthorized: 'disable'`  → `aria-disabled` + dimmed; interactive
+     *   children derive their own state from `data-disabled` or carry their
+     *   own `access`
+     * - `onUnauthorized: 'readonly'` → `aria-readonly`, for gated sections
+     *
+     * @default undefined
+     *
+     * @example
+     * ```tsx
+     * <Grid access={{ resource: 'billing', action: 'read', onUnauthorized: 'hide' }}>
+     *   <RevenueCard />
+     * </Grid>
+     * ```
+     */
+    access?: AccessRequirement;
 }
 /**
  * `<Grid>` props — discriminated union: container OR item, never both.