@taiv/ui 1.15.0 → 2.1.0

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

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropzone as MantineDropzone, } from '@mantine/dropzone';
+import { colors } from '../../../constants/colors';
+import { fontBase } from '../../../constants/font';
+import { spacing } from '../../../constants/spacing';
+const DropzoneComponent = ({ styles, children, ...props }) => {
+    const style = {
+        root: {
+            ...fontBase,
+            backgroundColor: 'white',
+            border: `1px dashed ${colors.neutral[100]}`,
+            borderRadius: '8px',
+            color: colors.neutral[300],
+            cursor: 'pointer',
+            padding: spacing.xl,
+            transition: 'background-color 200ms ease, border-color 200ms ease',
+            '&:hover': {
+                backgroundColor: colors.neutral[25],
+                borderColor: colors.neutral[200],
+            },
+            '&[data-accept]': {
+                backgroundColor: colors.primary[25],
+                borderColor: colors.primary[200],
+                borderStyle: 'solid',
+            },
+            '&[data-reject]': {
+                backgroundColor: colors.error[25],
+                borderColor: colors.error[200],
+                borderStyle: 'solid',
+            },
+        },
+        ...styles,
+    };
+    return (_jsx(MantineDropzone, { styles: style, ...props, children: children }));
+};
+export const Dropzone = Object.assign(DropzoneComponent, {
+    Accept: MantineDropzone.Accept,
+    Reject: MantineDropzone.Reject,
+    Idle: MantineDropzone.Idle,
+    FullScreen: MantineDropzone.FullScreen,
+});
+// Re-export the MIME-type presets so consumers can do:
+//   import { Dropzone, IMAGE_MIME_TYPE } from '@taiv/ui';
+export { IMAGE_MIME_TYPE, PDF_MIME_TYPE, MS_WORD_MIME_TYPE, MS_EXCEL_MIME_TYPE, MS_POWERPOINT_MIME_TYPE, MIME_TYPES, } from '@mantine/dropzone';

package/dist/components/Inputs/Dropzone/Dropzone.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Dropzone } from './Dropzone';
+declare const meta: Meta<typeof Dropzone>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ImagesOnly: Story;
+export declare const PdfsOnly: Story;
+export declare const Loading: Story;
+export declare const Disabled: Story;
+export declare const WithFileList: Story;
+//# sourceMappingURL=Dropzone.stories.d.ts.map

package/dist/components/Inputs/Dropzone/Dropzone.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropzone.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/Dropzone/Dropzone.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,QAAQ,EAAkC,MAAM,YAAY,CAAC;AAQtE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CA6D/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAsBnC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAIF,eAAO,MAAM,UAAU,EAAE,KAyBxB,CAAC;AAIF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAIF,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAIF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAIF,eAAO,MAAM,YAAY,EAAE,KA2B1B,CAAC"}

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/Sliders/Slider/Slider.d.ts

@@ -11,6 +11,6 @@ export interface SliderProps extends MantineSliderProps {
     compact?: boolean;
     styles?: Record<string, CSSProperties>;
 }
-declare const Slider: ({ width, size, value, setValue, disabled, styles, animate, label, fullWidth, compact, ...props }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+declare const Slider: ({ width, size, value, setValue, disabled, styles, animate, label, fullWidth, compact, ...props }: SliderProps) => React.JSX.Element;
 export { Slider };
 //# sourceMappingURL=Slider.d.ts.map

package/dist/components/Inputs/Sliders/Slider/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Sliders/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAa,MAAM,eAAe,CAAC;AAKtG,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;CACxC;AAED,QAAA,MAAM,MAAM,GAAI,kGAAyI,WAAW,4CA8FnK,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Sliders/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAa,MAAM,eAAe,CAAC;AAKtG,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;CACxC;AAED,QAAA,MAAM,MAAM,GAAI,kGAAyI,WAAW,sBA8FnK,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/Inputs/Sliders/VolumeSlider/VolumeSlider.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import { SliderProps } from '../Slider/Slider';
 interface VolumeSliderProps extends Omit<SliderProps, 'label'> {
 }
-declare const VolumeSlider: ({ compact, size, fullWidth, ...props }: VolumeSliderProps) => import("react/jsx-runtime").JSX.Element;
+declare const VolumeSlider: ({ compact, size, fullWidth, ...props }: VolumeSliderProps) => React.JSX.Element;
 export { VolumeSlider };
 //# sourceMappingURL=VolumeSlider.d.ts.map

package/dist/components/Inputs/Sliders/VolumeSlider/VolumeSlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VolumeSlider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Sliders/VolumeSlider/VolumeSlider.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGvD,UAAU,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;CAAG;AAEjE,QAAA,MAAM,YAAY,GAAI,wCAA+D,iBAAiB,4CAmCrG,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"VolumeSlider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Sliders/VolumeSlider/VolumeSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,OAAO,EAAU,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGvD,UAAU,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;CAAG;AAEjE,QAAA,MAAM,YAAY,GAAI,wCAA+D,iBAAiB,sBAmCrG,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/Inputs/TextInputs/AutoComplete/AutoComplete.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { AutocompleteProps as MantineAutocompleteProps } from '@mantine/core';
 import { CSSObject } from '@mantine/styles';
 import { componentSizes } from '../../Dropdowns/shared/sizes';
@@ -7,5 +8,5 @@ export interface AutoCompleteProps extends MantineAutocompleteProps {
     fullWidth?: boolean;
     styles?: Record<string, CSSObject>;
 }
-export declare const AutoComplete: ({ size, width, fullWidth, placeholder, styles, ...props }: AutoCompleteProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AutoComplete: ({ size, width, fullWidth, placeholder, styles, ...props }: AutoCompleteProps) => React.JSX.Element;
 //# sourceMappingURL=AutoComplete.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AutoComplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/AutoComplete/AutoComplete.tsx"],"names":[],"mappings":"AACA,OAAO,EAAuC,iBAAiB,IAAI,wBAAwB,EAAE,MAAM,eAAe,CAAC;AACnH,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB;IACjE,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,eAAO,MAAM,YAAY,GAAI,2DAA+F,iBAAiB,4CA4D5I,CAAC"}
+{"version":3,"file":"AutoComplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/AutoComplete/AutoComplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuC,iBAAiB,IAAI,wBAAwB,EAAE,MAAM,eAAe,CAAC;AACnH,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB;IACjE,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,eAAO,MAAM,YAAY,GAAI,2DAA+F,iBAAiB,sBA4D5I,CAAC"}

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { NumberInputProps as MantineNumberInputProps } from '@mantine/core';
 import { CSSObject } from '@mantine/styles';
 import { componentSizes } from '../shared/sizes';
@@ -7,6 +8,6 @@ interface NumberInputProps extends MantineNumberInputProps {
     fullWidth?: boolean;
     styles?: Record<string, CSSObject>;
 }
-declare const NumberInput: ({ size, width, fullWidth, styles, step, ...props }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const NumberInput: ({ size, width, fullWidth, styles, step, ...props }: NumberInputProps) => React.JSX.Element;
 export { NumberInput };
 //# sourceMappingURL=NumberInput.d.ts.map

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":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,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,sBAsElB,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/Inputs/TextInputs/PasswordInput/PasswordInput.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { PasswordInputProps as MantinePasswordInputProps } from '@mantine/core';
 import { CSSObject } from '@mantine/styles';
 import { componentSizes } from '../shared/sizes';
@@ -7,6 +8,6 @@ type PasswordInputProps = MantinePasswordInputProps & {
     fullWidth?: boolean;
     styles?: Record<string, CSSObject>;
 };
-declare const PasswordInput: ({ size, width, fullWidth, styles, placeholder, ...props }: PasswordInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const PasswordInput: ({ size, width, fullWidth, styles, placeholder, ...props }: PasswordInputProps) => React.JSX.Element;
 export { PasswordInput };
 //# sourceMappingURL=PasswordInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/PasswordInput/PasswordInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyC,kBAAkB,IAAI,yBAAyB,EAAE,MAAM,eAAe,CAAC;AACvH,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AASjD,KAAK,kBAAkB,GAAG,yBAAyB,GAAG;IACpD,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,CAAC;AAEF,QAAA,MAAM,aAAa,GAAI,2DAA6F,kBAAkB,4CAsDrI,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"PasswordInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/PasswordInput/PasswordInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAyC,kBAAkB,IAAI,yBAAyB,EAAE,MAAM,eAAe,CAAC;AACvH,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AASjD,KAAK,kBAAkB,GAAG,yBAAyB,GAAG;IACpD,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,CAAC;AAEF,QAAA,MAAM,aAAa,GAAI,2DAA6F,kBAAkB,sBAsDrI,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/Inputs/TextInputs/SearchBar/SearchBar.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import { TextInputProps } from '@mantine/core';
 interface SearchBarProps extends TextInputProps {
     fullWidth?: boolean;
 }
-declare const SearchBar: ({ width, fullWidth, size, styles, ...props }: SearchBarProps) => import("react/jsx-runtime").JSX.Element;
+declare const SearchBar: ({ width, fullWidth, size, styles, ...props }: SearchBarProps) => React.JSX.Element;
 export { SearchBar };
 //# sourceMappingURL=SearchBar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/SearchBar/SearchBar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAO/C,UAAU,cAAe,SAAQ,cAAc;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,SAAS,GAAI,8CAA6D,cAAc,4CAmC7F,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/SearchBar/SearchBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAO/C,UAAU,cAAe,SAAQ,cAAc;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,SAAS,GAAI,8CAA6D,cAAc,sBAmC7F,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Inputs/TextInputs/TextArea/TextArea.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { TextareaProps as MantineTextareaProps } from '@mantine/core';
 import { CSSObject } from '@mantine/styles';
 import { componentSizes } from '../shared/sizes';
@@ -7,6 +8,6 @@ type TextAreaProps = MantineTextareaProps & {
     fullWidth?: boolean;
     styles?: Record<string, CSSObject>;
 };
-declare const TextArea: ({ size, width, fullWidth, styles, ...props }: TextAreaProps) => import("react/jsx-runtime").JSX.Element;
+declare const TextArea: ({ size, width, fullWidth, styles, ...props }: TextAreaProps) => React.JSX.Element;
 export { TextArea };
 //# sourceMappingURL=TextArea.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/TextArea/TextArea.tsx"],"names":[],"mappings":"AACA,OAAO,EAA+B,aAAa,IAAI,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACnG,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,aAAa,GAAG,oBAAoB,GAAG;IAC1C,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,CAAC;AAEF,QAAA,MAAM,QAAQ,GAAI,8CAA6D,aAAa,4CAoC3F,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+B,aAAa,IAAI,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACnG,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,aAAa,GAAG,oBAAoB,GAAG;IAC1C,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,CAAC;AAEF,QAAA,MAAM,QAAQ,GAAI,8CAA6D,aAAa,sBAoC3F,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Inputs/TextInputs/TextInput/TextInput.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { TextInputProps as MantineTextInputProps } from '@mantine/core';
 import { CSSObject } from '@mantine/styles';
 import { componentSizes } from '../shared/sizes';
@@ -7,6 +8,6 @@ type TextInputProps = MantineTextInputProps & {
     fullWidth?: boolean;
     styles?: Record<string, CSSObject>;
 };
-declare const TextInput: ({ size, width, fullWidth, styles, ...props }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const TextInput: ({ size, width, fullWidth, styles, ...props }: TextInputProps) => React.JSX.Element;
 export { TextInput };
 //# sourceMappingURL=TextInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/TextInput/TextInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiC,cAAc,IAAI,qBAAqB,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,cAAc,GAAG,qBAAqB,GAAG;IAC5C,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,CAAC;AAEF,QAAA,MAAM,SAAS,GAAI,8CAA6D,cAAc,4CAmC7F,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAiC,cAAc,IAAI,qBAAqB,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,cAAc,GAAG,qBAAqB,GAAG;IAC5C,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,CAAC;AAEF,QAAA,MAAM,SAAS,GAAI,8CAA6D,cAAc,sBAmC7F,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

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) => React.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"}