@dashforge/tw 0.10.0-beta → 1.0.0

package/dist/components/Textarea/textarea.variants.d.ts

@@ -0,0 +1,197 @@
+import { type VariantProps } from 'tailwind-variants';
+/**
+ * Tailwind-variants recipe for `<Textarea>` with 7 slots.
+ *
+ * Sibling of `<TextField>` but renders a multi-line `<textarea>` element
+ * instead of a single-line `<input>`. Shares the same slot taxonomy +
+ * variant axes so consumers can swap the two without rewriting overrides.
+ */
+export declare const textareaVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            inputWrapper: string;
+            input: string;
+        };
+        md: {
+            inputWrapper: string;
+            input: string;
+        };
+        lg: {
+            inputWrapper: string;
+            input: string;
+        };
+    };
+    layout: {
+        stacked: {
+            root: string;
+        };
+        inline: {
+            root: string;
+            label: string;
+        };
+    };
+    error: {
+        true: {
+            inputWrapper: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            root: string;
+            inputWrapper: string;
+        };
+    };
+    disabled: {
+        true: {
+            inputWrapper: string;
+        };
+    };
+    resize: {
+        none: {
+            input: string;
+        };
+        vertical: {
+            input: string;
+        };
+        horizontal: {
+            input: string;
+        };
+        both: {
+            input: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    requiredMark: string;
+    inputWrapper: string[];
+    input: string[];
+    helperText: string;
+    errorText: string;
+}, undefined, {
+    size: {
+        sm: {
+            inputWrapper: string;
+            input: string;
+        };
+        md: {
+            inputWrapper: string;
+            input: string;
+        };
+        lg: {
+            inputWrapper: string;
+            input: string;
+        };
+    };
+    layout: {
+        stacked: {
+            root: string;
+        };
+        inline: {
+            root: string;
+            label: string;
+        };
+    };
+    error: {
+        true: {
+            inputWrapper: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            root: string;
+            inputWrapper: string;
+        };
+    };
+    disabled: {
+        true: {
+            inputWrapper: string;
+        };
+    };
+    resize: {
+        none: {
+            input: string;
+        };
+        vertical: {
+            input: string;
+        };
+        horizontal: {
+            input: string;
+        };
+        both: {
+            input: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    requiredMark: string;
+    inputWrapper: string[];
+    input: string[];
+    helperText: string;
+    errorText: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            inputWrapper: string;
+            input: string;
+        };
+        md: {
+            inputWrapper: string;
+            input: string;
+        };
+        lg: {
+            inputWrapper: string;
+            input: string;
+        };
+    };
+    layout: {
+        stacked: {
+            root: string;
+        };
+        inline: {
+            root: string;
+            label: string;
+        };
+    };
+    error: {
+        true: {
+            inputWrapper: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            root: string;
+            inputWrapper: string;
+        };
+    };
+    disabled: {
+        true: {
+            inputWrapper: string;
+        };
+    };
+    resize: {
+        none: {
+            input: string;
+        };
+        vertical: {
+            input: string;
+        };
+        horizontal: {
+            input: string;
+        };
+        both: {
+            input: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    requiredMark: string;
+    inputWrapper: string[];
+    input: string[];
+    helperText: string;
+    errorText: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TextareaVariants = VariantProps<typeof textareaVariants>;
+//# sourceMappingURL=textarea.variants.d.ts.map

package/dist/components/Textarea/textarea.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.variants.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/textarea.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAyE3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,12 @@
+import type { TimePickerProps } from './timePicker.types.js';
+/**
+ * Dashforge TW `<TimePicker>` — a form-bound time-of-day field.
+ *
+ * A read-only trigger button paired with a time-list popover (Radix
+ * Popover). Integrates with the Dashforge form bridge + RBAC.
+ *
+ * Storage contract: a canonical 24-hour `"HH:mm"` string, or `null` —
+ * shared with the MUI `@dashforge/ui` `TimePicker`. `hour12` is display-only.
+ */
+export declare function TimePicker(props: TimePickerProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=TimePicker.d.ts.map

package/dist/components/TimePicker/TimePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAkB7D;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,kDAwOhD"}

package/dist/components/TimePicker/timePicker.types.d.ts

@@ -0,0 +1,80 @@
+import type { ReactNode } from 'react';
+import type { Engine } from '@dashforge/ui-core';
+import type { AccessRequirement } from '@dashforge/rbac';
+/** Per-slot `className` overrides for `<TimePicker>`. */
+export interface TimePickerSlotProps {
+    root?: {
+        className?: string;
+    };
+    label?: {
+        className?: string;
+    };
+    requiredMark?: {
+        className?: string;
+    };
+    trigger?: {
+        className?: string;
+    };
+    helperText?: {
+        className?: string;
+    };
+    errorText?: {
+        className?: string;
+    };
+}
+/**
+ * Props for the `<TimePicker>` form field (Tailwind skin).
+ *
+ * A read-only trigger paired with a `<Calendar>`-style time-list popover.
+ * The stored value is a canonical 24-hour `"HH:mm"` string, or `null`.
+ * 12-hour notation (`hour12`) is display-only. No date, no timezone.
+ *
+ * The prop surface mirrors the MUI `@dashforge/ui` `TimePicker`.
+ */
+export interface TimePickerProps {
+    /** Field name — the bridge registration key. Required. */
+    name: string;
+    /** Validation rules forwarded to the form bridge. */
+    rules?: unknown;
+    /** Field label. */
+    label?: ReactNode;
+    /** Helper text below the control (overrides a bridge error message). */
+    helperText?: ReactNode;
+    /** Explicit error state (overrides the bridge's auto error). */
+    error?: boolean;
+    /** Marks the field required (adds the label asterisk). */
+    required?: boolean;
+    /** Disables the field. */
+    disabled?: boolean;
+    /** Placeholder shown when no time is selected. */
+    placeholder?: string;
+    /** Label/control layout. */
+    layout?: 'stacked' | 'inline';
+    /** Reactive visibility predicate evaluated against the form engine. */
+    visibleWhen?: (engine: Engine) => boolean;
+    /** RBAC access requirement. */
+    access?: AccessRequirement;
+    /** Controlled value — `"HH:mm"` (24-hour) or `null`. */
+    value?: string | null;
+    /** Uncontrolled initial value. */
+    defaultValue?: string | null;
+    /** Fired with the new time (or `null` when cleared). */
+    onChange?: (value: string | null) => void;
+    /** Earliest selectable time, `"HH:mm"`. Default `"00:00"`. */
+    minTime?: string;
+    /** Latest selectable time, `"HH:mm"`. Default `"23:30"`. */
+    maxTime?: string;
+    /** Step between time-list options, in minutes. Default `30`. */
+    stepMinutes?: number;
+    /** Render the time list in 12-hour notation. Default `false`. */
+    hour12?: boolean;
+    /** Stretches the field to its container width. */
+    fullWidth?: boolean;
+    /** Root-level Tailwind class override. */
+    sx?: string;
+    /** Per-slot `className` overrides. */
+    slotProps?: TimePickerSlotProps;
+    /** Test id applied to the field root. */
+    testId?: string;
+}
+//# sourceMappingURL=timePicker.types.d.ts.map

package/dist/components/TimePicker/timePicker.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timePicker.types.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/timePicker.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,yDAAyD;AACzD,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,KAAK,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/B,YAAY,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,UAAU,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,SAAS,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACpC;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,eAAe;IAC9B,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mBAAmB;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wEAAwE;IACxE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,gEAAgE;IAChE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC9B,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1C,+BAA+B;IAC/B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,wDAAwD;IACxD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kDAAkD;IAClD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0CAA0C;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/components/TimePicker/timePicker.variants.d.ts

@@ -0,0 +1,103 @@
+/**
+ * Slots for `<TimePicker>` — a bridge-integrated time field whose trigger
+ * is a `<button>` styled as an input, opening a time-list popover.
+ *
+ * Theme identity: bare neutral / brand token-backed classes only — no
+ * `dark:` variants on the neutral palette (the preset CSS-var swap
+ * auto-inverts). See `_shared/themeIdentity.test.ts`.
+ */
+export declare const timePickerVariants: import("tailwind-variants").TVReturnType<{
+    layout: {
+        stacked: {};
+        inline: {
+            root: string;
+            label: string;
+        };
+    };
+    error: {
+        true: {
+            trigger: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            root: string;
+            trigger: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    requiredMark: string;
+    trigger: string;
+    value: string;
+    placeholder: string;
+    icon: string;
+    list: string;
+    option: string;
+    helperText: string;
+    errorText: string;
+}, undefined, {
+    layout: {
+        stacked: {};
+        inline: {
+            root: string;
+            label: string;
+        };
+    };
+    error: {
+        true: {
+            trigger: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            root: string;
+            trigger: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    requiredMark: string;
+    trigger: string;
+    value: string;
+    placeholder: string;
+    icon: string;
+    list: string;
+    option: string;
+    helperText: string;
+    errorText: string;
+}, import("tailwind-variants").TVReturnType<{
+    layout: {
+        stacked: {};
+        inline: {
+            root: string;
+            label: string;
+        };
+    };
+    error: {
+        true: {
+            trigger: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            root: string;
+            trigger: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    requiredMark: string;
+    trigger: string;
+    value: string;
+    placeholder: string;
+    icon: string;
+    list: string;
+    option: string;
+    helperText: string;
+    errorText: string;
+}, undefined, unknown, unknown, undefined>>;
+//# sourceMappingURL=timePicker.variants.d.ts.map

package/dist/components/TimePicker/timePicker.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timePicker.variants.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/timePicker.variants.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA0C7B,CAAC"}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,29 @@
+import type { TooltipProps } from './tooltip.types.js';
+/**
+ * Dashforge TW `<Tooltip>` — hoverable / focusable tooltip.
+ *
+ * Built on `@radix-ui/react-tooltip`:
+ *  - APG tooltip pattern: `role="tooltip"`, `aria-describedby` wired
+ *    to the trigger automatically (Radix manages the id linkage).
+ *  - Shows on hover OR keyboard focus.
+ *  - Dismissed on Escape or pointer leave.
+ *
+ * Wrap any single React node — it becomes the trigger via Radix's
+ * `asChild` slot. The trigger inherits `aria-describedby` so screen
+ * readers announce the tooltip content along with the trigger.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="Delete this item">
+ *   <Button variant="ghost">
+ *     <TrashIcon />
+ *   </Button>
+ * </Tooltip>
+ * ```
+ *
+ * Each consumer can also wrap the entire app once in
+ * `<RadixTooltip.Provider>` to share delay/skip configuration; we
+ * include a per-component provider here for ease-of-use.
+ */
+export declare function Tooltip(props: TooltipProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/Tooltip/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CAsC1C"}

package/dist/components/Tooltip/tooltip.types.d.ts

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+export interface TooltipSlotProps {
+    content?: {
+        className?: string;
+    };
+    arrow?: {
+        className?: string;
+    };
+}
+/**
+ * Props for `<Tooltip>`.
+ *
+ * Built on `@radix-ui/react-tooltip`. Wrap any element with a tooltip
+ * that follows APG semantics (`role="tooltip"`, `aria-describedby`
+ * wired to the trigger).
+ *
+ * Renders an arrow by default. Three side options
+ * (top / right / bottom / left) with 'top' as default. Delay
+ * configurable via `delayDuration` (forwarded to Radix Provider).
+ */
+export interface TooltipProps {
+    /** The element that, when hovered/focused, shows the tooltip. */
+    children: ReactNode;
+    /** Tooltip body content. */
+    content: ReactNode;
+    /** Side of the trigger to show the tooltip on. @default 'top' */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Alignment along the perpendicular axis. @default 'center' */
+    align?: 'start' | 'center' | 'end';
+    /** Hide the arrow indicator. @default false (arrow shown) */
+    hideArrow?: boolean;
+    /** Delay before the tooltip shows on hover (ms). @default 200 */
+    delayDuration?: number;
+    /**
+     * Controlled open state. Use when the tooltip should be programmatic
+     * (e.g. revealed on a manual button press). Omit for default
+     * hover / focus behavior.
+     */
+    open?: boolean;
+    /** Called when the tooltip's open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Side offset in pixels from the trigger. @default 4 */
+    sideOffset?: number;
+    /** Per-slot overrides. */
+    slotProps?: TooltipSlotProps;
+}
+//# sourceMappingURL=tooltip.types.d.ts.map

package/dist/components/Tooltip/tooltip.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/tooltip.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,KAAK,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAChC;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,YAAY;IAC3B,iEAAiE;IACjE,QAAQ,EAAE,SAAS,CAAC;IACpB,4BAA4B;IAC5B,OAAO,EAAE,SAAS,CAAC;IACnB,iEAAiE;IACjE,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,gEAAgE;IAChE,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iEAAiE;IACjE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oDAAoD;IACpD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B"}

package/dist/components/Tooltip/tooltip.variants.d.ts

@@ -0,0 +1,34 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const tooltipVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            content?: import("tailwind-merge").ClassNameValue;
+            arrow?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            content?: import("tailwind-merge").ClassNameValue;
+            arrow?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    content: string[];
+    arrow: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            content?: import("tailwind-merge").ClassNameValue;
+            arrow?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    content: string[];
+    arrow: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    content: string[];
+    arrow: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TooltipVariants = VariantProps<typeof tooltipVariants>;
+//# sourceMappingURL=tooltip.variants.d.ts.map

package/dist/components/Tooltip/tooltip.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.variants.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/tooltip.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAuB1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dist/components/TopBar/TopBar.d.ts

@@ -0,0 +1,33 @@
+import type { TopBarProps } from './topBar.types.js';
+/**
+ * Dashforge TW TopBar — sticky header with 3 named slots.
+ *
+ * Pure composition. Three regions arranged horizontally:
+ *
+ *   ┌──────────────────────────────────────────────────────────┐
+ *   │ start   │           center                  │      end   │
+ *   └──────────────────────────────────────────────────────────┘
+ *
+ * - `start` and `end` shrink to content.
+ * - `center` grows to fill remaining space.
+ * - If you pass `children` instead of `center`, those children render
+ *   in the center region — handy for terse JSX:
+ *
+ *   ```tsx
+ *   <TopBar start={<Logo />} end={<UserMenu />}>
+ *     <Breadcrumbs items={trail} />
+ *   </TopBar>
+ *   ```
+ *
+ * Default renders as `<header role="banner">` (implicit from
+ * `<header>` as a top-level landmark). Pass `asDiv` for cases where
+ * you don't want the banner role (e.g., nested inside another header).
+ *
+ * **A11y**:
+ *   - `<header>` is a banner landmark — only one per page; if you put
+ *     multiple TopBars on a page, use `asDiv` on the secondary ones.
+ *   - Slots are agnostic about ARIA — wrap your slot content with
+ *     appropriate roles (`<nav>`, `<search>`, etc.) where needed.
+ */
+export declare function TopBar(props: TopBarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TopBar.d.ts.map

package/dist/components/TopBar/TopBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopBar.d.ts","sourceRoot":"","sources":["../../../src/components/TopBar/TopBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,2CA+BxC"}

package/dist/components/TopBar/topBar.types.d.ts

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+import type { TopBarVariants } from './topBar.variants.js';
+export interface TopBarSlotProps {
+    root?: {
+        className?: string;
+    };
+    start?: {
+        className?: string;
+    };
+    center?: {
+        className?: string;
+    };
+    end?: {
+        className?: string;
+    };
+}
+/**
+ * Props for `<TopBar>`.
+ *
+ * Pure composition container with 3 named slots — `start`, `center`,
+ * `end` — that fill a sticky horizontal bar.
+ *
+ * Typical patterns:
+ *
+ *   - **start**: mobile menu toggle, brand/logo
+ *   - **center**: Breadcrumbs, page title, global search
+ *   - **end**: notifications icon, user menu, theme toggle
+ *
+ * The component is intentionally minimal: it just lays out the three
+ * regions. All semantics (e.g., `<header role="banner">`) come for
+ * free from rendering as an HTML `<header>` element.
+ */
+export interface TopBarProps extends TopBarVariants {
+    /** Left-aligned slot (mobile menu, brand). */
+    start?: ReactNode;
+    /** Center slot (breadcrumbs, title). Grows to fill remaining space. */
+    center?: ReactNode;
+    /** Right-aligned slot (actions, user menu). */
+    end?: ReactNode;
+    /** Convenience: render the bar as a plain `<div>` (no banner role). */
+    asDiv?: boolean;
+    /** Root className shortcut. */
+    sx?: string;
+    /** Per-slot className overrides. */
+    slotProps?: TopBarSlotProps;
+    /** Children render between `start` and `end` when no `center` is set. */
+    children?: ReactNode;
+}
+//# sourceMappingURL=topBar.types.d.ts.map

package/dist/components/TopBar/topBar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"topBar.types.d.ts","sourceRoot":"","sources":["../../../src/components/TopBar/topBar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,KAAK,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/B,MAAM,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,GAAG,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,WAAY,SAAQ,cAAc;IACjD,8CAA8C;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+CAA+C;IAC/C,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,uEAAuE;IACvE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+BAA+B;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oCAAoC;IACpC,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB"}