@taiv/ui 1.15.0 → 2.1.0

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.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,gCASrG,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) => React.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"}

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

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { neutral } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
+import { Group } from '../../Layout/Group/Group';
+import { Stack } from '../../Layout/Stack/Stack';
+import { Text } from '../../Typography/Text/Text';
+import { DragHandle } from './DragHandle';
+const meta = {
+    component: DragHandle,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Six-dot drag handle rendered as a real `<button>` — owns focus, keyboard reorder (arrow keys), and `aria-label`. Pair with a DnD library (e.g. `@dnd-kit`) by attaching listeners via the forwarded ref.',
+            },
+        },
+        layout: 'centered',
+    },
+    title: 'Components/Misc/DragHandle',
+};
+export default meta;
+export const Default = {
+    render: () => _jsx(DragHandle, {}),
+};
+export const InListRow = {
+    render: () => (_jsx(Stack, { spacing: spacing.xs, style: {
+            border: `1px solid ${neutral[50]}`,
+            borderRadius: 8,
+            padding: spacing.sm,
+            width: 320,
+        }, children: ['Nike ad', 'Spotify ad', 'Apple ad'].map((name) => (_jsxs(Group, { spacing: spacing.sm, style: {
+                border: `1px solid ${neutral[50]}`,
+                borderRadius: 6,
+                padding: spacing.xs,
+            }, children: [_jsx(DragHandle, { ariaLabel: `Reorder ${name}` }), _jsx(Text, { variant: 'body', children: name })] }, name))) })),
+};
+export const KeyboardReorder = {
+    render: () => {
+        const [items, setItems] = useState(['A', 'B', 'C', 'D']);
+        const reorder = (i, dir) => {
+            const next = [...items];
+            const target = i + dir;
+            if (target < 0 || target >= next.length)
+                return;
+            [next[i], next[target]] = [next[target], next[i]];
+            setItems(next);
+        };
+        return (_jsxs(Stack, { spacing: spacing.xs, style: { width: 280 }, children: [_jsx(Text, { variant: 'subtle', children: "Focus a handle and press \u2191/\u2193 to reorder." }), items.map((name, i) => (_jsxs(Group, { spacing: spacing.sm, style: {
+                        border: `1px solid ${neutral[50]}`,
+                        borderRadius: 6,
+                        padding: spacing.xs,
+                    }, children: [_jsx(DragHandle, { ariaLabel: `Reorder ${name}`, onReorder: (dir) => reorder(i, dir) }), _jsx(Text, { variant: 'body', children: name })] }, name)))] }));
+    },
+};

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

@@ -0,0 +1,54 @@
+import { ReactElement } from 'react';
+import { IconButtonProps } from '../../Inputs/Buttons/IconButton/IconButton';
+export type FABPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+export interface FABProps {
+    /**
+     * Icon rendered inside the button. Sized automatically by IconButton.
+     */
+    icon: ReactElement<{
+        size?: number;
+    }>;
+    onClick: () => void;
+    /**
+     * Required for accessibility — the FAB has no visible label.
+     */
+    ariaLabel: string;
+    variant?: IconButtonProps['variant'];
+    size?: IconButtonProps['size'];
+    /**
+     * Corner of the viewport to anchor to. Default `'bottom-right'`.
+     */
+    position?: FABPosition;
+    /**
+     * Distance from the anchored edges. Accepts any CSS length. Default `spacing.lg` (16px).
+     */
+    offset?: number | string;
+    /**
+     * When true, only renders on tablet/mobile viewports (≤ 768px). Default `true` —
+     * the FAB is intended as a mobile/tablet pattern. Set `false` to always render.
+     */
+    mobileOnly?: boolean;
+    /**
+     * Explicit override to suppress rendering regardless of viewport.
+     */
+    hidden?: boolean;
+    zIndex?: number;
+    'data-testid'?: string;
+}
+/**
+ * Floating Action Button. A `position: fixed` IconButton with shadow, used for the
+ * primary action on a page when screen real estate is tight (typically mobile).
+ *
+ * Defaults to mobile-only (≤ 768px). On desktop, prefer an inline `<Button>` for the
+ * same action and let the FAB take over on smaller viewports — the two should trigger
+ * the same handler.
+ *
+ * @example
+ * <FAB
+ *   icon={<IconPlus />}
+ *   onClick={openAddDeviceModal}
+ *   ariaLabel="Add device"
+ * />
+ */
+export declare const FAB: ({ icon, onClick, ariaLabel, variant, size, position, offset, mobileOnly, hidden, zIndex, "data-testid": dataTestId, }: FABProps) => import("react").JSX.Element | null;
+//# sourceMappingURL=FAB.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FAB.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/FAB/FAB.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,OAAO,EAAc,eAAe,EAAE,MAAM,4CAA4C,CAAC;AAGzF,MAAM,MAAM,WAAW,GAAG,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;AAEpF,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,IAAI,EAAE,YAAY,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA8BD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,GAAG,GAAI,uHAYjB,QAAQ,uCA2BV,CAAC"}

package/dist/components/Misc/FAB/FAB.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { spacing } from '../../../constants/spacing';
+import { useTablet } from '../../../hooks/useMediaQuery';
+import { IconButton } from '../../Inputs/Buttons/IconButton/IconButton';
+import { Box } from '../../Layout/Box/Box';
+// Bottom-anchored FABs additively read `--app-bottom-inset` from the
+// document so apps with a fixed bottom chrome (e.g. mobile nav) can lift
+// every FAB clear of the bar without each consumer threading an explicit
+// offset. Defaults to `0px` when the variable isn't set, so apps without
+// bottom chrome see no behavior change.
+const APP_BOTTOM_INSET_VAR = 'var(--app-bottom-inset, 0px)';
+const toCssLength = (offset) => typeof offset === 'number' ? `${offset}px` : offset;
+const positionStyle = (position, offset) => {
+    const o = toCssLength(offset);
+    const bottomWithInset = `calc(${o} + ${APP_BOTTOM_INSET_VAR})`;
+    switch (position) {
+        case 'bottom-right':
+            return { bottom: bottomWithInset, right: o };
+        case 'bottom-left':
+            return { bottom: bottomWithInset, left: o };
+        case 'top-right':
+            return { top: o, right: o };
+        case 'top-left':
+            return { top: o, left: o };
+    }
+};
+/**
+ * Floating Action Button. A `position: fixed` IconButton with shadow, used for the
+ * primary action on a page when screen real estate is tight (typically mobile).
+ *
+ * Defaults to mobile-only (≤ 768px). On desktop, prefer an inline `<Button>` for the
+ * same action and let the FAB take over on smaller viewports — the two should trigger
+ * the same handler.
+ *
+ * @example
+ * <FAB
+ *   icon={<IconPlus />}
+ *   onClick={openAddDeviceModal}
+ *   ariaLabel="Add device"
+ * />
+ */
+export const FAB = ({ icon, onClick, ariaLabel, variant = 'primary', size = '2xl', position = 'bottom-right', offset = spacing.lg, mobileOnly = true, hidden = false, zIndex = 10, 'data-testid': dataTestId, }) => {
+    const isTablet = useTablet();
+    if (hidden)
+        return null;
+    if (mobileOnly && !isTablet)
+        return null;
+    return (_jsx(Box, { style: {
+            position: 'fixed',
+            zIndex,
+            ...positionStyle(position, offset),
+        }, children: _jsx(IconButton, { "aria-label": ariaLabel, "data-testid": dataTestId, onClick: onClick, radius: '50%', shadow: true, size: size, variant: variant, children: icon }) }));
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FAB.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/FAB/FAB.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAO5D,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAqD1B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAC;AAsBlC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA2CvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA4BtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAoCnB,CAAC"}