@dashforge/tw 1.0.0 → 1.1.0

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

@@ -0,0 +1,155 @@
+import { type VariantProps } from 'tailwind-variants';
+/**
+ * Tailwind-variants recipe for `<Chip>` — promoted from the internal
+ * `Table/cells/RenderChip` (Sprint 4.4). The visual treatment is
+ * preserved byte-identical: the same 3 × 7 compound matrix
+ * (variant × color) emitted by RenderChip is now the single source
+ * of truth, consumed by both the public `<Chip>` and (via thin
+ * wrapper) the legacy `RenderChip` internal.
+ *
+ * Slots (only `root` slot used by the public Chip; sub-slots
+ * surfaced via separate inline classes in `Chip.tsx`):
+ *   - `root` — outer chip surface
+ *
+ * Variants axis (3 × 7, plus orthogonal `size`):
+ *   - `color`: 7 intents (`neutral / primary / secondary / success /
+ *     warning / danger / info`)
+ *   - `variant`: `soft` (default) / `solid` / `outline`
+ *   - `size`: `sm` (default) / `md`
+ *
+ * Token-driven: every Tailwind utility resolves through
+ * `dashforgePreset()` → CSS variables. No hardcoded hex.
+ *
+ * `dark:` variants on color palettes (lines 49-77 of legacy
+ * RenderChip, preserved here) are INTENTIONAL — color palettes do not
+ * auto-invert via the CSS-var swap (only the `neutral` palette does),
+ * so the `dark:` shift is a deliberate design choice (darker bg +
+ * lighter text in dark mode for visual cohesion). `dark:` on the
+ * `neutral` row is AVOIDED — that would double-invert.
+ */
+export declare const chipVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        neutral: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+    };
+    variant: {
+        soft: string;
+        solid: string;
+        outline: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+    };
+    /**
+     * Clickable state — adds focus ring + hover transition. Applied
+     * when the chip renders as `<button>` (i.e. `onClick` or
+     * explicit `clickable` is set).
+     */
+    clickable: {
+        true: string[];
+    };
+    /**
+     * Selected state — used on filter chips to indicate active
+     * selection. Visually shifts the chip to a heavier emphasis
+     * (one step up the elevation ladder of its current variant).
+     * Compound rules below apply the actual shift per (variant, color)
+     * cell.
+     */
+    selected: {
+        true: string;
+    };
+    /** Disabled state for clickable chips. */
+    disabled: {
+        true: string;
+    };
+}, undefined, string[], {
+    color: {
+        neutral: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+    };
+    variant: {
+        soft: string;
+        solid: string;
+        outline: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+    };
+    /**
+     * Clickable state — adds focus ring + hover transition. Applied
+     * when the chip renders as `<button>` (i.e. `onClick` or
+     * explicit `clickable` is set).
+     */
+    clickable: {
+        true: string[];
+    };
+    /**
+     * Selected state — used on filter chips to indicate active
+     * selection. Visually shifts the chip to a heavier emphasis
+     * (one step up the elevation ladder of its current variant).
+     * Compound rules below apply the actual shift per (variant, color)
+     * cell.
+     */
+    selected: {
+        true: string;
+    };
+    /** Disabled state for clickable chips. */
+    disabled: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    color: {
+        neutral: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+    };
+    variant: {
+        soft: string;
+        solid: string;
+        outline: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+    };
+    /**
+     * Clickable state — adds focus ring + hover transition. Applied
+     * when the chip renders as `<button>` (i.e. `onClick` or
+     * explicit `clickable` is set).
+     */
+    clickable: {
+        true: string[];
+    };
+    /**
+     * Selected state — used on filter chips to indicate active
+     * selection. Visually shifts the chip to a heavier emphasis
+     * (one step up the elevation ladder of its current variant).
+     * Compound rules below apply the actual shift per (variant, color)
+     * cell.
+     */
+    selected: {
+        true: string;
+    };
+    /** Disabled state for clickable chips. */
+    disabled: {
+        true: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export type ChipVariants = VariantProps<typeof chipVariants>;
+//# sourceMappingURL=chip.variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Chip/chip.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;IA2BrB;;;;OAIG;;;;IAOH;;;;;;OAMG;;;;IAIH,0CAA0C;;;;;;;;;;;;;;;;;;;;;;;IArB1C;;;;OAIG;;;;IAOH;;;;;;OAMG;;;;IAIH,0CAA0C;;;;;;;;;;;;;;;;;;;;;;;IArB1C;;;;OAIG;;;;IAOH;;;;;;OAMG;;;;IAIH,0CAA0C;;;;qDA4F5C,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"}

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

@@ -0,0 +1,57 @@
+import type { IconButtonProps } from './iconButton.types.js';
+/**
+ * Dashforge TW IconButton — square, icon-only action button.
+ *
+ * Reuses `buttonVariants` 1:1 (same `variant` / `color` / `size` /
+ * `loading` axes) so every `<Button>` style maps to the equivalent
+ * `<IconButton>` with zero code duplication. The ONLY additions are:
+ *
+ *   - `ICON_BUTTON_SIZE_OVERRIDES` — forces `w-N + px-0` so the button
+ *     is square at every size token
+ *   - `ICON_BUTTON_BASE` — `aspect-square inline-flex items-center
+ *     justify-center` for layout
+ *
+ * Both additions are token-driven (spacing) or layout-primitive
+ * (geometry) — no hardcoded hex, no `dark:` variants.
+ *
+ * **`aria-label` is REQUIRED** at the type level — icon-only buttons
+ * are invisible to assistive tech without an explicit accessible
+ * name. The TypeScript compiler enforces this rather than relying on
+ * runtime warnings.
+ *
+ * RBAC integration mirrors `<Button>`: `access` with
+ * `onUnauthorized: 'hide' | 'disable' | 'readonly'`. No `visibleWhen`
+ * (mirror Button — buttons should disable, not hide, on
+ * state-driven unavailability; permission-driven hiding is `access`).
+ *
+ * @example
+ * ```tsx
+ * import { Trash2 } from 'lucide-react';
+ *
+ * <IconButton aria-label="Delete row" color="danger" onClick={onDelete}>
+ *   <Trash2 size={20} />
+ * </IconButton>
+ *
+ * // Polymorphism via Radix Slot
+ * <IconButton asChild aria-label="Open settings" variant="ghost">
+ *   <Link to="/settings"><SettingsIcon size={20} /></Link>
+ * </IconButton>
+ *
+ * // RBAC-gated
+ * <IconButton
+ *   aria-label="Publish article"
+ *   variant="solid"
+ *   color="primary"
+ *   access={{ resource: 'article', action: 'publish', onUnauthorized: 'disable' }}
+ * >
+ *   <PublishIcon size={20} />
+ * </IconButton>
+ *
+ * // Loading swap
+ * <IconButton aria-label="Save" loading={isSaving}>
+ *   <SaveIcon size={20} />
+ * </IconButton>
+ * ```
+ */
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=IconButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAY7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,eAAO,MAAM,UAAU,+GAgFtB,CAAC"}

package/dist/src/components/IconButton/iconButton.types.d.ts

@@ -0,0 +1,96 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import type { ClassValue } from 'tailwind-variants';
+import type { Engine } from '@dashforge/ui-core';
+import type { AccessRequirement } from '@dashforge/rbac';
+import type { ButtonVariants } from '../Button/button.variants.js';
+/**
+ * Props for `<IconButton>`.
+ *
+ * IconButton is the **icon-only variant of `<Button>`** — it reuses
+ * `buttonVariants` 1:1 (same `variant` × `color` × `size` × `loading`
+ * compound matrix) and adds:
+ *
+ *   - Square geometry (width = height = size token, `aspect-square`)
+ *   - Zero horizontal padding (no text to pad around)
+ *   - **`aria-label` REQUIRED** at the type level — icon-only buttons
+ *     are invisible to screen readers without an explicit label, so we
+ *     enforce it via TypeScript rather than runtime warning.
+ *
+ * Notes on excluded props (deliberate parity with `<Button>`):
+ *   - **No `slotProps`** — IconButton renders a single DOM element
+ *     (`<button>` plus a transient loading swap); `className` + `sx`
+ *     cover the override surface fully, matching Button.
+ *   - **No `fullWidth`** — meaningless on an icon-sized button.
+ *
+ * As of 1.1.0 (Sprint 4.4 alignment), IconButton + Button both
+ * support `visibleWhen` — see prop docs below.
+ *
+ * @example
+ * ```tsx
+ * import { TrashIcon } from 'lucide-react';
+ *
+ * <IconButton aria-label="Delete row" color="danger" onClick={onDelete}>
+ *   <TrashIcon size={20} />
+ * </IconButton>
+ *
+ * // Polymorphism via Radix Slot — wrap a router Link without nesting
+ * // a button inside an anchor.
+ * <IconButton asChild aria-label="Open settings" variant="ghost">
+ *   <Link to="/settings"><SettingsIcon size={20} /></Link>
+ * </IconButton>
+ *
+ * // RBAC-gated
+ * <IconButton
+ *   aria-label="Publish article"
+ *   variant="solid"
+ *   color="primary"
+ *   access={{ resource: 'article', action: 'publish', onUnauthorized: 'disable' }}
+ * >
+ *   <PublishIcon size={20} />
+ * </IconButton>
+ * ```
+ */
+export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'children'>, Pick<ButtonVariants, 'variant' | 'color' | 'size' | 'loading'> {
+    /**
+     * The icon — typically an SVG element from the consumer's icon
+     * library (Lucide / Phosphor / Tabler / inline SVG). A single
+     * `ReactNode` is expected.
+     */
+    children: ReactNode;
+    /**
+     * Required at the type level — icon-only buttons MUST have an
+     * accessible name. Pass a short verb phrase describing the action
+     * (e.g. `"Delete row"`, `"Open settings"`, NOT `"Trash icon"`).
+     */
+    'aria-label': string;
+    /**
+     * Render-as-child via Radix Slot — the resolved IconButton
+     * className is forwarded to the immediate child element, no
+     * `<button>` DOM is emitted. Useful for router `<Link>`s.
+     * Same contract as `<Button asChild>`.
+     */
+    asChild?: boolean;
+    /**
+     * RBAC requirement. When the current subject doesn't satisfy the
+     * requirement, the button is hidden / disabled / read-only per
+     * `onUnauthorized`. Same contract as `<Button access>`.
+     */
+    access?: AccessRequirement;
+    /**
+     * Reactive visibility predicate — same contract as `<Button>` and
+     * `<Chip>`. When the predicate returns `false`, the component
+     * renders `null`. Inside a `<DashForm>` it subscribes to engine
+     * state and re-evaluates on every change; outside a form, it's
+     * called with `null` engine (capture external state in closure).
+     *
+     * Added in 1.1.0 (Sprint 4.4 alignment) to keep IconButton in
+     * lockstep with Button.
+     */
+    visibleWhen?: (engine: Engine) => boolean;
+    /**
+     * Root-element class shortcut (string or `clsx`-compatible value).
+     * Last-wins via `tailwind-merge` inside `cn()`.
+     */
+    sx?: ClassValue;
+}
+//# sourceMappingURL=iconButton.types.d.ts.map

package/dist/src/components/IconButton/iconButton.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconButton.types.d.ts","sourceRoot":"","sources":["../../../../src/components/IconButton/iconButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7D,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,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,MAAM,WAAW,eACf,SAAQ,IAAI,CACR,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,OAAO,GAAG,UAAU,CACrB,EACD,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAChE;;;;OAIG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAE3B;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;IAE1C;;;OAGG;IACH,EAAE,CAAC,EAAE,UAAU,CAAC;CACjB"}

package/dist/src/components/IconButton/iconButton.variants.d.ts

@@ -0,0 +1,26 @@
+import type { ButtonVariants } from '../Button/button.variants.js';
+/**
+ * IconButton size overrides — applied ON TOP of `buttonVariants(...)`.
+ *
+ * Button's `size` axis sets `h-X` + `px-Y` (rectangular). For
+ * IconButton we need a SQUARE shape, so we:
+ *   - zero out the horizontal padding (`px-0`)
+ *   - set an explicit width that matches the height (`w-N` mirrors the
+ *     `h-N` from Button's size variant)
+ *
+ * The `aspect-square` utility provides belt-and-braces in the edge
+ * case where Tailwind purges the explicit `w-N` (e.g., when the user
+ * passes `size` dynamically and the JIT can't statically see all
+ * combinations).
+ *
+ * Token propagation: `w-N` resolves to `var(--df-tw-spacing-N)`
+ * through `dashforgePreset()`, identical to how `h-N` works for
+ * Button. `patchTheme({ spacing: { 10: '2.75rem' } })` patches both
+ * Button height and IconButton size in lockstep.
+ */
+type IconButtonSize = NonNullable<ButtonVariants['size']>;
+export declare const ICON_BUTTON_SIZE_OVERRIDES: Record<IconButtonSize, string>;
+/** Always-applied layout primitives — not token-driven (geometric CSS). */
+export declare const ICON_BUTTON_BASE = "aspect-square inline-flex items-center justify-center";
+export {};
+//# sourceMappingURL=iconButton.variants.d.ts.map

package/dist/src/components/IconButton/iconButton.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconButton.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/IconButton/iconButton.variants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAEnE;;;;;;;;;;;;;;;;;;GAkBG;AACH,KAAK,cAAc,GAAG,WAAW,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;AAE1D,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAIrE,CAAC;AAEF,2EAA2E;AAC3E,eAAO,MAAM,gBAAgB,0DAA0D,CAAC"}

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

@@ -0,0 +1,118 @@
+import { type ReactNode } from 'react';
+import type { MenuContentProps, MenuItemProps, MenuLabelProps, MenuProps, MenuSeparatorProps, MenuSkeletonProps, MenuTriggerProps } from './menu.types.js';
+/**
+ * `<Menu>` — top-level provider that wraps Radix `DropdownMenu.Root`.
+ *
+ * Compound API:
+ * ```tsx
+ * <Menu>
+ *   <MenuTrigger>
+ *     <IconButton aria-label="Actions"><MoreIcon /></IconButton>
+ *   </MenuTrigger>
+ *   <MenuContent>
+ *     <MenuLabel>Actions</MenuLabel>
+ *     <MenuItem onClick={onEdit}>Edit</MenuItem>
+ *     <MenuSeparator />
+ *     <MenuItem color="danger" onClick={onDelete}>Delete</MenuItem>
+ *   </MenuContent>
+ * </Menu>
+ * ```
+ *
+ * Built on `@radix-ui/react-dropdown-menu` (purpose-built menu
+ * primitive with full WAI-ARIA menu pattern + keyboard nav
+ * + type-ahead + portal mount).
+ *
+ * Sub-menus and controlled selection mode are deliberately out of
+ * scope for v1 (Sprint 4.4) — composable via Radix primitives if
+ * needed via explicit sub-component opt-in (future).
+ */
+export declare function Menu({ children, open, defaultOpen, onOpenChange, closeOnItemClick, modal, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * `<MenuTrigger>` — the element that opens the menu.
+ *
+ * Always renders the immediate child via Radix Slot (`asChild`) — the
+ * child receives the click handler + `aria-haspopup="menu"` +
+ * `aria-expanded` reactive to open state. Pass any interactive
+ * component as the child (`<IconButton>`, `<Button>`, `<Avatar>`,
+ * custom).
+ */
+export declare function MenuTrigger({ children }: MenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * `<MenuContent>` — the floating panel.
+ *
+ * Lazy-mounted via Radix Portal — zero DOM cost when the menu is
+ * closed (one of the perf properties we inherit from Radix +
+ * Atlaskit-style menus).
+ *
+ * Placement / sideOffset are read from the parent `<Menu>` via
+ * Radix context — we re-pull the `<Menu>` props via the
+ * `MenuContext` here.
+ *
+ * NB: placement is read from PARENT MENU PROPS, not from
+ * `<MenuContent>` directly — keeps the floating-positioning API on
+ * the provider where it belongs.
+ */
+export declare const MenuContent: import("react").ForwardRefExoticComponent<MenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * `<MenuItem>` — clickable row inside the menu.
+ *
+ * Memoized via `React.memo` for performance — re-renders only when
+ * its own props change, not when sibling items mutate. Pattern
+ * inspired by Atlaskit's `ButtonItem` optimization (one of the
+ * reasons Atlaskit menus stay responsive on large item lists).
+ *
+ * Bridge integration:
+ *   - `access` — hides / disables the item per RBAC
+ *   - `visibleWhen` — engine-reactive predicate
+ *
+ * Both gates fold into the visible/disabled state; when the
+ * predicate returns `false` OR `access` denies visibility, the
+ * item renders `null` (does NOT occupy a row in the menu, vs
+ * disabled which renders dimmed-but-present).
+ */
+declare function MenuItemImpl(props: MenuItemProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const MenuItem: import("react").MemoExoticComponent<typeof MenuItemImpl>;
+/**
+ * `<MenuLabel>` — non-interactive group heading.
+ *
+ * Renders via Radix `DropdownMenu.Label` which carries the right
+ * ARIA semantics (`role="presentation"` — not announced as a
+ * `menuitem` by screen readers).
+ */
+export declare function MenuLabel({ children, className }: MenuLabelProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * `<MenuSeparator>` — horizontal divider between items.
+ *
+ * Renders via Radix `DropdownMenu.Separator` — semantically correct
+ * `role="separator"` for screen readers navigating the menu.
+ */
+export declare function MenuSeparator({ className }: MenuSeparatorProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * `<MenuSkeleton>` — Atlaskit-style loading state.
+ *
+ * Renders `count` placeholder rows (default 3) inside the menu while
+ * real items are being fetched. Each row matches the geometry of a
+ * real `<MenuItem>` (height, padding, icon slot) so the layout
+ * doesn't jump when the real data arrives.
+ *
+ * `withHeading=true` adds a skeleton heading at the top, mimicking a
+ * `<MenuLabel>` — useful when the real menu starts with a section
+ * label.
+ *
+ * Pure visual — no animation overhead beyond Tailwind's
+ * `animate-pulse` (motion-reduce-safe).
+ *
+ * @example
+ * ```tsx
+ * <MenuContent>
+ *   {isLoading ? (
+ *     <MenuSkeleton count={5} withHeading />
+ *   ) : (
+ *     items.map((it) => <MenuItem key={it.id}>{it.label}</MenuItem>)
+ *   )}
+ * </MenuContent>
+ * ```
+ */
+export declare function MenuSkeleton({ count, withHeading, className, }: MenuSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export type { ReactNode };
+//# sourceMappingURL=Menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EACV,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,SAAS,EACT,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,iBAAiB,CAAC;AAmBzB;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,gBAAuB,EACvB,KAAa,GACd,EAAE,SAAS,2CAaX;AAID;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CAEzD;AAID;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,WAAW,6GAqCvB,CAAC;AAMF;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,YAAY,CAAC,KAAK,EAAE,aAAa,kDAkDzC;AAED,eAAO,MAAM,QAAQ,0DAAqB,CAAC;AAK3C;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,2CAOhE;AAID;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,EAAE,kBAAkB,2CAG9D;AAID;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAS,EACT,WAAmB,EACnB,SAAS,GACV,EAAE,iBAAiB,2CAkBnB;AAmBD,YAAY,EAAE,SAAS,EAAE,CAAC"}

package/dist/src/components/Menu/menu.types.d.ts

@@ -0,0 +1,179 @@
+import type { ReactNode } from 'react';
+import type { ClassValue } from 'tailwind-variants';
+import type { Engine } from '@dashforge/ui-core';
+import type { AccessRequirement } from '@dashforge/rbac';
+/**
+ * Placement of the menu content relative to the trigger. Maps 1:1 to
+ * Radix DropdownMenu's `side` + `align` pair via the internal
+ * helpers in Menu.tsx.
+ */
+export type MenuPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+/**
+ * Props for the top-level `<Menu>` provider.
+ *
+ * Wraps Radix `DropdownMenu.Root`. Provides open-state coordination
+ * + closeOnItemClick context for descendant `<MenuItem>`s.
+ */
+export interface MenuProps {
+    /** Compound children: `<MenuTrigger>` + `<MenuContent>`. */
+    children: ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Default open state for uncontrolled mode. @default false */
+    defaultOpen?: boolean;
+    /** Open/close callback (controlled). */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Close the menu when an item is clicked. Set to `false` for
+     * filter-style menus where item clicks should NOT dismiss (e.g.,
+     * multi-select checkbox menus, sticky filter pills).
+     * @default true
+     */
+    closeOnItemClick?: boolean;
+    /**
+     * Placement of the content relative to the trigger.
+     * @default 'bottom-start'
+     */
+    placement?: MenuPlacement;
+    /**
+     * Pixel offset between trigger and content along the perpendicular
+     * axis (e.g., for `placement='bottom-*'`, the vertical gap).
+     * @default 6
+     */
+    sideOffset?: number;
+    /**
+     * Modal mode (Radix). When `true`, the menu blocks interaction with
+     * the rest of the page (focus trap + outside scroll lock). When
+     * `false`, dismissal is automatic on outside-click but the page
+     * remains interactive. Default false matches the "lightweight
+     * action menu" pattern.
+     * @default false
+     */
+    modal?: boolean;
+}
+/**
+ * Props for `<MenuTrigger>` — the element that opens the menu.
+ *
+ * Always renders via Radix Slot — the immediate child element
+ * (typically `<IconButton>`, `<Button>`, or a custom interactive
+ * component) receives the click handler, `aria-haspopup="menu"`,
+ * and `aria-expanded` reactive to open state.
+ */
+export interface MenuTriggerProps {
+    /** The trigger element. */
+    children: ReactNode;
+}
+/**
+ * Props for `<MenuContent>` — the floating panel.
+ *
+ * Rendered through Radix `DropdownMenu.Portal`, lazily mounted only
+ * when the menu is open (cost zero in DOM when closed).
+ */
+export interface MenuContentProps {
+    /** Items + labels + separators + skeletons. */
+    children: ReactNode;
+    /** CSS min-width for the menu panel. */
+    minWidth?: number | string;
+    /** Standard className — appended to the root via `cn()`. */
+    className?: string;
+    /** Root-element class shortcut. */
+    sx?: ClassValue;
+}
+/**
+ * Visual / semantic color of a `<MenuItem>`. `'danger'` highlights
+ * destructive actions with a red hover state.
+ */
+export type MenuItemColor = 'default' | 'danger';
+/**
+ * Props for `<MenuItem>` — a clickable row inside the menu.
+ *
+ * Memoized (`React.memo`) for perf — re-renders only on prop change.
+ * Pattern inspired by Atlaskit's ButtonItem optimization.
+ */
+export interface MenuItemProps {
+    /** Item label / content. */
+    children: ReactNode;
+    /**
+     * Click handler. After firing, the menu closes (unless the parent
+     * `<Menu closeOnItemClick={false}>` opts out).
+     */
+    onClick?: () => void;
+    /** Leading icon slot. */
+    icon?: ReactNode;
+    /**
+     * Trailing slot — typically a keyboard shortcut (`"⌘K"`), a
+     * status hint, or a sub-menu chevron (when sub-menus arrive).
+     */
+    endIcon?: ReactNode;
+    /** Disabled state — suppresses click + dims the item. */
+    disabled?: boolean;
+    /**
+     * Visual hint of "active option" — for menus that show current
+     * selection (e.g., theme picker). No controlled selection state
+     * by design (v1) — purely visual.
+     */
+    selected?: boolean;
+    /**
+     * Color intent. `'danger'` highlights destructive actions
+     * (Delete, Remove, Sign out) with a red hover tint.
+     * @default 'default'
+     */
+    color?: MenuItemColor;
+    /**
+     * RBAC requirement. When the current subject doesn't satisfy it,
+     * the item is hidden (or disabled per `onUnauthorized`).
+     */
+    access?: AccessRequirement;
+    /**
+     * Reactive visibility predicate. When `false`, the item renders
+     * `null`. Use for state-driven menu items (e.g., "Restore" only
+     * when an item was just deleted).
+     */
+    visibleWhen?: (engine: Engine) => boolean;
+    /** Standard className. */
+    className?: string;
+    /** Root-element class shortcut. */
+    sx?: ClassValue;
+}
+/**
+ * Props for `<MenuLabel>` — non-interactive group heading.
+ *
+ * Rendered as `role="presentation"` so screen readers don't
+ * announce it as a menuitem. Typical use: section dividers inside
+ * a menu ("Workspace", "Account", "Help").
+ */
+export interface MenuLabelProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Props for `<MenuSeparator>` — horizontal divider between items.
+ */
+export interface MenuSeparatorProps {
+    className?: string;
+}
+/**
+ * Props for `<MenuSkeleton>` — Atlaskit-style loading state.
+ *
+ * Renders N placeholder rows that mimic the menu's item geometry,
+ * giving the user immediate visual feedback while the real items
+ * are being fetched (e.g., "Recent files" pulled from an API).
+ * Strictly perceived-performance UX: no animation overhead beyond
+ * Tailwind's `animate-pulse`.
+ */
+export interface MenuSkeletonProps {
+    /**
+     * Number of skeleton item rows to render.
+     * @default 3
+     */
+    count?: number;
+    /**
+     * Show a skeleton heading at the top of the list (matches the
+     * height + indent of a real `<MenuLabel>`).
+     * @default false
+     */
+    withHeading?: boolean;
+    /** Standard className. */
+    className?: string;
+}
+//# sourceMappingURL=menu.types.d.ts.map

package/dist/src/components/Menu/menu.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Menu/menu.types.ts"],"names":[],"mappings":"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"}