@taiv/ui 1.15.0 → 2.0.0

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) => import("react/jsx-runtime").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,4CA8BtB,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/Card/Card.d.ts

@@ -1,6 +1,6 @@
 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;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnF,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,GAAI,4CAAkE,SAAS,4CAiB/F,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAOnF,MAAM,WAAW,SACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,MAAM,gBAAgB,CAAC;IACrE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,GAAI,4CAAkE,SAAS,4CAiB/F,CAAC"}

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

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

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

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

package/dist/components/Layout/Container/Container.js

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Container.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Container/Container.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAMxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAwBhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAenB,CAAC"}

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Container } from './Container';
+import { Text } from '../../Typography/Text/Text';
+import { Stack } from '../Stack/Stack';
+import { neutral } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
+const meta = {
+    title: 'Components/Layout/Container',
+    component: Container,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        children: {
+            control: false,
+            description: 'Page or section content constrained to the container max-width',
+            table: { type: { summary: 'ReactNode' } },
+        },
+        size: {
+            control: { type: 'select' },
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            description: 'Max-width preset from the theme',
+            table: { type: { summary: 'MantineNumberSize' } },
+        },
+        fluid: {
+            control: { type: 'boolean' },
+            description: 'When true, the container grows to full width',
+            table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        size: 'md',
+        fluid: false,
+        children: (_jsxs(Stack, { spacing: spacing.md, py: spacing.xl, children: [_jsx(Text, { weight: "semibold", children: "Centered content with a max width" }), _jsx(Text, { size: "sm", color: neutral[200], children: "Resize the preview to see horizontal padding and the container cap. Use the size control to change the breakpoint preset." })] })),
+        sx: {
+            borderLeft: `1px dashed ${neutral[100]}`,
+            borderRight: `1px dashed ${neutral[100]}`,
+        },
+    },
+};
+export const Fluid = {
+    args: {
+        fluid: true,
+        children: (_jsxs(Stack, { spacing: spacing.sm, py: spacing.lg, children: [_jsx(Text, { weight: "semibold", children: "Fluid container" }), _jsx(Text, { size: "sm", color: neutral[200], children: "With fluid set, content can use the full width of the viewport (aside from default horizontal padding)." })] })),
+        sx: {
+            backgroundColor: neutral[25],
+        },
+    },
+};

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

@@ -0,0 +1,34 @@
+import type React from 'react';
+export type DataStateVariant = 'loading' | 'empty';
+export interface DataStateProps {
+    variant: DataStateVariant;
+    /** Primary message. Defaults to `'Loading...'` / `'No results'`. */
+    message?: React.ReactNode;
+    /**
+     * Optional action (e.g. a "Add item" button) rendered below the message
+     * for the `empty` variant. Ignored for `loading`.
+     */
+    action?: React.ReactNode;
+    /** Loader size when `variant='loading'`. Default `'xl'`. */
+    loaderSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Vertical padding applied to the outer `Center`. Default `spacing.xxl`. */
+    py?: string | number;
+    /** Horizontal padding applied to the outer `Center`. */
+    px?: string | number;
+    /** Minimum height of the outer `Center`. Useful inside table placeholders. */
+    minHeight?: string | number;
+}
+/**
+ * Canonical placeholder used in the slot where data *would* render. Pattern:
+ *
+ * ```tsx
+ * if (isLoading) return <DataState variant='loading' />;
+ * if (items.length === 0) return <DataState variant='empty' />;
+ * return <ActualContent />;
+ * ```
+ *
+ * Wraps the existing `Center` + `Stack` + `Loader` + `Text` composition used
+ * across Taiv screens so feature code doesn't have to re-assemble it.
+ */
+export declare const DataState: ({ variant, message, action, loaderSize, py, px, minHeight, }: DataStateProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DataState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataState.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/DataState/DataState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnD,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,gBAAgB,CAAC;IAC1B,oEAAoE;IACpE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC9C,6EAA6E;IAC7E,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,wDAAwD;IACxD,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,GAAI,8DAQvB,cAAc,4CAahB,CAAC"}

package/dist/components/Layout/DataState/DataState.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { spacing } from '../../../constants/spacing';
+import { Text } from '../../Typography/Text/Text';
+import { Center } from '../Center/Center';
+import { Loader } from '../Loader/Loader';
+import { Stack } from '../Stack/Stack';
+/**
+ * Canonical placeholder used in the slot where data *would* render. Pattern:
+ *
+ * ```tsx
+ * if (isLoading) return <DataState variant='loading' />;
+ * if (items.length === 0) return <DataState variant='empty' />;
+ * return <ActualContent />;
+ * ```
+ *
+ * Wraps the existing `Center` + `Stack` + `Loader` + `Text` composition used
+ * across Taiv screens so feature code doesn't have to re-assemble it.
+ */
+export const DataState = ({ variant, message, action, loaderSize = 'xl', py = spacing.xxl, px, minHeight, }) => {
+    const resolvedMessage = message !== null && message !== void 0 ? message : (variant === 'loading' ? 'Loading...' : 'No results');
+    return (_jsx(Center, { mih: minHeight, px: px, py: py, children: _jsxs(Stack, { align: 'center', gap: spacing.sm, children: [variant === 'loading' ? _jsx(Loader, { size: loaderSize }) : null, _jsx(Text, { variant: 'subtle', children: resolvedMessage }), variant === 'empty' && action ? _jsx(Center, { children: action }) : null] }) }));
+};

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DataState } from './DataState';
+declare const meta: Meta<typeof DataState>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Loading: Story;
+export declare const LoadingWithMessage: Story;
+export declare const Empty: Story;
+export declare const EmptyWithAction: Story;
+export declare const InTablePlaceholder: Story;
+//# sourceMappingURL=DataState.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataState.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/DataState/DataState.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,CAYhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAQnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAc7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC"}

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconPlus } from '@tabler/icons-react';
+import { neutral } from '../../../constants/colors';
+import { Button } from '../../Inputs/Buttons/Button/Button';
+import { DataState } from './DataState';
+const meta = {
+    component: DataState,
+    parameters: {
+        docs: {
+            description: {
+                component: "Placeholder for the slot where data would render. Use as an early return:\n\n```tsx\nif (isLoading) return <DataState variant='loading' />;\nif (items.length === 0) return <DataState variant='empty' />;\nreturn <ActualContent />;\n```",
+            },
+        },
+        layout: 'centered',
+    },
+    title: 'Components/Layout/DataState',
+};
+export default meta;
+const FRAME = {
+    border: `1px solid ${neutral[50]}`,
+    borderRadius: 8,
+    width: 480,
+};
+export const Loading = {
+    render: () => (_jsx("div", { style: FRAME, children: _jsx(DataState, { variant: 'loading' }) })),
+};
+export const LoadingWithMessage = {
+    render: () => (_jsx("div", { style: FRAME, children: _jsx(DataState, { message: 'Loading devices...', variant: 'loading' }) })),
+};
+export const Empty = {
+    render: () => (_jsx("div", { style: FRAME, children: _jsx(DataState, { variant: 'empty' }) })),
+};
+export const EmptyWithAction = {
+    render: () => (_jsx("div", { style: FRAME, children: _jsx(DataState, { action: _jsx(Button, { leftIcon: _jsx(IconPlus, { size: 16 }), size: 'sm', children: "Add device" }), message: 'No devices found. Register a new device.', variant: 'empty' }) })),
+};
+export const InTablePlaceholder = {
+    render: () => (_jsx("div", { style: { ...FRAME, width: 640 }, children: _jsx(DataState, { minHeight: 320, variant: 'loading' }) })),
+};

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

@@ -1 +1 @@
-{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Divider/Divider.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6B,YAAY,IAAI,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC/F,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,UAAU,YAAa,SAAQ,mBAAmB;IAChD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,OAAO,GAAI,oCAA2D,YAAY,4CAEvF,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Divider/Divider.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6B,YAAY,IAAI,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC/F,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,UAAU,YAAa,SAAQ,mBAAmB;IAChD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,OAAO,GAAI,oCAAkD,YAAY,4CAI9E,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/Layout/Divider/Divider.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Divider as MantineDivider } from '@mantine/core';
 import { neutral } from '../../../constants/colors';
-const Divider = ({ width = '100%', styles, color = neutral[50], ...props }) => {
-    return _jsx(MantineDivider, { color: color, w: width, styles: styles, ...props });
+const Divider = ({ width, styles, color = neutral[50], ...props }) => {
+    const isVertical = props.orientation === 'vertical';
+    const resolvedWidth = width !== null && width !== void 0 ? width : (isVertical ? undefined : '100%');
+    return _jsx(MantineDivider, { color: color, w: resolvedWidth, styles: styles, ...props });
 };
 export { Divider };

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

@@ -3,7 +3,7 @@ import { CSSObject } from '@mantine/styles';
 interface GroupProps extends MantineGroupProps {
     width?: string | number;
     styles?: Record<string, CSSObject>;
-    gap?: string;
+    gap?: string | number;
 }
 declare const Group: ({ width, gap, styles, ...props }: GroupProps) => import("react/jsx-runtime").JSX.Element;
 export { Group };

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

@@ -1 +1 @@
-{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Group/Group.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyB,UAAU,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvF,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,UAAU,UAAW,SAAQ,iBAAiB;IAC5C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,QAAA,MAAM,KAAK,GAAI,kCAAkC,UAAU,4CAE1D,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Group/Group.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyB,UAAU,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvF,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,UAAU,UAAW,SAAQ,iBAAiB;IAC5C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAGnC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,KAAK,GAAI,kCAAkC,UAAU,4CAE1D,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

@@ -3,6 +3,6 @@ import { CSSObject } from '@mantine/styles';
 interface LoaderProps extends MantineLoaderProps {
     styles?: Record<string, CSSObject>;
 }
-declare const Loader: ({ styles, ...props }: LoaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const Loader: ({ styles, color, ...props }: LoaderProps) => import("react/jsx-runtime").JSX.Element;
 export { Loader };
 //# sourceMappingURL=Loader.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Loader.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Loader/Loader.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,UAAU,WAAY,SAAQ,kBAAkB;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,MAAM,GAAI,sBAAsB,WAAW,4CAEhD,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Loader.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Loader/Loader.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,UAAU,WAAY,SAAQ,kBAAkB;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,MAAM,GAAI,6BAAiD,WAAW,4CAE3E,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/Layout/Loader/Loader.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Loader as MantineLoader } from '@mantine/core';
-const Loader = ({ styles, ...props }) => {
-    return _jsx(MantineLoader, { styles: styles, ...props });
+import { primary } from '../../../constants';
+const Loader = ({ styles, color = `${primary[200]}`, ...props }) => {
+    return _jsx(MantineLoader, { color: color, styles: styles, ...props });
 };
 export { Loader };