@furystack/shades-common-components 11.0.0 → 12.0.1

package/esm/components/paper.spec.js

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject';
 import { createComponent, initializeShadeRoot } from '@furystack/shades';
-import { sleepAsync } from '@furystack/utils';
+import { sleepAsync, usingAsync } from '@furystack/utils';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { Paper } from './paper.js';
 describe('Paper', () => {
@@ -22,41 +22,49 @@ describe('Paper', () => {
         return {
             injector,
             paper: root.querySelector('div[is="shade-paper"]'),
+            [Symbol.asyncDispose]: () => injector[Symbol.asyncDispose](),
         };
     };
     describe('rendering', () => {
         it('should render a div element', async () => {
-            const { paper } = await renderPaper();
-            expect(paper).toBeTruthy();
-            expect(paper.tagName.toLowerCase()).toBe('div');
-            expect(paper.getAttribute('is')).toBe('shade-paper');
+            await usingAsync(await renderPaper(), async ({ paper }) => {
+                expect(paper).toBeTruthy();
+                expect(paper.tagName.toLowerCase()).toBe('div');
+                expect(paper.getAttribute('is')).toBe('shade-paper');
+            });
         });
         it('should render children', async () => {
-            const { paper } = await renderPaper({}, [createComponent("span", null, "Child content")]);
-            expect(paper.textContent).toContain('Child content');
+            await usingAsync(await renderPaper({}, [createComponent("span", null, "Child content")]), async ({ paper }) => {
+                expect(paper.textContent).toContain('Child content');
+            });
         });
         it('should render multiple children', async () => {
-            const { paper } = await renderPaper({}, [createComponent("span", null, "First"), createComponent("span", null, "Second")]);
-            expect(paper.textContent).toContain('First');
-            expect(paper.textContent).toContain('Second');
+            await usingAsync(await renderPaper({}, [createComponent("span", null, "First"), createComponent("span", null, "Second")]), async ({ paper }) => {
+                expect(paper.textContent).toContain('First');
+                expect(paper.textContent).toContain('Second');
+            });
         });
     });
     describe('elevation', () => {
         it('should have data-elevation="1" by default', async () => {
-            const { paper } = await renderPaper();
-            expect(paper.getAttribute('data-elevation')).toBe('1');
+            await usingAsync(await renderPaper(), async ({ paper }) => {
+                expect(paper.getAttribute('data-elevation')).toBe('1');
+            });
         });
         it('should set data-elevation="1" for elevation 1', async () => {
-            const { paper } = await renderPaper({ elevation: 1 });
-            expect(paper.getAttribute('data-elevation')).toBe('1');
+            await usingAsync(await renderPaper({ elevation: 1 }), async ({ paper }) => {
+                expect(paper.getAttribute('data-elevation')).toBe('1');
+            });
         });
         it('should set data-elevation="2" for elevation 2', async () => {
-            const { paper } = await renderPaper({ elevation: 2 });
-            expect(paper.getAttribute('data-elevation')).toBe('2');
+            await usingAsync(await renderPaper({ elevation: 2 }), async ({ paper }) => {
+                expect(paper.getAttribute('data-elevation')).toBe('2');
+            });
         });
         it('should set data-elevation="3" for elevation 3', async () => {
-            const { paper } = await renderPaper({ elevation: 3 });
-            expect(paper.getAttribute('data-elevation')).toBe('3');
+            await usingAsync(await renderPaper({ elevation: 3 }), async ({ paper }) => {
+                expect(paper.getAttribute('data-elevation')).toBe('3');
+            });
         });
     });
 });

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

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

package/esm/components/rating.d.ts

@@ -0,0 +1,62 @@
+import type { Palette } from '../services/theme-provider-service.js';
+/**
+ * Props for the Rating component
+ */
+export type RatingProps = {
+    /**
+     * Current rating value
+     */
+    value?: number;
+    /**
+     * Maximum number of stars (default: 5)
+     */
+    max?: number;
+    /**
+     * Rating precision - 1 for full stars, 0.5 for half stars (default: 1)
+     */
+    precision?: 1 | 0.5;
+    /**
+     * Size of the rating stars
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Whether the rating is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the rating is read-only (displays value but not interactive)
+     */
+    readOnly?: boolean;
+    /**
+     * Theme palette color (default: 'warning' for gold stars)
+     */
+    color?: keyof Palette;
+    /**
+     * Content used for filled stars (default: filled star icon)
+     */
+    icon?: JSX.Element | string;
+    /**
+     * Content used for empty stars (default: outlined star icon)
+     */
+    emptyIcon?: JSX.Element | string;
+    /**
+     * Callback when the rating value changes
+     * @param value - The new rating value
+     */
+    onValueChange?: (value: number) => void;
+    /**
+     * The name attribute for the hidden input element (for form integration)
+     */
+    name?: string;
+};
+/**
+ * Rating component for collecting user feedback with star ratings.
+ * Supports full and half-star precision, custom icons, hover feedback,
+ * keyboard navigation, and theme integration.
+ */
+export declare const Rating: (props: RatingProps & Omit<Partial<HTMLElement>, "style"> & {
+    style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
+}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
+//# sourceMappingURL=rating.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rating.d.ts","sourceRoot":"","sources":["../../src/components/rating.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uCAAuC,CAAA;AAKpE;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,GAAG,GAAG,CAAA;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,OAAO,CAAA;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAA;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAA;IAChC;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM;;;;sEA8NjB,CAAA"}

package/esm/components/rating.js

@@ -0,0 +1,201 @@
+import { Shade, createComponent } from '@furystack/shades';
+import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js';
+import { ThemeProviderService } from '../services/theme-provider-service.js';
+import { Icon } from './icons/icon.js';
+import { star as starIcon, starOutline } from './icons/icon-definitions.js';
+/**
+ * Rating component for collecting user feedback with star ratings.
+ * Supports full and half-star precision, custom icons, hover feedback,
+ * keyboard navigation, and theme integration.
+ */
+export const Rating = Shade({
+    shadowDomName: 'shade-rating',
+    css: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        '& .rating-container': {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '2px',
+        },
+        '& .rating-star': {
+            position: 'relative',
+            display: 'inline-flex',
+            cursor: 'pointer',
+            fontSize: cssVariableTheme.typography.fontSize.xl,
+            lineHeight: '1',
+            userSelect: 'none',
+            webkitUserSelect: 'none',
+            transition: buildTransition([
+                'transform',
+                cssVariableTheme.transitions.duration.fast,
+                cssVariableTheme.transitions.easing.default,
+            ]),
+        },
+        '& .star-empty': {
+            color: cssVariableTheme.text.disabled,
+        },
+        '& .star-filled': {
+            position: 'absolute',
+            top: '0',
+            left: '0',
+            color: 'var(--rating-color)',
+            overflow: 'hidden',
+            pointerEvents: 'none',
+            whiteSpace: 'nowrap',
+            transition: buildTransition([
+                'width',
+                cssVariableTheme.transitions.duration.fast,
+                cssVariableTheme.transitions.easing.default,
+            ]),
+        },
+        '&:not([data-disabled]):not([data-readonly]) .rating-star:hover': {
+            transform: 'scale(1.15)',
+        },
+        '&:focus-visible': {
+            outline: 'none',
+            boxShadow: cssVariableTheme.action.focusRing,
+            borderRadius: cssVariableTheme.shape.borderRadius.xs,
+        },
+        '&[data-size="small"] .rating-star': {
+            fontSize: '18px',
+        },
+        '&[data-size="large"] .rating-star': {
+            fontSize: '32px',
+        },
+        '&[data-disabled] .rating-star': {
+            cursor: 'not-allowed',
+            opacity: cssVariableTheme.action.disabledOpacity,
+        },
+        '&[data-disabled] .rating-star:hover': {
+            transform: 'none',
+        },
+        '&[data-readonly] .rating-star': {
+            cursor: 'default',
+        },
+        '&[data-readonly] .rating-star:hover': {
+            transform: 'none',
+        },
+    },
+    render: ({ props, injector, useHostProps, useRef }) => {
+        const themeProvider = injector.getInstance(ThemeProviderService);
+        const max = props.max ?? 5;
+        const precision = props.precision ?? 1;
+        const value = props.value ?? 0;
+        const filledIcon = props.icon ?? (createComponent(Icon, { icon: starIcon, size: "small" }));
+        const emptyIcon = props.emptyIcon ?? (createComponent(Icon, { icon: starOutline, size: "small" }));
+        const isInteractive = !props.disabled && !props.readOnly;
+        const color = themeProvider.theme.palette[props.color || 'warning'].main;
+        const containerRef = useRef('container');
+        useHostProps({
+            'data-size': props.size || 'medium',
+            style: { '--rating-color': color },
+            ...(props.disabled ? { 'data-disabled': '', 'aria-disabled': 'true' } : {}),
+            ...(props.readOnly ? { 'data-readonly': '', 'aria-readonly': 'true' } : {}),
+            ...(isInteractive
+                ? {
+                    role: 'slider',
+                    tabindex: '0',
+                    'aria-valuenow': String(value),
+                    'aria-valuemin': '0',
+                    'aria-valuemax': String(max),
+                    'aria-label': 'Rating',
+                    onkeydown: (ev) => {
+                        const step = precision === 0.5 ? 0.5 : 1;
+                        let newValue;
+                        switch (ev.key) {
+                            case 'ArrowRight':
+                            case 'ArrowUp':
+                                ev.preventDefault();
+                                newValue = Math.min(value + step, max);
+                                break;
+                            case 'ArrowLeft':
+                            case 'ArrowDown':
+                                ev.preventDefault();
+                                newValue = Math.max(value - step, 0);
+                                break;
+                            case 'Home':
+                                ev.preventDefault();
+                                newValue = 0;
+                                break;
+                            case 'End':
+                                ev.preventDefault();
+                                newValue = max;
+                                break;
+                            default:
+                                return;
+                        }
+                        if (newValue !== value) {
+                            props.onValueChange?.(newValue);
+                        }
+                    },
+                }
+                : {
+                    role: 'img',
+                    'aria-label': `Rating: ${value} out of ${max}`,
+                }),
+        });
+        const updateStarVisuals = (displayValue) => {
+            const container = containerRef.current;
+            if (!container)
+                return;
+            const starEls = container.querySelectorAll('.rating-star');
+            starEls.forEach((starEl, index) => {
+                const starValue = index + 1;
+                const filled = starEl.querySelector('.star-filled');
+                if (!filled)
+                    return;
+                if (displayValue >= starValue) {
+                    filled.style.width = '100%';
+                }
+                else if (precision === 0.5 && displayValue >= starValue - 0.5) {
+                    filled.style.width = '50%';
+                }
+                else {
+                    filled.style.width = '0%';
+                }
+            });
+        };
+        const getValueFromMouseEvent = (ev, index) => {
+            const starEl = ev.currentTarget;
+            const rect = starEl.getBoundingClientRect();
+            const x = ev.clientX - rect.left;
+            if (precision === 0.5 && x < rect.width / 2) {
+                return index + 0.5;
+            }
+            return index + 1;
+        };
+        const handleClick = (ev, index) => {
+            if (!isInteractive)
+                return;
+            const hostEl = containerRef.current?.closest('shade-rating');
+            hostEl?.focus();
+            const newValue = getValueFromMouseEvent(ev, index);
+            props.onValueChange?.(newValue);
+        };
+        const handleMouseMove = (ev, index) => {
+            if (!isInteractive)
+                return;
+            const hoverValue = getValueFromMouseEvent(ev, index);
+            updateStarVisuals(hoverValue);
+        };
+        const handleMouseLeave = () => {
+            if (!isInteractive)
+                return;
+            updateStarVisuals(value);
+        };
+        const stars = Array.from({ length: max }, (_, i) => {
+            const starValue = i + 1;
+            const isFilled = value >= starValue;
+            const isHalf = precision === 0.5 && !isFilled && value >= starValue - 0.5;
+            const initialWidth = isFilled ? '100%' : isHalf ? '50%' : '0%';
+            return (createComponent("span", { className: "rating-star", "aria-hidden": "true", "data-value": String(starValue), onclick: (ev) => handleClick(ev, i), onmousemove: (ev) => handleMouseMove(ev, i) },
+                createComponent("span", { className: "star-empty" }, emptyIcon),
+                createComponent("span", { className: "star-filled", style: { width: initialWidth } }, filledIcon)));
+        });
+        return (createComponent("div", { ref: containerRef, className: "rating-container", onmouseleave: handleMouseLeave },
+            stars,
+            props.name ? createComponent("input", { type: "hidden", name: props.name, value: String(value) }) : null));
+    },
+});
+//# sourceMappingURL=rating.js.map

package/esm/components/rating.js.map

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

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

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

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

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