@taiv/ui 1.14.1 → 2.0.0

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

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HoverAction } from './HoverAction';
+import { Card } from '../../Layout/Card/Card';
+import { Group } from '../../Layout/Group/Group';
+import { Stack } from '../../Layout/Stack/Stack';
+import { Text } from '../../Typography/Text/Text';
+import { Title } from '../../Typography/Title/Title';
+import { spacing } from '../../../constants/spacing';
+import { neutral } from '../../../constants/colors';
+const SlidePreview = ({ label = 'Calamari' }) => (_jsxs(Stack, { gap: spacing.xs, children: [_jsx("div", { style: {
+                width: 160,
+                height: 110,
+                borderRadius: 8,
+                background: `linear-gradient(135deg, ${neutral[50]}, ${neutral[100]})`,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }, children: _jsx(Text, { variant: 'label', style: { color: neutral[300] }, children: label }) }), _jsx(Text, { variant: 'label', children: label })] }));
+const meta = {
+    title: 'Components/Misc/HoverAction',
+    component: HoverAction,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'Wraps any content with a floating icon button pinned to the top-right corner. The button fades in when the wrapped content is hovered. Variants: close, trash, edit. Click handler is called with propagation stopped, so wrapping interactive cards is safe.',
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: { type: 'select' },
+            options: ['close', 'trash', 'edit'],
+            table: { defaultValue: { summary: "'close'" } },
+        },
+        showBackground: {
+            control: { type: 'boolean' },
+            description: 'Always show white circle background (vs transparent until hover)',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        offset: {
+            control: { type: 'number' },
+            description: 'Pixels the button pokes out of the top-right corner',
+            table: { defaultValue: { summary: '10' } },
+        },
+        visible: {
+            control: { type: 'boolean' },
+            description: 'Manual override for visibility. When unset, button shows on hover.',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        variant: 'close',
+        showBackground: true,
+        offset: 10,
+    },
+    render: (args) => (_jsx(HoverAction, { ...args, onClick: () => console.log('clicked'), children: _jsx(SlidePreview, {}) })),
+};
+export const Variants = {
+    render: () => (_jsxs(Group, { gap: spacing.xl, children: [_jsx(HoverAction, { variant: 'close', showBackground: true, onClick: () => console.log('close'), children: _jsx(SlidePreview, { label: 'Close' }) }), _jsx(HoverAction, { variant: 'trash', showBackground: true, onClick: () => console.log('trash'), children: _jsx(SlidePreview, { label: 'Trash' }) }), _jsx(HoverAction, { variant: 'edit', showBackground: true, onClick: () => console.log('edit'), children: _jsx(SlidePreview, { label: 'Edit' }) })] })),
+};
+export const HiddenUntilHover = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'With `showBackground={false}` (default), the button is fully hidden until the wrapper is hovered. Matches the Taiv app slide-preview pattern.',
+            },
+        },
+    },
+    render: () => (_jsx(HoverAction, { variant: 'close', onClick: () => console.log('close'), children: _jsx(SlidePreview, { label: 'Hover me' }) })),
+};
+export const AlwaysVisible = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Pass `visible` explicitly to bypass the internal hover state.',
+            },
+        },
+    },
+    render: () => (_jsx(HoverAction, { variant: 'trash', showBackground: true, visible: true, onClick: () => console.log('delete'), children: _jsx(SlidePreview, { label: 'Always shown' }) })),
+};
+export const WrappingACard = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Wrapping an interactive Card. Clicking the close button stops propagation — the card onClick does not fire.',
+            },
+        },
+    },
+    render: () => (_jsx(HoverAction, { variant: 'close', showBackground: true, onClick: () => alert('Removed!'), children: _jsx("div", { onClick: () => alert('Card clicked'), style: { cursor: 'pointer', width: 240 }, children: _jsx(Card, { children: _jsxs(Stack, { gap: spacing.xs, children: [_jsx(Title, { variant: 'cardHeader', children: "Calamari" }), _jsx(Text, { variant: 'subtle', children: "Crispy. Hot. Delicious." })] }) }) }) })),
+};
+export const CustomOffset = {
+    render: () => (_jsxs(Group, { gap: spacing.xl, children: [_jsx(HoverAction, { variant: 'close', showBackground: true, offset: 0, onClick: () => { }, children: _jsx(SlidePreview, { label: 'offset=0' }) }), _jsx(HoverAction, { variant: 'close', showBackground: true, offset: 10, onClick: () => { }, children: _jsx(SlidePreview, { label: 'offset=10' }) }), _jsx(HoverAction, { variant: 'close', showBackground: true, offset: 20, onClick: () => { }, children: _jsx(SlidePreview, { label: 'offset=20' }) })] })),
+};

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

@@ -1 +1 @@
-{"version":3,"file":"IconBadge.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/IconBadge/IconBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,OAAO,UAAU,CAAC;CAChC;AAED,eAAO,MAAM,SAAS,GAAI,iBAAiB,cAAc,4CAgCxD,CAAC"}
+{"version":3,"file":"IconBadge.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/IconBadge/IconBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,OAAO,UAAU,CAAC;CAChC;AAED,eAAO,MAAM,SAAS,GAAI,iBAAiB,cAAc,4CAoCxD,CAAC"}

package/dist/components/Misc/IconBadge/IconBadge.js

@@ -4,25 +4,27 @@ import { primitives } from '../../../constants/colors';
 export const IconBadge = ({ icon, color }) => {
     const getIconColors = () => {
         return {
-            background: primitives[color][50],
+            background: primitives[color][25],
             icon: primitives[color][200],
         };
     };
     const getIconSize = () => {
-        if (React.isValidElement(icon) && icon.props && typeof icon.props.size === 'number') {
+        if (React.isValidElement(icon) &&
+            icon.props &&
+            typeof icon.props.size === 'number') {
             const iconSize = icon.props.size;
             const badgeSize = iconSize + 12;
             return `${badgeSize}px`;
         }
     };
     return (_jsx("div", { style: {
-            width: getIconSize(),
-            height: getIconSize(),
-            borderRadius: '50%',
+            alignItems: 'center',
             backgroundColor: getIconColors().background,
+            borderRadius: '50%',
             color: getIconColors().icon,
             display: 'flex',
-            alignItems: 'center',
+            height: getIconSize(),
             justifyContent: 'center',
+            width: getIconSize(),
         }, children: icon }));
 };

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

@@ -0,0 +1,3 @@
+export { Image } from '@mantine/core';
+export type { ImageProps } from '@mantine/core';
+//# sourceMappingURL=Image.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/Misc/Image/Image.js

@@ -0,0 +1 @@
+export { Image } from '@mantine/core';

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Image } from './Image';
+declare const meta: Meta<typeof Image>;
+export default meta;
+type Story = StoryObj<typeof Image>;
+export declare const Default: Story;
+export declare const Fits: Story;
+export declare const Radii: Story;
+export declare const WithPlaceholder: Story;
+export declare const WithCaption: Story;
+//# sourceMappingURL=Image.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/Image/Image.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAQhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA0B5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAEpC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAWlB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAWnB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA6B7B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAYzB,CAAC"}

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

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Image } from './Image';
+import { Group } from '../../Layout/Group/Group';
+import { Stack } from '../../Layout/Stack/Stack';
+import { Text } from '../../Typography/Text/Text';
+import { spacing } from '../../../constants/spacing';
+const SAMPLE_SRC = 'https://images.unsplash.com/photo-1511216335778-7cb8f49fa7a3?w=600';
+const meta = {
+    title: 'Components/Misc/Image',
+    component: Image,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'Re-export of Mantine Image. Handles object-fit, placeholders, captions, and loading/error states. Use this instead of raw <img> so placeholder and caption behavior stays consistent.',
+            },
+        },
+    },
+    argTypes: {
+        fit: {
+            control: { type: 'select' },
+            options: ['cover', 'contain', 'fill', 'none', 'scale-down'],
+            table: { defaultValue: { summary: "'cover'" } },
+        },
+        radius: {
+            control: { type: 'select' },
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+        },
+        withPlaceholder: {
+            control: { type: 'boolean' },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        src: SAMPLE_SRC,
+        alt: 'Sample',
+        width: 320,
+        height: 200,
+        fit: 'cover',
+        radius: 'md',
+    },
+};
+export const Fits = {
+    render: () => (_jsx(Group, { gap: spacing.lg, align: 'flex-start', children: ['cover', 'contain', 'fill'].map((fit) => (_jsxs(Stack, { gap: spacing.xs, align: 'center', children: [_jsx(Image, { src: SAMPLE_SRC, alt: fit, width: 180, height: 120, fit: fit, radius: 'md' }), _jsx(Text, { variant: 'label', children: fit })] }, fit))) })),
+};
+export const Radii = {
+    render: () => (_jsx(Group, { gap: spacing.lg, children: ['xs', 'md', 'xl'].map((radius) => (_jsxs(Stack, { gap: spacing.xs, align: 'center', children: [_jsx(Image, { src: SAMPLE_SRC, alt: radius, width: 140, height: 140, fit: 'cover', radius: radius }), _jsxs(Text, { variant: 'label', children: ["radius=", radius] })] }, radius))) })),
+};
+export const WithPlaceholder = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'When the src fails or is missing, `withPlaceholder` renders a fallback.',
+            },
+        },
+    },
+    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(Image, { src: 'https://invalid.example.com/does-not-exist.jpg', alt: 'broken', width: 200, height: 140, radius: 'md', withPlaceholder: true }), _jsx(Image, { src: null, alt: 'none', width: 200, height: 140, radius: 'md', withPlaceholder: true, placeholder: _jsx(Text, { variant: 'label', children: "No image" }) })] })),
+};
+export const WithCaption = {
+    render: () => (_jsx(Image, { src: SAMPLE_SRC, alt: 'Ocean sunset', width: 320, height: 200, fit: 'cover', radius: 'md', caption: 'Pacific ocean, golden hour' })),
+};

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

@@ -0,0 +1,6 @@
+import { KbdProps as MantineKbdProps } from '@mantine/core';
+export interface KbdProps extends MantineKbdProps {
+}
+declare const Kbd: ({ ...props }: KbdProps) => import("react/jsx-runtime").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":"AACA,OAAO,EAAqB,QAAQ,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AAI/E,MAAM,WAAW,QAAS,SAAQ,eAAe;CAAG;AAEpD,QAAA,MAAM,GAAG,GAAI,cAAc,QAAQ,4CAelC,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/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-runtime").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"}