@taiv/ui 1.14.1 → 2.0.0

package/dist/components/Info/Drawer/Drawer.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer as MantineDrawer, } from '@mantine/core';
+import { IconX } from '@tabler/icons-react';
+import { neutral } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
+import { IconButton } from '../../Inputs/Buttons/IconButton/IconButton';
+import { Group } from '../../Layout/Group/Group';
+import { Title } from '../../Typography/Title/Title';
+/**
+ * Side drawer built on Mantine v6 with pinned header + footer slots.
+ * Right-anchored by default — use `MobileDrawer` for bottom-anchored mobile
+ * sheets, or `ResponsiveDrawer` for automatic right/bottom switching.
+ */
+export const Drawer = ({ children, title, subtitle, footer, header, showClose = true, position = 'right', size = 'md', onClose, styles, ...props }) => {
+    const resolvedHeader = header !== null && header !== void 0 ? header : (title ? (_jsxs(Group, { position: 'apart', style: {
+            borderBottom: `1px solid ${neutral[50]}`,
+            padding: spacing.md,
+        }, children: [_jsxs("div", { children: [_jsx(Title, { variant: 'cardHeader', children: title }), subtitle ? _jsx(Title, { variant: 'cardSubheader', children: subtitle }) : null] }), showClose ? (_jsx(IconButton, { onClick: onClose, size: 'sm', variant: 'secondary', children: _jsx(IconX, {}) })) : null] })) : null);
+    return (_jsxs(MantineDrawer, { onClose: onClose, overlayProps: { blur: 2, opacity: 0.3 }, position: position, size: size, styles: {
+            body: {
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%',
+                padding: 0,
+            },
+            content: {
+                display: 'flex',
+                flexDirection: 'column',
+            },
+            header: {
+                display: 'none',
+            },
+            ...styles,
+        }, withCloseButton: false, ...props, children: [resolvedHeader, _jsx("div", { style: {
+                    flex: '1 1 auto',
+                    minHeight: 0,
+                    overflowY: 'auto',
+                    padding: spacing.md,
+                }, children: children }), footer ? (_jsx("div", { style: {
+                    borderTop: `1px solid ${neutral[50]}`,
+                    flex: '0 0 auto',
+                    padding: spacing.md,
+                }, children: footer })) : null] }));
+};

package/dist/components/Info/Drawer/Drawer.stories.d.ts

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

package/dist/components/Info/Drawer/Drawer.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Drawer/Drawer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAQ5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAY7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAmCxB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAyB7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAoB1B,CAAC"}

package/dist/components/Info/Drawer/Drawer.stories.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useDisclosure } from '../../../hooks/useDisclosure';
+import { Button } from '../../Inputs/Buttons/Button/Button';
+import { TextInput } from '../../Inputs/TextInputs/TextInput/TextInput';
+import { Group } from '../../Layout/Group/Group';
+import { Stack } from '../../Layout/Stack/Stack';
+import { Text } from '../../Typography/Text/Text';
+import { Drawer } from './Drawer';
+const meta = {
+    component: Drawer,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Side drawer built on Mantine v6, with pinned header + footer slots and an independently-scrolling body. Use for progressive-disclosure forms, detail panels, and selection-based action surfaces.',
+            },
+        },
+        layout: 'fullscreen',
+    },
+    title: 'Components/Info/Drawer',
+};
+export default meta;
+export const Default = {
+    render: () => {
+        const [opened, { open, close }] = useDisclosure(false);
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: open, children: "Open drawer" }), _jsx(Drawer, { onClose: close, opened: opened, title: 'Slide details', children: _jsxs(Stack, { children: [_jsx(Text, { children: "Drawer body. Scrolls independently of header + footer." }), _jsx(Text, { variant: 'subtle', children: "Fill with any content \u2014 forms, lists, nested cards." })] }) })] }));
+    },
+};
+export const WithFooter = {
+    render: () => {
+        const [opened, { open, close }] = useDisclosure(false);
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: open, children: "Open drawer with footer" }), _jsx(Drawer, { footer: _jsxs(Group, { position: 'right', children: [_jsx(Button, { onClick: close, variant: 'cancel', children: "Cancel" }), _jsx(Button, { onClick: close, children: "Save" })] }), onClose: close, opened: opened, subtitle: 'Ad \u00B7 30 seconds', title: 'Edit slide', children: _jsx(Stack, { children: Array.from({ length: 20 }, (_, i) => `field-${i + 1}`).map((key, i) => (_jsx(TextInput, { label: `Field ${i + 1}`, placeholder: 'Long body content...' }, key))) }) })] }));
+    },
+};
+export const SelectionFooter = {
+    render: () => {
+        const [opened, { open, close }] = useDisclosure(false);
+        const [count, setCount] = useState(2);
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: open, children: "Open drawer with selection footer" }), _jsx(Drawer, { footer: _jsxs(Group, { position: 'apart', children: [_jsxs(Text, { variant: 'label', children: [count, " selected"] }), _jsx(Button, { onClick: () => setCount(0), children: "Append to playlist" })] }), onClose: close, opened: opened, title: 'Library', children: _jsx(Stack, { children: _jsx(Text, { children: "Pinned footer mirrors the selection-toolbar pattern." }) }) })] }));
+    },
+};
+export const CustomHeader = {
+    render: () => {
+        const [opened, { open, close }] = useDisclosure(false);
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: open, children: "Open with custom header" }), _jsx(Drawer, { header: _jsx("div", { style: { background: '#0081CE', color: 'white', padding: 12 }, children: "Custom header slot \u2014 you own all the chrome." }), onClose: close, opened: opened, children: _jsx(Text, { children: "Consumer-driven header composition." }) })] }));
+    },
+};

package/dist/components/Info/HoverCard/HoverCard.d.ts

@@ -0,0 +1,16 @@
+import { HoverCardProps as MantineHoverCardProps } from '@mantine/core';
+import { CSSObject } from '@mantine/styles';
+export interface HoverCardProps extends MantineHoverCardProps {
+    styles?: {
+        dropdown?: CSSObject;
+        arrow?: CSSObject;
+    };
+}
+declare const HoverCard: (({ openDelay, closeDelay, position, withArrow, styles, children, ...props }: HoverCardProps) => import("react/jsx-runtime").JSX.Element) & {
+    Target: import("react").ForwardRefExoticComponent<import("@mantine/core").HoverCardTargetProps & import("react").RefAttributes<HTMLElement>>;
+    Dropdown: typeof import("@mantine/core/lib/HoverCard/HoverCardDropdown/HoverCardDropdown").HoverCardDropdown;
+    MenuItem: ({ children, className, disabled, leftSection, onClick, rightSection, }: import("./HoverCardMenuItem").HoverCardMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+};
+export { HoverCard };
+export type { HoverCardMenuItemProps } from './HoverCardMenuItem';
+//# sourceMappingURL=HoverCard.d.ts.map

package/dist/components/Info/HoverCard/HoverCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/HoverCard/HoverCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,cAAc,IAAI,qBAAqB,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAM5C,MAAM,WAAW,cAAe,SAAQ,qBAAqB;IAC3D,MAAM,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;QAAC,KAAK,CAAC,EAAE,SAAS,CAAA;KAAE,CAAC;CACtD;AAuCD,QAAA,MAAM,SAAS,gFA7BZ,cAAc;;;;CAiCf,CAAC;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/Info/HoverCard/HoverCard.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HoverCard as MantineHoverCard } from '@mantine/core';
+import { neutral } from '../../../constants/colors';
+import { fontBase } from '../../../constants/font';
+import { spacing } from '../../../constants/spacing';
+import { HoverCardMenuItem } from './HoverCardMenuItem';
+const HoverCardRoot = ({ openDelay = 80, closeDelay = 120, position = 'bottom', withArrow = false, styles, children, ...props }) => {
+    const mergedStyles = {
+        dropdown: {
+            borderRadius: 8,
+            border: `1px solid ${neutral[50]}`,
+            boxShadow: '0 8px 24px rgba(15, 23, 42, 0.12)',
+            padding: spacing.md,
+            ...fontBase,
+            ...styles === null || styles === void 0 ? void 0 : styles.dropdown,
+        },
+        arrow: { ...styles === null || styles === void 0 ? void 0 : styles.arrow },
+    };
+    return (_jsx(MantineHoverCard, { closeDelay: closeDelay, openDelay: openDelay, position: position, styles: mergedStyles, transitionProps: { duration: 180, transition: 'pop' }, withArrow: withArrow, withinPortal: true, ...props, children: children }));
+};
+const HoverCard = Object.assign(HoverCardRoot, {
+    Target: MantineHoverCard.Target,
+    Dropdown: MantineHoverCard.Dropdown,
+    MenuItem: HoverCardMenuItem,
+});
+export { HoverCard };

package/dist/components/Info/HoverCard/HoverCard.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { HoverCard } from './HoverCard';
+declare const meta: Meta<typeof HoverCard>;
+export default meta;
+type Story = StoryObj<typeof HoverCard>;
+export declare const Default: Story;
+export declare const Position: Story;
+export declare const WithArrow: Story;
+export declare const RichContent: Story;
+export declare const InsideStickyContainer: Story;
+//# sourceMappingURL=HoverCard.stories.d.ts.map

package/dist/components/Info/HoverCard/HoverCard.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCard.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/HoverCard/HoverCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAUxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAmChC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAWvB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAkCzB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KA6CnC,CAAC"}

package/dist/components/Info/HoverCard/HoverCard.stories.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconExternalLink, IconUser } from '@tabler/icons-react';
+import { Avatar } from '@mantine/core';
+import { HoverCard } from './HoverCard';
+import { Button } from '../../Inputs/Buttons/Button/Button';
+import { Stack } from '../../Layout/Stack/Stack';
+import { Group } from '../../Layout/Group/Group';
+import { Text } from '../../Typography/Text/Text';
+import { Title } from '../../Typography/Title/Title';
+import { Divider } from '../../Layout/Divider/Divider';
+import { spacing } from '../../../constants/spacing';
+import { neutral } from '../../../constants/colors';
+const meta = {
+    title: 'Components/Info/HoverCard',
+    component: HoverCard,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A floating hover-card built on Mantine HoverCard. Renders into a portal (document.body) to escape sticky/transform stacking contexts. Use HoverCard.Target and HoverCard.Dropdown as compound children.',
+            },
+        },
+    },
+    argTypes: {
+        openDelay: {
+            control: { type: 'number' },
+            description: 'Delay in ms before opening',
+            table: { defaultValue: { summary: '80' } },
+        },
+        closeDelay: {
+            control: { type: 'number' },
+            description: 'Delay in ms before closing (keeps card open while moving cursor onto it)',
+            table: { defaultValue: { summary: '120' } },
+        },
+        position: {
+            control: { type: 'select' },
+            options: ['top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end'],
+            description: 'Preferred placement relative to target',
+            table: { defaultValue: { summary: "'bottom'" } },
+        },
+        withArrow: {
+            control: { type: 'boolean' },
+            description: 'Show arrow pointing to target',
+            table: { defaultValue: { summary: 'false' } },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        openDelay: 80,
+        closeDelay: 120,
+        position: 'bottom',
+        withArrow: false,
+    },
+    render: (args) => (_jsxs(HoverCard, { ...args, children: [_jsx(HoverCard.Target, { children: _jsx(Button, { variant: 'secondary', children: "Hover me" }) }), _jsx(HoverCard.Dropdown, { children: _jsx(Text, { variant: 'body', children: "This is a hover card. Move the cursor here \u2014 it stays open." }) })] })),
+};
+export const Position = {
+    render: () => (_jsx(Group, { gap: spacing.xl, children: ['top', 'bottom-start', 'right-end'].map((pos) => (_jsxs(HoverCard, { position: pos, withArrow: true, children: [_jsx(HoverCard.Target, { children: _jsx(Button, { variant: 'secondary', children: pos }) }), _jsx(HoverCard.Dropdown, { children: _jsxs(Text, { variant: 'label', children: ["position=\"", pos, "\""] }) })] }, pos))) })),
+};
+export const WithArrow = {
+    render: () => (_jsxs(HoverCard, { withArrow: true, position: 'top', children: [_jsx(HoverCard.Target, { children: _jsx(Button, { variant: 'secondary', children: "With arrow" }) }), _jsx(HoverCard.Dropdown, { children: _jsx(Text, { variant: 'body', children: "Arrow points at the trigger." }) })] })),
+};
+export const RichContent = {
+    render: () => (_jsxs(HoverCard, { width: 280, position: 'bottom-start', children: [_jsx(HoverCard.Target, { children: _jsx(Avatar, { radius: 'xl', size: 'md', color: 'blue', children: _jsx(IconUser, { size: 18 }) }) }), _jsx(HoverCard.Dropdown, { children: _jsxs(Stack, { gap: spacing.sm, children: [_jsxs(Group, { gap: spacing.sm, children: [_jsx(Avatar, { radius: 'xl', size: 'sm', color: 'blue', children: _jsx(IconUser, { size: 14 }) }), _jsxs(Stack, { gap: spacing.xxs, children: [_jsx(Title, { variant: 'cardHeader', children: "Jane Smith" }), _jsx(Text, { variant: 'label', style: { color: neutral[200] }, children: "jane@taiv.com" })] })] }), _jsx(Divider, {}), _jsx(Stack, { gap: spacing.xs, children: ['Profile', 'Settings', 'Sign out'].map((label) => (_jsxs(Group, { gap: spacing.xs, style: { cursor: 'pointer' }, children: [_jsx(IconExternalLink, { size: 14, color: neutral[200] }), _jsx(Text, { variant: 'body', children: label })] }, label))) })] }) })] })),
+};
+export const InsideStickyContainer = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Regression check: dropdown must render above the sticky header because withinPortal=true escapes the stacking context.',
+            },
+        },
+    },
+    render: () => (_jsxs("div", { style: { height: 300, overflowY: 'auto', border: `1px solid ${neutral[50]}`, borderRadius: 8 }, children: [_jsxs("div", { style: {
+                    position: 'sticky',
+                    top: 0,
+                    background: 'white',
+                    padding: `${spacing.sm} ${spacing.lg}`,
+                    borderBottom: `1px solid ${neutral[50]}`,
+                    zIndex: 10,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: spacing.md,
+                }, children: [_jsx(Text, { variant: 'label', children: "Sticky header" }), _jsxs(HoverCard, { position: 'bottom', children: [_jsx(HoverCard.Target, { children: _jsx(Button, { variant: 'secondary', size: 'sm', children: "Hover (portal test)" }) }), _jsx(HoverCard.Dropdown, { children: _jsx(Text, { variant: 'body', children: "Rendered in document.body \u2014 not clipped by sticky context." }) })] })] }), _jsx(Stack, { gap: spacing.md, p: spacing.lg, children: Array.from({ length: 10 }, (_, i) => (_jsxs(Text, { variant: 'subtle', children: ["Scroll content row ", i + 1] }, i))) })] })),
+};

package/dist/components/Info/HoverCard/HoverCardMenuItem.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface HoverCardMenuItemProps {
+    children: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    leftSection?: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    rightSection?: React.ReactNode;
+}
+declare const HoverCardMenuItem: ({ children, className, disabled, leftSection, onClick, rightSection, }: HoverCardMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export { HoverCardMenuItem };
+//# sourceMappingURL=HoverCardMenuItem.d.ts.map

package/dist/components/Info/HoverCard/HoverCardMenuItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCardMenuItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/HoverCard/HoverCardMenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED,QAAA,MAAM,iBAAiB,GAAI,wEAOxB,sBAAsB,4CAgCxB,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/Info/HoverCard/HoverCardMenuItem.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { UnstyledButton } from '@mantine/core';
+import { neutral } from '../../../constants/colors';
+import { fontBase, fontSize, fontWeight } from '../../../constants/font';
+import { spacing } from '../../../constants/spacing';
+import { Text } from '../../Typography/Text/Text';
+const HoverCardMenuItem = ({ children, className, disabled, leftSection, onClick, rightSection, }) => (_jsxs(UnstyledButton, { className: className, disabled: disabled, onClick: onClick, sx: {
+        ...fontBase,
+        ...fontSize.sm,
+        alignItems: 'center',
+        borderRadius: '6px',
+        color: neutral[300],
+        display: 'flex',
+        fontWeight: fontWeight.medium,
+        gap: spacing.sm,
+        justifyContent: 'space-between',
+        padding: `${spacing.sm} ${spacing.md}`,
+        width: '100%',
+        '&:hover:not(:disabled)': { backgroundColor: neutral[25] },
+        '&:disabled': { cursor: 'not-allowed', opacity: 0.6 },
+    }, children: [leftSection, _jsx(Text, { color: neutral[300], styles: { flex: 1, minWidth: 0, textAlign: 'left' }, truncate: true, variant: 'label', children: children }), rightSection] }));
+export { HoverCardMenuItem };

package/dist/components/Info/Indicator/Indicator.d.ts

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

package/dist/components/Info/Indicator/Indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Indicator/Indicator.tsx"],"names":[],"mappings":"AAAA,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/Info/Indicator/Indicator.js

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

package/dist/components/Info/Indicator/Indicator.stories.d.ts

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

package/dist/components/Info/Indicator/Indicator.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Indicator/Indicator.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAkEhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAgBvB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAWpB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAC;AAYF,eAAO,MAAM,SAAS,EAAE,KAyBvB,CAAC"}

package/dist/components/Info/Indicator/Indicator.stories.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconBell } from '@tabler/icons-react';
+import { Group } from '../../Layout/Group/Group';
+import { Avatar } from '../Avatar/Avatar';
+import { Indicator } from './Indicator';
+const meta = {
+    argTypes: {
+        children: {
+            control: false,
+            description: 'Element the indicator attaches to (e.g. avatar, icon button)',
+            table: { type: { summary: 'ReactNode' } },
+        },
+        color: {
+            control: { type: 'text' },
+            description: 'Theme color key for the indicator',
+            table: { type: { summary: 'MantineColor' } },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+            description: 'Renders only the child when true',
+            table: { type: { summary: 'boolean' } },
+        },
+        inline: {
+            control: { type: 'boolean' },
+            description: 'Use inline layout for the wrapper',
+            table: { type: { summary: 'boolean' } },
+        },
+        label: {
+            control: { type: 'text' },
+            description: 'Content inside the badge (number, dot when empty, or custom node)',
+            table: { type: { summary: 'ReactNode' } },
+        },
+        position: {
+            control: { type: 'select' },
+            description: 'Placement relative to the child',
+            options: [
+                'top-start',
+                'top-center',
+                'top-end',
+                'middle-start',
+                'middle-center',
+                'middle-end',
+                'bottom-start',
+                'bottom-center',
+                'bottom-end',
+            ],
+            table: { type: { summary: 'IndicatorPosition' } },
+        },
+        processing: {
+            control: { type: 'boolean' },
+            description: 'Pulses the indicator',
+            table: { type: { summary: 'boolean' } },
+        },
+        size: {
+            control: { type: 'number' },
+            description: 'Indicator diameter',
+            table: { type: { summary: 'number | string' } },
+        },
+        withBorder: {
+            control: { type: 'boolean' },
+            description: 'White ring around the indicator',
+            table: { type: { summary: 'boolean' } },
+        },
+    },
+    component: Indicator,
+    parameters: {
+        layout: 'centered',
+    },
+    title: 'Components/Info/Indicator',
+};
+export default meta;
+export const Default = {
+    args: {
+        children: (_jsx(Avatar, { radius: 'xl', size: 'lg', src: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=200&fit=crop' })),
+        color: 'red',
+        inline: true,
+        label: undefined,
+        position: 'top-end',
+        size: 10,
+        withBorder: true,
+    },
+};
+export const WithCount = {
+    args: {
+        children: (_jsx(Avatar, { radius: 'xl', size: 'lg', src: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=200&fit=crop' })),
+        color: 'blue',
+        inline: true,
+        label: '12',
+        position: 'top-end',
+        size: 20,
+        withBorder: true,
+    },
+};
+export const OnIcon = {
+    parameters: {
+        docs: { source: { code: false } },
+    },
+    render: () => (_jsx(Indicator, { color: 'red', inline: true, position: 'top-end', size: 10, withBorder: true, children: _jsx(Avatar, { color: 'gray', radius: 'md', size: 'lg', variant: 'light', children: _jsx(IconBell, { size: 22 }) }) })),
+};
+export const Processing = {
+    args: {
+        children: (_jsx(Avatar, { radius: 'xl', size: 'lg', src: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=200&fit=crop' })),
+        color: 'green',
+        inline: true,
+        position: 'top-end',
+        processing: true,
+        size: 12,
+        withBorder: true,
+    },
+};
+const positionLabels = {
+    'bottom-end': 'BE',
+    'bottom-start': 'BS',
+    'top-end': 'TE',
+    'top-start': 'TS',
+};
+export const Positions = {
+    parameters: {
+        docs: { source: { code: false } },
+        layout: 'padded',
+    },
+    render: () => (_jsx(Group, { spacing: 'xl', children: Object.keys(positionLabels).map((position) => (_jsx(Indicator, { color: 'red', inline: true, position: position, size: 10, withBorder: true, children: _jsx(Avatar, { color: 'gray', radius: 'xl', size: 'md', variant: 'outline', children: positionLabels[position] }) }, position))) })),
+};

package/dist/components/Info/InfoCard/InfoCard.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { CardProps } from '../../Layout/Card/Card';
+import type React from 'react';
 import { colors } from '../../../constants/colors';
+import { type CardProps } from '../../Layout/Card/Card';
 export interface InfoCardProps extends Omit<CardProps, 'children'> {
     children: React.ReactNode;
     variant?: keyof typeof colors;

package/dist/components/Info/InfoCard/InfoCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoCard.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/InfoCard/InfoCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAGnD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAChE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,QAAQ,GAAI,qCAAiD,aAAa,4CAwBtF,CAAC"}
+{"version":3,"file":"InfoCard.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/InfoCard/InfoCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAG9D,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAChE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,QAAQ,GAAI,qCAItB,aAAa,4CAwBf,CAAC"}

package/dist/components/Info/InfoCard/InfoCard.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Card } from '../../Layout/Card/Card';
-import { Center } from '../../Layout/Center/Center';
 import { colors } from '../../../constants/colors';
 import { spacing } from '../../../constants/spacing';
+import { Card } from '../../Layout/Card/Card';
+import { Center } from '../../Layout/Center/Center';
 export const InfoCard = ({ children, variant = 'primary', ...cardProps }) => {
     const colorPalette = colors[variant];
     const style = {
-        border: `1px solid ${colorPalette[200]}`,
         backgroundColor: colorPalette[25],
+        border: `1px solid ${colorPalette[200]}`,
         color: colorPalette[200] + ' !important',
-        padding: `${spacing.xxl} 64px`,
+        padding: spacing.xl,
     };
-    return (_jsx(Card, { shadow: "lg", style: style, sx: {
+    return (_jsx(Card, { shadow: 'lg', style: style, sx: {
             '& *': {
                 color: `${colorPalette[200]} !important`,
             },

package/dist/components/Info/MobileDrawer/MobileDrawer.d.ts

@@ -0,0 +1,30 @@
+import { type DrawerProps as MantineDrawerProps } from '@mantine/core';
+import type React from 'react';
+export interface MobileDrawerProps extends Omit<MantineDrawerProps, 'position' | 'title' | 'children'> {
+    children: React.ReactNode;
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    footer?: React.ReactNode;
+    header?: React.ReactNode;
+    /** Show the grab-handle at the top edge. Default `true`. */
+    showGrabHandle?: boolean;
+    /**
+     * Max height as a viewport percentage (0–100). Default `75`. The sheet
+     * never exceeds this — the body scrolls once content overflows.
+     */
+    maxHeightVh?: number;
+    /**
+     * Pixel offset from the viewport bottom. Use when a fixed bottom bar
+     * (e.g. `BottomActionBar`) is rendered beneath the drawer — the sheet
+     * stacks on top of it instead of overlapping. Default `0`.
+     */
+    bottomOffset?: number;
+}
+/**
+ * Bottom-anchored mobile sheet with grab-handle, rounded top corners, and
+ * flex column layout (header → scrollable body → pinned footer).
+ * Pair with `Drawer` (right-anchored) or use `ResponsiveDrawer` to pick
+ * between them automatically.
+ */
+export declare const MobileDrawer: ({ children, title, subtitle, footer, header, showGrabHandle, maxHeightVh, bottomOffset, styles, ...props }: MobileDrawerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MobileDrawer.d.ts.map

package/dist/components/Info/MobileDrawer/MobileDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/MobileDrawer/MobileDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,WAAW,IAAI,kBAAkB,EACvC,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;IACnE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAI,4GAW1B,iBAAiB,4CAgFnB,CAAC"}

package/dist/components/Info/MobileDrawer/MobileDrawer.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer as MantineDrawer, } from '@mantine/core';
+import { neutral } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
+import { Title } from '../../Typography/Title/Title';
+/**
+ * Bottom-anchored mobile sheet with grab-handle, rounded top corners, and
+ * flex column layout (header → scrollable body → pinned footer).
+ * Pair with `Drawer` (right-anchored) or use `ResponsiveDrawer` to pick
+ * between them automatically.
+ */
+export const MobileDrawer = ({ children, title, subtitle, footer, header, showGrabHandle = true, maxHeightVh = 75, bottomOffset = 0, styles, ...props }) => {
+    const resolvedHeader = header !== null && header !== void 0 ? header : (title ? (_jsxs("div", { style: { padding: `${spacing.xs} ${spacing.md} ${spacing.md}` }, children: [_jsx(Title, { variant: 'cardHeader', children: title }), subtitle ? _jsx(Title, { variant: 'cardSubheader', children: subtitle }) : null] })) : null);
+    return (_jsxs(MantineDrawer, { overlayProps: { blur: 2, opacity: 0.3 }, position: 'bottom', size: `${maxHeightVh}vh`, styles: {
+            body: {
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%',
+                padding: 0,
+            },
+            content: {
+                borderTopLeftRadius: '16px',
+                borderTopRightRadius: '16px',
+                bottom: bottomOffset || undefined,
+                display: 'flex',
+                flexDirection: 'column',
+                maxHeight: `${maxHeightVh}vh`,
+                overflow: 'hidden',
+            },
+            header: { display: 'none' },
+            ...styles,
+        }, withCloseButton: false, ...props, children: [showGrabHandle ? (_jsx("div", { style: {
+                    display: 'flex',
+                    flex: '0 0 auto',
+                    justifyContent: 'center',
+                    padding: `${spacing.sm} 0 ${spacing.xs}`,
+                }, children: _jsx("div", { style: {
+                        backgroundColor: neutral[100],
+                        borderRadius: '999px',
+                        height: 4,
+                        width: 40,
+                    } }) })) : null, resolvedHeader, _jsx("div", { style: {
+                    flex: '1 1 auto',
+                    minHeight: 0,
+                    overflowY: 'auto',
+                    padding: `0 ${spacing.md} ${spacing.md}`,
+                }, children: children }), footer ? (_jsx("div", { style: {
+                    borderTop: `1px solid ${neutral[50]}`,
+                    flex: '0 0 auto',
+                    padding: spacing.md,
+                }, children: footer })) : null] }));
+};

package/dist/components/Info/MobileDrawer/MobileDrawer.stories.d.ts

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

package/dist/components/Info/MobileDrawer/MobileDrawer.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileDrawer.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/MobileDrawer/MobileDrawer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAM5D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAYnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA0BxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAiB1B,CAAC"}