@taiv/ui 1.15.0 → 2.0.0

package/dist/components/Layout/Tabs/Tabs.stories.js

@@ -1,20 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Tabs } from './Tabs';
-import { Stack } from '../Stack/Stack';
 import { primary } from '../../../constants/colors';
 import { spacing } from '../../../constants/spacing';
 import { Text } from '../../Typography/Text/Text';
+import { Stack } from '../Stack/Stack';
+import { Tabs } from './Tabs';
 const meta = {
-    title: 'Components/Layout/Tabs',
-    component: Tabs,
-    parameters: {
-        layout: 'centered',
-        docs: {
-            description: {
-                component: "[View Mantine Docs](https://v6.mantine.dev/core/tabs/)\n\nThe Tabs component organizes content into sections that users can switch between. It extends Mantine v6's Tabs component with custom styling and variant options.",
-            },
-        },
-    },
     argTypes: {
         children: {
             control: false,
@@ -23,26 +13,10 @@ const meta = {
                 type: { summary: 'ReactNode' },
             },
         },
-        variant: {
-            control: { type: 'select' },
-            options: ['default', 'outline', 'pills'],
-            description: 'The preset variant to use for styling',
-            table: {
-                type: { summary: "'default' | 'outline' | 'pills'" },
-                defaultValue: { summary: "'default'" },
-            },
-        },
         defaultValue: {
             control: { type: 'select' },
-            options: ['overview', 'details', 'settings'],
             description: 'The default tab when the component is mounted',
-            table: {
-                type: { summary: 'string' },
-            },
-        },
-        value: {
-            control: { type: 'text' },
-            description: 'The currently active tab value',
+            options: ['overview', 'details', 'settings'],
             table: {
                 type: { summary: 'string' },
             },
@@ -61,44 +35,70 @@ const meta = {
                 type: { summary: 'Record<string, CSSObject>' },
             },
         },
+        value: {
+            control: { type: 'text' },
+            description: 'The currently active tab value',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        variant: {
+            control: { type: 'select' },
+            description: 'The preset variant to use for styling',
+            options: ['default', 'outline', 'pills'],
+            table: {
+                defaultValue: { summary: "'default'" },
+                type: { summary: "'default' | 'outline' | 'pills'" },
+            },
+        },
     },
+    component: Tabs,
+    parameters: {
+        docs: {
+            description: {
+                component: "[View Mantine Docs](https://v6.mantine.dev/core/tabs/)\n\nThe Tabs component organizes content into sections that users can switch between. It extends Mantine v6's Tabs component with custom styling and variant options.",
+            },
+        },
+        layout: 'centered',
+    },
+    title: 'Components/Layout/Tabs',
 };
 export default meta;
 export const Default = {
     args: {
         children: undefined,
-        variant: 'default',
         defaultValue: 'overview',
+        variant: 'default',
     },
     decorators: [
         (Story) => (_jsx("div", { style: { width: '600px' }, children: _jsx(Story, {}) })),
     ],
-    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "overview", children: "Overview" }), _jsx(Tabs.Tab, { value: "details", children: "Details" }), _jsx(Tabs.Tab, { value: "settings", children: "Settings" })] }), _jsx(Tabs.Panel, { mt: spacing.lg, value: "overview", children: _jsx(Text, { variant: "subtle", children: "This is the tab panel for Overview" }) }), _jsx(Tabs.Panel, { mt: spacing.lg, value: "details", children: _jsx(Text, { variant: "subtle", children: "This is the tab panel for Details" }) }), _jsx(Tabs.Panel, { mt: spacing.lg, value: "settings", children: _jsx(Text, { variant: "subtle", children: "This is the tab panel for Settings" }) })] })),
+    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: 'overview', children: "Overview" }), _jsx(Tabs.Tab, { value: 'details', children: "Details" }), _jsx(Tabs.Tab, { value: 'settings', children: "Settings" })] }), _jsx(Tabs.Panel, { mt: spacing.lg, value: 'overview', children: _jsx(Text, { variant: 'subtle', children: "This is the tab panel for Overview" }) }), _jsx(Tabs.Panel, { mt: spacing.lg, value: 'details', children: _jsx(Text, { variant: 'subtle', children: "This is the tab panel for Details" }) }), _jsx(Tabs.Panel, { mt: spacing.lg, value: 'settings', children: _jsx(Text, { variant: 'subtle', children: "This is the tab panel for Settings" }) })] })),
 };
 export const Variants = {
-    render: () => (_jsxs(Stack, { spacing: "48px", py: spacing.xl, sx: { width: '600px' }, children: [_jsx(Tabs, { defaultValue: "overview", variant: "default", children: _jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "overview", children: "Default" }), _jsx(Tabs.Tab, { value: "details", children: "Tab 2" }), _jsx(Tabs.Tab, { value: "settings", children: "Tab 3" })] }) }), _jsx(Tabs, { defaultValue: "overview", variant: "outline", children: _jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "overview", children: "Outline" }), _jsx(Tabs.Tab, { value: "details", children: "Tab 2" }), _jsx(Tabs.Tab, { value: "settings", children: "Tab 3" })] }) }), _jsx(Tabs, { defaultValue: "overview", variant: "pills", children: _jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "overview", children: "Pills" }), _jsx(Tabs.Tab, { value: "details", children: "Tab 2" }), _jsx(Tabs.Tab, { value: "settings", children: "Tab 3" })] }) })] })),
+    render: () => (_jsxs(Stack, { py: spacing.xl, spacing: '48px', sx: { width: '600px' }, children: [_jsx(Tabs, { defaultValue: 'overview', variant: 'default', children: _jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: 'overview', children: "Default" }), _jsx(Tabs.Tab, { value: 'details', children: "Tab 2" }), _jsx(Tabs.Tab, { value: 'settings', children: "Tab 3" })] }) }), _jsx(Tabs, { defaultValue: 'overview', variant: 'outline', children: _jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: 'overview', children: "Outline" }), _jsx(Tabs.Tab, { value: 'details', children: "Tab 2" }), _jsx(Tabs.Tab, { value: 'settings', children: "Tab 3" })] }) }), _jsx(Tabs, { defaultValue: 'overview', variant: 'pills', children: _jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: 'overview', children: "Pills" }), _jsx(Tabs.Tab, { value: 'details', children: "Tab 2" }), _jsx(Tabs.Tab, { value: 'settings', children: "Tab 3" })] }) })] })),
 };
 export const CustomStyling = {
     args: {
         defaultValue: 'overview',
         styles: {
+            panel: {
+                color: 'white',
+            },
             root: {
                 background: primary[200],
-                padding: '20px',
                 borderRadius: '12px',
+                padding: '20px',
             },
             tab: {
-                color: 'white',
                 '&:hover': {
+                    backgroundColor: primary[200],
                     color: 'white',
-                    backgroundColor: primary[300],
                 },
                 '&[data-active]': {
-                    color: 'white',
                     backgroundColor: primary[100],
+                    color: 'white',
                 },
-            },
-            panel: {
                 color: 'white',
             },
         },
@@ -106,7 +106,6 @@ export const CustomStyling = {
     decorators: [
         (Story) => (_jsx("div", { style: { width: '600px' }, children: _jsx(Story, {}) })),
     ],
-    render: (args) => (_jsxs(Tabs, { variant: "pills", ...args, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "overview", children: "Overview" }), _jsx(Tabs.Tab, { value: "details", children: "Details" })] }), _jsx(Tabs.Panel, { mt: spacing.lg, value: "overview", children: "Overview" }), _jsx(Tabs.Panel, { mt: spacing.lg, value: "details", children: "Details" })] })),
     parameters: {
         docs: {
             source: {
@@ -138,4 +137,5 @@ export const CustomStyling = {
             },
         },
     },
+    render: (args) => (_jsxs(Tabs, { variant: 'pills', ...args, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: 'overview', children: "Overview" }), _jsx(Tabs.Tab, { value: 'details', children: "Details" })] }), _jsx(Tabs.Panel, { mt: spacing.lg, value: 'overview', children: "Overview" }), _jsx(Tabs.Panel, { mt: spacing.lg, value: 'details', children: "Details" })] })),
 };

package/dist/components/Layout/VirtualGrid/VirtualGrid.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import { spacing as spacingTokens } from '../../../constants/spacing';
+import type { ResponsiveCols } from '../AutoGrid/AutoGrid';
+type SpacingToken = keyof typeof spacingTokens;
+export interface VirtualGridProps<T> {
+    /** Items to render. */
+    items: T[];
+    /**
+     * Stable key for each item. Applied to virtuoso's `computeItemKey` so
+     * cells keep their identity (and measured height) when items shift around
+     * — sort changes, filter updates, etc.
+     */
+    getKey: (item: T, index: number) => string;
+    /** Render function for each item. */
+    renderItem: (item: T, index: number) => React.ReactNode;
+    /**
+     * Number of columns. Accepts a number or a responsive map matching
+     * `AutoGrid`'s `ResponsiveCols` shape. `1` switches to the list-style
+     * virtuoso (`<Virtuoso>`); larger values use `<VirtuosoGrid>` with a
+     * CSS-grid container. Defaults to `1`.
+     */
+    cols?: number | ResponsiveCols;
+    /**
+     * Spacing between cells in px or a `@taiv/ui/constants` spacing token name
+     * (e.g. `'lg'`). Applied as a CSS-grid gap for multi-col layouts, or as
+     * bottom padding inside each list cell for cols=1.
+     */
+    gap?: SpacingToken | number;
+    /** Container style. */
+    style?: React.CSSProperties;
+    /** Container className. */
+    className?: string;
+    /**
+     * Optional callback when the visible item range changes. Useful for
+     * downstream "infinite load" hooks. Receives flat-item indices.
+     */
+    onItemsRendered?: (range: {
+        startIndex: number;
+        stopIndex: number;
+    }) => void;
+}
+/**
+ * Windowed grid primitive — renders only the items currently in (or near)
+ * the viewport. Auto-measures each cell's natural height via
+ * `react-virtuoso`, so consumers don't pick magic-number `rowHeight`s per
+ * breakpoint per card type. Same responsive `cols` and gap-token API as
+ * `AutoGrid`.
+ *
+ * Behavior:
+ *  - `cols=1` → `<Virtuoso>` (single-column list). Each item takes whatever
+ *    height it renders at.
+ *  - `cols>1` → `<VirtuosoGrid>` with a CSS-grid container. Cells reserve
+ *    equal column width; the row height is whatever the tallest cell in
+ *    that row needs.
+ *
+ * Use this for any list where the rendered count can reach the hundreds —
+ * library grids, rotation pools, picker results, etc. For short lists
+ * (under ~50 cells) prefer `AutoGrid`: native CSS-grid is simpler and has
+ * no measurement overhead.
+ */
+export declare function VirtualGrid<T>({ items, getKey, renderItem, cols, gap, style, className, onItemsRendered, }: VirtualGridProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=VirtualGrid.d.ts.map

package/dist/components/Layout/VirtualGrid/VirtualGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualGrid.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/VirtualGrid/VirtualGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,KAAK,YAAY,GAAG,MAAM,OAAO,aAAa,CAAC;AAE/C,MAAM,WAAW,gBAAgB,CAAC,CAAC;IACjC,uBAAuB;IACvB,KAAK,EAAE,CAAC,EAAE,CAAC;IACX;;;;OAIG;IACH,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,qCAAqC;IACrC,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACxD;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;IAC/B;;;;OAIG;IACH,GAAG,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAC5B,uBAAuB;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC9E;AAmFD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,EAC7B,KAAK,EACL,MAAM,EACN,UAAU,EACV,IAAQ,EACR,GAAO,EACP,KAAK,EACL,SAAS,EACT,eAAe,GAChB,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAkHrB"}

package/dist/components/Layout/VirtualGrid/VirtualGrid.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { Virtuoso, VirtuosoGrid } from 'react-virtuoso';
+import { breakpoints } from '../../../constants/breakpoints';
+import { spacing as spacingTokens } from '../../../constants/spacing';
+/**
+ * Resolve responsive `cols` against the current window width — matches the
+ * AutoGrid/Mantine media-query model so consumers using `useScreenSize()` +
+ * a number, or a responsive map directly, both land on the same bucket.
+ */
+const resolveCols = (cols, windowWidth) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    if (typeof cols === 'number')
+        return Math.max(1, Math.floor(cols));
+    const filled = {
+        base: (_a = cols.base) !== null && _a !== void 0 ? _a : 1,
+        sm: (_c = (_b = cols.sm) !== null && _b !== void 0 ? _b : cols.base) !== null && _c !== void 0 ? _c : 1,
+        md: (_f = (_e = (_d = cols.md) !== null && _d !== void 0 ? _d : cols.sm) !== null && _e !== void 0 ? _e : cols.base) !== null && _f !== void 0 ? _f : 1,
+        lg: (_k = (_j = (_h = (_g = cols.lg) !== null && _g !== void 0 ? _g : cols.md) !== null && _h !== void 0 ? _h : cols.sm) !== null && _j !== void 0 ? _j : cols.base) !== null && _k !== void 0 ? _k : 1,
+        xl: (_q = (_p = (_o = (_m = (_l = cols.xl) !== null && _l !== void 0 ? _l : cols.lg) !== null && _m !== void 0 ? _m : cols.md) !== null && _o !== void 0 ? _o : cols.sm) !== null && _p !== void 0 ? _p : cols.base) !== null && _q !== void 0 ? _q : 1,
+    };
+    if (windowWidth >= breakpoints.DESKTOP)
+        return filled.xl;
+    if (windowWidth >= breakpoints.LAPTOP)
+        return filled.lg;
+    if (windowWidth >= breakpoints.TABLET)
+        return filled.md;
+    if (windowWidth >= breakpoints.MOBILE)
+        return filled.sm;
+    return filled.base;
+};
+/** Resolve a gap value (token name or px) to a numeric pixel value. */
+const resolveGap = (gap) => {
+    if (gap == null)
+        return 0;
+    if (typeof gap === 'number')
+        return gap;
+    const value = spacingTokens[gap];
+    if (typeof value !== 'string')
+        return 0;
+    const parsed = parseInt(value, 10);
+    return Number.isFinite(parsed) ? parsed : 0;
+};
+/**
+ * Walk the ancestor chain looking for the nearest element that scrolls —
+ * `overflow-y: auto | scroll`. When found, we hand it to virtuoso as its
+ * `customScrollParent`, so the drawer/modal's existing scroll IS the
+ * virtualization scroll (single scroll, no double-scroll fight). When not
+ * found, the page itself is the scroller and virtuoso runs in window-scroll
+ * mode (library, rotation pages) — see `useWindowScroll` below.
+ */
+const findScrollableAncestor = (el) => {
+    let p = el.parentElement;
+    while (p && p !== document.body) {
+        const overflowY = window.getComputedStyle(p).overflowY;
+        if (overflowY === 'auto' || overflowY === 'scroll')
+            return p;
+        p = p.parentElement;
+    }
+    return null;
+};
+/**
+ * Resolve the nearest scrollable ancestor synchronously after mount but
+ * before paint. Critical: virtuoso commits to a scroll strategy on its
+ * first render — if we hand it `customScrollParent=undefined` initially
+ * (because `useEffect` runs post-paint), it picks window-scroll and never
+ * re-attaches when the ancestor arrives a render later. Symptom: pickers
+ * inside modals/drawers render only the first 1–2 items.
+ *
+ * Returning `{ resolved }` lets the caller hold off mounting virtuoso
+ * until we know what to pass — so virtuoso always mounts exactly once
+ * with the correct prop.
+ */
+const useScrollableAncestor = (containerRef) => {
+    const [state, setState] = useState({ resolved: false, ancestor: null });
+    useLayoutEffect(() => {
+        const el = containerRef.current;
+        setState({
+            resolved: true,
+            ancestor: el ? findScrollableAncestor(el) : null,
+        });
+    }, [containerRef]);
+    return state;
+};
+/**
+ * Windowed grid primitive — renders only the items currently in (or near)
+ * the viewport. Auto-measures each cell's natural height via
+ * `react-virtuoso`, so consumers don't pick magic-number `rowHeight`s per
+ * breakpoint per card type. Same responsive `cols` and gap-token API as
+ * `AutoGrid`.
+ *
+ * Behavior:
+ *  - `cols=1` → `<Virtuoso>` (single-column list). Each item takes whatever
+ *    height it renders at.
+ *  - `cols>1` → `<VirtuosoGrid>` with a CSS-grid container. Cells reserve
+ *    equal column width; the row height is whatever the tallest cell in
+ *    that row needs.
+ *
+ * Use this for any list where the rendered count can reach the hundreds —
+ * library grids, rotation pools, picker results, etc. For short lists
+ * (under ~50 cells) prefer `AutoGrid`: native CSS-grid is simpler and has
+ * no measurement overhead.
+ */
+export function VirtualGrid({ items, getKey, renderItem, cols = 1, gap = 0, style, className, onItemsRendered, }) {
+    const containerRef = useRef(null);
+    const { resolved: ancestorResolved, ancestor: scrollAncestor } = useScrollableAncestor(containerRef);
+    // Two scroll modes, decided by whether a scrollable ancestor exists:
+    //  - ancestor found (drawer/modal body) → hand it to virtuoso as
+    //    `customScrollParent`; the ancestor's scrollbar drives virtualization.
+    //  - no ancestor (full pages) → the page/window is the scroller, so run
+    //    virtuoso in `useWindowScroll` mode. The grid then participates in the
+    //    single document scroll instead of carving out its own internal
+    //    scrollbar (which would nest a second scroll inside the page scroll).
+    const usesAncestorScroll = scrollAncestor !== null;
+    const [windowWidth, setWindowWidth] = useState(() => typeof window !== 'undefined' ? window.innerWidth : 0);
+    useEffect(() => {
+        const onResize = () => setWindowWidth(window.innerWidth);
+        window.addEventListener('resize', onResize);
+        return () => window.removeEventListener('resize', onResize);
+    }, []);
+    const gapPx = useMemo(() => resolveGap(gap), [gap]);
+    const colCount = useMemo(() => resolveCols(cols, windowWidth), [cols, windowWidth]);
+    // Stable key callback — virtuoso re-renders on identity changes, so a new
+    // inline arrow per render would force a full remount. Memoize.
+    const computeItemKey = useMemo(() => (index, item) => getKey(item, index), [getKey]);
+    // Component override for VirtuosoGrid's internal list element — sets the
+    // CSS-grid layout with the responsive column count + gap. Memoized so the
+    // override identity is stable across renders (virtuoso treats a changed
+    // `components.List` as a structural reset).
+    const ListComponent = useMemo(() => {
+        const Comp = forwardRef(({ style: listStyle, children, ...rest }, ref) => (_jsx("div", { ref: ref, ...rest, style: {
+                ...listStyle,
+                display: 'grid',
+                gridTemplateColumns: `repeat(${colCount}, minmax(0, 1fr))`,
+                gap: gapPx,
+            }, children: children })));
+        Comp.displayName = 'VirtualGridList';
+        return Comp;
+    }, [colCount, gapPx]);
+    const handleItemsRendered = useMemo(() => {
+        if (!onItemsRendered)
+            return undefined;
+        return (range) => {
+            onItemsRendered({
+                startIndex: range.startIndex,
+                stopIndex: range.endIndex,
+            });
+        };
+    }, [onItemsRendered]);
+    return (_jsx("div", { ref: containerRef, className: className, 
+        // Content-sized in both modes: virtuoso pads its own scroller to the
+        // full virtualized height, so the wrapper just grows to fit — the
+        // ancestor (or the window) provides the actual scroll.
+        style: { width: '100%', ...style }, children: !ancestorResolved ? null : colCount === 1 ? (_jsx(Virtuoso, { data: items, computeItemKey: computeItemKey, itemContent: (index, item) => (_jsx("div", { style: { paddingBottom: gapPx }, children: renderItem(item, index) })), rangeChanged: handleItemsRendered, 
+            // Ancestor scroll (drawer/modal) → customScrollParent. No ancestor
+            // (full page) → window scroll. The two are mutually exclusive: when
+            // an ancestor exists, useWindowScroll is false and vice-versa.
+            customScrollParent: scrollAncestor !== null && scrollAncestor !== void 0 ? scrollAncestor : undefined, useWindowScroll: !usesAncestorScroll })) : (_jsx(VirtuosoGrid, { data: items, computeItemKey: computeItemKey, itemContent: (index, item) => renderItem(item, index), components: { List: ListComponent }, rangeChanged: handleItemsRendered, customScrollParent: scrollAncestor !== null && scrollAncestor !== void 0 ? scrollAncestor : undefined, useWindowScroll: !usesAncestorScroll })) }));
+}

package/dist/components/Misc/Burger/Burger.d.ts

@@ -0,0 +1,6 @@
+import { BurgerProps as MantineBurgerProps } from '@mantine/core';
+export interface BurgerProps extends MantineBurgerProps {
+}
+declare const Burger: ({ color, size, transitionDuration, ...props }: BurgerProps) => import("react/jsx-runtime").JSX.Element;
+export { Burger };
+//# sourceMappingURL=Burger.d.ts.map

package/dist/components/Misc/Burger/Burger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Burger.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/Burger/Burger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAG3F,MAAM,WAAW,WAAY,SAAQ,kBAAkB;CAAG;AAE1D,QAAA,MAAM,MAAM,GAAI,+CAA2E,WAAW,4CASrG,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/Misc/Burger/Burger.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Burger as MantineBurger } from '@mantine/core';
+import { neutral } from '../../../constants/colors';
+const Burger = ({ color = neutral[300], size = 'md', transitionDuration = 200, ...props }) => {
+    return (_jsx(MantineBurger, { color: color, size: size, transitionDuration: transitionDuration, ...props }));
+};
+export { Burger };

package/dist/components/Misc/Burger/Burger.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Burger } from './Burger';
+declare const meta: Meta<typeof Burger>;
+export default meta;
+type Story = StoryObj<typeof Burger>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const Colors: Story;
+export declare const InANavHeader: Story;
+//# sourceMappingURL=Burger.stories.d.ts.map

package/dist/components/Misc/Burger/Burger.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Burger.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/Burger/Burger.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAOlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAgC7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAcnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAYpB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA6C1B,CAAC"}

package/dist/components/Misc/Burger/Burger.stories.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Burger } from './Burger';
+import { Group } from '../../Layout/Group/Group';
+import { Stack } from '../../Layout/Stack/Stack';
+import { Text } from '../../Typography/Text/Text';
+import { spacing } from '../../../constants/spacing';
+import { neutral, primary, error } from '../../../constants/colors';
+const meta = {
+    title: 'Components/Misc/Burger',
+    component: Burger,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'Animated hamburger / close icon toggle. Thin wrapper around Mantine Burger with Taiv default color (neutral[300]) and a 200ms transition. Controlled by the `opened` prop.',
+            },
+        },
+    },
+    argTypes: {
+        opened: {
+            control: { type: 'boolean' },
+            description: 'false renders burger, true renders close (×)',
+        },
+        size: {
+            control: { type: 'select' },
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            table: { defaultValue: { summary: "'md'" } },
+        },
+        color: {
+            control: { type: 'color' },
+            description: 'CSS color (not a theme token — Mantine limitation)',
+            table: { defaultValue: { summary: 'neutral[300]' } },
+        },
+        transitionDuration: {
+            control: { type: 'number' },
+            table: { defaultValue: { summary: '200' } },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        opened: false,
+        size: 'md',
+    },
+    render: (args) => {
+        const [opened, setOpened] = useState(args.opened);
+        return _jsx(Burger, { ...args, opened: opened, onClick: () => setOpened((o) => !o) });
+    },
+};
+export const Sizes = {
+    render: () => {
+        const [opened, setOpened] = useState(false);
+        return (_jsx(Group, { gap: spacing.xl, align: 'center', children: ['xs', 'sm', 'md', 'lg', 'xl'].map((size) => (_jsxs(Stack, { gap: spacing.xs, align: 'center', children: [_jsx(Burger, { opened: opened, size: size, onClick: () => setOpened((o) => !o) }), _jsx(Text, { variant: 'label', children: size })] }, size))) }));
+    },
+};
+export const Colors = {
+    render: () => {
+        const [opened, setOpened] = useState(false);
+        return (_jsxs(Group, { gap: spacing.xl, children: [_jsx(Burger, { opened: opened, onClick: () => setOpened((o) => !o) }), _jsx(Burger, { color: primary[200], opened: opened, onClick: () => setOpened((o) => !o) }), _jsx(Burger, { color: error[200], opened: opened, onClick: () => setOpened((o) => !o) }), _jsx(Burger, { color: neutral[200], opened: opened, onClick: () => setOpened((o) => !o) })] }));
+    },
+};
+export const InANavHeader = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Typical use: toggling a mobile nav drawer.',
+            },
+        },
+    },
+    render: () => {
+        const [opened, setOpened] = useState(false);
+        return (_jsxs(Stack, { gap: spacing.sm, style: { width: 320 }, children: [_jsxs(Group, { position: 'apart', align: 'center', style: {
+                        padding: spacing.md,
+                        border: `1px solid ${neutral[50]}`,
+                        borderRadius: 8,
+                        background: 'white',
+                    }, children: [_jsx(Text, { variant: 'body', style: { fontWeight: 600 }, children: "TAIV" }), _jsx(Burger, { opened: opened, onClick: () => setOpened((o) => !o) })] }), opened && (_jsxs(Stack, { gap: spacing.xs, style: {
+                        padding: spacing.md,
+                        border: `1px solid ${neutral[50]}`,
+                        borderRadius: 8,
+                        background: 'white',
+                    }, children: [_jsx(Text, { variant: 'body', children: "Dashboard" }), _jsx(Text, { variant: 'body', children: "Account" }), _jsx(Text, { variant: 'body', children: "Settings" })] }))] }));
+    },
+};

package/dist/components/Misc/Carousel/Carousel.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { CarouselProps as MantineCarouselProps } from '@mantine/carousel';
+import EmblaAutoplay from 'embla-carousel-autoplay';
+import type { EmblaCarouselType, EmblaPluginType } from 'embla-carousel-react';
+/**
+ * `@taiv/ui` Carousel — thin wrapper over `@mantine/carousel` (built on
+ * Embla v7). Re-exports `Carousel.Slide` as a compound subcomponent so
+ * consumers don't have to import directly from `@mantine/carousel`.
+ *
+ * For advanced usage (autoplay, scale/opacity tween, etc.) consumers can:
+ *   - Pass an Embla plugin array via `plugins` (e.g. the re-exported
+ *     `carouselAutoplay`).
+ *   - Subscribe to the underlying Embla API via `getEmblaApi` and use the
+ *     re-exported `EmblaCarouselType` for typing.
+ */
+export interface CarouselProps extends MantineCarouselProps {
+    children: React.ReactNode;
+}
+export declare const Carousel: (({ children, ...props }: CarouselProps) => import("react/jsx-runtime").JSX.Element) & {
+    Slide: React.ForwardRefExoticComponent<import("@mantine/carousel/lib/CarouselSlide/CarouselSlide").CarouselSlideProps & React.RefAttributes<HTMLDivElement>>;
+};
+/**
+ * Embla Autoplay plugin factory, re-exported so consumers can configure
+ * autoplay without needing a direct dependency on `embla-carousel-autoplay`.
+ *
+ * Usage:
+ *   const autoplay = useRef(carouselAutoplay({ delay: 3000, stopOnMouseEnter: true }));
+ *   <Carousel plugins={[autoplay.current]}>...</Carousel>
+ */
+export declare const carouselAutoplay: typeof EmblaAutoplay;
+export type { EmblaCarouselType, EmblaPluginType };
+//# sourceMappingURL=Carousel.d.ts.map

package/dist/components/Misc/Carousel/Carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/Carousel/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,aAAa,IAAI,oBAAoB,EACtC,MAAM,mBAAmB,CAAC;AAC3B,OAAO,aAAa,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE/E;;;;;;;;;;GAUG;AACH,MAAM,WAAW,aAAc,SAAQ,oBAAoB;IACzD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAMD,eAAO,MAAM,QAAQ,4BAJ8B,aAAa;;CAM9D,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,sBAAgB,CAAC;AAE9C,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/Misc/Carousel/Carousel.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Carousel as MantineCarousel, } from '@mantine/carousel';
+import EmblaAutoplay from 'embla-carousel-autoplay';
+const CarouselComponent = ({ children, ...props }) => (_jsx(MantineCarousel, { ...props, children: children }));
+export const Carousel = Object.assign(CarouselComponent, {
+    Slide: MantineCarousel.Slide,
+});
+/**
+ * Embla Autoplay plugin factory, re-exported so consumers can configure
+ * autoplay without needing a direct dependency on `embla-carousel-autoplay`.
+ *
+ * Usage:
+ *   const autoplay = useRef(carouselAutoplay({ delay: 3000, stopOnMouseEnter: true }));
+ *   <Carousel plugins={[autoplay.current]}>...</Carousel>
+ */
+export const carouselAutoplay = EmblaAutoplay;

package/dist/components/Misc/DragHandle/DragHandle.d.ts

@@ -0,0 +1,19 @@
+import type React from 'react';
+export interface DragHandleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** Accessibility label. Default `'Reorder'`. */
+    ariaLabel?: string;
+    /** Size of the handle box (px). Default `20`. */
+    size?: number;
+    /** Dot color. Default `neutral[200]`. */
+    color?: string;
+    /** Called with `-1` / `+1` on arrow-key reorder. */
+    onReorder?: (direction: -1 | 1) => void;
+}
+/**
+ * Drag handle primitive — six-dot pattern rendered as a real `<button>` so
+ * accessibility (focus, keyboard reorder, aria-label) lives here, not on each
+ * consumer. Pair with `@dnd-kit` or similar; the handle's ref forwards to the
+ * underlying button element for listener attachment.
+ */
+export declare const DragHandle: React.ForwardRefExoticComponent<DragHandleProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=DragHandle.d.ts.map

package/dist/components/Misc/DragHandle/DragHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandle.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/DragHandle/DragHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACvE,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;CACzC;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,2FAkEtB,CAAC"}

package/dist/components/Misc/DragHandle/DragHandle.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { neutral } from '../../../constants/colors';
+/**
+ * Drag handle primitive — six-dot pattern rendered as a real `<button>` so
+ * accessibility (focus, keyboard reorder, aria-label) lives here, not on each
+ * consumer. Pair with `@dnd-kit` or similar; the handle's ref forwards to the
+ * underlying button element for listener attachment.
+ */
+export const DragHandle = forwardRef(({ ariaLabel = 'Reorder', size = 20, color = neutral[200], onReorder, onKeyDown, style, ...props }, ref) => {
+    const handleKeyDown = (e) => {
+        if (onReorder) {
+            if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+                e.preventDefault();
+                onReorder(-1);
+            }
+            else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+                e.preventDefault();
+                onReorder(1);
+            }
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    };
+    return (_jsx("button", { "aria-label": ariaLabel, onKeyDown: handleKeyDown, ref: ref, style: {
+            alignItems: 'center',
+            background: 'transparent',
+            border: 'none',
+            borderRadius: 4,
+            cursor: 'grab',
+            display: 'inline-flex',
+            height: size,
+            justifyContent: 'center',
+            padding: 0,
+            touchAction: 'none',
+            width: size,
+            ...style,
+        }, type: 'button', ...props, children: _jsxs("svg", { "aria-hidden": 'true', fill: 'none', height: size, viewBox: '0 0 20 20', width: size, xmlns: 'http://www.w3.org/2000/svg', children: [_jsx("circle", { cx: '7', cy: '5', fill: color, r: '1.5' }), _jsx("circle", { cx: '13', cy: '5', fill: color, r: '1.5' }), _jsx("circle", { cx: '7', cy: '10', fill: color, r: '1.5' }), _jsx("circle", { cx: '13', cy: '10', fill: color, r: '1.5' }), _jsx("circle", { cx: '7', cy: '15', fill: color, r: '1.5' }), _jsx("circle", { cx: '13', cy: '15', fill: color, r: '1.5' })] }) }));
+});
+DragHandle.displayName = 'DragHandle';

package/dist/components/Misc/DragHandle/DragHandle.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DragHandle } from './DragHandle';
+declare const meta: Meta<typeof DragHandle>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const InListRow: Story;
+export declare const KeyboardReorder: Story;
+//# sourceMappingURL=DragHandle.stories.d.ts.map

package/dist/components/Misc/DragHandle/DragHandle.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandle.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/DragHandle/DragHandle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAO5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAYjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA2BvB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAiC7B,CAAC"}