@taiv/ui 1.15.0 → 2.1.0

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { KbdProps as MantineKbdProps } from '@mantine/core';
+export interface KbdProps extends MantineKbdProps {
+}
+declare const Kbd: ({ ...props }: KbdProps) => React.JSX.Element;
+export { Kbd };
+//# sourceMappingURL=Kbd.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/Kbd/Kbd.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAqB,QAAQ,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AAI/E,MAAM,WAAW,QAAS,SAAQ,eAAe;CAAG;AAEpD,QAAA,MAAM,GAAG,GAAI,cAAc,QAAQ,sBAelC,CAAC;AAEF,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/components/Misc/Kbd/Kbd.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Kbd as MantineKbd } from '@mantine/core';
+import { colors } from '../../../constants/colors';
+import { fontBase, fontSize } from '../../../constants/font';
+const Kbd = ({ ...props }) => {
+    return (_jsx(MantineKbd, { sx: {
+            ...fontBase,
+            ...fontSize['sm'],
+            backgroundColor: colors.neutral[25],
+            borderColor: colors.neutral[100],
+            color: colors.neutral[300],
+            padding: '1px 6px',
+            borderRadius: '4px',
+        }, ...props }));
+};
+export { Kbd };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/Kbd/Kbd.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAK5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAmB1B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAgBvB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAe7B,CAAC"}

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Kbd } from './Kbd';
+import { Group } from '../../Layout/Group/Group';
+import { Text } from '../../Typography/Text/Text';
+import { spacing } from '../../../constants/spacing';
+const meta = {
+    title: 'Components/Misc/Kbd',
+    component: Kbd,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'Thin wrapper around Mantine v6\'s `Kbd` component with Taiv typography and color tokens. Use inline within help text to render keyboard shortcuts.',
+            },
+        },
+    },
+    argTypes: {
+        children: {
+            control: { type: 'text' },
+            description: 'Key label to display',
+            table: { type: { summary: 'ReactNode' } },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: { children: '⌘K' },
+    parameters: {
+        docs: {
+            source: { code: `<Kbd>⌘K</Kbd>` },
+        },
+    },
+};
+export const InContext = {
+    render: () => (_jsxs(Text, { variant: 'subtle', children: ["Press ", _jsx(Kbd, { children: "\u2318K" }), " to open search, or ", _jsx(Kbd, { children: "Esc" }), " to dismiss."] })),
+    parameters: {
+        docs: {
+            description: { story: 'Typical usage — inline within a sentence of help text.' },
+            source: {
+                code: `<Text variant="subtle">
+  Press <Kbd>⌘K</Kbd> to open search, or <Kbd>Esc</Kbd> to dismiss.
+</Text>`,
+            },
+        },
+    },
+};
+export const CommonShortcuts = {
+    render: () => (_jsxs(Group, { spacing: spacing.sm, children: [_jsx(Kbd, { children: "\u2318K" }), _jsx(Kbd, { children: "\u2318Z" }), _jsx(Kbd, { children: "\u2318\u21E7Z" }), _jsx(Kbd, { children: "Ctrl" }), _jsx(Kbd, { children: "Enter" }), _jsx(Kbd, { children: "Esc" }), _jsx(Kbd, { children: "Tab" })] })),
+    parameters: {
+        docs: { source: { code: false } },
+    },
+};

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

@@ -1,5 +1,6 @@
+import React from 'react';
 import { LoadingOverlayProps as MantineLoadingOverlayProps } from '@mantine/core';
 export interface LoadingOverlayProps extends MantineLoadingOverlayProps {
 }
-export declare const LoadingOverlay: ({ ...props }: LoadingOverlayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingOverlay: ({ ...props }: LoadingOverlayProps) => React.JSX.Element;
 //# sourceMappingURL=LoadingOverlay.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingOverlay.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/LoadingOverlay/LoadingOverlay.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA2C,mBAAmB,IAAI,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAE3H,MAAM,WAAW,mBAAoB,SAAQ,0BAA0B;CACtE;AAGD,eAAO,MAAM,cAAc,GAAI,cAAe,mBAAmB,4CAWhE,CAAA"}
+{"version":3,"file":"LoadingOverlay.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/LoadingOverlay/LoadingOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAA2C,mBAAmB,IAAI,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAE3H,MAAM,WAAW,mBAAoB,SAAQ,0BAA0B;CACtE;AAGD,eAAO,MAAM,cAAc,GAAI,cAAe,mBAAmB,sBAWhE,CAAA"}

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

@@ -0,0 +1,17 @@
+import { MenuProps as MantineMenuProps } from '@mantine/core';
+export interface MenuProps extends MantineMenuProps {
+}
+export declare const Menu: (({ styles, children, ...props }: MenuProps) => import("react").JSX.Element) & {
+    Target: import("react").ForwardRefExoticComponent<import("@mantine/core").MenuTargetProps & import("react").RefAttributes<HTMLElement>>;
+    Dropdown: typeof import("@mantine/core/lib/Menu/MenuDropdown/MenuDropdown").MenuDropdown;
+    Item: (<C = "button">(props: import("@mantine/utils").PolymorphicComponentProps<C, import("@mantine/core").MenuItemProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<import("react").FunctionComponent<(import("@mantine/core").MenuItemProps & {
+        component?: any;
+    } & Omit<Pick<any, string | number | symbol>, "component" | keyof import("@mantine/core").MenuItemProps> & {
+        ref?: any;
+    }) | (import("@mantine/core").MenuItemProps & {
+        component: React.ElementType<any>;
+    })>, never> & Record<string, never>;
+    Label: import("react").ForwardRefExoticComponent<import("@mantine/core").MenuLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+    Divider: import("react").ForwardRefExoticComponent<import("@mantine/core").MenuDividerProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+//# sourceMappingURL=Menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAKnF,MAAM,WAAW,SAAU,SAAQ,gBAAgB;CAAG;AAwDtD,eAAO,MAAM,IAAI,oCAtDiC,SAAS;;;;;;;;;;;;CA4DzD,CAAC"}

package/dist/components/Misc/Menu/Menu.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Menu as MantineMenu } from '@mantine/core';
+import { neutral } from '../../../constants/colors';
+import { fontBase, fontSize, fontWeight } from '../../../constants/font';
+import { spacing } from '../../../constants/spacing';
+const MenuRoot = ({ styles, children, ...props }) => {
+    const baseStyles = {
+        dropdown: {
+            borderRadius: '8px',
+            border: `1px solid ${neutral[50]}`,
+            boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.08)',
+            padding: spacing.xs,
+        },
+        item: {
+            ...fontBase,
+            ...fontSize['sm'],
+            fontWeight: fontWeight.medium,
+            color: neutral[300],
+            borderRadius: '6px',
+            padding: `${spacing.sm} ${spacing.md}`,
+            '&[data-hovered]': {
+                backgroundColor: neutral[25],
+            },
+        },
+        itemLabel: {
+            ...fontBase,
+            ...fontSize['sm'],
+            fontWeight: fontWeight.medium,
+        },
+        label: {
+            ...fontBase,
+            ...fontSize['xs'],
+            fontWeight: fontWeight.medium,
+            color: neutral[200],
+            padding: `${spacing.xs} ${spacing.md}`,
+        },
+        divider: {
+            margin: `${spacing.xs} 0`,
+        },
+    };
+    return (_jsx(MantineMenu, { radius: 8, shadow: "md", transitionProps: { duration: 150 }, withinPortal: true, ...props, styles: (theme, params, context) => {
+            const userStyles = typeof styles === 'function' ? styles(theme, params, context) : (styles !== null && styles !== void 0 ? styles : {});
+            return { ...baseStyles, ...userStyles };
+        }, children: children }));
+};
+export const Menu = Object.assign(MenuRoot, {
+    Target: MantineMenu.Target,
+    Dropdown: MantineMenu.Dropdown,
+    Item: MantineMenu.Item,
+    Label: MantineMenu.Label,
+    Divider: MantineMenu.Divider,
+});

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

@@ -0,0 +1,42 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+export interface OverflowFadeProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Color the gradient fades into. Match the surrounding surface so the
+     * fade reads as "the strip dissolves into the page". Default: 'white'.
+     */
+    background?: string;
+    /**
+     * Size of each fade band from the edge in px — width for horizontal
+     * (`orientation="horizontal"`), height for vertical (`orientation="vertical"`).
+     * Default: 64.
+     */
+    fadeWidth?: number;
+    /**
+     * Scroll axis. Horizontal: left/right fades (default). Vertical: top/bottom
+     * fades — pass `maxHeight` on the scroll viewport so content can clip.
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * When `orientation` is `vertical`, caps the scroll viewport (e.g. `'65vh'`).
+     * Without this, the block grows with content and no vertical scroll (or fades)
+     * occurs.
+     */
+    maxHeight?: CSSProperties['maxHeight'];
+    children: ReactNode;
+}
+/**
+ * Wraps scrollable content with bidirectional gradient fades that auto-detect
+ * overflow state.
+ *
+ * **Horizontal** (`orientation="horizontal"`, default): `overflow-x` scroll,
+ * left fade once scrolled away from the start, right fade when more content
+ * exists past the right edge. Both hidden when content fits.
+ *
+ * **Vertical** (`orientation="vertical"`): `overflow-y` scroll; set `maxHeight`
+ * so the viewport clips. Top fade once scrolled down; bottom fade when more
+ * content exists below. Hidden when content fits.
+ *
+ * The scrollbar is hidden by design — the fade is the affordance.
+ */
+export declare const OverflowFade: import("react").ForwardRefExoticComponent<OverflowFadeProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=OverflowFade.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowFade.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/OverflowFade/OverflowFade.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtE,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;;OAIG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,QAAQ,EAAE,SAAS,CAAC;CACrB;AASD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,YAAY,8GA2IxB,CAAC"}

package/dist/components/Misc/OverflowFade/OverflowFade.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mantine/core';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+const scrollbarHiddenSx = {
+    '&::-webkit-scrollbar': { display: 'none' },
+    msOverflowStyle: 'none',
+    scrollbarWidth: 'none',
+    WebkitOverflowScrolling: 'touch',
+};
+/**
+ * Wraps scrollable content with bidirectional gradient fades that auto-detect
+ * overflow state.
+ *
+ * **Horizontal** (`orientation="horizontal"`, default): `overflow-x` scroll,
+ * left fade once scrolled away from the start, right fade when more content
+ * exists past the right edge. Both hidden when content fits.
+ *
+ * **Vertical** (`orientation="vertical"`): `overflow-y` scroll; set `maxHeight`
+ * so the viewport clips. Top fade once scrolled down; bottom fade when more
+ * content exists below. Hidden when content fits.
+ *
+ * The scrollbar is hidden by design — the fade is the affordance.
+ */
+export const OverflowFade = forwardRef(({ background = 'white', fadeWidth = 64, orientation = 'horizontal', maxHeight, children, style, ...props }, ref) => {
+    const scrollRef = useRef(null);
+    const [showLeft, setShowLeft] = useState(false);
+    const [showRight, setShowRight] = useState(false);
+    const [showTop, setShowTop] = useState(false);
+    const [showBottom, setShowBottom] = useState(false);
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        const update = () => {
+            if (orientation === 'vertical') {
+                const overflowing = el.scrollHeight > el.clientHeight;
+                setShowTop(overflowing && el.scrollTop > 0);
+                setShowBottom(overflowing && el.scrollTop + el.clientHeight < el.scrollHeight - 1);
+            }
+            else {
+                const overflowing = el.scrollWidth > el.clientWidth;
+                setShowLeft(overflowing && el.scrollLeft > 0);
+                setShowRight(overflowing && el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+            }
+        };
+        update();
+        el.addEventListener('scroll', update, { passive: true });
+        const ro = new ResizeObserver(update);
+        ro.observe(el);
+        const mo = new MutationObserver(update);
+        mo.observe(el, { characterData: true, childList: true, subtree: true });
+        return () => {
+            el.removeEventListener('scroll', update);
+            ro.disconnect();
+            mo.disconnect();
+        };
+    }, [orientation]);
+    const horizontalFadeBand = {
+        bottom: 0,
+        pointerEvents: 'none',
+        position: 'absolute',
+        top: 0,
+        transition: 'opacity 150ms ease',
+        width: `${fadeWidth}px`,
+    };
+    const verticalFadeBand = {
+        height: `${fadeWidth}px`,
+        left: 0,
+        pointerEvents: 'none',
+        position: 'absolute',
+        right: 0,
+        transition: 'opacity 150ms ease',
+    };
+    const scrollSx = orientation === 'vertical'
+        ? {
+            ...scrollbarHiddenSx,
+            maxHeight,
+            overflowX: 'hidden',
+            overflowY: 'auto',
+            width: '100%',
+        }
+        : {
+            ...scrollbarHiddenSx,
+            overflowX: 'auto',
+            overflowY: 'hidden',
+            width: '100%',
+        };
+    return (_jsxs("div", { ref: ref, style: { position: 'relative', width: '100%', ...style }, ...props, children: [_jsx(Box, { ref: scrollRef, sx: scrollSx, children: children }), orientation === 'horizontal' ? (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": true, style: {
+                            ...horizontalFadeBand,
+                            background: `linear-gradient(to right, ${background} 0%, ${background} 20%, transparent 100%)`,
+                            left: 0,
+                            opacity: showLeft ? 1 : 0,
+                        } }), _jsx("div", { "aria-hidden": true, style: {
+                            ...horizontalFadeBand,
+                            background: `linear-gradient(to left, ${background} 0%, ${background} 20%, transparent 100%)`,
+                            opacity: showRight ? 1 : 0,
+                            right: 0,
+                        } })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": true, style: {
+                            ...verticalFadeBand,
+                            background: `linear-gradient(to bottom, ${background} 0%, ${background} 20%, transparent 100%)`,
+                            opacity: showTop ? 1 : 0,
+                            top: 0,
+                        } }), _jsx("div", { "aria-hidden": true, style: {
+                            ...verticalFadeBand,
+                            background: `linear-gradient(to top, ${background} 0%, ${background} 20%, transparent 100%)`,
+                            bottom: 0,
+                            opacity: showBottom ? 1 : 0,
+                        } })] }))] }));
+});
+OverflowFade.displayName = 'OverflowFade';

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { OverflowFade } from './OverflowFade';
+declare const meta: Meta<typeof OverflowFade>;
+export default meta;
+type Story = StoryObj<typeof OverflowFade>;
+export declare const Default: Story;
+export declare const NoOverflow: Story;
+export declare const OnNonWhiteSurface: Story;
+export declare const Vertical: Story;
+export declare const WithBadges: Story;
+//# sourceMappingURL=OverflowFade.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowFade.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/OverflowFade/OverflowFade.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAO5D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CA2BnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAiC3C,eAAO,MAAM,OAAO,EAAE,KAqBrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAoBxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAyB/B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAsBtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA0CxB,CAAC"}

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

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { neutral, primary } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
+import { Badge } from '../../Info/Badge/Badge';
+import { Group } from '../../Layout/Group/Group';
+import { Stack } from '../../Layout/Stack/Stack';
+import { Text } from '../../Typography/Text/Text';
+import { OverflowFade } from './OverflowFade';
+const meta = {
+    argTypes: {
+        background: {
+            control: { type: 'color' },
+            description: 'Color the gradient fades into. Match the surrounding surface.',
+            table: { defaultValue: { summary: "'white'" } },
+        },
+        fadeWidth: {
+            control: { type: 'number' },
+            table: { defaultValue: { summary: '40' } },
+        },
+    },
+    component: OverflowFade,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Bidirectional gradient fades for horizontal or vertical overflow. Horizontal (default): left/right fades ' +
+                    'on `overflow-x` scroll. Vertical (`orientation="vertical"`): top/bottom fades — pass `maxHeight` so ' +
+                    'the viewport clips. Fades auto-hide when content fits.\n\n' +
+                    'The scrollbar is hidden by design — the gradient is the affordance.',
+            },
+        },
+        layout: 'padded',
+    },
+    title: 'Components/Misc/OverflowFade',
+};
+export default meta;
+const chips = [
+    'All',
+    'Trending',
+    'Recently Added',
+    'Most Played',
+    'Editor Picks',
+    'Sports',
+    'News',
+    'Holiday',
+    'Promotions',
+    'Announcements',
+    'Weather',
+];
+const Chip = ({ label, active }) => (_jsx("div", { style: {
+        background: active ? primary[200] : 'white',
+        border: `1px solid ${active ? primary[200] : neutral[100]}`,
+        borderRadius: 999,
+        color: active ? 'white' : neutral[300],
+        flexShrink: 0,
+        fontSize: 14,
+        padding: `${spacing.xs} ${spacing.md}`,
+        whiteSpace: 'nowrap',
+    }, children: label }));
+export const Default = {
+    args: {
+        background: 'white',
+        fadeWidth: 40,
+    },
+    render: (args) => (_jsx("div", { style: { background: 'white', maxWidth: 480, padding: spacing.md }, children: _jsxs(Stack, { gap: spacing.sm, children: [_jsx(Text, { variant: 'label', children: "Resize the panel narrower to see the right-edge fade appear." }), _jsx(OverflowFade, { ...args, children: _jsx(Group, { gap: spacing.xs, noWrap: true, children: chips.map((label) => (_jsx(Chip, { label: label }, label))) }) })] }) })),
+};
+export const NoOverflow = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'When content fits the container, neither fade renders — auto-detection via scrollWidth/clientWidth.',
+            },
+        },
+    },
+    render: () => (_jsx("div", { style: { background: 'white', maxWidth: 480, padding: spacing.md }, children: _jsx(OverflowFade, { children: _jsxs(Group, { gap: spacing.xs, noWrap: true, children: [_jsx(Chip, { active: true, label: 'All' }), _jsx(Chip, { label: 'Sports' }), _jsx(Chip, { label: 'News' })] }) }) })),
+};
+export const OnNonWhiteSurface = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Pass `background` to match a non-white surface so the gradient ends in the parent color, not white.',
+            },
+        },
+    },
+    render: () => (_jsx("div", { style: { background: neutral[25], maxWidth: 480, padding: spacing.md }, children: _jsxs(Stack, { gap: spacing.sm, children: [_jsx(Text, { variant: 'label', children: "On neutral[25] \u2014 fade matches surface." }), _jsx(OverflowFade, { background: neutral[25], children: _jsx(Group, { gap: spacing.xs, noWrap: true, children: chips.map((label, i) => (_jsx(Chip, { active: i === 0, label: label }, label))) }) })] }) })),
+};
+export const Vertical = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Vertical scroll with top/bottom fades. Requires `maxHeight` on the viewport so content can overflow.',
+            },
+        },
+    },
+    render: () => (_jsx("div", { style: { background: 'white', maxWidth: 360, padding: spacing.md }, children: _jsx(OverflowFade, { fadeWidth: 48, maxHeight: 220, orientation: 'vertical', children: _jsx(Stack, { gap: spacing.sm, children: Array.from({ length: 14 }, (_, i) => (_jsxs(Text, { variant: 'body', children: ["Row ", i + 1, " \u2014 scroll to see top and bottom edge fades."] }, i))) }) }) })),
+};
+export const WithBadges = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Demonstrates use with richer children — a tab-strip-like row with counts.',
+            },
+        },
+    },
+    render: () => (_jsx("div", { style: { background: 'white', maxWidth: 520, padding: spacing.md }, children: _jsx(OverflowFade, { children: _jsx(Group, { gap: spacing.lg, noWrap: true, children: [
+                    'Your Slides',
+                    'Smart Content',
+                    'Premades',
+                    'Playlists',
+                    'Drafts',
+                    'Archived',
+                ].map((label, i) => (_jsxs(Group, { gap: spacing.xs, noWrap: true, style: { flexShrink: 0 }, children: [_jsx(Text, { style: { color: i === 0 ? primary[200] : neutral[300] }, variant: 'body', children: label }), _jsx(Badge, { color: 'neutral', size: 'sm', variant: 'filled', children: [12, 4, 8, 31, 2, 17][i] })] }, label))) }) }) })),
+};

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

@@ -0,0 +1,62 @@
+import { type ReactNode } from 'react';
+export interface PickerItem {
+    id: string;
+    label: string;
+    /** Right-aligned secondary info (e.g. "5 slides"). */
+    meta?: ReactNode;
+    /**
+     * Optional sortable timestamp for automatic recency. Larger = more recent.
+     * Items without `recencyKey` sort to the end of the recent view.
+     */
+    recencyKey?: number;
+    /** When true, item renders disabled (greyed-out) and is not clickable. */
+    disabled?: boolean;
+    /** Tooltip text shown on hover when disabled. */
+    disabledReason?: string;
+}
+export type PickerPosition = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+export interface PickerProps {
+    items: PickerItem[];
+    /**
+     * How many recent items to show in the compact (idle) view. If `items`
+     * has ≤ this many entries, all are shown and the "Show all" toggle is
+     * hidden. Default: 3.
+     */
+    recentCount?: number;
+    onSelect: (item: PickerItem) => void;
+    searchPlaceholder?: string;
+    /** Shown when items is empty or search has no matches. */
+    emptyMessage?: string;
+    /** Slot rendered below the list — typically a "+ Create new" button. */
+    footer?: ReactNode;
+    /**
+     * Controlled-open mode. When provided, parent owns open state — useful for
+     * triggering programmatically from outside the Target (e.g. from a kebab
+     * Menu.Item that closes its own Menu before opening the Picker).
+     */
+    opened?: boolean;
+    onOpenChange?: (opened: boolean) => void;
+    position?: PickerPosition;
+    width?: number;
+    /** Wrap dropdown in a portal to escape stacking contexts. Default true. */
+    withinPortal?: boolean;
+    /**
+     * When true, the SearchBar is hidden on mobile viewports (≤640px). Useful
+     * for kebab-anchored Pickers where search adds noise on small screens but
+     * stays valuable on desktop. Default: false.
+     */
+    searchOnDesktopOnly?: boolean;
+    /**
+     * When true, never render the "Recent" header or "Show all N" toggle —
+     * always show exactly `recentCount` items in the idle view. Search across
+     * the full list still works when the user types. Default: false.
+     */
+    disableShowAll?: boolean;
+    children: ReactNode;
+}
+export declare const Picker: (({ items, recentCount, onSelect, searchPlaceholder, emptyMessage, footer, opened, onOpenChange, position, width, withinPortal, searchOnDesktopOnly, disableShowAll, children, }: PickerProps) => import("react").JSX.Element) & {
+    Target: import("react").ForwardRefExoticComponent<{
+        children: ReactNode;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+};
+//# sourceMappingURL=Picker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/Picker/Picker.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAwBf,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,cAAc,GACtB,KAAK,GACL,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,GACV,OAAO,GACP,aAAa,GACb,WAAW,CAAC;AAEhB,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wEAAwE;IACxE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAmQD,eAAO,MAAM,MAAM,oLAxLhB,WAAW;;kBAtB8C,SAAS;;CA8MS,CAAC"}