@particle-academy/react-fancy 5.11.0 → 5.13.1

package/dist/time-picker.d.cts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { F as FieldMode } from './inputs.types-CkWdvN-t.cjs';
+import './types-8Sv0rCjw.cjs';
+
+interface TimePickerProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    format?: "12h" | "24h";
+    minuteStep?: number;
+    disabled?: boolean;
+    className?: string;
+    /** `"edit"` (default) renders the spinners; `"view"` renders the time as text. */
+    mode?: FieldMode;
+}
+
+declare const TimePicker: react.ForwardRefExoticComponent<TimePickerProps & react.RefAttributes<HTMLDivElement>>;
+
+export { TimePicker, type TimePickerProps };

package/dist/time-picker.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { F as FieldMode } from './inputs.types-DERzxpe1.js';
+import './types-8Sv0rCjw.js';
+
+interface TimePickerProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    format?: "12h" | "24h";
+    minuteStep?: number;
+    disabled?: boolean;
+    className?: string;
+    /** `"edit"` (default) renders the spinners; `"view"` renders the time as text. */
+    mode?: FieldMode;
+}
+
+declare const TimePicker: react.ForwardRefExoticComponent<TimePickerProps & react.RefAttributes<HTMLDivElement>>;
+
+export { TimePicker, type TimePickerProps };

package/dist/time-picker.js

@@ -0,0 +1,7 @@
+export { TimePicker } from './chunk-SKI33QNW.js';
+import './chunk-OL53XYHF.js';
+import './chunk-NRXK42LO.js';
+import './chunk-6FQGMVF2.js';
+import './chunk-DSUHZO6T.js';
+//# sourceMappingURL=time-picker.js.map
+//# sourceMappingURL=time-picker.js.map

package/dist/time-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"time-picker.js"}

package/dist/timeline.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+var chunkPRJSEZ5F_cjs = require('./chunk-PRJSEZ5F.cjs');
+require('./chunk-3Z6ALUWP.cjs');
+
+
+
+Object.defineProperty(exports, "Timeline", {
+  enumerable: true,
+  get: function () { return chunkPRJSEZ5F_cjs.Timeline; }
+});
+Object.defineProperty(exports, "TimelineBlock", {
+  enumerable: true,
+  get: function () { return chunkPRJSEZ5F_cjs.TimelineBlock; }
+});
+Object.defineProperty(exports, "TimelineItem", {
+  enumerable: true,
+  get: function () { return chunkPRJSEZ5F_cjs.TimelineItem; }
+});
+//# sourceMappingURL=timeline.cjs.map
+//# sourceMappingURL=timeline.cjs.map

package/dist/timeline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"timeline.cjs"}

package/dist/timeline.d.cts

@@ -0,0 +1,10 @@
+import { T as TimelineItemProps, a as TimelineBlockProps } from './Timeline-7zHhIk3P.cjs';
+export { b as Timeline, c as TimelineEvent, d as TimelineOrientation, e as TimelineProps, f as TimelineVariant } from './Timeline-7zHhIk3P.cjs';
+import * as react from 'react';
+import './types-8Sv0rCjw.cjs';
+
+declare const TimelineItem: react.ForwardRefExoticComponent<TimelineItemProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const TimelineBlock: react.ForwardRefExoticComponent<TimelineBlockProps & react.RefAttributes<HTMLDivElement>>;
+
+export { TimelineBlock, TimelineBlockProps, TimelineItem, TimelineItemProps };

package/dist/timeline.d.ts

@@ -0,0 +1,10 @@
+import { T as TimelineItemProps, a as TimelineBlockProps } from './Timeline-Cvrd7N7-.js';
+export { b as Timeline, c as TimelineEvent, d as TimelineOrientation, e as TimelineProps, f as TimelineVariant } from './Timeline-Cvrd7N7-.js';
+import * as react from 'react';
+import './types-8Sv0rCjw.js';
+
+declare const TimelineItem: react.ForwardRefExoticComponent<TimelineItemProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const TimelineBlock: react.ForwardRefExoticComponent<TimelineBlockProps & react.RefAttributes<HTMLDivElement>>;
+
+export { TimelineBlock, TimelineBlockProps, TimelineItem, TimelineItemProps };

package/dist/timeline.js

@@ -0,0 +1,4 @@
+export { Timeline, TimelineBlock, TimelineItem } from './chunk-ZWOEKDNI.js';
+import './chunk-DSUHZO6T.js';
+//# sourceMappingURL=timeline.js.map
+//# sourceMappingURL=timeline.js.map

package/dist/timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"timeline.js"}

package/dist/toast.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var chunkZFVSEO5Z_cjs = require('./chunk-ZFVSEO5Z.cjs');
+require('./chunk-NBZC6LOB.cjs');
+require('./chunk-3Z6ALUWP.cjs');
+
+
+
+Object.defineProperty(exports, "Toast", {
+  enumerable: true,
+  get: function () { return chunkZFVSEO5Z_cjs.Toast; }
+});
+Object.defineProperty(exports, "useToast", {
+  enumerable: true,
+  get: function () { return chunkZFVSEO5Z_cjs.useToast; }
+});
+//# sourceMappingURL=toast.cjs.map
+//# sourceMappingURL=toast.cjs.map

package/dist/toast.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"toast.cjs"}

package/dist/toast.d.cts

@@ -0,0 +1,54 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type ToastVariant = "default" | "success" | "error" | "warning" | "info";
+type ToastPosition = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+/** A single control offered inside a toast — typically "Undo". */
+interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+interface ToastData {
+    id: string;
+    title: string;
+    description?: string;
+    variant?: ToastVariant;
+    /**
+     * Auto-dismiss delay in ms. `0` (or less) never dismisses.
+     *
+     * Defaults to 5000 — but to 0 when `action` is set, because expiring the
+     * offer is the same bug as making undo a timeout. Pass a number to opt back in.
+     */
+    duration?: number;
+    /**
+     * An action the toast offers, rendered as a real button.
+     *
+     * Undo has to be a control rather than a countdown: a timeout makes the safety
+     * of an action depend on how fast someone reads, which is worst for exactly
+     * the people who need undo most.
+     */
+    action?: ToastAction;
+}
+interface ToastContextValue {
+    toasts: ToastData[];
+    toast: (data: Omit<ToastData, "id">) => string;
+    dismiss: (id: string) => void;
+}
+interface ToastProviderProps {
+    children: ReactNode;
+    position?: ToastPosition;
+    maxToasts?: number;
+}
+interface ToastItemProps {
+    data: ToastData;
+    onDismiss: (id: string) => void;
+}
+
+declare function ToastProvider({ children, position, maxToasts, }: ToastProviderProps): react.JSX.Element;
+declare const Toast: {
+    Provider: typeof ToastProvider;
+};
+
+declare function useToast(): ToastContextValue;
+
+export { Toast, type ToastAction, type ToastContextValue, type ToastData, type ToastItemProps, type ToastPosition, type ToastProviderProps, type ToastVariant, useToast };

package/dist/toast.d.ts

@@ -0,0 +1,54 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type ToastVariant = "default" | "success" | "error" | "warning" | "info";
+type ToastPosition = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+/** A single control offered inside a toast — typically "Undo". */
+interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+interface ToastData {
+    id: string;
+    title: string;
+    description?: string;
+    variant?: ToastVariant;
+    /**
+     * Auto-dismiss delay in ms. `0` (or less) never dismisses.
+     *
+     * Defaults to 5000 — but to 0 when `action` is set, because expiring the
+     * offer is the same bug as making undo a timeout. Pass a number to opt back in.
+     */
+    duration?: number;
+    /**
+     * An action the toast offers, rendered as a real button.
+     *
+     * Undo has to be a control rather than a countdown: a timeout makes the safety
+     * of an action depend on how fast someone reads, which is worst for exactly
+     * the people who need undo most.
+     */
+    action?: ToastAction;
+}
+interface ToastContextValue {
+    toasts: ToastData[];
+    toast: (data: Omit<ToastData, "id">) => string;
+    dismiss: (id: string) => void;
+}
+interface ToastProviderProps {
+    children: ReactNode;
+    position?: ToastPosition;
+    maxToasts?: number;
+}
+interface ToastItemProps {
+    data: ToastData;
+    onDismiss: (id: string) => void;
+}
+
+declare function ToastProvider({ children, position, maxToasts, }: ToastProviderProps): react.JSX.Element;
+declare const Toast: {
+    Provider: typeof ToastProvider;
+};
+
+declare function useToast(): ToastContextValue;
+
+export { Toast, type ToastAction, type ToastContextValue, type ToastData, type ToastItemProps, type ToastPosition, type ToastProviderProps, type ToastVariant, useToast };

package/dist/toast.js

@@ -0,0 +1,5 @@
+export { Toast, useToast } from './chunk-MZIU27UY.js';
+import './chunk-WHEXTDPV.js';
+import './chunk-DSUHZO6T.js';
+//# sourceMappingURL=toast.js.map
+//# sourceMappingURL=toast.js.map

package/dist/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"toast.js"}

package/dist/tooltip.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var chunkVBZZ4CMM_cjs = require('./chunk-VBZZ4CMM.cjs');
+require('./chunk-J2DI6RMR.cjs');
+require('./chunk-NBZC6LOB.cjs');
+require('./chunk-3Z6ALUWP.cjs');
+
+
+
+Object.defineProperty(exports, "Tooltip", {
+  enumerable: true,
+  get: function () { return chunkVBZZ4CMM_cjs.Tooltip; }
+});
+//# sourceMappingURL=tooltip.cjs.map
+//# sourceMappingURL=tooltip.cjs.map

package/dist/tooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"tooltip.cjs"}

package/dist/tooltip.d.cts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { ReactElement, ReactNode } from 'react';
+import { P as Placement } from './types-8Sv0rCjw.cjs';
+
+interface TooltipProps {
+    children: ReactElement;
+    content: ReactNode;
+    placement?: Placement;
+    delay?: number;
+    offset?: number;
+    className?: string;
+}
+
+declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Tooltip, type TooltipProps };

package/dist/tooltip.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { ReactElement, ReactNode } from 'react';
+import { P as Placement } from './types-8Sv0rCjw.js';
+
+interface TooltipProps {
+    children: ReactElement;
+    content: ReactNode;
+    placement?: Placement;
+    delay?: number;
+    offset?: number;
+    className?: string;
+}
+
+declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Tooltip, type TooltipProps };

package/dist/tooltip.js

@@ -0,0 +1,6 @@
+export { Tooltip } from './chunk-E4LFD44D.js';
+import './chunk-MQ6VGG62.js';
+import './chunk-WHEXTDPV.js';
+import './chunk-DSUHZO6T.js';
+//# sourceMappingURL=tooltip.js.map
+//# sourceMappingURL=tooltip.js.map

package/dist/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"tooltip.js"}

package/dist/tree-nav.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var chunkYXC7QHNT_cjs = require('./chunk-YXC7QHNT.cjs');
+require('./chunk-3Z6ALUWP.cjs');
+
+
+
+Object.defineProperty(exports, "TreeNav", {
+  enumerable: true,
+  get: function () { return chunkYXC7QHNT_cjs.TreeNav; }
+});
+Object.defineProperty(exports, "useTreeNav", {
+  enumerable: true,
+  get: function () { return chunkYXC7QHNT_cjs.useTreeNav; }
+});
+//# sourceMappingURL=tree-nav.cjs.map
+//# sourceMappingURL=tree-nav.cjs.map

package/dist/tree-nav.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"tree-nav.cjs"}

package/dist/tree-nav.d.cts

@@ -0,0 +1,114 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface TreeNodeData {
+    /** Unique identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Node type for icon rendering */
+    type?: "file" | "folder";
+    /** File extension hint (e.g., "ts", "php", "html") for icon coloring */
+    ext?: string;
+    /** Nested children */
+    children?: TreeNodeData[];
+    /** Custom icon override */
+    icon?: ReactNode;
+    /** Whether the node is disabled */
+    disabled?: boolean;
+}
+/** Where the dragged node will land relative to the drop target */
+type DropPosition = "before" | "after" | "inside";
+interface DragState {
+    draggedNodeId: string | null;
+    dropTargetId: string | null;
+    dropPosition: DropPosition | null;
+}
+interface TreeNavProps {
+    /** Tree data */
+    nodes: TreeNodeData[];
+    /** Currently selected node ID */
+    selectedId?: string;
+    /** Callback when a node is selected */
+    onSelect?: (id: string, node: TreeNodeData) => void;
+    /** Callback when a node is right-clicked */
+    onNodeContextMenu?: (e: React.MouseEvent, node: TreeNodeData) => void;
+    /** Enable drag-and-drop reordering (default: false) */
+    draggable?: boolean;
+    /** Callback when a node is moved via drag and drop */
+    onNodeMove?: (sourceId: string, targetId: string, position: DropPosition) => void;
+    /** Accept drops from outside the tree — OS files, items from other
+     *  components, etc. When true, drag-over is allowed for any data source
+     *  and `onExternalDrop` fires on drop. (default: false) */
+    acceptExternalDrops?: boolean;
+    /** Called when an external drag (file or cross-component) is dropped on
+     *  a node. The raw event lets you read `event.dataTransfer.files` for OS
+     *  file drops or `event.dataTransfer.getData(type)` for custom MIME
+     *  payloads from other components. */
+    onExternalDrop?: (event: React.DragEvent, target: TreeNodeData, position: DropPosition) => void;
+    /** Controlled expanded node IDs */
+    expandedIds?: string[];
+    /** Default expanded node IDs (uncontrolled) */
+    defaultExpandedIds?: string[];
+    /** Callback when expanded state changes */
+    onExpandedChange?: (ids: string[]) => void;
+    /** Expand all folders by default */
+    defaultExpandAll?: boolean;
+    /** Indent size per nesting level in px (default: 16) */
+    indentSize?: number;
+    /** Show file/folder icons (default: true) */
+    showIcons?: boolean;
+    /**
+     * Cursor shown on hover over a draggable node.
+     * - `"none"` (default): the normal clickable cursor — no move affordance on
+     *   mere hover. A closed-hand `grabbing` cursor still appears while a drag is
+     *   actually happening. This suits click-to-select/open trees (file/nav
+     *   trees), where an always-on grab cursor wrongly implies move-first intent.
+     * - `"grab"`: show the open-hand `grab` cursor on hover. Opt in when the whole
+     *   row is genuinely a drag handle and reordering is the primary interaction.
+     * @default "none"
+     */
+    dragCursor?: "grab" | "none";
+    /** Custom className */
+    className?: string;
+}
+interface TreeNavContextValue {
+    selectedId?: string;
+    onSelect?: (id: string, node: TreeNodeData) => void;
+    onNodeContextMenu?: (e: React.MouseEvent, node: TreeNodeData) => void;
+    expandedIds: string[];
+    toggle: (id: string) => void;
+    indentSize: number;
+    showIcons: boolean;
+    draggable: boolean;
+    dragCursor: "grab" | "none";
+    dragState: DragState;
+    setDragState: (state: DragState) => void;
+    onNodeMove?: (sourceId: string, targetId: string, position: DropPosition) => void;
+    acceptExternalDrops: boolean;
+    onExternalDrop?: (event: React.DragEvent, target: TreeNodeData, position: DropPosition) => void;
+    nodes: TreeNodeData[];
+    expandNode: (id: string) => void;
+}
+interface TreeNodeProps {
+    node: TreeNodeData;
+    depth: number;
+    className?: string;
+}
+
+declare function TreeNode({ node, depth }: TreeNodeProps): react.JSX.Element;
+declare namespace TreeNode {
+    var displayName: string;
+}
+
+declare function TreeNavRoot({ nodes, selectedId, onSelect, onNodeContextMenu, draggable, onNodeMove, acceptExternalDrops, onExternalDrop, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, dragCursor, className, }: TreeNavProps): react.JSX.Element;
+declare namespace TreeNavRoot {
+    var displayName: string;
+}
+declare const TreeNav: typeof TreeNavRoot & {
+    Node: typeof TreeNode;
+};
+
+declare function useTreeNav(): TreeNavContextValue;
+
+export { type DropPosition, TreeNav, type TreeNavContextValue, type TreeNavProps, type TreeNodeData, type TreeNodeProps, useTreeNav };

package/dist/tree-nav.d.ts

@@ -0,0 +1,114 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface TreeNodeData {
+    /** Unique identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Node type for icon rendering */
+    type?: "file" | "folder";
+    /** File extension hint (e.g., "ts", "php", "html") for icon coloring */
+    ext?: string;
+    /** Nested children */
+    children?: TreeNodeData[];
+    /** Custom icon override */
+    icon?: ReactNode;
+    /** Whether the node is disabled */
+    disabled?: boolean;
+}
+/** Where the dragged node will land relative to the drop target */
+type DropPosition = "before" | "after" | "inside";
+interface DragState {
+    draggedNodeId: string | null;
+    dropTargetId: string | null;
+    dropPosition: DropPosition | null;
+}
+interface TreeNavProps {
+    /** Tree data */
+    nodes: TreeNodeData[];
+    /** Currently selected node ID */
+    selectedId?: string;
+    /** Callback when a node is selected */
+    onSelect?: (id: string, node: TreeNodeData) => void;
+    /** Callback when a node is right-clicked */
+    onNodeContextMenu?: (e: React.MouseEvent, node: TreeNodeData) => void;
+    /** Enable drag-and-drop reordering (default: false) */
+    draggable?: boolean;
+    /** Callback when a node is moved via drag and drop */
+    onNodeMove?: (sourceId: string, targetId: string, position: DropPosition) => void;
+    /** Accept drops from outside the tree — OS files, items from other
+     *  components, etc. When true, drag-over is allowed for any data source
+     *  and `onExternalDrop` fires on drop. (default: false) */
+    acceptExternalDrops?: boolean;
+    /** Called when an external drag (file or cross-component) is dropped on
+     *  a node. The raw event lets you read `event.dataTransfer.files` for OS
+     *  file drops or `event.dataTransfer.getData(type)` for custom MIME
+     *  payloads from other components. */
+    onExternalDrop?: (event: React.DragEvent, target: TreeNodeData, position: DropPosition) => void;
+    /** Controlled expanded node IDs */
+    expandedIds?: string[];
+    /** Default expanded node IDs (uncontrolled) */
+    defaultExpandedIds?: string[];
+    /** Callback when expanded state changes */
+    onExpandedChange?: (ids: string[]) => void;
+    /** Expand all folders by default */
+    defaultExpandAll?: boolean;
+    /** Indent size per nesting level in px (default: 16) */
+    indentSize?: number;
+    /** Show file/folder icons (default: true) */
+    showIcons?: boolean;
+    /**
+     * Cursor shown on hover over a draggable node.
+     * - `"none"` (default): the normal clickable cursor — no move affordance on
+     *   mere hover. A closed-hand `grabbing` cursor still appears while a drag is
+     *   actually happening. This suits click-to-select/open trees (file/nav
+     *   trees), where an always-on grab cursor wrongly implies move-first intent.
+     * - `"grab"`: show the open-hand `grab` cursor on hover. Opt in when the whole
+     *   row is genuinely a drag handle and reordering is the primary interaction.
+     * @default "none"
+     */
+    dragCursor?: "grab" | "none";
+    /** Custom className */
+    className?: string;
+}
+interface TreeNavContextValue {
+    selectedId?: string;
+    onSelect?: (id: string, node: TreeNodeData) => void;
+    onNodeContextMenu?: (e: React.MouseEvent, node: TreeNodeData) => void;
+    expandedIds: string[];
+    toggle: (id: string) => void;
+    indentSize: number;
+    showIcons: boolean;
+    draggable: boolean;
+    dragCursor: "grab" | "none";
+    dragState: DragState;
+    setDragState: (state: DragState) => void;
+    onNodeMove?: (sourceId: string, targetId: string, position: DropPosition) => void;
+    acceptExternalDrops: boolean;
+    onExternalDrop?: (event: React.DragEvent, target: TreeNodeData, position: DropPosition) => void;
+    nodes: TreeNodeData[];
+    expandNode: (id: string) => void;
+}
+interface TreeNodeProps {
+    node: TreeNodeData;
+    depth: number;
+    className?: string;
+}
+
+declare function TreeNode({ node, depth }: TreeNodeProps): react.JSX.Element;
+declare namespace TreeNode {
+    var displayName: string;
+}
+
+declare function TreeNavRoot({ nodes, selectedId, onSelect, onNodeContextMenu, draggable, onNodeMove, acceptExternalDrops, onExternalDrop, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, dragCursor, className, }: TreeNavProps): react.JSX.Element;
+declare namespace TreeNavRoot {
+    var displayName: string;
+}
+declare const TreeNav: typeof TreeNavRoot & {
+    Node: typeof TreeNode;
+};
+
+declare function useTreeNav(): TreeNavContextValue;
+
+export { type DropPosition, TreeNav, type TreeNavContextValue, type TreeNavProps, type TreeNodeData, type TreeNodeProps, useTreeNav };

package/dist/tree-nav.js

@@ -0,0 +1,4 @@
+export { TreeNav, useTreeNav } from './chunk-7XDKIZQE.js';
+import './chunk-DSUHZO6T.js';
+//# sourceMappingURL=tree-nav.js.map
+//# sourceMappingURL=tree-nav.js.map

package/dist/tree-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"tree-nav.js"}

package/dist/types-8Sv0rCjw.d.cts

@@ -0,0 +1,58 @@
+import { ElementType } from 'react';
+
+type Size = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * What a navigation primitive owes a router.
+ *
+ * Every nav surface here — `Navbar.Item`, `Sidebar.Item`, `Menu.Item`,
+ * `MobileMenu.Item`, `Breadcrumbs.Item` — used to hardcode a plain `<a href>`.
+ * That is a FULL PAGE LOAD in every client-routed app, and the only way around
+ * it was to nest a router `<Link>` inside the item: an anchor inside an anchor,
+ * which is invalid HTML and the same nested-anchor shape that already cost this
+ * suite an SSR hydration bug.
+ *
+ * `as` is the seam {@link ButtonProps.as} already had. It is router-agnostic on
+ * purpose — one prop serves Inertia, TanStack Router, React Router and Next
+ * rather than a package per router:
+ *
+ * ```tsx
+ * // href-based routers (Inertia, Next)
+ * <Navbar.Item as={Link} href="/dashboard">Dashboard</Navbar.Item>
+ *
+ * // to-based routers (TanStack Router, React Router) — `to` reaches the Link
+ * // through the forwarded rest props
+ * <Navbar.Item as={Link} to="/dashboard">Dashboard</Navbar.Item>
+ * ```
+ *
+ * Link mode engages on `href` OR `as`, because a `to`-based router never passes
+ * an `href` and would otherwise silently render the non-interactive fallback.
+ */
+interface NavigableProps {
+    /** Target URL. Renders link mode with a plain `<a>` unless `as` is given. */
+    href?: string;
+    /**
+     * Link-mode element override — the component to render INSTEAD of the plain
+     * `<a>`, e.g. a router's `<Link>` so navigation happens client-side. Receives
+     * `className`, the item's `data-*` handles, and every unrecognized prop, so
+     * router-specific props (`to`, `params`, `preload`, `search`) pass straight
+     * through. Ignored in button mode.
+     */
+    as?: ElementType;
+}
+/**
+ * The full Tailwind v4 named color palette — every default hue, including all
+ * five gray families. Components that accept a `color` should type it as this
+ * so the whole palette is available.
+ */
+type Color = "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
+type Variant = "solid" | "outline" | "ghost" | "soft";
+/** Button accepts the full Tailwind v4 palette (alias of {@link Color}). */
+type ButtonColor = Color;
+/**
+ * @deprecated Renamed to {@link ButtonColor}. `ActionColor` remains as an alias
+ * for backward compatibility and will be removed in a future major version.
+ */
+type ActionColor = ButtonColor;
+type Placement = "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end";
+
+export type { ActionColor as A, ButtonColor as B, Color as C, NavigableProps as N, Placement as P, Size as S, Variant as V };