@taiv/ui 1.14.1 → 2.0.0

package/dist/components/Inputs/Dropzone/Dropzone.stories.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { IconCloudUpload, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+import { Dropzone, IMAGE_MIME_TYPE, PDF_MIME_TYPE } from './Dropzone';
+import { Group } from '../../Layout/Group/Group';
+import { Stack } from '../../Layout/Stack/Stack';
+import { Text } from '../../Typography/Text/Text';
+import { Title } from '../../Typography/Title/Title';
+import { error, neutral, primary } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
+const meta = {
+    title: 'Components/Inputs/Dropzone',
+    component: Dropzone,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: '[View Mantine Docs](https://v6.mantine.dev/others/dropzone/)\n\nDropzone captures files via click or drag-and-drop. It extends Mantine v6\'s `Dropzone` with Taiv styling: Poppins font, dashed neutral border, `primary[25]` fill on accept, `error[25]` fill on reject.\n\nUse `Dropzone.Accept`, `Dropzone.Reject`, and `Dropzone.Idle` inside children to show different content per state.',
+            },
+        },
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '520px' }, children: _jsx(Story, {}) })),
+    ],
+    argTypes: {
+        onDrop: {
+            action: 'files dropped',
+            description: 'Called with valid files',
+            table: { type: { summary: '(files: FileWithPath[]) => void' } },
+        },
+        onReject: {
+            action: 'files rejected',
+            description: 'Called with rejected files (wrong type, too large, etc.)',
+            table: { type: { summary: '(rejections: FileRejection[]) => void' } },
+        },
+        accept: {
+            control: false,
+            description: 'File MIME types to accept. Use the exported `IMAGE_MIME_TYPE`, `PDF_MIME_TYPE`, etc.',
+            table: { type: { summary: 'Accept | string[]' } },
+        },
+        maxSize: {
+            control: { type: 'number' },
+            description: 'Maximum file size in bytes',
+            table: { type: { summary: 'number' } },
+        },
+        maxFiles: {
+            control: { type: 'number' },
+            description: 'Max number of files',
+            table: { type: { summary: 'number' } },
+        },
+        multiple: {
+            control: { type: 'boolean' },
+            description: 'Allow selecting multiple files',
+            table: { type: { summary: 'boolean' }, defaultValue: { summary: 'true' } },
+        },
+        loading: {
+            control: { type: 'boolean' },
+            description: 'Display a loading overlay',
+            table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+            description: 'Disable the dropzone',
+            table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },
+        },
+    },
+};
+export default meta;
+const StateContent = () => (_jsxs(Group, { position: 'center', spacing: spacing.xl, style: { minHeight: 120, pointerEvents: 'none' }, children: [_jsx(Dropzone.Accept, { children: _jsx(IconUpload, { size: 48, color: primary[200] }) }), _jsx(Dropzone.Reject, { children: _jsx(IconX, { size: 48, color: error[200] }) }), _jsx(Dropzone.Idle, { children: _jsx(IconCloudUpload, { size: 48, color: neutral[200] }) }), _jsxs(Stack, { spacing: spacing.xxs, children: [_jsx(Title, { variant: 'cardHeader', children: "Drop files here or click to browse" }), _jsx(Text, { variant: 'subtle', children: "Attach as many files as you like, each up to 5 MB" })] })] }));
+// ─── Default ─────────────────────────────────────────────────────────────────
+export const Default = {
+    args: {
+        maxSize: 5 * 1024 ** 2,
+        onDrop: (files) => console.log('dropped', files),
+        onReject: (rejections) => console.log('rejected', rejections),
+    },
+    render: (args) => (_jsx(Dropzone, { ...args, children: _jsx(StateContent, {}) })),
+};
+// ─── Image uploads only ──────────────────────────────────────────────────────
+export const ImagesOnly = {
+    render: () => (_jsx(Dropzone, { accept: IMAGE_MIME_TYPE, maxSize: 5 * 1024 ** 2, onDrop: () => { }, children: _jsxs(Group, { position: 'center', spacing: spacing.xl, style: { minHeight: 120, pointerEvents: 'none' }, children: [_jsx(Dropzone.Accept, { children: _jsx(IconUpload, { size: 48, color: primary[200] }) }), _jsx(Dropzone.Reject, { children: _jsx(IconX, { size: 48, color: error[200] }) }), _jsx(Dropzone.Idle, { children: _jsx(IconPhoto, { size: 48, color: neutral[200] }) }), _jsxs(Stack, { spacing: spacing.xxs, children: [_jsx(Title, { variant: 'cardHeader', children: "Upload images" }), _jsx(Text, { variant: 'subtle', children: "PNG, JPG, GIF, WEBP \u2014 up to 5 MB each" })] })] }) })),
+    parameters: {
+        docs: {
+            description: { story: 'Restrict accepted files with `accept={IMAGE_MIME_TYPE}`. MIME-type presets are re-exported from `@taiv/ui`.' },
+        },
+    },
+};
+// ─── PDFs only ───────────────────────────────────────────────────────────────
+export const PdfsOnly = {
+    render: () => (_jsx(Dropzone, { accept: PDF_MIME_TYPE, maxFiles: 1, onDrop: () => { }, children: _jsx(StateContent, {}) })),
+};
+// ─── Loading state ───────────────────────────────────────────────────────────
+export const Loading = {
+    args: { loading: true, onDrop: () => { } },
+    render: (args) => (_jsx(Dropzone, { ...args, children: _jsx(StateContent, {}) })),
+};
+// ─── Disabled state ──────────────────────────────────────────────────────────
+export const Disabled = {
+    args: { disabled: true, onDrop: () => { } },
+    render: (args) => (_jsx(Dropzone, { ...args, children: _jsx(StateContent, {}) })),
+};
+// ─── With captured file list ─────────────────────────────────────────────────
+export const WithFileList = {
+    render: () => {
+        const [files, setFiles] = useState([]);
+        return (_jsxs(Stack, { spacing: spacing.md, children: [_jsx(Dropzone, { onDrop: setFiles, maxSize: 5 * 1024 ** 2, children: _jsx(StateContent, {}) }), files.length > 0 && (_jsxs(Stack, { spacing: spacing.xxs, children: [_jsxs(Text, { variant: 'label', children: [files.length, " file(s) selected"] }), files.map((f, i) => (_jsxs(Text, { variant: 'subtle', children: [f.name, " \u2014 ", (f.size / 1024).toFixed(1), " KB"] }, i)))] }))] }));
+    },
+    parameters: {
+        docs: {
+            description: { story: 'Typical usage pattern — hold dropped files in local state and render them below.' },
+            source: { code: false },
+        },
+    },
+};

package/dist/components/Inputs/TextInputs/NumberInput/NumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,gBAAgB,IAAI,uBAAuB,EAC5C,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,UAAU,gBAAiB,SAAQ,uBAAuB;IACxD,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,WAAW,GAAI,oDAOlB,gBAAgB,4CAoElB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,gBAAgB,IAAI,uBAAuB,EAC5C,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,UAAU,gBAAiB,SAAQ,uBAAuB;IACxD,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,WAAW,GAAI,oDAOlB,gBAAgB,4CAsElB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/Inputs/TextInputs/NumberInput/NumberInput.js

@@ -8,6 +8,9 @@ const NumberInput = ({ size = 'md', width, fullWidth = false, styles, step = 1,
     const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}px`;
     const hasError = !!props.error;
     const style = {
+        root: {
+            width: computedWidth,
+        },
         input: {
             height: `${selectedSize.height}px`,
             fontSize: selectedSize.fontSize,
@@ -58,6 +61,6 @@ const NumberInput = ({ size = 'md', width, fullWidth = false, styles, step = 1,
         },
         ...styles,
     };
-    return (_jsx(MantineNumberInput, { w: computedWidth, size: size, step: step, hideControls: false, styles: style, type: "number", ...props }));
+    return (_jsx(MantineNumberInput, { size: size, step: step, hideControls: false, styles: style, type: "number", ...props }));
 };
 export { NumberInput };

package/dist/components/Inputs/TextInputs/NumberInput/ResponsiveNumberInput.d.ts

@@ -0,0 +1,46 @@
+import { componentSizes } from '../shared/sizes';
+export interface ResponsiveNumberInputProps {
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Suffix rendered after the value in the mobile stepper (e.g. `s`, `px`).
+     *  Desktop ignores this — the NumberInput shows the bare number. */
+    unit?: string;
+    /** Forwarded to the desktop `NumberInput` label. On mobile the stepper is
+     *  control-only; render your own label in the surrounding layout. */
+    label?: string;
+    error?: string;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    size?: keyof typeof componentSizes;
+    /** Accessible name for the mobile value readout / stepper buttons. */
+    'aria-label'?: string;
+    /**
+     * Override the internal `useMobile()` (<640px) viewport check. Pass this
+     * when the host surface uses a different breakpoint than the component's
+     * default — e.g. an editor that already switches to a touch layout at
+     * `useTablet()` (<768px) wants the stepper across that whole range, not
+     * just below 640px. Omit to let the component decide by viewport.
+     */
+    isMobile?: boolean;
+}
+/**
+ * Numeric input that swaps presentation by viewport:
+ *
+ * - **Desktop / laptop** → the standard `NumberInput` (typed entry plus the
+ *   stacked spinner controls on the right edge).
+ * - **Mobile** → a touch stepper: a read-only value pill on the left with
+ *   `[−]` / `[+]` buttons grouped to its right. The value is *display-only*
+ *   (not a native `<input type=number>`) on purpose — focusing one on iOS
+ *   pops the on-screen numeric keyboard, which on canvas-style editors
+ *   covers content and can steal focus. The buttons are full-size tap
+ *   targets, unlike the desktop spinner chevrons.
+ *
+ * Same `value` / `onChange` / `min` / `max` / `step` contract on both, so a
+ * caller can drop it in wherever a `NumberInput` lived and get the
+ * responsive treatment for free.
+ */
+export declare const ResponsiveNumberInput: React.FC<ResponsiveNumberInputProps>;
+//# sourceMappingURL=ResponsiveNumberInput.d.ts.map

package/dist/components/Inputs/TextInputs/NumberInput/ResponsiveNumberInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveNumberInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/NumberInput/ResponsiveNumberInput.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;wEACoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;yEACqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAKD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAgGtE,CAAC"}

package/dist/components/Inputs/TextInputs/NumberInput/ResponsiveNumberInput.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconMinus, IconPlus } from '@tabler/icons-react';
+import { neutral, red } from '../../../../constants/colors';
+import { fontBase } from '../../../../constants/font';
+import { spacing } from '../../../../constants/spacing';
+import { useMobile } from '../../../../hooks/useMediaQuery';
+import { IconButton } from '../../Buttons/IconButton/IconButton';
+import { Group } from '../../../Layout/Group/Group';
+import { Text } from '../../../Typography/Text/Text';
+import { NumberInput } from './NumberInput';
+const clamp = (n, min, max) => Math.min(Math.max(n, min), max);
+/**
+ * Numeric input that swaps presentation by viewport:
+ *
+ * - **Desktop / laptop** → the standard `NumberInput` (typed entry plus the
+ *   stacked spinner controls on the right edge).
+ * - **Mobile** → a touch stepper: a read-only value pill on the left with
+ *   `[−]` / `[+]` buttons grouped to its right. The value is *display-only*
+ *   (not a native `<input type=number>`) on purpose — focusing one on iOS
+ *   pops the on-screen numeric keyboard, which on canvas-style editors
+ *   covers content and can steal focus. The buttons are full-size tap
+ *   targets, unlike the desktop spinner chevrons.
+ *
+ * Same `value` / `onChange` / `min` / `max` / `step` contract on both, so a
+ * caller can drop it in wherever a `NumberInput` lived and get the
+ * responsive treatment for free.
+ */
+export const ResponsiveNumberInput = ({ value, onChange, min = 0, max = 100, step = 1, unit, label, error, disabled = false, fullWidth = false, size = 'md', 'aria-label': ariaLabel, isMobile: isMobileProp, }) => {
+    // Always call the hook (rules-of-hooks), but let an explicit prop win so
+    // callers can align the switch with their own breakpoint.
+    const detectedMobile = useMobile();
+    const isMobile = isMobileProp !== null && isMobileProp !== void 0 ? isMobileProp : detectedMobile;
+    if (!isMobile) {
+        return (_jsx(NumberInput, { label: label, error: error, min: min, max: max, step: step, value: value, disabled: disabled, fullWidth: fullWidth, size: size, "aria-label": ariaLabel, onChange: (v) => {
+                const n = Number(v);
+                if (!Number.isFinite(n))
+                    return;
+                onChange(n);
+            } }));
+    }
+    const handleStep = (dir) => onChange(clamp(value + dir * step, min, max));
+    const display = `${value}${unit ? ` ${unit}` : ''}`;
+    // Flanking layout: `[−] value [+]`, matching the app's other steppers
+    // (font size, canvas zoom). When `fullWidth`, the group spans its row and
+    // the value pill flexes to fill the space between the buttons; otherwise
+    // it's a compact, content-width stepper.
+    return (_jsxs(Group, { spacing: spacing.xs, noWrap: true, style: fullWidth ? { width: '100%' } : undefined, children: [_jsx(IconButton, { variant: 'secondary', subtle: true, "aria-label": `Decrease${ariaLabel ? ` ${ariaLabel}` : ''}`, onClick: () => handleStep(-1), disabled: disabled || value <= min, children: _jsx(IconMinus, { size: 14 }) }), _jsx("div", { role: 'status', "aria-label": ariaLabel, style: {
+                    alignItems: 'center',
+                    border: `1px solid ${error ? red[200] : neutral[50]}`,
+                    borderRadius: 8,
+                    display: 'flex',
+                    flex: fullWidth ? 1 : undefined,
+                    height: 40,
+                    justifyContent: 'center',
+                    minWidth: 64,
+                    padding: `0 ${spacing.sm}`,
+                    ...fontBase,
+                    color: neutral[200],
+                }, children: _jsx(Text, { variant: 'body', children: display }) }), _jsx(IconButton, { variant: 'secondary', subtle: true, "aria-label": `Increase${ariaLabel ? ` ${ariaLabel}` : ''}`, onClick: () => handleStep(1), disabled: disabled || value >= max, children: _jsx(IconPlus, { size: 14 }) })] }));
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { AccordionProps as MantineAccordionProps, CSSObject } from '@mantine/core';
+export interface AccordionProps extends Omit<MantineAccordionProps, 'chevron' | 'styles' | 'multiple' | 'value' | 'defaultValue' | 'onChange'> {
+    chevron?: React.ReactNode;
+    styles?: Record<string, CSSObject>;
+    multiple?: boolean;
+    value?: string | string[] | null;
+    defaultValue?: string | string[];
+    onChange?: (value: string | string[] | null) => void;
+}
+export declare const Accordion: (({ chevron, styles, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element) & {
+    Item: React.ForwardRefExoticComponent<import("@mantine/core").AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
+    Control: React.ForwardRefExoticComponent<import("@mantine/core").AccordionControlProps & React.RefAttributes<HTMLButtonElement>>;
+    Panel: typeof import("@mantine/core/lib/Accordion/AccordionPanel/AccordionPanel").AccordionPanel;
+};
+//# sourceMappingURL=Accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,cAAc,IAAI,qBAAqB,EACvC,SAAS,EACV,MAAM,eAAe,CAAC;AAMvB,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,qBAAqB,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IAC9G,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;CACtD;AA+DD,eAAO,MAAM,SAAS,mCA7DqC,cAAc;;;;CAiEvE,CAAC"}

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

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Accordion as MantineAccordion, } from '@mantine/core';
+import { IconChevronRight } from '@tabler/icons-react';
+import { colors } from '../../../constants/colors';
+import { fontBase, fontSize } from '../../../constants/font';
+import { spacing } from '../../../constants/spacing';
+const AccordionComponent = ({ chevron, styles, ...props }) => {
+    const style = {
+        root: {
+            width: '100%',
+        },
+        item: {
+            border: 'none',
+            borderBottom: `1px solid ${colors.neutral[100]}`,
+            backgroundColor: 'transparent',
+            transition: 'background-color 150ms ease',
+            '&:first-of-type': {
+                borderTop: `1px solid ${colors.neutral[100]}`,
+            },
+            '&[data-active]': {
+                backgroundColor: 'transparent',
+            },
+            // Lift Control's hover/focus to the whole row so action buttons rendered
+            // as siblings of Accordion.Control feel part of one cohesive surface.
+            '&:has([data-accordion-control]:hover)': {
+                backgroundColor: colors.neutral[25],
+            },
+            '&:has([data-accordion-control]:focus-visible)': {
+                outline: `2px solid ${colors.primary[200]}`,
+                outlineOffset: '-2px',
+            },
+        },
+        control: {
+            padding: `${spacing.md} ${spacing.lg}`,
+            backgroundColor: 'transparent',
+            '&:focus-visible': {
+                outline: 'none',
+            },
+        },
+        chevron: {
+            color: colors.neutral[200],
+            transition: 'transform 200ms ease',
+            '&[data-rotate]': {
+                transform: 'rotate(90deg)',
+            },
+        },
+        label: {
+            ...fontBase,
+            ...fontSize['md'],
+            color: colors.neutral[300],
+        },
+        panel: {
+            padding: `0 ${spacing.lg} ${spacing.md}`,
+        },
+        ...styles,
+    };
+    return (_jsx(MantineAccordion, { chevron: chevron !== null && chevron !== void 0 ? chevron : _jsx(IconChevronRight, { size: 16 }), chevronPosition: 'right', styles: style, ...props }));
+};
+export const Accordion = Object.assign(AccordionComponent, {
+    Item: MantineAccordion.Item,
+    Control: MantineAccordion.Control,
+    Panel: MantineAccordion.Panel,
+});

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Accordion/Accordion.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AASxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAsDhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAInC,eAAO,MAAM,OAAO,EAAE,KAwCrB,CAAC;AAIF,eAAO,MAAM,WAAW,EAAE,KA6BzB,CAAC;AAWF,eAAO,MAAM,YAAY,EAAE,KA4D1B,CAAC;AAIF,eAAO,MAAM,YAAY,EAAE,KA6B1B,CAAC;AAIF,eAAO,MAAM,UAAU,EAAE,KA6BxB,CAAC"}

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) => import("react/jsx-runtime").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,4CAmBvE,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"}