@furystack/shades-common-components 11.0.0 → 12.0.0

package/esm/components/linear-progress.js

@@ -0,0 +1,79 @@
+import { Shade, createComponent } from '@furystack/shades';
+import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js';
+import { ThemeProviderService } from '../services/theme-provider-service.js';
+import { promisifyAnimation } from '../utils/promisify-animation.js';
+const clampValue = (v) => Math.max(0, Math.min(100, v));
+export const LinearProgress = Shade({
+    shadowDomName: 'shade-linear-progress',
+    css: {
+        display: 'block',
+        width: '100%',
+        overflow: 'hidden',
+        position: 'relative',
+        borderRadius: cssVariableTheme.shape.borderRadius.xs,
+        backgroundColor: 'color-mix(in srgb, var(--progress-color) 20%, transparent)',
+        // Medium size (default)
+        height: '6px',
+        '&[data-size="small"]': {
+            height: '4px',
+        },
+        '& .progress-bar': {
+            position: 'absolute',
+            top: '0',
+            left: '0',
+            height: '100%',
+            borderRadius: 'inherit',
+            backgroundColor: 'var(--progress-color)',
+            transition: buildTransition([
+                'width',
+                cssVariableTheme.transitions.duration.normal,
+                cssVariableTheme.transitions.easing.easeInOut,
+            ]),
+        },
+        '& .progress-bar[data-indeterminate]': {
+            transition: 'none',
+        },
+    },
+    render: ({ props, injector, useObservable, useHostProps, useRef }) => {
+        const themeProvider = injector.getInstance(ThemeProviderService);
+        const barRef = useRef('progressBar');
+        const variant = props.variant || 'indeterminate';
+        if (variant === 'determinate' && props.value) {
+            useObservable('progressValue', props.value);
+        }
+        const value = clampValue(props.value?.getValue() ?? 0);
+        const color = themeProvider.theme.palette[props.color || 'primary'].main;
+        useHostProps({
+            'data-size': props.size === 'small' ? 'small' : undefined,
+            role: 'progressbar',
+            ...(variant === 'determinate'
+                ? {
+                    'aria-valuenow': String(value),
+                    'aria-valuemin': '0',
+                    'aria-valuemax': '100',
+                }
+                : {
+                    'aria-valuenow': undefined,
+                }),
+            style: { '--progress-color': color },
+        });
+        const barWidth = variant === 'determinate' ? `${value}%` : '40%';
+        if (variant === 'indeterminate') {
+            setTimeout(() => {
+                if (barRef.current) {
+                    void promisifyAnimation(barRef.current, [
+                        { left: '-40%', width: '40%' },
+                        { left: '60%', width: '40%' },
+                        { left: '100%', width: '10%' },
+                    ], {
+                        duration: 1800,
+                        easing: 'cubic-bezier(0.65, 0, 0.35, 1)',
+                        iterations: Infinity,
+                    });
+                }
+            }, 1);
+        }
+        return (createComponent("div", { ref: barRef, className: "progress-bar", style: { width: barWidth }, ...(variant === 'indeterminate' ? { 'data-indeterminate': '' } : {}) }));
+    },
+});
+//# sourceMappingURL=linear-progress.js.map

package/esm/components/linear-progress.js.map

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

package/esm/components/linear-progress.spec.d.ts

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

package/esm/components/linear-progress.spec.d.ts.map

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

package/esm/components/linear-progress.spec.js

@@ -0,0 +1,251 @@
+import { Injector } from '@furystack/inject';
+import { createComponent, initializeShadeRoot } from '@furystack/shades';
+import { ObservableValue, sleepAsync, usingAsync } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { ThemeProviderService } from '../services/theme-provider-service.js';
+import { LinearProgress } from './linear-progress.js';
+describe('LinearProgress', () => {
+    let originalAnimate;
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+        originalAnimate = Element.prototype.animate;
+        Element.prototype.animate = vi.fn((_keyframes, _options) => {
+            const mockAnimation = {
+                onfinish: null,
+                oncancel: null,
+                cancel: vi.fn(),
+                play: vi.fn(),
+                pause: vi.fn(),
+                finish: vi.fn(),
+                addEventListener: vi.fn(),
+                removeEventListener: vi.fn(),
+            };
+            return mockAnimation;
+        });
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+        Element.prototype.animate = originalAnimate;
+        vi.restoreAllMocks();
+    });
+    it('should render with shadow DOM', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(LinearProgress, null),
+            });
+            await sleepAsync(50);
+            const el = document.querySelector('shade-linear-progress');
+            expect(el).not.toBeNull();
+        });
+    });
+    it('should render the progress bar element', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(LinearProgress, null),
+            });
+            await sleepAsync(50);
+            const bar = document.querySelector('shade-linear-progress .progress-bar');
+            expect(bar).not.toBeNull();
+        });
+    });
+    it('should set role="progressbar"', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(LinearProgress, null),
+            });
+            await sleepAsync(50);
+            const el = document.querySelector('shade-linear-progress');
+            expect(el.getAttribute('role')).toBe('progressbar');
+        });
+    });
+    describe('determinate variant', () => {
+        it('should set aria-valuenow for determinate variant', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const value = new ObservableValue(50);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(LinearProgress, { variant: "determinate", value: value }),
+                });
+                await sleepAsync(50);
+                const el = document.querySelector('shade-linear-progress');
+                expect(el.getAttribute('aria-valuenow')).toBe('50');
+                expect(el.getAttribute('aria-valuemin')).toBe('0');
+                expect(el.getAttribute('aria-valuemax')).toBe('100');
+            });
+        });
+        it('should set bar width based on value', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const value = new ObservableValue(75);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(LinearProgress, { variant: "determinate", value: value }),
+                });
+                await sleepAsync(50);
+                const bar = document.querySelector('shade-linear-progress .progress-bar');
+                expect(bar.style.width).toBe('75%');
+            });
+        });
+        it('should clamp value to 0-100 range', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const value = new ObservableValue(150);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(LinearProgress, { variant: "determinate", value: value }),
+                });
+                await sleepAsync(50);
+                const bar = document.querySelector('shade-linear-progress .progress-bar');
+                expect(bar.style.width).toBe('100%');
+            });
+        });
+        it('should clamp negative values to 0', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const value = new ObservableValue(-20);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(LinearProgress, { variant: "determinate", value: value }),
+                });
+                await sleepAsync(50);
+                const bar = document.querySelector('shade-linear-progress .progress-bar');
+                expect(bar.style.width).toBe('0%');
+            });
+        });
+        it('should update bar width when observable value changes', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const value = new ObservableValue(20);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(LinearProgress, { variant: "determinate", value: value }),
+                });
+                await sleepAsync(50);
+                const bar = document.querySelector('shade-linear-progress .progress-bar');
+                expect(bar.style.width).toBe('20%');
+                value.setValue(80);
+                await sleepAsync(10);
+                expect(bar.style.width).toBe('80%');
+            });
+        });
+        it('should update aria-valuenow when observable value changes', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const value = new ObservableValue(30);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(LinearProgress, { variant: "determinate", value: value }),
+                });
+                await sleepAsync(50);
+                const el = document.querySelector('shade-linear-progress');
+                expect(el.getAttribute('aria-valuenow')).toBe('30');
+                value.setValue(90);
+                await sleepAsync(10);
+                expect(el.getAttribute('aria-valuenow')).toBe('90');
+            });
+        });
+    });
+    describe('indeterminate variant', () => {
+        it('should default to indeterminate variant', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(LinearProgress, null),
+                });
+                await sleepAsync(50);
+                const bar = document.querySelector('shade-linear-progress .progress-bar');
+                expect(bar.hasAttribute('data-indeterminate')).toBe(true);
+            });
+        });
+        it('should not set aria-valuenow for indeterminate variant', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(LinearProgress, null),
+                });
+                await sleepAsync(50);
+                const el = document.querySelector('shade-linear-progress');
+                expect(el.hasAttribute('aria-valuenow')).toBe(false);
+            });
+        });
+    });
+    describe('size', () => {
+        it('should set data-size="small" when size is small', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(LinearProgress, { size: "small" }),
+                });
+                await sleepAsync(50);
+                const el = document.querySelector('shade-linear-progress');
+                expect(el.getAttribute('data-size')).toBe('small');
+            });
+        });
+        it('should not set data-size when size is medium (default)', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(LinearProgress, null),
+                });
+                await sleepAsync(50);
+                const el = document.querySelector('shade-linear-progress');
+                expect(el.hasAttribute('data-size')).toBe(false);
+            });
+        });
+    });
+    describe('theme integration', () => {
+        it('should set CSS color variable from theme', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(LinearProgress, null),
+                });
+                await sleepAsync(50);
+                const el = document.querySelector('shade-linear-progress');
+                const themeService = injector.getInstance(ThemeProviderService);
+                expect(el.style.getPropertyValue('--progress-color')).toBe(themeService.theme.palette.primary.main);
+            });
+        });
+        it('should use custom color from color prop', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(LinearProgress, { color: "error" }),
+                });
+                await sleepAsync(50);
+                const el = document.querySelector('shade-linear-progress');
+                const themeService = injector.getInstance(ThemeProviderService);
+                expect(el.style.getPropertyValue('--progress-color')).toBe(themeService.theme.palette.error.main);
+            });
+        });
+    });
+});
+//# sourceMappingURL=linear-progress.spec.js.map

package/esm/components/linear-progress.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linear-progress.spec.js","sourceRoot":"","sources":["../../src/components/linear-progress.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AACxE,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC1E,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAA;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,IAAI,eAAiD,CAAA;IAErD,UAAU,CAAC,GAAG,EAAE;QACd,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,uBAAuB,CAAA;QACjD,eAAe,GAAG,OAAO,CAAC,SAAS,CAAC,OAAO,CAAA;QAE3C,OAAO,CAAC,SAAS,CAAC,OAAO,GAAG,EAAE,CAAC,EAAE,CAC/B,CAAC,UAAwD,EAAE,QAA4C,EAAE,EAAE;YACzG,MAAM,aAAa,GAAG;gBACpB,QAAQ,EAAE,IAAwD;gBAClE,QAAQ,EAAE,IAAwD;gBAClE,MAAM,EAAE,EAAE,CAAC,EAAE,EAAE;gBACf,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE;gBACb,KAAK,EAAE,EAAE,CAAC,EAAE,EAAE;gBACd,MAAM,EAAE,EAAE,CAAC,EAAE,EAAE;gBACf,gBAAgB,EAAE,EAAE,CAAC,EAAE,EAAE;gBACzB,mBAAmB,EAAE,EAAE,CAAC,EAAE,EAAE;aAC7B,CAAA;YACD,OAAO,aAAqC,CAAA;QAC9C,CAAC,CACkC,CAAA;IACvC,CAAC,CAAC,CAAA;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;QAC5B,OAAO,CAAC,SAAS,CAAC,OAAO,GAAG,eAAe,CAAA;QAC3C,EAAE,CAAC,eAAe,EAAE,CAAA;IACtB,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;YAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;YAErE,mBAAmB,CAAC;gBAClB,QAAQ;gBACR,WAAW;gBACX,UAAU,EAAE,gBAAC,cAAc,OAAG;aAC/B,CAAC,CAAA;YAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAA;YAC1D,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;QACtD,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;YAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;YAErE,mBAAmB,CAAC;gBAClB,QAAQ;gBACR,WAAW;gBACX,UAAU,EAAE,gBAAC,cAAc,OAAG;aAC/B,CAAC,CAAA;YAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,qCAAqC,CAAC,CAAA;YACzE,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;QAC5B,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;YAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;YAErE,mBAAmB,CAAC;gBAClB,QAAQ;gBACR,WAAW;gBACX,UAAU,EAAE,gBAAC,cAAc,OAAG;aAC/B,CAAC,CAAA;YAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;YAEpB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAgB,CAAA;YACzE,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;QACrD,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;QACnC,EAAE,CAAC,kDAAkD,EAAE,KAAK,IAAI,EAAE;YAChE,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBACrE,MAAM,KAAK,GAAG,IAAI,eAAe,CAAC,EAAE,CAAC,CAAA;gBAErC,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,gBAAC,cAAc,IAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAE,KAAK,GAAI;iBACnE,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAgB,CAAA;gBACzE,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;gBACnD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;gBAClD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YACtD,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;YACnD,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBACrE,MAAM,KAAK,GAAG,IAAI,eAAe,CAAC,EAAE,CAAC,CAAA;gBAErC,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,gBAAC,cAAc,IAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAE,KAAK,GAAI;iBACnE,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,qCAAqC,CAAgB,CAAA;gBACxF,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YACrC,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;YACjD,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBACrE,MAAM,KAAK,GAAG,IAAI,eAAe,CAAC,GAAG,CAAC,CAAA;gBAEtC,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,gBAAC,cAAc,IAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAE,KAAK,GAAI;iBACnE,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,qCAAqC,CAAgB,CAAA;gBACxF,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;YACtC,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;YACjD,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBACrE,MAAM,KAAK,GAAG,IAAI,eAAe,CAAC,CAAC,EAAE,CAAC,CAAA;gBAEtC,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,gBAAC,cAAc,IAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAE,KAAK,GAAI;iBACnE,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,qCAAqC,CAAgB,CAAA;gBACxF,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACpC,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,uDAAuD,EAAE,KAAK,IAAI,EAAE;YACrE,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBACrE,MAAM,KAAK,GAAG,IAAI,eAAe,CAAC,EAAE,CAAC,CAAA;gBAErC,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,gBAAC,cAAc,IAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAE,KAAK,GAAI;iBACnE,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,qCAAqC,CAAgB,CAAA;gBACxF,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;gBAEnC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;gBAClB,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YACrC,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;YACzE,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBACrE,MAAM,KAAK,GAAG,IAAI,eAAe,CAAC,EAAE,CAAC,CAAA;gBAErC,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,gBAAC,cAAc,IAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAE,KAAK,GAAI;iBACnE,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAgB,CAAA;gBACzE,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;gBAEnD,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;gBAClB,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACrD,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;QACrC,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;YACvD,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBAErE,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,gBAAC,cAAc,OAAG;iBAC/B,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,qCAAqC,CAAgB,CAAA;gBACxF,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAC3D,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;YACtE,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBAErE,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,gBAAC,cAAc,OAAG;iBAC/B,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAgB,CAAA;gBACzE,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YACtD,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC,MAAM,EAAE,GAAG,EAAE;QACpB,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;YAC/D,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBAErE,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,gBAAC,cAAc,IAAC,IAAI,EAAC,OAAO,GAAG;iBAC5C,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAgB,CAAA;gBACzE,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;YACpD,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;YACtE,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBAErE,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,gBAAC,cAAc,OAAG;iBAC/B,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAgB,CAAA;gBACzE,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YAClD,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;QACjC,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;YACxD,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBAErE,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,gBAAC,cAAc,OAAG;iBAC/B,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAgB,CAAA;gBACzE,MAAM,YAAY,GAAG,QAAQ,CAAC,WAAW,CAAC,oBAAoB,CAAC,CAAA;gBAC/D,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;YACrG,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;YACvD,MAAM,UAAU,CAAC,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;gBAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;gBAErE,mBAAmB,CAAC;oBAClB,QAAQ;oBACR,WAAW;oBACX,UAAU,EAAE,gBAAC,cAAc,IAAC,KAAK,EAAC,OAAO,GAAG;iBAC7C,CAAC,CAAA;gBAEF,MAAM,UAAU,CAAC,EAAE,CAAC,CAAA;gBAEpB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAgB,CAAA;gBACzE,MAAM,YAAY,GAAG,QAAQ,CAAC,WAAW,CAAC,oBAAoB,CAAC,CAAA;gBAC/D,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;YACnG,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/esm/components/list/index.d.ts

@@ -0,0 +1,3 @@
+export * from './list.js';
+export * from './list-item.js';
+//# sourceMappingURL=index.d.ts.map

package/esm/components/list/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/list/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA"}

package/esm/components/list/index.js

@@ -0,0 +1,3 @@
+export * from './list.js';
+export * from './list-item.js';
+//# sourceMappingURL=index.js.map

package/esm/components/list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/list/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA"}

package/esm/components/list/list-item.d.ts

@@ -0,0 +1,13 @@
+import type { ChildrenList } from '@furystack/shades';
+import type { ListService } from '../../services/list-service.js';
+import type { ListItemState } from './list.js';
+export type ListItemProps<T> = {
+    item: T;
+    listService: ListService<T>;
+    renderItem: (item: T, state: ListItemState) => JSX.Element;
+    renderIcon?: (item: T) => JSX.Element;
+    renderSecondaryActions?: (item: T) => JSX.Element[];
+    onActivate?: (item: T) => void;
+};
+export declare const ListItem: <T>(props: ListItemProps<T>, children: ChildrenList) => JSX.Element<any>;
+//# sourceMappingURL=list-item.d.ts.map

package/esm/components/list/list-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../../src/components/list/list-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAE9C,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI;IAC7B,IAAI,EAAE,CAAC,CAAA;IACP,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,CAAA;IAC3B,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,aAAa,KAAK,GAAG,CAAC,OAAO,CAAA;IAC1D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,GAAG,CAAC,OAAO,CAAA;IACrC,sBAAsB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,GAAG,CAAC,OAAO,EAAE,CAAA;IACnD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;CAC/B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,YAAY,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG,CA0F5F,CAAA"}

package/esm/components/list/list-item.js

@@ -0,0 +1,81 @@
+import { createComponent, Shade } from '@furystack/shades';
+import { cssVariableTheme } from '../../services/css-variable-theme.js';
+export const ListItem = Shade({
+    shadowDomName: 'shade-list-item',
+    css: {
+        display: 'flex',
+        alignItems: 'center',
+        cursor: 'default',
+        userSelect: 'none',
+        padding: `${cssVariableTheme.spacing.sm} ${cssVariableTheme.spacing.md}`,
+        gap: cssVariableTheme.spacing.sm,
+        transition: `background-color ${cssVariableTheme.transitions.duration.fast} ease, box-shadow ${cssVariableTheme.transitions.duration.fast} ${cssVariableTheme.transitions.easing.easeInOut}`,
+        borderLeft: '3px solid transparent',
+        '&:not([data-selected]):hover': {
+            backgroundColor: cssVariableTheme.action.hoverBackground,
+        },
+        '&[data-selected]': {
+            backgroundColor: cssVariableTheme.action.selectedBackground,
+            borderLeft: `3px solid ${cssVariableTheme.palette.primary.main}`,
+        },
+        '&[data-focused]': {
+            boxShadow: `0 0 0 2px ${cssVariableTheme.palette.primary.main} inset`,
+        },
+    },
+    render: ({ props, useObservable, useHostProps, useRef }) => {
+        const { item, listService, renderItem, renderIcon, renderSecondaryActions, onActivate } = props;
+        const [selection] = useObservable('selection', listService.selection);
+        const [focusedItem] = useObservable('focusedItem', listService.focusedItem);
+        const isFocused = focusedItem === item;
+        const isSelected = selection.includes(item);
+        useHostProps({
+            role: 'option',
+            'aria-selected': isSelected.toString(),
+            onclick: (ev) => {
+                listService.handleItemClick(item, ev);
+            },
+            ondblclick: () => {
+                listService.handleItemDoubleClick(item);
+                onActivate?.(item);
+            },
+            ...(isSelected ? { 'data-selected': '' } : {}),
+            ...(isFocused ? { 'data-focused': '' } : {}),
+        });
+        const wrapperRef = useRef('wrapper');
+        if (isFocused) {
+            queueMicrotask(() => {
+                const el = wrapperRef.current;
+                if (!el)
+                    return;
+                const scrollContainer = el.closest('shade-list');
+                if (scrollContainer) {
+                    const containerRect = scrollContainer.getBoundingClientRect();
+                    const hostEl = el.closest('shade-list-item');
+                    if (!hostEl)
+                        return;
+                    const itemRect = hostEl.getBoundingClientRect();
+                    const itemTopInContainer = itemRect.top - containerRect.top;
+                    const itemBottomInContainer = itemRect.bottom - containerRect.top;
+                    if (itemTopInContainer < 0) {
+                        scrollContainer.scrollTo({
+                            top: scrollContainer.scrollTop + itemTopInContainer,
+                            behavior: 'smooth',
+                        });
+                    }
+                    else if (itemBottomInContainer > scrollContainer.clientHeight) {
+                        scrollContainer.scrollTo({
+                            top: scrollContainer.scrollTop + (itemBottomInContainer - scrollContainer.clientHeight),
+                            behavior: 'smooth',
+                        });
+                    }
+                }
+            });
+        }
+        const state = { isFocused, isSelected };
+        return (createComponent("span", { ref: wrapperRef, style: { display: 'contents' } },
+            renderIcon && createComponent("span", { className: "list-item-icon" }, renderIcon(item)),
+            createComponent("span", { className: "list-item-content", style: { flex: '1' } }, renderItem(item, state)),
+            renderSecondaryActions && (createComponent("span", { className: "list-item-actions", style: { display: 'flex', gap: cssVariableTheme.spacing.xs } }, renderSecondaryActions(item).map((action) => action)))));
+    },
+});
+//# sourceMappingURL=list-item.js.map

package/esm/components/list/list-item.js.map

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

package/esm/components/list/list.d.ts

@@ -0,0 +1,18 @@
+import type { ChildrenList, PartialElement } from '@furystack/shades';
+import type { ListService } from '../../services/list-service.js';
+export type ListItemState = {
+    isFocused: boolean;
+    isSelected: boolean;
+};
+export type ListProps<T> = {
+    items: T[];
+    listService: ListService<T>;
+    renderItem: (item: T, state: ListItemState) => JSX.Element;
+    renderIcon?: (item: T) => JSX.Element;
+    renderSecondaryActions?: (item: T) => JSX.Element[];
+    variant?: 'contained' | 'outlined';
+    onItemActivate?: (item: T) => void;
+    onSelectionChange?: (selected: T[]) => void;
+} & PartialElement<HTMLDivElement>;
+export declare const List: <T>(props: ListProps<T>, children: ChildrenList) => JSX.Element<any>;
+//# sourceMappingURL=list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/components/list/list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAGrE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAGjE,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,OAAO,CAAA;IAClB,UAAU,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI;IACzB,KAAK,EAAE,CAAC,EAAE,CAAA;IACV,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,CAAA;IAC3B,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,aAAa,KAAK,GAAG,CAAC,OAAO,CAAA;IAC1D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,GAAG,CAAC,OAAO,CAAA;IACrC,sBAAsB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,GAAG,CAAC,OAAO,EAAE,CAAA;IACnD,OAAO,CAAC,EAAE,WAAW,GAAG,UAAU,CAAA;IAClC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;IAClC,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,IAAI,CAAA;CAC5C,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,YAAY,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG,CAqEpF,CAAA"}

package/esm/components/list/list.js

@@ -0,0 +1,42 @@
+import { createComponent, Shade } from '@furystack/shades';
+import { ClickAwayService } from '../../services/click-away-service.js';
+import { ListItem } from './list-item.js';
+export const List = Shade({
+    shadowDomName: 'shade-list',
+    css: {
+        display: 'block',
+        width: '100%',
+        overflow: 'auto',
+    },
+    render: ({ props, useDisposable, useHostProps, useRef }) => {
+        const wrapperRef = useRef('listWrapper');
+        useDisposable('keydown-handler', () => {
+            const listener = (ev) => {
+                props.listService.handleKeyDown(ev);
+                if (ev.key === 'Enter' && props.listService.hasFocus.getValue()) {
+                    const focusedItem = props.listService.focusedItem.getValue();
+                    if (focusedItem && props.onItemActivate) {
+                        props.onItemActivate(focusedItem);
+                    }
+                }
+            };
+            window.addEventListener('keydown', listener);
+            return { [Symbol.dispose]: () => window.removeEventListener('keydown', listener) };
+        });
+        props.listService.items.setValue(props.items);
+        useDisposable('clickAway', () => new ClickAwayService(wrapperRef, () => {
+            props.listService.hasFocus.setValue(false);
+        }));
+        if (props.onSelectionChange) {
+            const { onSelectionChange } = props;
+            useDisposable('selectionChangeCallback', () => props.listService.selection.subscribe((newSelection) => {
+                onSelectionChange(newSelection);
+            }));
+        }
+        useHostProps({
+            'data-variant': props.variant || undefined,
+        });
+        return (createComponent("div", { ref: wrapperRef, role: "listbox", ariaMultiSelectable: "true", className: "shade-list-wrapper", onclick: () => props.listService.hasFocus.setValue(true) }, props.items.map((item) => (createComponent(ListItem, { item: item, listService: props.listService, renderItem: props.renderItem, renderIcon: props.renderIcon, renderSecondaryActions: props.renderSecondaryActions, onActivate: props.onItemActivate })))));
+    },
+});
+//# sourceMappingURL=list.js.map

package/esm/components/list/list.js.map

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

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

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

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

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