@taiv/ui 1.15.0 → 2.1.0

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

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Accordion } from './Accordion';
+import { Badge } from '../../Info/Badge/Badge';
+import { Group } from '../Group/Group';
+import { Stack } from '../Stack/Stack';
+import { Text } from '../../Typography/Text/Text';
+import { Toggle } from '../../Inputs/Controls/Toggle/Toggle';
+import { neutral } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
+const meta = {
+    title: 'Components/Layout/Accordion',
+    component: Accordion,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: '[View Mantine Docs](https://v6.mantine.dev/core/accordion/)\n\nAccordion renders a list of expandable items. It extends Mantine v6\'s Accordion with Taiv styling: Poppins font, neutral dividers, `neutral[25]` hover, and a right-chevron that rotates 90° on expand.\n\nSupports controlled and uncontrolled modes, multi-expand via the `multiple` prop, and fully custom control content via `Accordion.Control`.',
+            },
+        },
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '560px' }, children: _jsx(Story, {}) })),
+    ],
+    argTypes: {
+        multiple: {
+            control: { type: 'boolean' },
+            description: 'Allow multiple items to be open simultaneously',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        defaultValue: {
+            control: { type: 'text' },
+            description: 'Uncontrolled default open item value',
+            table: { type: { summary: 'string | string[]' } },
+        },
+        value: {
+            control: false,
+            description: 'Controlled open item value',
+            table: { type: { summary: 'string | string[] | null' } },
+        },
+        onChange: {
+            action: 'changed',
+            description: 'Called when the open item changes',
+            table: { type: { summary: '(value: string | string[] | null) => void' } },
+        },
+        chevron: {
+            control: false,
+            description: 'Override the default right-chevron icon',
+            table: { type: { summary: 'ReactNode' } },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Style overrides using Mantine styles API',
+            table: { type: { summary: 'Record<string, CSSObject>' } },
+        },
+    },
+};
+export default meta;
+// ─── Single-expand (default) ────────────────────────────────────────────────
+export const Default = {
+    args: { defaultValue: 'item-1' },
+    render: (args) => (_jsxs(Accordion, { ...args, children: [_jsxs(Accordion.Item, { value: 'item-1', children: [_jsx(Accordion.Control, { children: "Section one" }), _jsx(Accordion.Panel, { children: _jsx(Text, { variant: 'subtle', children: "Content for section one. Click the header to collapse." }) })] }), _jsxs(Accordion.Item, { value: 'item-2', children: [_jsx(Accordion.Control, { children: "Section two" }), _jsx(Accordion.Panel, { children: _jsx(Text, { variant: 'subtle', children: "Content for section two." }) })] }), _jsxs(Accordion.Item, { value: 'item-3', children: [_jsx(Accordion.Control, { children: "Section three" }), _jsx(Accordion.Panel, { children: _jsx(Text, { variant: 'subtle', children: "Content for section three." }) })] })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `<Accordion defaultValue="item-1">
+  <Accordion.Item value="item-1">
+    <Accordion.Control>Section one</Accordion.Control>
+    <Accordion.Panel>Content for section one.</Accordion.Panel>
+  </Accordion.Item>
+  <Accordion.Item value="item-2">
+    <Accordion.Control>Section two</Accordion.Control>
+    <Accordion.Panel>Content for section two.</Accordion.Panel>
+  </Accordion.Item>
+</Accordion>`,
+            },
+        },
+    },
+};
+// ─── Multi-expand ────────────────────────────────────────────────────────────
+export const MultiExpand = {
+    render: () => (_jsxs(Accordion, { multiple: true, children: [_jsxs(Accordion.Item, { value: 'item-1', children: [_jsx(Accordion.Control, { children: "Open simultaneously" }), _jsx(Accordion.Panel, { children: _jsx(Text, { variant: 'subtle', children: "Both panels can be open at once when `multiple` is set." }) })] }), _jsxs(Accordion.Item, { value: 'item-2', children: [_jsx(Accordion.Control, { children: "Also open" }), _jsx(Accordion.Panel, { children: _jsx(Text, { variant: 'subtle', children: "This one is open too." }) })] }), _jsxs(Accordion.Item, { value: 'item-3', children: [_jsx(Accordion.Control, { children: "Collapsed" }), _jsx(Accordion.Panel, { children: _jsx(Text, { variant: 'subtle', children: "This panel starts collapsed." }) })] })] })),
+    parameters: {
+        docs: {
+            description: { story: 'Pass `multiple` to allow any number of items to be open at once.' },
+            source: { code: `<Accordion multiple defaultValue={['item-1', 'item-2']}>...</Accordion>` },
+        },
+    },
+};
+// ─── Custom header content (Ad Preferences-style row) ───────────────────────
+const categories = [
+    { value: 'adult', emoji: '🔞', label: 'Adult Content', badge: null },
+    { value: 'gambling', emoji: '🎰', label: 'Gambling', badge: null },
+    { value: 'food', emoji: '🍽️', label: 'Food & Drink', badge: '1 of 9 blocked' },
+    { value: 'health', emoji: '💪', label: 'Health & Fitness', badge: '1 of 14 blocked' },
+];
+export const CustomHeader = {
+    render: () => {
+        const [blocked, setBlocked] = useState({});
+        const toggle = (value, e) => {
+            e.stopPropagation();
+            setBlocked((prev) => ({ ...prev, [value]: !prev[value] }));
+        };
+        return (_jsx(Accordion, { children: categories.map(({ value, emoji, label, badge }) => (_jsxs(Accordion.Item, { value: value, children: [_jsx(Accordion.Control, { children: _jsxs(Group, { position: 'apart', noWrap: true, children: [_jsxs(Group, { spacing: spacing.sm, noWrap: true, children: [_jsx("span", { style: { fontSize: '20px', lineHeight: 1 }, children: emoji }), _jsx(Text, { variant: 'body', children: label })] }), _jsxs(Group, { spacing: spacing.sm, noWrap: true, onClick: (e) => e.stopPropagation(), children: [badge ? (_jsx(Badge, { variant: 'filled', color: 'warning', size: 'sm', children: badge })) : (_jsx(Text, { variant: 'label', color: neutral[200], children: "Not blocked" })), _jsx(Toggle, { size: 'sm', checked: !!blocked[value], variant: 'error', onChange: (e) => {
+                                                e.stopPropagation();
+                                                setBlocked((prev) => ({ ...prev, [value]: e.currentTarget.checked }));
+                                            } })] })] }) }), _jsx(Accordion.Panel, { children: _jsx(Stack, { spacing: spacing.sm, children: _jsxs(Text, { variant: 'subtle', children: ["Subcategories for ", label, " would appear here."] }) }) })] }, value))) }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Compose any content inside `Accordion.Control`. Wrap interactive elements (toggles, buttons) in a click-stopping container so they don\'t trigger expand/collapse.',
+            },
+            source: { code: false },
+        },
+    },
+};
+// ─── Disabled item ───────────────────────────────────────────────────────────
+export const DisabledItem = {
+    render: () => (_jsxs(Accordion, { children: [_jsxs(Accordion.Item, { value: 'active', children: [_jsx(Accordion.Control, { children: "Available category" }), _jsx(Accordion.Panel, { children: _jsx(Text, { variant: 'subtle', children: "This item can be expanded." }) })] }), _jsxs(Accordion.Item, { value: 'disabled', disabled: true, children: [_jsx(Accordion.Control, { children: "Disabled category" }), _jsx(Accordion.Panel, { children: _jsx(Text, { variant: 'subtle', children: "This content is inaccessible." }) })] })] })),
+    parameters: {
+        docs: {
+            description: { story: 'Pass `disabled` on an `Accordion.Item` to prevent it from being opened.' },
+            source: {
+                code: `<Accordion.Item value="disabled" disabled>
+  <Accordion.Control>Disabled</Accordion.Control>
+  <Accordion.Panel>...</Accordion.Panel>
+</Accordion.Item>`,
+            },
+        },
+    },
+};
+// ─── Controlled ──────────────────────────────────────────────────────────────
+export const Controlled = {
+    render: () => {
+        const [value, setValue] = useState('item-1');
+        return (_jsxs(Stack, { spacing: spacing.md, children: [_jsxs(Text, { variant: 'label', children: ["Open item: ", value !== null && value !== void 0 ? value : 'none'] }), _jsxs(Accordion, { value: value, onChange: (v) => setValue(v), children: [_jsxs(Accordion.Item, { value: 'item-1', children: [_jsx(Accordion.Control, { children: "Controlled item 1" }), _jsx(Accordion.Panel, { children: _jsx(Text, { variant: 'subtle', children: "Controlled via external state." }) })] }), _jsxs(Accordion.Item, { value: 'item-2', children: [_jsx(Accordion.Control, { children: "Controlled item 2" }), _jsx(Accordion.Panel, { children: _jsx(Text, { variant: 'subtle', children: "Only one open at a time." }) })] })] })] }));
+    },
+    parameters: {
+        docs: {
+            description: { story: 'Pass `value` and `onChange` for full controlled behaviour.' },
+            source: { code: false },
+        },
+    },
+};

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

@@ -1,8 +1,23 @@
-import React from 'react';
-import { SimpleGridProps } from '@mantine/core';
-interface AutoGridProps extends SimpleGridProps {
+import { type SimpleGridProps } from '@mantine/core';
+import type React from 'react';
+/**
+ * Tailwind-style responsive column map. Missing entries inherit from the
+ * next-smaller breakpoint. `base` applies at viewports below `sm` (640px).
+ */
+export type ResponsiveCols = {
+    base?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+};
+export interface AutoGridProps extends Omit<SimpleGridProps, 'cols'> {
     children: React.ReactNode;
+    /**
+     * Number of columns. Accepts a number, or a Tailwind-style responsive map
+     * (`{ base: 1, sm: 2, lg: 3 }`). Defaults to `1`.
+     */
+    cols?: number | ResponsiveCols;
 }
-declare const AutoGrid: ({ children, ...props }: AutoGridProps) => import("react/jsx-runtime").JSX.Element;
-export { AutoGrid };
+export declare const AutoGrid: ({ cols, children, ...props }: AutoGridProps) => React.JSX.Element;
 //# sourceMappingURL=AutoGrid.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AutoGrid.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/AutoGrid/AutoGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,UAAU,aAAc,SAAQ,eAAe;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,QAAA,MAAM,QAAQ,GAAI,wBAAwB,aAAa,4CAEtD,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"AutoGrid.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/AutoGrid/AutoGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IAClE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;CAChC;AAqDD,eAAO,MAAM,QAAQ,GAAI,8BAAkC,aAAa,sBAmBvE,CAAC"}

package/dist/components/Layout/AutoGrid/AutoGrid.js

@@ -1,6 +1,54 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SimpleGrid } from '@mantine/core';
-const AutoGrid = ({ children, ...props }) => {
-    return _jsx(SimpleGrid, { ...props, children: children });
+import { breakpoints } from '../../../constants/breakpoints';
+const BP_WIDTH_PX = {
+    base: 0,
+    lg: breakpoints.LAPTOP, // 1024
+    md: breakpoints.TABLET, // 768
+    sm: breakpoints.MOBILE, // 640
+    xl: breakpoints.DESKTOP, // 1280
+};
+const RESPONSIVE_KEYS = [
+    'base',
+    'sm',
+    'md',
+    'lg',
+    'xl',
+];
+/**
+ * Translate a mobile-first responsive cols map into Mantine v6's
+ * `{ cols, breakpoints: [{ maxWidth, cols }, …] }` shape. Mantine applies
+ * breakpoints below a `maxWidth` so we resolve the largest entry as the base
+ * `cols` and emit descending `maxWidth` thresholds for smaller steps.
+ */
+const resolveResponsiveCols = (map) => {
+    // Forward-fill so `{ base: 1, lg: 3 }` implies sm/md also pick up 1 until lg.
+    let last = 1;
+    const filled = RESPONSIVE_KEYS.reduce((acc, k) => {
+        const v = map[k];
+        if (typeof v === 'number')
+            last = v;
+        acc[k] = last;
+        return acc;
+    }, { base: 1, lg: 1, md: 1, sm: 1, xl: 1 });
+    const baseCols = filled.xl;
+    const stops = [];
+    // Walk descending: each step fires when viewport drops below its threshold.
+    const descending = ['xl', 'lg', 'md', 'sm'];
+    for (const key of descending) {
+        const smaller = RESPONSIVE_KEYS[RESPONSIVE_KEYS.indexOf(key) - 1];
+        if (!smaller)
+            continue;
+        if (filled[smaller] !== filled[key]) {
+            stops === null || stops === void 0 ? void 0 : stops.push({ cols: filled[smaller], maxWidth: BP_WIDTH_PX[key] });
+        }
+    }
+    return { breakpoints: stops, cols: baseCols };
+};
+export const AutoGrid = ({ cols = 1, children, ...props }) => {
+    if (typeof cols === 'number') {
+        return (_jsx(SimpleGrid, { cols: cols, ...props, children: children }));
+    }
+    const { cols: resolvedCols, breakpoints: resolvedBreakpoints } = resolveResponsiveCols(cols);
+    return (_jsx(SimpleGrid, { breakpoints: resolvedBreakpoints, cols: resolvedCols, ...props, children: children }));
 };
-export { AutoGrid };

package/dist/components/Layout/AutoGrid/AutoGrid.stories.d.ts

@@ -4,4 +4,5 @@ declare const meta: Meta<typeof AutoGrid>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const ResponsiveCols: Story;
 //# sourceMappingURL=AutoGrid.stories.d.ts.map

package/dist/components/Layout/AutoGrid/AutoGrid.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutoGrid.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/AutoGrid/AutoGrid.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAKtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAqD/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAkBnC,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC"}
+{"version":3,"file":"AutoGrid.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/AutoGrid/AutoGrid.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAqD/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAwBnC,eAAO,MAAM,OAAO,EAAE,KAwBrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAoB5B,CAAC"}

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

@@ -1,18 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AutoGrid } from './AutoGrid';
-import { Card } from '../Card/Card';
 import { Title } from '../../Typography/Title/Title';
+import { Card } from '../Card/Card';
+import { AutoGrid } from './AutoGrid';
 const meta = {
-    title: 'Components/Layout/AutoGrid',
-    component: AutoGrid,
-    parameters: {
-        layout: 'centered',
-        docs: {
-            description: {
-                component: "[View Mantine Docs](https://v6.mantine.dev/core/simple-grid/)\n\nThe AutoGrid component is a responsive grid where each item takes an equal amount of space. It extends Mantine v6's SimpleGrid component and provides automatic column distribution with customizable spacing.",
-            },
-        },
-    },
     argTypes: {
         children: {
             control: false,
@@ -25,45 +15,55 @@ const meta = {
             control: { type: 'number' },
             description: 'Number of columns in each row',
             table: {
-                type: { summary: 'number | ResponsiveObject' },
                 defaultValue: { summary: '1' },
+                type: { summary: 'number | ResponsiveObject' },
             },
         },
         spacing: {
             control: { type: 'select' },
-            options: ['xs', 'sm', 'md', 'lg', 'xl'],
             description: 'Horizontal spacing between items',
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
             table: {
-                type: { summary: "'xs' | 'sm' | 'md' | 'lg' | 'xl' | number" },
                 defaultValue: { summary: "'md'" },
+                type: { summary: "'xs' | 'sm' | 'md' | 'lg' | 'xl' | number" },
+            },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Custom styles to override with if necessary',
+            table: {
+                type: { summary: 'Record<string, CSSObject>' },
             },
         },
         verticalSpacing: {
             control: { type: 'select' },
-            options: ['xs', 'sm', 'md', 'lg', 'xl'],
             description: 'Vertical spacing between items',
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
             table: {
                 type: { summary: "'xs' | 'sm' | 'md' | 'lg' | 'xl' | number" },
             },
         },
-        styles: {
-            control: { type: 'object' },
-            description: 'Custom styles to override with if necessary',
-            table: {
-                type: { summary: 'Record<string, CSSObject>' },
+    },
+    component: AutoGrid,
+    parameters: {
+        docs: {
+            description: {
+                component: "[View Mantine Docs](https://v6.mantine.dev/core/simple-grid/)\n\nThe AutoGrid component is a responsive grid where each item takes an equal amount of space. It extends Mantine v6's SimpleGrid component and provides automatic column distribution with customizable spacing.",
             },
         },
+        layout: 'centered',
     },
+    title: 'Components/Layout/AutoGrid',
 };
 export default meta;
-const SampleCard = ({ title, description }) => (_jsxs(Card, { animate: true, padding: "lg", children: [_jsx(Title, { variant: "cardHeader", children: title }), _jsx(Title, { variant: "cardSubheader", children: description })] }));
+const SampleCard = ({ title, description, }) => (_jsxs(Card, { animate: true, padding: 'lg', children: [_jsx(Title, { variant: 'cardHeader', children: title }), _jsx(Title, { variant: 'cardSubheader', children: description })] }));
 const items = [
-    { id: 1, title: 'Item 1', description: 'Grid item content' },
-    { id: 2, title: 'Item 2', description: 'Grid item content' },
-    { id: 3, title: 'Item 3', description: 'Grid item content' },
-    { id: 4, title: 'Item 4', description: 'Grid item content' },
-    { id: 5, title: 'Item 5', description: 'Grid item content' },
-    { id: 6, title: 'Item 6', description: 'Grid item content' },
+    { description: 'Grid item content', id: 1, title: 'Item 1' },
+    { description: 'Grid item content', id: 2, title: 'Item 2' },
+    { description: 'Grid item content', id: 3, title: 'Item 3' },
+    { description: 'Grid item content', id: 4, title: 'Item 4' },
+    { description: 'Grid item content', id: 5, title: 'Item 5' },
+    { description: 'Grid item content', id: 6, title: 'Item 6' },
 ];
 export const Default = {
     args: {
@@ -74,5 +74,15 @@ export const Default = {
     decorators: [
         (Story) => (_jsx("div", { style: { width: '700px' }, children: _jsx(Story, {}) })),
     ],
-    render: (args) => (_jsx(AutoGrid, { ...args, children: items.map((item) => (_jsx(SampleCard, { title: item.title, description: item.description }, item.id))) })),
+    render: (args) => (_jsx(AutoGrid, { ...args, children: items.map((item) => (_jsx(SampleCard, { description: item.description, title: item.title }, item.id))) })),
+};
+export const ResponsiveCols = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Pass a responsive map to `cols` — Tailwind-style `base`/`sm`/`md`/`lg`/`xl`. Missing stops inherit from the next-smaller entry. Resize the viewport to see the grid reflow.',
+            },
+        },
+    },
+    render: () => (_jsx(AutoGrid, { cols: { base: 1, lg: 3, sm: 2 }, spacing: 'md', children: items.map((item) => (_jsx(SampleCard, { description: item.description, title: item.title }, item.id))) })),
 };

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

@@ -0,0 +1,40 @@
+import React from 'react';
+export interface BottomActionBarItem {
+    /** Stable identifier for React key + accessibility. */
+    id: string;
+    /** Icon element (e.g. `<IconLayout />`). Rendered above the label. */
+    icon: React.ReactNode;
+    /** Short label rendered below the icon. */
+    label: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    /** Mark the item as active / pressed. */
+    active?: boolean;
+    /** Accessibility label. Defaults to `label` when it's a string. */
+    ariaLabel?: string;
+}
+export interface BottomActionBarProps {
+    items: BottomActionBarItem[];
+    /** Pin to the viewport bottom. Default `true`. */
+    fixed?: boolean;
+    /** z-index when `fixed`. Default `20` (below `SelectionToolbar` at 30). */
+    zIndex?: number;
+    /** Backdrop blur intensity in px. Default `8`. 0 disables the blur. */
+    blur?: number;
+    /** Override the container height (px). Default `64`. */
+    height?: number;
+    ariaLabel?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Launcher row of icon+label cells, typically used to switch between tools
+ * (layout / text / media / animate…) at the bottom of a canvas-like editor.
+ * Columns auto-distribute evenly via `grid-template-columns: repeat(N, 1fr)`.
+ *
+ * `SelectionToolbar` and modals should sit above this bar — keep their
+ * `z-index` above the default `20`. `MobileDrawer` should receive
+ * `bottomOffset={height}` so sheets stack on top rather than overlap.
+ */
+export declare const BottomActionBar: ({ items, fixed, zIndex, blur, height, ariaLabel, className, style, }: BottomActionBarProps) => React.JSX.Element;
+//# sourceMappingURL=BottomActionBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BottomActionBar.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/BottomActionBar/BottomActionBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,MAAM,WAAW,mBAAmB;IAClC,uDAAuD;IACvD,EAAE,EAAE,MAAM,CAAC;IACX,sEAAsE;IACtE,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,2CAA2C;IAC3C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,kDAAkD;IAClD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,GAAI,sEAS7B,oBAAoB,sBA8BtB,CAAC"}

package/dist/components/Layout/BottomActionBar/BottomActionBar.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { neutral, primary, white } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
+import { Text } from '../../Typography/Text/Text';
+/**
+ * Launcher row of icon+label cells, typically used to switch between tools
+ * (layout / text / media / animate…) at the bottom of a canvas-like editor.
+ * Columns auto-distribute evenly via `grid-template-columns: repeat(N, 1fr)`.
+ *
+ * `SelectionToolbar` and modals should sit above this bar — keep their
+ * `z-index` above the default `20`. `MobileDrawer` should receive
+ * `bottomOffset={height}` so sheets stack on top rather than overlap.
+ */
+export const BottomActionBar = ({ items, fixed = true, zIndex = 20, blur = 8, height = 64, ariaLabel = 'Editor tools', className, style, }) => {
+    return (_jsx("nav", { "aria-label": ariaLabel, className: className, style: {
+            backdropFilter: blur ? `blur(${blur}px)` : undefined,
+            backgroundColor: blur ? 'rgba(255, 255, 255, 0.85)' : white,
+            borderTop: `1px solid ${neutral[50]}`,
+            bottom: fixed ? 0 : undefined,
+            display: 'grid',
+            gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))`,
+            height,
+            left: fixed ? 0 : undefined,
+            position: fixed ? 'fixed' : 'relative',
+            right: fixed ? 0 : undefined,
+            width: fixed ? '100%' : undefined,
+            zIndex: fixed ? zIndex : undefined,
+            ...style,
+        }, children: items.map((item, i) => (_jsx(BottomActionBarButton, { item: item, showDivider: i < items.length - 1 }, item.id))) }));
+};
+const BottomActionBarButton = ({ item, showDivider, }) => {
+    var _a;
+    const [hover, setHover] = useState(false);
+    const [focus, setFocus] = useState(false);
+    const labelText = (_a = item.ariaLabel) !== null && _a !== void 0 ? _a : (typeof item.label === 'string' ? item.label : undefined);
+    const showPrimary = !item.disabled && (item.active || hover || focus);
+    const color = showPrimary ? primary[200] : neutral[200];
+    return (_jsxs("div", { style: { position: 'relative', height: '100%' }, children: [_jsxs("button", { "aria-label": labelText, "aria-pressed": item.active ? true : undefined, disabled: item.disabled, onClick: item.onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onFocus: () => setFocus(true), onBlur: () => {
+                    setFocus(false);
+                    setHover(false);
+                }, style: {
+                    alignItems: 'center',
+                    background: 'transparent',
+                    border: 'none',
+                    color,
+                    cursor: item.disabled ? 'not-allowed' : 'pointer',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: spacing.xs,
+                    height: '100%',
+                    justifyContent: 'center',
+                    opacity: item.disabled ? 0.5 : 1,
+                    // Browser default focus outline reads as a yellow/orange box on
+                    // some platforms. Suppress it — the primary-color text + icon
+                    // treatment driven by `focus` state is the keyboard-visible cue.
+                    outline: 'none',
+                    padding: spacing.xs,
+                    transition: 'color 150ms ease',
+                    WebkitTapHighlightColor: 'transparent',
+                    width: '100%',
+                }, type: 'button', children: [_jsx("span", { style: {
+                            alignItems: 'center',
+                            color: 'inherit',
+                            display: 'inline-flex',
+                            height: 24,
+                            justifyContent: 'center',
+                            width: 24,
+                        }, children: item.icon }), _jsx(Text, { variant: 'label', weight: item.active ? 'semibold' : 'medium', color: 'inherit', styles: { lineHeight: 1 }, children: item.label })] }), showDivider ? (_jsx("span", { "aria-hidden": 'true', style: {
+                    position: 'absolute',
+                    right: 0,
+                    top: '50%',
+                    transform: 'translateY(-50%)',
+                    width: 1,
+                    height: 24,
+                    backgroundColor: neutral[50],
+                    pointerEvents: 'none',
+                } })) : null] }));
+};

package/dist/components/Layout/BottomActionBar/BottomActionBar.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { BottomActionBar } from './BottomActionBar';
+declare const meta: Meta<typeof BottomActionBar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ThreeUp: Story;
+export declare const FourUp: Story;
+export declare const WithContentAbove: Story;
+export declare const DisabledItem: Story;
+//# sourceMappingURL=BottomActionBar.stories.d.ts.map

package/dist/components/Layout/BottomActionBar/BottomActionBar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomActionBar.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/BottomActionBar/BottomActionBar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAY5D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAYtC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KA+BrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAsCpB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA2B9B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAe1B,CAAC"}

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

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconLayoutGrid, IconMovie, IconPhoto, IconSparkles, IconTypography, } from '@tabler/icons-react';
+import { useState } from 'react';
+import { neutral } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
+import { Text } from '../../Typography/Text/Text';
+import { BottomActionBar } from './BottomActionBar';
+const meta = {
+    component: BottomActionBar,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Bottom-pinned launcher of icon+label cells. Columns are evenly distributed (`1fr` per item). Acts as the shell for slide-editor tool sheets; pair with `MobileDrawer` + `bottomOffset={height}` so sheets stack on top rather than overlap.',
+            },
+        },
+        layout: 'fullscreen',
+    },
+    title: 'Components/Layout/BottomActionBar',
+};
+export default meta;
+export const ThreeUp = {
+    render: () => {
+        const [active, setActive] = useState('layout');
+        return (_jsx(BottomActionBar, { items: [
+                {
+                    active: active === 'layout',
+                    icon: _jsx(IconLayoutGrid, { size: 20 }),
+                    id: 'layout',
+                    label: 'Layout',
+                    onClick: () => setActive('layout'),
+                },
+                {
+                    active: active === 'text',
+                    icon: _jsx(IconTypography, { size: 20 }),
+                    id: 'text',
+                    label: 'Text',
+                    onClick: () => setActive('text'),
+                },
+                {
+                    active: active === 'media',
+                    icon: _jsx(IconPhoto, { size: 20 }),
+                    id: 'media',
+                    label: 'Media',
+                    onClick: () => setActive('media'),
+                },
+            ] }));
+    },
+};
+export const FourUp = {
+    render: () => {
+        const [active, setActive] = useState('text');
+        return (_jsx(BottomActionBar, { items: [
+                {
+                    active: active === 'layout',
+                    icon: _jsx(IconLayoutGrid, { size: 20 }),
+                    id: 'layout',
+                    label: 'Layout',
+                    onClick: () => setActive('layout'),
+                },
+                {
+                    active: active === 'text',
+                    icon: _jsx(IconTypography, { size: 20 }),
+                    id: 'text',
+                    label: 'Text',
+                    onClick: () => setActive('text'),
+                },
+                {
+                    active: active === 'media',
+                    icon: _jsx(IconMovie, { size: 20 }),
+                    id: 'media',
+                    label: 'Media',
+                    onClick: () => setActive('media'),
+                },
+                {
+                    active: active === 'animate',
+                    icon: _jsx(IconSparkles, { size: 20 }),
+                    id: 'animate',
+                    label: 'Animate',
+                    onClick: () => setActive('animate'),
+                },
+            ] }));
+    },
+};
+export const WithContentAbove = {
+    render: () => (_jsxs("div", { style: { minHeight: '100vh', paddingBottom: 80 }, children: [_jsxs("div", { style: { padding: spacing.lg }, children: [_jsx(Text, { children: "Scroll content sits above the bar. Use `paddingBottom` on the page wrapper so nothing is occluded by the fixed bar." }), Array.from({ length: 30 }, (_, i) => `row-${i + 1}`).map((key, i) => (_jsxs(Text, { style: { color: neutral[200], padding: `${spacing.xs} 0` }, variant: 'subtle', children: ["Row ", i + 1] }, key)))] }), _jsx(BottomActionBar, { items: [
+                    { icon: _jsx(IconLayoutGrid, { size: 20 }), id: 'layout', label: 'Layout' },
+                    { icon: _jsx(IconTypography, { size: 20 }), id: 'text', label: 'Text' },
+                    { icon: _jsx(IconPhoto, { size: 20 }), id: 'media', label: 'Media' },
+                ] })] })),
+};
+export const DisabledItem = {
+    render: () => (_jsx(BottomActionBar, { items: [
+            { icon: _jsx(IconLayoutGrid, { size: 20 }), id: 'layout', label: 'Layout' },
+            { icon: _jsx(IconTypography, { size: 20 }), id: 'text', label: 'Text' },
+            {
+                disabled: true,
+                icon: _jsx(IconSparkles, { size: 20 }),
+                id: 'animate',
+                label: 'Animate',
+            },
+        ] })),
+};

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

@@ -1,8 +1,9 @@
+import React from 'react';
 import { BoxProps as MantineBoxProps } from '@mantine/core';
 interface BoxProps extends MantineBoxProps {
     width?: string | number;
     onClick?: () => void;
 }
-declare const Box: ({ width, onClick, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
+declare const Box: ({ width, onClick, ...props }: BoxProps) => React.JSX.Element;
 export { Box };
 //# sourceMappingURL=Box.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqB,QAAQ,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AAE/E,UAAU,QAAS,SAAQ,eAAe;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,GAAG,GAAI,8BAA8B,QAAQ,4CAElD,CAAC;AAEF,OAAO,EAAE,GAAG,EAAE,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAqB,QAAQ,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AAE/E,UAAU,QAAS,SAAQ,eAAe;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,GAAG,GAAI,8BAA8B,QAAQ,sBAElD,CAAC;AAEF,OAAO,EAAE,GAAG,EAAE,CAAC"}

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { CardProps as MantineCardProps } from '@mantine/core';
-export interface CardProps extends MantineCardProps {
+export interface CardProps extends MantineCardProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof MantineCardProps> {
     children: React.ReactNode;
     animate?: boolean;
 }
-export declare const Card: ({ children, animate, p, radius, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: ({ children, animate, p, radius, ...props }: CardProps) => React.JSX.Element;
 //# sourceMappingURL=Card.d.ts.map