@raydenui/ui 0.9.7 → 0.10.1

package/dist/components/Chart/Chart.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useMemo } from "react";
+import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, BarElement, ArcElement, RadialLinearScale, Filler, Tooltip, Legend, } from "chart.js";
+import { Line, Bar, Pie, Doughnut, Radar, Scatter, Bubble, PolarArea } from "react-chartjs-2";
+import { cn } from "../../utils/cn.js";
+import { chartColors, chartFont } from "./theme.js";
+// Register Chart.js components
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, ArcElement, RadialLinearScale, Filler, Tooltip, Legend);
+/* ─── Default Options ──────────────────────────────────────────────────── */
+function getDefaultOptions(type) {
+    const base = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: true,
+                position: "bottom",
+                labels: {
+                    font: { ...chartFont, size: 12 },
+                    color: chartColors.grey[500],
+                    padding: 16,
+                    usePointStyle: true,
+                    pointStyle: "circle",
+                    boxWidth: 8,
+                    boxHeight: 8,
+                },
+            },
+            tooltip: {
+                backgroundColor: chartColors.grey[900],
+                titleFont: { ...chartFont, weight: "bold", size: 13 },
+                bodyFont: { ...chartFont, size: 12 },
+                cornerRadius: 8,
+                padding: 12,
+                boxPadding: 6,
+                usePointStyle: true,
+            },
+        },
+    };
+    if (type === "line" || type === "bar" || type === "scatter" || type === "bubble") {
+        base.scales = {
+            x: {
+                grid: { color: chartColors.grey[100], drawTicks: false },
+                ticks: { font: chartFont, color: chartColors.grey[400], padding: 8 },
+                border: { display: false },
+            },
+            y: {
+                grid: { color: chartColors.grey[100], drawTicks: false },
+                ticks: { font: chartFont, color: chartColors.grey[400], padding: 8 },
+                border: { display: false },
+            },
+        };
+    }
+    if (type === "line") {
+        base.elements = {
+            line: { tension: 0.4, borderWidth: 2 },
+            point: { radius: 0, hoverRadius: 5, hitRadius: 20 },
+        };
+    }
+    if (type === "bar") {
+        base.elements = {
+            bar: { borderRadius: 4 },
+        };
+    }
+    if (type === "radar") {
+        base.scales = {
+            r: {
+                grid: { color: chartColors.grey[200] },
+                angleLines: { color: chartColors.grey[200] },
+                pointLabels: { font: { ...chartFont, size: 11 }, color: chartColors.grey[500] },
+                ticks: { display: false },
+            },
+        };
+    }
+    if (type === "polar-area") {
+        base.scales = {
+            r: {
+                grid: { color: chartColors.grey[200] },
+                ticks: { display: false },
+            },
+        };
+    }
+    return base;
+}
+/* ─── Merge Options ────────────────────────────────────────────────────── */
+function deepMerge(target, source) {
+    const output = { ...target };
+    for (const key of Object.keys(source)) {
+        if (source[key] &&
+            typeof source[key] === "object" &&
+            !Array.isArray(source[key]) &&
+            target[key] &&
+            typeof target[key] === "object") {
+            output[key] = deepMerge(target[key], source[key]);
+        }
+        else {
+            output[key] = source[key];
+        }
+    }
+    return output;
+}
+/* ─── Chart Component ──────────────────────────────────────────────────── */
+/** Render one dataset value as text for the accessible table. */
+function formatCell(value) {
+    if (value == null)
+        return "—";
+    if (typeof value === "number" || typeof value === "string")
+        return String(value);
+    if (typeof value === "object") {
+        const point = value;
+        if ("y" in point) {
+            const xy = `${String(point.x ?? "")}, ${String(point.y ?? "")}`;
+            return "r" in point ? `${xy}, ${String(point.r)}` : xy;
+        }
+    }
+    return String(value);
+}
+const chartComponentMap = {
+    line: Line,
+    bar: Bar,
+    pie: Pie,
+    doughnut: Doughnut,
+    radar: Radar,
+    scatter: Scatter,
+    bubble: Bubble,
+    "polar-area": PolarArea,
+};
+export const RaydenChart = forwardRef(({ type, data, options, height = 300, width, className, title, summary, dataTable = true, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }, ref) => {
+    const mergedOptions = useMemo(() => deepMerge(getDefaultOptions(type), options ?? {}), [type, options]);
+    const ChartComponent = chartComponentMap[type];
+    const generatedId = useId();
+    const summaryId = summary ? `${generatedId}-summary` : undefined;
+    const tableId = `${generatedId}-table`;
+    // react-chartjs-2 hardcodes role="img" on the canvas. Without a name that is an
+    // unlabelled image; without a tabular equivalent the values are canvas-only.
+    const labels = (data?.labels ?? []);
+    const datasets = (data?.datasets ?? []);
+    // Scatter and bubble data carries no `labels` — its points are {x, y} / {x, y, r}
+    // objects. Keying the table off labels alone left those charts with no alternative
+    // at all, so fall back to one row per point index.
+    const rowCount = labels.length || Math.max(0, ...datasets.map((d) => d.data?.length ?? 0));
+    const pointBased = labels.length === 0;
+    const showTable = dataTable && rowCount > 0 && datasets.length > 0;
+    // Last-resort name so the canvas is never an unnamed role="img". Callers should
+    // pass a meaningful `title`; this only keeps the default case from being nameless.
+    const fallbackName = `${type.replace("-", " ")} chart`;
+    const resolvedName = title ?? ariaLabel ?? fallbackName;
+    const describedBy = [ariaDescribedBy, summaryId, showTable ? tableId : undefined].filter(Boolean).join(" ") ||
+        undefined;
+    return (_jsxs("div", { ref: ref, className: cn("relative", className), style: { height, width }, ...rest, children: [_jsx(ChartComponent, { data: data, options: mergedOptions, "aria-label": ariaLabelledBy ? undefined : resolvedName, "aria-labelledby": ariaLabelledBy, "aria-describedby": describedBy, fallbackContent: _jsx("p", { children: resolvedName }) }), summary && (_jsx("p", { id: summaryId, className: "sr-only", children: summary })), showTable && (_jsxs("table", { id: tableId, className: "sr-only", children: [_jsx("caption", { children: `${resolvedName} — data table` }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: pointBased ? "Point" : "Category" }), datasets.map((set, i) => (_jsx("th", { scope: "col", children: set.label ?? `Series ${i + 1}` }, i)))] }) }), _jsx("tbody", { children: Array.from({ length: rowCount }, (_, row) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: pointBased ? row + 1 : String(labels[row]) }), datasets.map((set, i) => (_jsx("td", { children: formatCell(set.data?.[row]) }, i)))] }, row))) })] }))] }));
+});
+RaydenChart.displayName = "RaydenChart";
+/* ─── Re-export theme utilities ────────────────────────────────────────── */
+export { chartColors, chartFont, hexToRgba, createGradientFill } from "./theme.js";

package/dist/components/Chart/index.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createGradientFill = exports.hexToRgba = exports.chartFont = exports.chartColors = exports.RaydenChart = void 0;
+var Chart_1 = require("./Chart.cjs");
+Object.defineProperty(exports, "RaydenChart", { enumerable: true, get: function () { return Chart_1.RaydenChart; } });
+var theme_1 = require("./theme.cjs");
+Object.defineProperty(exports, "chartColors", { enumerable: true, get: function () { return theme_1.chartColors; } });
+Object.defineProperty(exports, "chartFont", { enumerable: true, get: function () { return theme_1.chartFont; } });
+Object.defineProperty(exports, "hexToRgba", { enumerable: true, get: function () { return theme_1.hexToRgba; } });
+Object.defineProperty(exports, "createGradientFill", { enumerable: true, get: function () { return theme_1.createGradientFill; } });

package/dist/components/Chart/index.js

@@ -0,0 +1,2 @@
+export { RaydenChart } from "./Chart.js";
+export { chartColors, chartFont, hexToRgba, createGradientFill } from "./theme.js";

package/dist/components/Chart/theme.cjs

@@ -0,0 +1,67 @@
+"use strict";
+/**
+ * Rayna UI chart theme — color palette and defaults for Chart.js components.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chartFont = exports.chartColors = void 0;
+exports.hexToRgba = hexToRgba;
+exports.createGradientFill = createGradientFill;
+exports.chartColors = {
+    primary: [
+        "#F56630", // primary-400
+        "#FA9874", // primary-200
+        "#FCB59A", // primary-100
+        "#FCD2C2", // primary-75
+        "#FFECE5", // primary-50
+    ],
+    semantic: [
+        "#F56630", // primary-400 (orange)
+        "#0F973D", // success-400 (green)
+        "#1671D9", // secondary-400 (blue)
+        "#F3A218", // warning-400 (amber)
+        "#D42620", // error-400 (red)
+        "#0BA5EC", // info-400 (cyan)
+    ],
+    extended: [
+        "#F56630",
+        "#0F973D",
+        "#1671D9",
+        "#F3A218",
+        "#D42620",
+        "#0BA5EC",
+        "#475CCC", // indigo
+        "#8D8484", // office-brown
+        "#F77A4A", // primary-300
+        "#40B869", // success-300
+    ],
+    grey: {
+        50: "#F9FAFB",
+        100: "#F0F2F5",
+        200: "#E4E7EC",
+        300: "#D0D5DD",
+        400: "#98A2B3",
+        500: "#667185",
+        700: "#344054",
+        900: "#101928",
+    },
+};
+/** Default font for Chart.js */
+exports.chartFont = {
+    family: "'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif",
+    size: 12,
+    weight: "normal",
+};
+/** Create an rgba version of a hex color */
+function hexToRgba(hex, alpha) {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+/** Generate a gradient fill for area charts */
+function createGradientFill(ctx, color, height) {
+    const gradient = ctx.createLinearGradient(0, 0, 0, height);
+    gradient.addColorStop(0, hexToRgba(color, 0.2));
+    gradient.addColorStop(1, hexToRgba(color, 0.01));
+    return gradient;
+}

package/dist/components/Chart/theme.js

@@ -0,0 +1,62 @@
+/**
+ * Rayna UI chart theme — color palette and defaults for Chart.js components.
+ */
+export const chartColors = {
+    primary: [
+        "#F56630", // primary-400
+        "#FA9874", // primary-200
+        "#FCB59A", // primary-100
+        "#FCD2C2", // primary-75
+        "#FFECE5", // primary-50
+    ],
+    semantic: [
+        "#F56630", // primary-400 (orange)
+        "#0F973D", // success-400 (green)
+        "#1671D9", // secondary-400 (blue)
+        "#F3A218", // warning-400 (amber)
+        "#D42620", // error-400 (red)
+        "#0BA5EC", // info-400 (cyan)
+    ],
+    extended: [
+        "#F56630",
+        "#0F973D",
+        "#1671D9",
+        "#F3A218",
+        "#D42620",
+        "#0BA5EC",
+        "#475CCC", // indigo
+        "#8D8484", // office-brown
+        "#F77A4A", // primary-300
+        "#40B869", // success-300
+    ],
+    grey: {
+        50: "#F9FAFB",
+        100: "#F0F2F5",
+        200: "#E4E7EC",
+        300: "#D0D5DD",
+        400: "#98A2B3",
+        500: "#667185",
+        700: "#344054",
+        900: "#101928",
+    },
+};
+/** Default font for Chart.js */
+export const chartFont = {
+    family: "'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif",
+    size: 12,
+    weight: "normal",
+};
+/** Create an rgba version of a hex color */
+export function hexToRgba(hex, alpha) {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+/** Generate a gradient fill for area charts */
+export function createGradientFill(ctx, color, height) {
+    const gradient = ctx.createLinearGradient(0, 0, 0, height);
+    gradient.addColorStop(0, hexToRgba(color, 0.2));
+    gradient.addColorStop(1, hexToRgba(color, 0.01));
+    return gradient;
+}

package/dist/components/Chip/Chip.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../../utils/cn.cjs");
+const resolveIcon_1 = require("../../utils/resolveIcon.cjs");
+const Icon_1 = require("../Icon/index.cjs");
+exports.Chip = (0, react_1.forwardRef)(({ variant = "input", icon, disabled = false, onClose, onDropdown, className, children, ...rest }, ref) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, cn_1.cn)("inline-flex items-center gap-1 rounded-md border px-2 py-1 text-sm font-medium transition-colors", disabled
+            ? "border-grey-200 bg-grey-100 text-grey-300 cursor-not-allowed"
+            : "border-control-border bg-surface text-on-surface-body cursor-default focus-within:bg-primary-50 focus-within:border-primary-600", className), ...rest, children: [icon && (0, jsx_runtime_1.jsx)("span", { className: "shrink-0 size-4", children: (0, resolveIcon_1.resolveIcon)(icon, "sm") }), (0, jsx_runtime_1.jsx)("span", { children: children }), variant === "input" && onClose && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClose, disabled: disabled, className: (0, cn_1.cn)("shrink-0 size-4 box-content p-1 -m-1 inline-flex items-center justify-center rounded-sm", disabled
+                    ? "cursor-not-allowed text-grey-300"
+                    : "cursor-pointer text-on-surface-muted hover:text-on-surface-body"), "aria-label": "Remove", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "multiply", size: "xs" }) })), variant === "filter" && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onDropdown, disabled: disabled, className: (0, cn_1.cn)("shrink-0 size-4 box-content p-1 -m-1 inline-flex items-center justify-center", disabled
+                    ? "cursor-not-allowed text-grey-300"
+                    : "cursor-pointer text-on-surface-muted hover:text-on-surface-body"), "aria-label": "Open filter", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-down", size: "xs" }) }))] }));
+});
+exports.Chip.displayName = "Chip";

package/dist/components/Chip/Chip.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn.js";
+import { resolveIcon } from "../../utils/resolveIcon.js";
+import { Icon } from "../Icon/index.js";
+export const Chip = forwardRef(({ variant = "input", icon, disabled = false, onClose, onDropdown, className, children, ...rest }, ref) => {
+    return (_jsxs("div", { ref: ref, className: cn("inline-flex items-center gap-1 rounded-md border px-2 py-1 text-sm font-medium transition-colors", disabled
+            ? "border-grey-200 bg-grey-100 text-grey-300 cursor-not-allowed"
+            : "border-control-border bg-surface text-on-surface-body cursor-default focus-within:bg-primary-50 focus-within:border-primary-600", className), ...rest, children: [icon && _jsx("span", { className: "shrink-0 size-4", children: resolveIcon(icon, "sm") }), _jsx("span", { children: children }), variant === "input" && onClose && (_jsx("button", { type: "button", onClick: onClose, disabled: disabled, className: cn("shrink-0 size-4 box-content p-1 -m-1 inline-flex items-center justify-center rounded-sm", disabled
+                    ? "cursor-not-allowed text-grey-300"
+                    : "cursor-pointer text-on-surface-muted hover:text-on-surface-body"), "aria-label": "Remove", children: _jsx(Icon, { name: "multiply", size: "xs" }) })), variant === "filter" && (_jsx("button", { type: "button", onClick: onDropdown, disabled: disabled, className: cn("shrink-0 size-4 box-content p-1 -m-1 inline-flex items-center justify-center", disabled
+                    ? "cursor-not-allowed text-grey-300"
+                    : "cursor-pointer text-on-surface-muted hover:text-on-surface-body"), "aria-label": "Open filter", children: _jsx(Icon, { name: "chevron-down", size: "xs" }) }))] }));
+});
+Chip.displayName = "Chip";

package/dist/components/Chip/index.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chip = void 0;
+var Chip_1 = require("./Chip.cjs");
+Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return Chip_1.Chip; } });

package/dist/components/Chip/index.js

@@ -0,0 +1 @@
+export { Chip } from "./Chip.js";

package/dist/components/Counter/Counter.cjs

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberCounter = exports.Counter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../../utils/cn.cjs");
+/* ─── Icons ────────────────────────────────────────────────────────────── */
+function MinusIcon({ className }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M5 12h14" }) }));
+}
+function PlusIcon({ className }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M12 5v14M5 12h14" }) }));
+}
+/* ─── Size Config ──────────────────────────────────────────────────────── */
+const buttonSize = {
+    sm: "size-8 rounded-[10px]",
+    md: "size-10 rounded-xl",
+    lg: "size-12 rounded-xl",
+};
+const iconSize = {
+    sm: "size-4",
+    md: "size-5",
+    lg: "size-6",
+};
+const containerShape = {
+    rounded: { sm: "rounded-[10px]", md: "rounded-xl", lg: "rounded-xl" },
+    block: { sm: "", md: "", lg: "" },
+    pill: { sm: "rounded-full", md: "rounded-[28px]", lg: "rounded-[28px]" },
+};
+const valueText = {
+    sm: "text-sm w-7",
+    md: "text-sm w-7",
+    lg: "text-base w-7",
+};
+/* ─── Counter ──────────────────────────────────────────────────────────── */
+exports.Counter = (0, react_1.forwardRef)(({ value: controlledValue, onChange, defaultValue = 0, size = "sm", shape = "rounded", min = 0, max = Infinity, step = 1, disabled = false, className, ...rest }, ref) => {
+    // Only update() used to clamp, so min=5 still displayed 0 until first use.
+    const clamp = (0, react_1.useCallback)((n) => Math.min(max, Math.max(min, n)), [min, max]);
+    const [uncontrolled, setUncontrolled] = (0, react_1.useState)(() => clamp(defaultValue));
+    // Keep an uncontrolled value inside bounds when the bounds themselves change.
+    (0, react_1.useEffect)(() => {
+        if (controlledValue === undefined)
+            setUncontrolled((prev) => clamp(prev));
+    }, [clamp, controlledValue]);
+    const val = controlledValue ?? uncontrolled;
+    const update = (0, react_1.useCallback)((next) => {
+        const clamped = Math.min(max, Math.max(min, next));
+        if (controlledValue === undefined)
+            setUncontrolled(clamped);
+        onChange?.(clamped);
+    }, [controlledValue, onChange, min, max]);
+    const canDecrement = val > min;
+    const canIncrement = val < max;
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, cn_1.cn)("inline-flex items-center border border-control-border overflow-hidden", containerShape[shape][size], disabled && "opacity-50", className), ...rest, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", disabled: disabled || !canDecrement, onClick: () => update(val - step), className: (0, cn_1.cn)("flex items-center justify-center p-2.5 text-on-surface cursor-pointer transition-colors hover:bg-grey-100", buttonSize[size], (disabled || !canDecrement) && "text-grey-300 cursor-not-allowed hover:bg-transparent"), "aria-label": "Decrease", children: (0, jsx_runtime_1.jsx)(MinusIcon, { className: iconSize[size] }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center shrink-0", children: (0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("font-medium text-on-surface text-center leading-[1.45]", valueText[size]), children: val }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", disabled: disabled || !canIncrement, onClick: () => update(val + step), className: (0, cn_1.cn)("flex items-center justify-center p-2.5 text-on-surface cursor-pointer transition-colors hover:bg-grey-100", buttonSize[size], (disabled || !canIncrement) && "text-grey-300 cursor-not-allowed hover:bg-transparent"), "aria-label": "Increase", children: (0, jsx_runtime_1.jsx)(PlusIcon, { className: iconSize[size] }) })] }));
+});
+exports.Counter.displayName = "Counter";
+/* ─── NumberCounter ────────────────────────────────────────────────────── */
+const ncSize = {
+    sm: { container: "p-1 rounded-[4px]", text: "text-xs size-4" },
+    md: { container: "p-1 rounded-md size-7", text: "text-sm" },
+    lg: { container: "p-2 rounded-md size-9", text: "text-base" },
+};
+const ncColor = {
+    orange: { bg: "bg-action-primary", text: "text-white" },
+    red: { bg: "bg-error-400", text: "text-white" },
+    grey: { bg: "bg-grey-300", text: "text-white" },
+    white: { bg: "bg-surface", text: "text-on-surface-secondary" },
+};
+exports.NumberCounter = (0, react_1.forwardRef)(({ value, size = "sm", color = "orange", className, ...rest }, ref) => {
+    const s = ncSize[size];
+    const c = ncColor[color];
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, cn_1.cn)("inline-flex items-center justify-center", s.container, c.bg, className), ...rest, children: (0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("font-semibold text-center leading-[1.45] tracking-tight", s.text, c.text), children: value }) }));
+});
+exports.NumberCounter.displayName = "NumberCounter";

package/dist/components/Counter/Counter.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useState } from "react";
+import { cn } from "../../utils/cn.js";
+/* ─── Icons ────────────────────────────────────────────────────────────── */
+function MinusIcon({ className }) {
+    return (_jsx("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", children: _jsx("path", { d: "M5 12h14" }) }));
+}
+function PlusIcon({ className }) {
+    return (_jsx("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", children: _jsx("path", { d: "M12 5v14M5 12h14" }) }));
+}
+/* ─── Size Config ──────────────────────────────────────────────────────── */
+const buttonSize = {
+    sm: "size-8 rounded-[10px]",
+    md: "size-10 rounded-xl",
+    lg: "size-12 rounded-xl",
+};
+const iconSize = {
+    sm: "size-4",
+    md: "size-5",
+    lg: "size-6",
+};
+const containerShape = {
+    rounded: { sm: "rounded-[10px]", md: "rounded-xl", lg: "rounded-xl" },
+    block: { sm: "", md: "", lg: "" },
+    pill: { sm: "rounded-full", md: "rounded-[28px]", lg: "rounded-[28px]" },
+};
+const valueText = {
+    sm: "text-sm w-7",
+    md: "text-sm w-7",
+    lg: "text-base w-7",
+};
+/* ─── Counter ──────────────────────────────────────────────────────────── */
+export const Counter = forwardRef(({ value: controlledValue, onChange, defaultValue = 0, size = "sm", shape = "rounded", min = 0, max = Infinity, step = 1, disabled = false, className, ...rest }, ref) => {
+    // Only update() used to clamp, so min=5 still displayed 0 until first use.
+    const clamp = useCallback((n) => Math.min(max, Math.max(min, n)), [min, max]);
+    const [uncontrolled, setUncontrolled] = useState(() => clamp(defaultValue));
+    // Keep an uncontrolled value inside bounds when the bounds themselves change.
+    useEffect(() => {
+        if (controlledValue === undefined)
+            setUncontrolled((prev) => clamp(prev));
+    }, [clamp, controlledValue]);
+    const val = controlledValue ?? uncontrolled;
+    const update = useCallback((next) => {
+        const clamped = Math.min(max, Math.max(min, next));
+        if (controlledValue === undefined)
+            setUncontrolled(clamped);
+        onChange?.(clamped);
+    }, [controlledValue, onChange, min, max]);
+    const canDecrement = val > min;
+    const canIncrement = val < max;
+    return (_jsxs("div", { ref: ref, className: cn("inline-flex items-center border border-control-border overflow-hidden", containerShape[shape][size], disabled && "opacity-50", className), ...rest, children: [_jsx("button", { type: "button", disabled: disabled || !canDecrement, onClick: () => update(val - step), className: cn("flex items-center justify-center p-2.5 text-on-surface cursor-pointer transition-colors hover:bg-grey-100", buttonSize[size], (disabled || !canDecrement) && "text-grey-300 cursor-not-allowed hover:bg-transparent"), "aria-label": "Decrease", children: _jsx(MinusIcon, { className: iconSize[size] }) }), _jsx("div", { className: "flex items-center justify-center shrink-0", children: _jsx("span", { className: cn("font-medium text-on-surface text-center leading-[1.45]", valueText[size]), children: val }) }), _jsx("button", { type: "button", disabled: disabled || !canIncrement, onClick: () => update(val + step), className: cn("flex items-center justify-center p-2.5 text-on-surface cursor-pointer transition-colors hover:bg-grey-100", buttonSize[size], (disabled || !canIncrement) && "text-grey-300 cursor-not-allowed hover:bg-transparent"), "aria-label": "Increase", children: _jsx(PlusIcon, { className: iconSize[size] }) })] }));
+});
+Counter.displayName = "Counter";
+/* ─── NumberCounter ────────────────────────────────────────────────────── */
+const ncSize = {
+    sm: { container: "p-1 rounded-[4px]", text: "text-xs size-4" },
+    md: { container: "p-1 rounded-md size-7", text: "text-sm" },
+    lg: { container: "p-2 rounded-md size-9", text: "text-base" },
+};
+const ncColor = {
+    orange: { bg: "bg-action-primary", text: "text-white" },
+    red: { bg: "bg-error-400", text: "text-white" },
+    grey: { bg: "bg-grey-300", text: "text-white" },
+    white: { bg: "bg-surface", text: "text-on-surface-secondary" },
+};
+export const NumberCounter = forwardRef(({ value, size = "sm", color = "orange", className, ...rest }, ref) => {
+    const s = ncSize[size];
+    const c = ncColor[color];
+    return (_jsx("div", { ref: ref, className: cn("inline-flex items-center justify-center", s.container, c.bg, className), ...rest, children: _jsx("span", { className: cn("font-semibold text-center leading-[1.45] tracking-tight", s.text, c.text), children: value }) }));
+});
+NumberCounter.displayName = "NumberCounter";

package/dist/components/Counter/index.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberCounter = exports.Counter = void 0;
+var Counter_1 = require("./Counter.cjs");
+Object.defineProperty(exports, "Counter", { enumerable: true, get: function () { return Counter_1.Counter; } });
+Object.defineProperty(exports, "NumberCounter", { enumerable: true, get: function () { return Counter_1.NumberCounter; } });

package/dist/components/Counter/index.js

@@ -0,0 +1 @@
+export { Counter, NumberCounter } from "./Counter.js";