@furystack/shades-common-components 10.0.35 → 12.0.0

package/esm/components/data-grid/selection-cell.spec.js

@@ -0,0 +1,127 @@
+import { Injector } from '@furystack/inject';
+import { createComponent, initializeShadeRoot } from '@furystack/shades';
+import { sleepAsync, usingAsync } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { CollectionService } from '../../services/collection-service.js';
+import { SelectionCell } from './selection-cell.js';
+describe('SelectionCell', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    const renderSelectionCell = async (entry, service) => {
+        const injector = new Injector();
+        const root = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement: root,
+            jsxElement: createComponent(SelectionCell, { entry: entry, service: service }),
+        });
+        await sleepAsync(50);
+        return {
+            injector,
+            cell: root.querySelector('shades-data-grid-selection-cell'),
+            getCheckbox: () => root.querySelector('shades-data-grid-selection-cell')?.querySelector('input[type="checkbox"]'),
+            [Symbol.asyncDispose]: () => injector[Symbol.asyncDispose](),
+        };
+    };
+    describe('rendering', () => {
+        it('should render a checkbox input', async () => {
+            await usingAsync(new CollectionService(), async (service) => {
+                const entry = { id: 1, name: 'Test' };
+                await usingAsync(await renderSelectionCell(entry, service), async ({ cell, getCheckbox }) => {
+                    expect(cell).toBeTruthy();
+                    expect(getCheckbox()).toBeTruthy();
+                    expect(getCheckbox()?.type).toBe('checkbox');
+                });
+            });
+        });
+    });
+    describe('checkbox state sync', () => {
+        it('should be unchecked when entry is not selected', async () => {
+            await usingAsync(new CollectionService(), async (service) => {
+                const entry = { id: 1, name: 'Test' };
+                await usingAsync(await renderSelectionCell(entry, service), async ({ getCheckbox }) => {
+                    expect(getCheckbox()?.checked).toBe(false);
+                });
+            });
+        });
+        it('should be checked when entry is in selection', async () => {
+            await usingAsync(new CollectionService(), async (service) => {
+                const entry = { id: 1, name: 'Test' };
+                service.selection.setValue([entry]);
+                await usingAsync(await renderSelectionCell(entry, service), async ({ getCheckbox }) => {
+                    expect(getCheckbox()?.checked).toBe(true);
+                });
+            });
+        });
+        it('should update checkbox when selection changes externally', async () => {
+            await usingAsync(new CollectionService(), async (service) => {
+                const entry = { id: 1, name: 'Test' };
+                await usingAsync(await renderSelectionCell(entry, service), async ({ getCheckbox }) => {
+                    expect(getCheckbox()?.checked).toBe(false);
+                    service.selection.setValue([entry]);
+                    await sleepAsync(50);
+                    expect(getCheckbox()?.checked).toBe(true);
+                    service.selection.setValue([]);
+                    await sleepAsync(50);
+                    expect(getCheckbox()?.checked).toBe(false);
+                });
+            });
+        });
+        it('should remain unchecked when different entries are selected', async () => {
+            await usingAsync(new CollectionService(), async (service) => {
+                const entry = { id: 1, name: 'Test' };
+                const otherEntry = { id: 2, name: 'Other' };
+                service.selection.setValue([otherEntry]);
+                await usingAsync(await renderSelectionCell(entry, service), async ({ getCheckbox }) => {
+                    expect(getCheckbox()?.checked).toBe(false);
+                });
+            });
+        });
+    });
+    describe('selection toggle', () => {
+        it('should add entry to selection when checkbox is clicked and entry is not selected', async () => {
+            await usingAsync(new CollectionService(), async (service) => {
+                const entry = { id: 1, name: 'Test' };
+                await usingAsync(await renderSelectionCell(entry, service), async ({ getCheckbox }) => {
+                    expect(service.selection.getValue()).toEqual([]);
+                    const checkbox = getCheckbox();
+                    checkbox?.dispatchEvent(new Event('change', { bubbles: true }));
+                    await sleepAsync(50);
+                    expect(service.selection.getValue()).toContain(entry);
+                });
+            });
+        });
+        it('should remove entry from selection when checkbox is clicked and entry is selected', async () => {
+            await usingAsync(new CollectionService(), async (service) => {
+                const entry = { id: 1, name: 'Test' };
+                service.selection.setValue([entry]);
+                await usingAsync(await renderSelectionCell(entry, service), async ({ getCheckbox }) => {
+                    expect(service.selection.getValue()).toContain(entry);
+                    const checkbox = getCheckbox();
+                    checkbox?.dispatchEvent(new Event('change', { bubbles: true }));
+                    await sleepAsync(50);
+                    expect(service.selection.getValue()).not.toContain(entry);
+                });
+            });
+        });
+        it('should preserve other selected entries when toggling', async () => {
+            await usingAsync(new CollectionService(), async (service) => {
+                const entry = { id: 1, name: 'Test' };
+                const otherEntry = { id: 2, name: 'Other' };
+                service.selection.setValue([otherEntry]);
+                await usingAsync(await renderSelectionCell(entry, service), async ({ getCheckbox }) => {
+                    const checkbox = getCheckbox();
+                    checkbox?.dispatchEvent(new Event('change', { bubbles: true }));
+                    await sleepAsync(50);
+                    expect(service.selection.getValue()).toContain(entry);
+                    expect(service.selection.getValue()).toContain(otherEntry);
+                });
+            });
+        });
+    });
+});
+//# sourceMappingURL=selection-cell.spec.js.map

package/esm/components/data-grid/selection-cell.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-cell.spec.js","sourceRoot":"","sources":["../../../src/components/data-grid/selection-cell.spec.tsx"],"names":[],"mappings":"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"}

package/esm/components/dialog.d.ts

@@ -0,0 +1,46 @@
+export type DialogProps = {
+    isVisible: boolean;
+    title?: string;
+    onClose?: () => void;
+    actions?: JSX.Element;
+    maxWidth?: string;
+    fullWidth?: boolean;
+};
+export declare const Dialog: (props: DialogProps & Omit<Partial<HTMLElement>, "style"> & {
+    style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
+}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
+/**
+ * Options for the confirm dialog helper
+ */
+export type ConfirmDialogOptions = {
+    title: string;
+    message: string | JSX.Element;
+    confirmText?: string;
+    cancelText?: string;
+    onConfirm: () => void;
+    onCancel?: () => void;
+};
+/**
+ * Renders a pre-built confirm dialog with confirm/cancel buttons.
+ * Returns a JSX element that should be placed in the component tree.
+ *
+ * @param isVisible - Boolean controlling the dialog visibility
+ * @param options - Configuration for the confirm dialog
+ * @returns A Dialog JSX element
+ *
+ * @example
+ * ```tsx
+ * const [isConfirmOpen, setConfirmOpen] = useState('confirmOpen', false)
+ * // ...
+ * {ConfirmDialog(isConfirmOpen, {
+ *   title: 'Delete Item',
+ *   message: 'Are you sure you want to delete this item?',
+ *   onConfirm: () => { deleteItem(); setConfirmOpen(false) },
+ *   onCancel: () => setConfirmOpen(false),
+ * })}
+ * ```
+ */
+export declare const ConfirmDialog: (isVisible: boolean, options: ConfirmDialogOptions) => JSX.Element;
+//# sourceMappingURL=dialog.d.ts.map

package/esm/components/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/components/dialog.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAsCD,eAAO,MAAM,MAAM;;;;sEAwHjB,CAAA;AAEF;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,aAAa,GAAI,WAAW,OAAO,EAAE,SAAS,oBAAoB,KAAG,GAAG,CAAC,OAsErF,CAAA"}

package/esm/components/dialog.js

@@ -0,0 +1,178 @@
+import { Shade, createComponent } from '@furystack/shades';
+import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js';
+import { promisifyAnimation } from '../utils/promisify-animation.js';
+import { Icon } from './icons/icon.js';
+import { close } from './icons/icon-definitions.js';
+import { Modal } from './modal.js';
+const showAnimation = async (el) => {
+    const panel = el?.querySelector?.('.dialog-panel');
+    if (panel) {
+        await promisifyAnimation(panel, [
+            { opacity: 0, transform: 'scale(0.9)' },
+            { opacity: 1, transform: 'scale(1)' },
+        ], {
+            duration: 200,
+            easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+            fill: 'forwards',
+        });
+    }
+};
+const hideAnimation = async (el) => {
+    const panel = el?.querySelector?.('.dialog-panel');
+    if (panel) {
+        await promisifyAnimation(panel, [
+            { opacity: 1, transform: 'scale(1)' },
+            { opacity: 0, transform: 'scale(0.9)' },
+        ], {
+            duration: 150,
+            easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+            fill: 'forwards',
+        });
+    }
+};
+export const Dialog = Shade({
+    shadowDomName: 'shade-dialog',
+    css: {
+        '& .dialog-panel': {
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
+            backgroundColor: cssVariableTheme.background.paper,
+            color: cssVariableTheme.text.primary,
+            borderRadius: cssVariableTheme.shape.borderRadius.md,
+            boxShadow: cssVariableTheme.shadows.xl,
+            margin: cssVariableTheme.spacing.lg,
+            maxHeight: 'calc(100vh - 64px)',
+            overflow: 'hidden',
+            fontFamily: cssVariableTheme.typography.fontFamily,
+        },
+        '& .dialog-header': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: `${cssVariableTheme.spacing.md} ${cssVariableTheme.spacing.lg}`,
+            borderBottom: `1px solid ${cssVariableTheme.divider}`,
+            flexShrink: '0',
+        },
+        '& .dialog-title': {
+            margin: '0',
+            fontSize: cssVariableTheme.typography.fontSize.lg,
+            fontWeight: cssVariableTheme.typography.fontWeight.semibold,
+            lineHeight: cssVariableTheme.typography.lineHeight.tight,
+        },
+        '& .dialog-close': {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '32px',
+            height: '32px',
+            border: 'none',
+            background: 'transparent',
+            color: cssVariableTheme.text.secondary,
+            borderRadius: cssVariableTheme.shape.borderRadius.sm,
+            cursor: 'pointer',
+            fontSize: '18px',
+            lineHeight: '1',
+            padding: '0',
+            flexShrink: '0',
+            transition: buildTransition(['background', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default], ['color', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default]),
+        },
+        '& .dialog-close:hover': {
+            background: cssVariableTheme.action.hoverBackground,
+            color: cssVariableTheme.text.primary,
+        },
+        '& .dialog-body': {
+            padding: cssVariableTheme.spacing.lg,
+            overflowY: 'auto',
+            flex: '1',
+        },
+        '& .dialog-actions': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            padding: `${cssVariableTheme.spacing.sm} ${cssVariableTheme.spacing.lg}`,
+            borderTop: `1px solid ${cssVariableTheme.divider}`,
+            gap: cssVariableTheme.spacing.sm,
+            flexShrink: '0',
+        },
+    },
+    render: ({ props, children }) => {
+        const { isVisible, title, onClose, actions, maxWidth = '560px', fullWidth } = props;
+        const handleClose = () => {
+            onClose?.();
+        };
+        return (createComponent(Modal, { isVisible: isVisible, onClose: handleClose, showAnimation: showAnimation, hideAnimation: hideAnimation, backdropStyle: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: cssVariableTheme.action.backdrop,
+                zIndex: '1300',
+            } },
+            createComponent("div", { className: "dialog-panel", style: {
+                    width: fullWidth ? '100%' : undefined,
+                    maxWidth,
+                }, onclick: (ev) => ev.stopPropagation() },
+                title || onClose ? (createComponent("div", { className: "dialog-header" },
+                    title ? createComponent("h2", { className: "dialog-title" }, title) : createComponent("span", null),
+                    onClose ? (createComponent("button", { className: "dialog-close", onclick: handleClose, "aria-label": "Close dialog" },
+                        createComponent(Icon, { icon: close, size: "small" }))) : null)) : null,
+                createComponent("div", { className: "dialog-body" }, children),
+                actions ? createComponent("div", { className: "dialog-actions" }, actions) : null)));
+    },
+});
+/**
+ * Renders a pre-built confirm dialog with confirm/cancel buttons.
+ * Returns a JSX element that should be placed in the component tree.
+ *
+ * @param isVisible - Boolean controlling the dialog visibility
+ * @param options - Configuration for the confirm dialog
+ * @returns A Dialog JSX element
+ *
+ * @example
+ * ```tsx
+ * const [isConfirmOpen, setConfirmOpen] = useState('confirmOpen', false)
+ * // ...
+ * {ConfirmDialog(isConfirmOpen, {
+ *   title: 'Delete Item',
+ *   message: 'Are you sure you want to delete this item?',
+ *   onConfirm: () => { deleteItem(); setConfirmOpen(false) },
+ *   onCancel: () => setConfirmOpen(false),
+ * })}
+ * ```
+ */
+export const ConfirmDialog = (isVisible, options) => {
+    const { title, message, confirmText = 'Confirm', cancelText = 'Cancel', onConfirm, onCancel } = options;
+    const handleCancel = () => {
+        onCancel?.();
+    };
+    const handleConfirm = () => {
+        onConfirm();
+    };
+    return (createComponent(Dialog, { isVisible: isVisible, title: title, onClose: handleCancel, maxWidth: "440px", actions: createComponent(createComponent, null,
+            createComponent("button", { className: "dialog-cancel-btn", onclick: handleCancel, style: {
+                    padding: '8px 16px',
+                    border: 'none',
+                    borderRadius: '4px',
+                    background: 'transparent',
+                    color: cssVariableTheme.text.secondary,
+                    cursor: 'pointer',
+                    fontSize: cssVariableTheme.typography.fontSize.md,
+                    fontWeight: cssVariableTheme.typography.fontWeight.medium,
+                } }, cancelText),
+            createComponent("button", { className: "dialog-confirm-btn", onclick: handleConfirm, style: {
+                    padding: '8px 16px',
+                    border: 'none',
+                    borderRadius: '4px',
+                    background: cssVariableTheme.palette.primary.main,
+                    color: cssVariableTheme.palette.primary.mainContrast,
+                    cursor: 'pointer',
+                    fontSize: cssVariableTheme.typography.fontSize.md,
+                    fontWeight: cssVariableTheme.typography.fontWeight.medium,
+                } }, confirmText)) }, typeof message === 'string' ? (createComponent("p", { style: {
+            margin: '0',
+            fontSize: cssVariableTheme.typography.fontSize.md,
+            lineHeight: cssVariableTheme.typography.lineHeight.normal,
+            color: cssVariableTheme.text.secondary,
+        } }, message)) : (message)));
+};
+//# sourceMappingURL=dialog.js.map

package/esm/components/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/components/dialog.tsx"],"names":[],"mappings":"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"}

package/esm/components/dialog.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dialog.spec.d.ts.map

package/esm/components/dialog.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.spec.d.ts","sourceRoot":"","sources":["../../src/components/dialog.spec.tsx"],"names":[],"mappings":""}

package/esm/components/dialog.spec.js

@@ -0,0 +1,113 @@
+import { createComponent } from '@furystack/shades';
+import { describe, expect, it, vi } from 'vitest';
+import { ConfirmDialog, Dialog } from './dialog.js';
+describe('Dialog', () => {
+    it('should be defined', () => {
+        expect(Dialog).toBeDefined();
+        expect(typeof Dialog).toBe('function');
+    });
+    it('should create a dialog element', () => {
+        const el = (createComponent(Dialog, { isVisible: true }));
+        expect(el).toBeDefined();
+        expect(el.tagName?.toLowerCase()).toBe('shade-dialog');
+    });
+    it('should pass title prop', () => {
+        const el = (createComponent(Dialog, { isVisible: true, title: "Test Title" }));
+        expect(el.props.title).toBe('Test Title');
+    });
+    it('should pass onClose prop', () => {
+        const onClose = vi.fn();
+        const el = (createComponent(Dialog, { isVisible: true, onClose: onClose }));
+        expect(el.props.onClose).toBe(onClose);
+    });
+    it('should pass actions prop', () => {
+        const actions = createComponent("button", null, "OK");
+        const el = (createComponent(Dialog, { isVisible: true, actions: actions }));
+        expect(el.props.actions).toBeDefined();
+    });
+    it('should pass maxWidth prop', () => {
+        const el = (createComponent(Dialog, { isVisible: true, maxWidth: "800px" }));
+        expect(el.props.maxWidth).toBe('800px');
+    });
+    it('should pass fullWidth prop', () => {
+        const el = (createComponent(Dialog, { isVisible: true, fullWidth: true }));
+        expect(el.props.fullWidth).toBe(true);
+    });
+    it('should pass children as dialog content', () => {
+        const el = (createComponent(Dialog, { isVisible: true },
+            createComponent("p", null, "Dialog content")));
+        expect(el).toBeDefined();
+    });
+    it('should accept isVisible boolean', () => {
+        const el = (createComponent(Dialog, { isVisible: false }));
+        expect(el.props.isVisible).toBe(false);
+    });
+});
+describe('ConfirmDialog', () => {
+    it('should be defined', () => {
+        expect(ConfirmDialog).toBeDefined();
+        expect(typeof ConfirmDialog).toBe('function');
+    });
+    it('should create a confirm dialog element', () => {
+        const onConfirm = vi.fn();
+        const el = ConfirmDialog(true, {
+            title: 'Confirm',
+            message: 'Are you sure?',
+            onConfirm,
+        });
+        expect(el).toBeDefined();
+        expect(el.tagName?.toLowerCase()).toBe('shade-dialog');
+    });
+    it('should pass the title to the dialog', () => {
+        const onConfirm = vi.fn();
+        const el = ConfirmDialog(true, {
+            title: 'Delete Item',
+            message: 'Are you sure?',
+            onConfirm,
+        });
+        expect(el.props.title).toBe('Delete Item');
+    });
+    it('should render with default button texts', () => {
+        const onConfirm = vi.fn();
+        const el = ConfirmDialog(true, {
+            title: 'Confirm',
+            message: 'Are you sure?',
+            onConfirm,
+        });
+        expect(el.props.actions).toBeDefined();
+    });
+    it('should accept custom button texts', () => {
+        const onConfirm = vi.fn();
+        const el = ConfirmDialog(true, {
+            title: 'Confirm',
+            message: 'Are you sure?',
+            confirmText: 'Yes, delete',
+            cancelText: 'No, keep',
+            onConfirm,
+        });
+        expect(el).toBeDefined();
+    });
+    it('should accept JSX as message', () => {
+        const onConfirm = vi.fn();
+        const el = ConfirmDialog(true, {
+            title: 'Confirm',
+            message: (createComponent("div", null,
+                createComponent("strong", null, "Warning:"),
+                " This action cannot be undone.")),
+            onConfirm,
+        });
+        expect(el).toBeDefined();
+    });
+    it('should call onCancel when onClose is triggered', () => {
+        const onCancel = vi.fn();
+        const el = ConfirmDialog(true, {
+            title: 'Confirm',
+            message: 'Are you sure?',
+            onConfirm: vi.fn(),
+            onCancel,
+        });
+        el.props.onClose?.();
+        expect(onCancel).toHaveBeenCalledOnce();
+    });
+});
+//# sourceMappingURL=dialog.spec.js.map

package/esm/components/dialog.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.spec.js","sourceRoot":"","sources":["../../src/components/dialog.spec.tsx"],"names":[],"mappings":"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"}

package/esm/components/divider.d.ts

@@ -0,0 +1,22 @@
+import type { PartialElement } from '@furystack/shades';
+export type DividerProps = PartialElement<HTMLElement> & {
+    /** Orientation of the divider */
+    orientation?: 'horizontal' | 'vertical';
+    /** Variant controls whether the divider spans the full width/height or is inset */
+    variant?: 'full' | 'inset' | 'middle';
+    /** Alignment of text content within the divider. Only applies to horizontal dividers with children. */
+    textAlign?: 'left' | 'center' | 'right';
+};
+export declare const Divider: (props: Omit<Partial<HTMLElement>, "style"> & {
+    style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
+} & {
+    /** Orientation of the divider */
+    orientation?: "horizontal" | "vertical";
+    /** Variant controls whether the divider spans the full width/height or is inset */
+    variant?: "full" | "inset" | "middle";
+    /** Alignment of text content within the divider. Only applies to horizontal dividers with children. */
+    textAlign?: "left" | "center" | "right";
+}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
+//# sourceMappingURL=divider.d.ts.map

package/esm/components/divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../src/components/divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAIvD,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACvD,iCAAiC;IACjC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,mFAAmF;IACnF,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;IACrC,uGAAuG;IACvG,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;CACxC,CAAA;AAED,eAAO,MAAM,OAAO;;;;;IARlB,iCAAiC;kBACnB,YAAY,GAAG,UAAU;IACvC,mFAAmF;cACzE,MAAM,GAAG,OAAO,GAAG,QAAQ;IACrC,uGAAuG;gBAC3F,MAAM,GAAG,QAAQ,GAAG,OAAO;sEAwIvC,CAAA"}

package/esm/components/divider.js

@@ -0,0 +1,113 @@
+import { Shade, createComponent } from '@furystack/shades';
+import { cssVariableTheme } from '../services/css-variable-theme.js';
+export const Divider = Shade({
+    shadowDomName: 'shade-divider',
+    css: {
+        display: 'flex',
+        alignItems: 'center',
+        margin: '0',
+        border: 'none',
+        flexShrink: '0',
+        // ==========================================
+        // HORIZONTAL (default)
+        // ==========================================
+        '&:not([data-orientation="vertical"])': {
+            width: '100%',
+            flexDirection: 'row',
+        },
+        // Horizontal line (no children)
+        '&:not([data-orientation="vertical"]):not([data-has-children])': {
+            borderTop: `1px solid ${cssVariableTheme.divider}`,
+            margin: `${cssVariableTheme.spacing.md} 0`,
+        },
+        // Horizontal with children: lines on both sides
+        '&:not([data-orientation="vertical"])[data-has-children]': {
+            margin: `${cssVariableTheme.spacing.md} 0`,
+            gap: cssVariableTheme.spacing.md,
+        },
+        '&:not([data-orientation="vertical"])[data-has-children]::before, &:not([data-orientation="vertical"])[data-has-children]::after': {
+            content: '""',
+            flex: '1',
+            borderTop: `1px solid ${cssVariableTheme.divider}`,
+        },
+        // Text align left: shrink left line
+        '&[data-text-align="left"]::before': {
+            flex: '0 0 10%',
+        },
+        // Text align right: shrink right line
+        '&[data-text-align="right"]::after': {
+            flex: '0 0 10%',
+        },
+        // Divider text styling
+        '& .divider-text': {
+            fontFamily: cssVariableTheme.typography.fontFamily,
+            fontSize: cssVariableTheme.typography.fontSize.sm,
+            color: cssVariableTheme.text.secondary,
+            whiteSpace: 'nowrap',
+            lineHeight: '1',
+        },
+        // ==========================================
+        // VERTICAL
+        // ==========================================
+        '&[data-orientation="vertical"]': {
+            flexDirection: 'column',
+            alignSelf: 'stretch',
+            height: 'auto',
+            width: 'auto',
+        },
+        // Vertical line (no children)
+        '&[data-orientation="vertical"]:not([data-has-children])': {
+            borderLeft: `1px solid ${cssVariableTheme.divider}`,
+            margin: `0 ${cssVariableTheme.spacing.md}`,
+        },
+        // Vertical with children
+        '&[data-orientation="vertical"][data-has-children]': {
+            margin: `0 ${cssVariableTheme.spacing.md}`,
+            gap: cssVariableTheme.spacing.sm,
+        },
+        '&[data-orientation="vertical"][data-has-children]::before, &[data-orientation="vertical"][data-has-children]::after': {
+            content: '""',
+            flex: '1',
+            borderLeft: `1px solid ${cssVariableTheme.divider}`,
+        },
+        // ==========================================
+        // VARIANT: INSET (indented on the start side)
+        // ==========================================
+        '&:not([data-orientation="vertical"])[data-variant="inset"]': {
+            marginLeft: cssVariableTheme.spacing.xl,
+        },
+        '&[data-orientation="vertical"][data-variant="inset"]': {
+            marginTop: cssVariableTheme.spacing.xl,
+        },
+        // ==========================================
+        // VARIANT: MIDDLE (indented on both sides)
+        // ==========================================
+        '&:not([data-orientation="vertical"])[data-variant="middle"]': {
+            marginLeft: cssVariableTheme.spacing.lg,
+            marginRight: cssVariableTheme.spacing.lg,
+        },
+        '&[data-orientation="vertical"][data-variant="middle"]': {
+            marginTop: cssVariableTheme.spacing.lg,
+            marginBottom: cssVariableTheme.spacing.lg,
+        },
+    },
+    render: ({ props, children, useHostProps }) => {
+        const { orientation, variant, textAlign, style } = props;
+        const isVertical = orientation === 'vertical';
+        const hasChildren = children && (Array.isArray(children) ? children.length > 0 : true);
+        useHostProps({
+            role: 'separator',
+            'data-orientation': isVertical ? 'vertical' : undefined,
+            'aria-orientation': isVertical ? 'vertical' : undefined,
+            'data-variant': variant && variant !== 'full' ? variant : undefined,
+            'data-has-children': hasChildren ? '' : undefined,
+            'data-text-align': textAlign && textAlign !== 'center' ? textAlign : undefined,
+            ...(style ? { style: style } : {}),
+        });
+        if (hasChildren) {
+            return createComponent("span", { className: "divider-text" }, children);
+        }
+        return createComponent(createComponent, null);
+    },
+});
+//# sourceMappingURL=divider.js.map