doom-design-system 0.6.0 → 0.7.0

package/dist/components/A2UI/catalog.js

@@ -408,6 +408,104 @@ export const componentCatalog = [
             { name: "disabled", type: "boolean", description: "Disable slider" },
         ],
     },
+    {
+        type: "rating",
+        name: "Rating",
+        category: "primitives",
+        description: "Icon-based rating with half-value support",
+        props: [
+            {
+                name: "value",
+                type: "number",
+                description: "Controlled rating value",
+            },
+            {
+                name: "defaultValue",
+                type: "number",
+                description: "Uncontrolled initial value",
+            },
+            {
+                name: "count",
+                type: "number",
+                description: "Number of icons",
+                default: "5",
+            },
+            {
+                name: "allowHalf",
+                type: "boolean",
+                description: "Enable half-value selection",
+            },
+            {
+                name: "size",
+                type: "'sm' | 'md' | 'lg'",
+                description: "Icon size",
+                default: "md",
+            },
+            {
+                name: "readOnly",
+                type: "boolean",
+                description: "Read-only display mode",
+            },
+            { name: "disabled", type: "boolean", description: "Disable rating" },
+        ],
+    },
+    {
+        type: "toggle-group",
+        name: "ToggleGroup",
+        category: "primitives",
+        description: "Grouped toggle buttons with single or multi select",
+        props: [
+            {
+                name: "type",
+                type: "'single' | 'multiple'",
+                required: true,
+                description: "Selection mode",
+            },
+            {
+                name: "value",
+                type: "string | string[]",
+                description: "Controlled value",
+            },
+            {
+                name: "defaultValue",
+                type: "string | string[]",
+                description: "Default value (uncontrolled)",
+            },
+            {
+                name: "size",
+                type: "'sm' | 'md' | 'lg'",
+                description: "Control size",
+                default: "md",
+            },
+            { name: "disabled", type: "boolean", description: "Disable all items" },
+            {
+                name: "children",
+                type: "A2UIChildRef",
+                description: "toggle-group-item children",
+            },
+        ],
+    },
+    {
+        type: "toggle-group-item",
+        name: "ToggleGroupItem",
+        category: "primitives",
+        description: "Single toggle option within a ToggleGroup",
+        usesTextProp: true,
+        props: [
+            {
+                name: "value",
+                type: "string",
+                required: true,
+                description: "Item value",
+            },
+            {
+                name: "text",
+                type: "A2UITextValue",
+                description: "Label text",
+            },
+            { name: "disabled", type: "boolean", description: "Disable this item" },
+        ],
+    },
     {
         type: "link",
         name: "Link",

package/dist/components/A2UI/mapping.js

@@ -22,6 +22,7 @@ import { Link } from "../Link/Link.js";
 // Feedback - Static display
 import { ProgressBar } from "../ProgressBar/ProgressBar.js";
 import { RadioGroup, RadioGroupItem } from "../RadioGroup/RadioGroup.js";
+import { Rating } from "../Rating/Rating.js";
 import { Select } from "../Select/Select.js";
 import { Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarMobileTrigger, SidebarNav, SidebarSection, } from "../Sidebar/Sidebar.js";
 import { Skeleton } from "../Skeleton/Skeleton.js";
@@ -34,6 +35,7 @@ import { Table } from "../Table/Table.js";
 import { Tabs, TabsBody, TabsContent, TabsList, TabsTrigger, } from "../Tabs/Tabs.js";
 import { Text } from "../Text/Text.js";
 import { Textarea } from "../Textarea/Textarea.js";
+import { ToggleGroup, ToggleGroupItem } from "../ToggleGroup/ToggleGroup.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
 // Wrappers (for components needing JSON-to-function adaptation)
 import { ChartWrapper } from "./wrappers/index.js";
@@ -52,11 +54,14 @@ export const componentMap = {
     link: Link,
     "radio-group": RadioGroup,
     "radio-group-item": RadioGroupItem,
+    rating: Rating,
     slider: Slider,
     spinner: Spinner,
     switch: Switch,
     text: Text,
     textarea: Textarea,
+    "toggle-group": ToggleGroup,
+    "toggle-group-item": ToggleGroupItem,
     tooltip: Tooltip,
     // Layout
     box: "div",

package/dist/components/Checkbox/Checkbox.d.ts

@@ -2,5 +2,6 @@ import React from "react";
 export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
     label?: string;
     error?: boolean;
+    indeterminate?: boolean;
 }
 export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Checkbox/Checkbox.js

@@ -12,14 +12,30 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { Check } from "lucide-react";
-import { forwardRef, useId } from "react";
+import { Check, Minus } from "lucide-react";
+import { forwardRef, useCallback, useEffect, useId, useRef, } from "react";
 import { Label } from "../Label/index.js";
 import styles from "./Checkbox.module.css";
 export const Checkbox = forwardRef((_a, ref) => {
-    var { className, label, error, disabled, checked, defaultChecked, onChange, id: propsId } = _a, props = __rest(_a, ["className", "label", "error", "disabled", "checked", "defaultChecked", "onChange", "id"]);
+    var { className, label, error, disabled, checked, defaultChecked, indeterminate, onChange, id: propsId } = _a, props = __rest(_a, ["className", "label", "error", "disabled", "checked", "defaultChecked", "indeterminate", "onChange", "id"]);
     const generatedId = useId();
     const id = propsId || generatedId;
-    return (_jsxs(Label, { className: clsx(styles.checkboxWrapper, disabled && styles.disabled, className), htmlFor: id, children: [_jsx("input", Object.assign({ ref: ref, checked: checked, className: styles.checkboxInput, defaultChecked: defaultChecked, disabled: disabled, id: id, type: "checkbox", onChange: onChange }, props)), _jsx("span", { "aria-hidden": "true", className: clsx(styles.checkboxDisplay), children: _jsx(Check, { className: styles.icon }) }), label && _jsx("span", { className: styles.labelOverride, children: label })] }));
+    const internalRef = useRef(null);
+    const mergedRef = useCallback((node) => {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current =
+                node;
+        }
+    }, [ref]);
+    useEffect(() => {
+        if (internalRef.current) {
+            internalRef.current.indeterminate = !!(indeterminate && !checked);
+        }
+    }, [indeterminate, checked]);
+    return (_jsxs(Label, { className: clsx(styles.checkboxWrapper, disabled && styles.disabled, className), htmlFor: id, children: [_jsx("input", Object.assign({ ref: mergedRef, checked: checked, className: styles.checkboxInput, defaultChecked: defaultChecked, disabled: disabled, id: id, type: "checkbox", onChange: onChange }, props)), _jsx("span", { "aria-hidden": "true", className: clsx(styles.checkboxDisplay), children: indeterminate && !checked ? (_jsx(Minus, { className: styles.icon, "data-testid": "minus-icon" })) : (_jsx(Check, { className: styles.icon })) }), label && _jsx("span", { className: styles.labelOverride, children: label })] }));
 });
 Checkbox.displayName = "Checkbox";

package/dist/components/FileUpload/FileUpload.js

@@ -92,8 +92,9 @@ export const FileUpload = ({ label, helperText, accept, maxSize, multiple = fals
         }
     }, [showPreview]);
     const isFileAccepted = (file) => {
-        if (!accept)
+        if (!accept) {
             return true;
+        }
         const acceptedTypes = accept.split(",").map((t) => t.trim().toLowerCase());
         const fileName = file.name.toLowerCase();
         const mimeType = file.type.toLowerCase();

package/dist/components/FileUpload/FileUpload.module.css

@@ -60,21 +60,23 @@
   .window.void .body::before, .window.void .body::after {
     content: "";
     position: absolute;
-    inset: -50%;
-    width: 200%;
-    height: 200%;
-    background-image: radial-gradient(1px 1px at 20% 30%, #fff 100%, transparent), radial-gradient(1px 1px at 40% 70%, #fff 100%, transparent), radial-gradient(1px 1px at 60% 40%, #fff 100%, transparent), radial-gradient(1px 1px at 80% 80%, #fff 100%, transparent), radial-gradient(1px 1px at 10% 10%, #fff 100%, transparent), radial-gradient(1px 1px at 30% 50%, #fff 100%, transparent), radial-gradient(1px 1px at 50% 20%, #fff 100%, transparent), radial-gradient(1px 1px at 70% 90%, #fff 100%, transparent), radial-gradient(1px 1px at 90% 30%, #fff 100%, transparent), radial-gradient(1.5px 1.5px at 15% 75%, #fff 100%, transparent), radial-gradient(1px 1px at 85% 15%, #fff 100%, transparent), radial-gradient(1px 1px at 55% 65%, #fff 100%, transparent);
-    background-size: 50% 50%;
-    opacity: 0.5;
+    top: 50%;
+    left: 50%;
+    width: 2px;
+    height: 2px;
+    background: transparent;
+    border-radius: 50%;
+    box-shadow: -80px -120px #fff, 40px -60px #fff, -150px 80px #fff, 120px 40px #fff, -30px -180px #fff, 90px 130px #fff, -170px -20px #fff, 60px -140px #fff, 180px -80px #fff, -100px 160px #fff, 140px 100px #fff, -50px -40px #fff, 30px 170px #fff, -140px -150px #fff, 170px 60px #fff, -60px 100px #fff, 100px -170px #fff, -180px 140px #fff, 50px 50px #fff, -120px -90px #fff, 160px -30px #fff, -20px 130px #fff, 80px -100px #fff, -160px 40px #fff;
+    opacity: 0.6;
     z-index: 0;
     animation: consume-stars 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     pointer-events: none;
   }
   .window.void .body::after {
+    box-shadow: -70px -90px #fff, 50px -130px #fff, -130px 60px #fff, 110px 70px #fff, -20px -160px #fff, 80px 150px #fff, -160px -50px #fff, 70px -110px #fff, 160px -60px #fff, -90px 140px #fff, 130px 120px #fff, -40px -30px #fff, 20px 160px #fff, -150px -130px #fff, 150px 40px #fff, -50px 80px #fff, 90px -150px #fff, -170px 120px #fff;
     animation-name: consume-stars-alt;
     animation-delay: -3s;
-    background-position: 33% 33%;
-    opacity: 0.3;
+    opacity: 0.35;
   }
   .window.void .body .starField {
     position: absolute;
@@ -86,19 +88,21 @@
   .window.void .body .starField::before, .window.void .body .starField::after {
     content: "";
     position: absolute;
-    inset: -50%;
-    width: 200%;
-    height: 200%;
-    background-image: radial-gradient(1px 1px at 25% 35%, #fff 100%, transparent), radial-gradient(1px 1px at 45% 75%, #fff 100%, transparent), radial-gradient(1px 1px at 65% 45%, #fff 100%, transparent), radial-gradient(1px 1px at 85% 85%, #fff 100%, transparent), radial-gradient(1px 1px at 15% 15%, #fff 100%, transparent), radial-gradient(1px 1px at 35% 55%, #fff 100%, transparent), radial-gradient(1px 1px at 55% 25%, #fff 100%, transparent), radial-gradient(1px 1px at 75% 95%, #fff 100%, transparent), radial-gradient(1px 1px at 95% 35%, #fff 100%, transparent), radial-gradient(1.5px 1.5px at 20% 80%, #fff 100%, transparent), radial-gradient(1px 1px at 90% 20%, #fff 100%, transparent), radial-gradient(1px 1px at 60% 70%, #fff 100%, transparent);
-    background-size: 50% 50%;
+    top: 50%;
+    left: 50%;
+    width: 2px;
+    height: 2px;
+    background: transparent;
+    border-radius: 50%;
+    box-shadow: -95px -105px #fff, 55px -75px #fff, -140px 95px #fff, 105px 55px #fff, -45px -170px #fff, 75px 145px #fff, -155px -35px #fff, 45px -125px #fff, 165px -70px #fff, -85px 155px #fff, 125px 85px #fff, -35px -55px #fff, 15px 175px #fff, -125px -140px #fff, 155px 50px #fff, -75px 90px #fff, 85px -160px #fff, -165px 130px #fff, 35px 65px #fff, -110px -80px #fff, 145px -15px #fff, -15px 115px #fff, 65px -85px #fff, -145px 55px #fff;
     opacity: 0.5;
     animation: consume-stars 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     animation-delay: -1.5s;
   }
   .window.void .body .starField::after {
+    box-shadow: -65px -80px #fff, 45px -140px #fff, -120px 70px #fff, 100px 80px #fff, -35px -150px #fff, 70px 160px #fff, -150px -40px #fff, 55px -100px #fff, 150px -50px #fff, -80px 130px #fff, 120px 110px #fff, -55px -45px #fff;
     animation-name: consume-stars-alt;
     animation-delay: -4.5s;
-    background-position: 40% 40%;
     opacity: 0.3;
   }
   .window.void .headerContent,

package/dist/components/Page/Page.module.css

@@ -4,16 +4,22 @@
     width: 100%;
   }
   .default {
+    display: flex;
+    flex-direction: column;
     width: 90%;
     max-width: var(--page-max-width);
-    backdrop-filter: blur(var(--blur-standard));
     margin: 0 auto;
-    padding: var(--space-8) var(--space-4);
+    padding: 0 var(--space-4) var(--space-4);
+  }
+  .default > *:first-child {
+    min-height: var(--header-height);
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
   }
   @media (max-width: 1024px) {
     .default {
       width: 95%;
-      padding: var(--space-4);
     }
   }
   .fullWidth {

package/dist/components/Popover/Popover.d.ts

@@ -4,7 +4,7 @@ interface PopoverProps {
     content: React.ReactNode;
     isOpen: boolean;
     onClose: () => void;
-    placement?: "bottom-start" | "bottom-end" | "bottom-center" | "top-start" | "top-end" | "top-center";
+    placement?: "bottom-start" | "bottom-end" | "bottom-center" | "top-start" | "top-end" | "top-center" | "right-start" | "right-end" | "right-center" | "left-start" | "left-end" | "left-center";
     offset?: number;
 }
 export declare function Popover({ trigger, content, isOpen, onClose, placement, offset, }: PopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Popover/Popover.js

@@ -19,10 +19,10 @@ export function Popover({ trigger, content, isOpen, onClose, placement = "bottom
         let top = 0;
         let left = 0;
         let origin = "top center";
-        // Edge Config
         const padding = 16;
-        const isTop = placement.startsWith("top");
-        if (isTop) {
+        const side = placement.split("-")[0];
+        const align = placement.split("-")[1];
+        if (side === "top") {
             top = triggerRect.top - contentRect.height - offset;
             origin = "bottom";
             if (top < 0) {
@@ -30,7 +30,7 @@ export function Popover({ trigger, content, isOpen, onClose, placement = "bottom
                 origin = "top";
             }
         }
-        else {
+        else if (side === "bottom") {
             top = triggerRect.bottom + offset;
             origin = "top";
             if (top + contentRect.height > viewportHeight) {
@@ -41,37 +41,68 @@ export function Popover({ trigger, content, isOpen, onClose, placement = "bottom
                 }
             }
         }
-        // Vertical Clamping (Fail-safe)
+        else if (side === "right") {
+            left = triggerRect.right + offset;
+            origin = "left";
+            if (left + contentRect.width > viewportWidth) {
+                left = triggerRect.left - contentRect.width - offset;
+                origin = "right";
+                if (left < 0) {
+                    left = padding;
+                }
+            }
+        }
+        else if (side === "left") {
+            left = triggerRect.left - contentRect.width - offset;
+            origin = "right";
+            if (left < 0) {
+                left = triggerRect.right + offset;
+                origin = "left";
+            }
+        }
+        if (side === "top" || side === "bottom") {
+            if (align === "start") {
+                left = triggerRect.left;
+                origin += " left";
+            }
+            else if (align === "end") {
+                left = triggerRect.right - contentRect.width;
+                origin += " right";
+            }
+            else {
+                left = triggerRect.left + triggerRect.width / 2 - contentRect.width / 2;
+                origin += " center";
+            }
+        }
+        else {
+            if (align === "start") {
+                top = triggerRect.top;
+                origin = "top " + origin;
+            }
+            else if (align === "end") {
+                top = triggerRect.bottom - contentRect.height;
+                origin = "bottom " + origin;
+            }
+            else {
+                top = triggerRect.top + triggerRect.height / 2 - contentRect.height / 2;
+                origin = "center " + origin;
+            }
+        }
         if (top < padding) {
             top = padding;
         }
         if (top + contentRect.height > viewportHeight - padding) {
             top = viewportHeight - contentRect.height - padding;
         }
-        const align = placement.split("-")[1];
-        if (align === "start") {
-            left = triggerRect.left;
-            origin += " left";
-        }
-        else if (align === "end") {
-            left = triggerRect.right - contentRect.width;
-            origin += " right";
-        }
-        else {
-            left = triggerRect.left + triggerRect.width / 2 - contentRect.width / 2;
-            origin += " center";
+        if (left < padding) {
+            left = padding;
         }
-        // Horizontal Clamping
         if (left + contentRect.width > viewportWidth - padding) {
             left = viewportWidth - contentRect.width - padding;
         }
-        if (left < padding) {
-            left = padding;
-        }
         setPosition({ top, left });
         setTransformOrigin(origin);
     }, [isOpen, placement, offset]);
-    // Use useLayoutEffect for layout measurements to prevent flash
     useLayoutEffect(() => {
         if (isOpen) {
             updatePosition();
@@ -83,7 +114,6 @@ export function Popover({ trigger, content, isOpen, onClose, placement = "bottom
             window.removeEventListener("scroll", updatePosition, true);
         };
     }, [isOpen, updatePosition]);
-    // Handle click outside
     useEffect(() => {
         if (!isOpen) {
             return;

package/dist/components/Rating/Rating.d.ts

@@ -0,0 +1,17 @@
+import type { LucideIcon } from "lucide-react";
+import React from "react";
+import type { ControlSize } from "../../styles/types";
+export interface RatingProps {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    count?: number;
+    icon?: LucideIcon;
+    allowHalf?: boolean;
+    size?: ControlSize;
+    readOnly?: boolean;
+    disabled?: boolean;
+    className?: string;
+    "aria-label"?: string;
+}
+export declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Rating/Rating.js

@@ -0,0 +1,126 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Star } from "lucide-react";
+import React, { useCallback, useRef, useState } from "react";
+import { Tooltip } from "../Tooltip/index.js";
+import styles from "./Rating.module.css";
+const iconSizeMap = {
+    sm: 16,
+    md: 20,
+    lg: 32,
+};
+export const Rating = React.forwardRef(function Rating({ value: controlledValue, defaultValue = 0, onValueChange, count = 5, icon: IconComponent = Star, allowHalf = false, size = "md", readOnly = false, disabled = false, className, "aria-label": ariaLabel, }, ref) {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const [hoverValue, setHoverValue] = useState(null);
+    const containerRef = useRef(null);
+    const mergedRef = React.useCallback((node) => {
+        containerRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const isControlled = controlledValue !== undefined;
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const displayValue = hoverValue !== null && !readOnly && !disabled ? hoverValue : currentValue;
+    const iconSize = iconSizeMap[size];
+    const setValue = useCallback((next) => {
+        if (disabled) {
+            return;
+        }
+        if (!isControlled) {
+            setInternalValue(next);
+        }
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
+    }, [disabled, isControlled, onValueChange]);
+    const handleKeyDown = useCallback((e) => {
+        if (disabled || readOnly) {
+            return;
+        }
+        const step = allowHalf ? 0.5 : 1;
+        let newValue = currentValue;
+        switch (e.key) {
+            case "ArrowRight":
+            case "ArrowUp":
+                e.preventDefault();
+                newValue = Math.min(currentValue + step, count);
+                break;
+            case "ArrowLeft":
+            case "ArrowDown":
+                e.preventDefault();
+                newValue = Math.max(currentValue - step, 0);
+                break;
+            case "Home":
+                e.preventDefault();
+                newValue = 0;
+                break;
+            case "End":
+                e.preventDefault();
+                newValue = count;
+                break;
+            default:
+                return;
+        }
+        setValue(newValue);
+        if (containerRef.current) {
+            const selector = `[data-value="${newValue}"]`;
+            const target = containerRef.current.querySelector(selector);
+            target === null || target === void 0 ? void 0 : target.focus();
+        }
+    }, [disabled, readOnly, allowHalf, currentValue, count, setValue]);
+    if (readOnly) {
+        return (_jsx("div", { ref: ref, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : `${currentValue} out of ${count}`, className: clsx(styles.rating, styles[size], className), role: "img", children: Array.from({ length: count }, (_, i) => {
+                const position = i + 1;
+                const isFilled = currentValue >= position;
+                const isHalf = !isFilled && currentValue >= position - 0.5;
+                return (_jsx("span", { className: styles.iconWrapper, children: isHalf ? (_jsxs(_Fragment, { children: [_jsx("span", { className: clsx(styles.icon, styles.unfilled), children: React.createElement(IconComponent, {
+                                    size: iconSize,
+                                    strokeWidth: 2.5,
+                                    fill: "none",
+                                }) }), _jsx("span", { className: clsx(styles.icon, styles.filled, styles.halfClip), children: React.createElement(IconComponent, {
+                                    size: iconSize,
+                                    strokeWidth: 2.5,
+                                    fill: "currentColor",
+                                }) })] })) : (_jsx("span", { className: clsx(styles.icon, isFilled ? styles.filled : styles.unfilled), children: React.createElement(IconComponent, {
+                            size: iconSize,
+                            strokeWidth: 2.5,
+                            fill: isFilled ? "currentColor" : "none",
+                        }) })) }, position));
+            }) }));
+    }
+    return (_jsx("div", { ref: mergedRef, "aria-label": ariaLabel, className: clsx(styles.rating, styles[size], disabled && styles.disabled, className), role: "radiogroup", onMouseLeave: () => setHoverValue(null), children: allowHalf
+            ? Array.from({ length: count }, (_, i) => {
+                const position = i + 1;
+                const halfValue = position - 0.5;
+                const fullValue = position;
+                return (_jsxs("span", { className: styles.iconWrapper, children: [_jsx("span", { "aria-hidden": "true", className: clsx(styles.icon, styles.unfilled), children: React.createElement(IconComponent, {
+                                size: iconSize,
+                                strokeWidth: 2.5,
+                                fill: "none",
+                            }) }), displayValue >= halfValue && (_jsx("span", { "aria-hidden": "true", className: clsx(styles.icon, styles.filled, styles.filledOverlay, displayValue >= fullValue ? undefined : styles.halfClip), children: React.createElement(IconComponent, {
+                                size: iconSize,
+                                strokeWidth: 2.5,
+                                fill: "currentColor",
+                            }) })), _jsx(Tooltip, { content: `${halfValue} out of ${count}`, placement: "top", children: _jsx("button", { "aria-checked": currentValue >= halfValue, "aria-label": `Rate ${halfValue} out of ${count}`, className: clsx(styles.radioButton, styles.halfButton, styles.halfLeft), "data-value": halfValue, disabled: disabled, role: "radio", tabIndex: currentValue === halfValue ||
+                                    (currentValue === 0 && halfValue === 0.5)
+                                    ? 0
+                                    : -1, type: "button", onClick: () => setValue(halfValue), onKeyDown: handleKeyDown, onMouseEnter: () => setHoverValue(halfValue) }) }), _jsx(Tooltip, { content: `${fullValue} out of ${count}`, placement: "top", children: _jsx("button", { "aria-checked": currentValue >= fullValue, "aria-label": `Rate ${fullValue} out of ${count}`, className: clsx(styles.radioButton, styles.halfButton, styles.halfRight), "data-value": fullValue, disabled: disabled, role: "radio", tabIndex: currentValue === fullValue ? 0 : -1, type: "button", onClick: () => setValue(fullValue), onKeyDown: handleKeyDown, onMouseEnter: () => setHoverValue(fullValue) }) })] }, position));
+            })
+            : Array.from({ length: count }, (_, i) => {
+                const position = i + 1;
+                const isFilled = displayValue >= position;
+                const label = `${position} out of ${count}`;
+                return (_jsx(Tooltip, { content: label, placement: "top", children: _jsx("button", { "aria-checked": currentValue >= position, "aria-label": `Rate ${position} out of ${count}`, className: clsx(styles.iconButton, isFilled && styles.filled, !isFilled && styles.unfilled), "data-value": position, disabled: disabled, role: "radio", tabIndex: currentValue === position ||
+                            (currentValue === 0 && position === 1)
+                            ? 0
+                            : -1, type: "button", onClick: () => setValue(position), onKeyDown: handleKeyDown, onMouseEnter: () => setHoverValue(position), children: React.createElement(IconComponent, {
+                            size: iconSize,
+                            strokeWidth: 2.5,
+                            fill: isFilled ? "currentColor" : "none",
+                        }) }) }, position));
+            }) }));
+});
+Rating.displayName = "Rating";