@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-progress-display.js

@@ -0,0 +1,188 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-progress-display/dist/index.js
+import * as React from "react";
+
+// ../progress-display/dist/index.js
+function createProgressDisplay(props) {
+  const { stats, badges } = props;
+  const ariaProps = {
+    role: "region",
+    "aria-label": "Progress statistics"
+  };
+  function getBadgeAriaProps(badge) {
+    const label = badge.isUnlocked ? `${badge.name}: ${badge.description}` : `${badge.name}: ${badge.description} (locked)`;
+    return {
+      "aria-label": label
+    };
+  }
+  return {
+    stats,
+    badges,
+    ariaProps,
+    getBadgeAriaProps
+  };
+}
+var statsGridVariants = cva({
+  base: "grid gap-4",
+  variants: {
+    columns: {
+      "2": "grid-cols-2",
+      "3": "grid-cols-3",
+      "4": "grid-cols-4"
+    }
+  },
+  defaultVariants: {
+    columns: "3"
+  }
+});
+var statCardVariants = cva({
+  base: "rounded-lg border p-4 text-center shadow-sm",
+  variants: {
+    color: {
+      default: "bg-card text-card-foreground",
+      primary: "bg-primary/10 text-primary border-primary/20",
+      success: "bg-success/10 text-success border-success/20",
+      warning: "bg-warning/10 text-warning border-warning/20",
+      destructive: "bg-destructive/10 text-destructive border-destructive/20"
+    }
+  },
+  defaultVariants: {
+    color: "default"
+  }
+});
+var badgeGridVariants = cva({
+  base: "grid gap-4",
+  variants: {
+    columns: {
+      "3": "grid-cols-3",
+      "4": "grid-cols-4",
+      "5": "grid-cols-5"
+    }
+  },
+  defaultVariants: {
+    columns: "4"
+  }
+});
+var badgeItemVariants = cva({
+  base: "flex flex-col items-center gap-2 rounded-lg border p-4 text-center transition-opacity",
+  variants: {
+    state: {
+      unlocked: "opacity-100 bg-card",
+      locked: "opacity-50 bg-muted grayscale"
+    }
+  },
+  defaultVariants: {
+    state: "locked"
+  }
+});
+var progressBarVariants = cva({
+  base: "h-2 w-full overflow-hidden rounded-full bg-secondary",
+  variants: {
+    size: {
+      sm: "h-1",
+      md: "h-2",
+      lg: "h-3"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+// ../react-progress-display/dist/index.js
+import { jsx, jsxs } from "react/jsx-runtime";
+var StatsGrid = React.forwardRef(
+  function StatsGrid2({ stats, badges = [], className, ...props }, ref) {
+    const api = createProgressDisplay({ stats, badges });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(statsGridVariants(), className),
+        ...api.ariaProps,
+        ...props,
+        children: api.stats.map((stat) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: statCardVariants({
+              color: stat.color ?? "default"
+            }),
+            children: [
+              stat.icon && /* @__PURE__ */ jsx("span", { className: "text-2xl", children: stat.icon }),
+              /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: stat.value }),
+              /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: stat.label })
+            ]
+          },
+          stat.label
+        ))
+      }
+    );
+  }
+);
+var ProgressBar = React.forwardRef(
+  function ProgressBar2({ value, max = 100, size, className, ...props }, ref) {
+    const percent = Math.min(100, Math.max(0, value / max * 100));
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(progressBarVariants({ size }), className),
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-full rounded-full bg-primary transition-all",
+            style: { width: `${percent}%` }
+          }
+        )
+      }
+    );
+  }
+);
+var BadgeDisplay = React.forwardRef(
+  function BadgeDisplay2({ badges, className, ...props }, ref) {
+    const api = createProgressDisplay({ stats: [], badges });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(badgeGridVariants(), className),
+        ...props,
+        children: api.badges.map((badge) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: badgeItemVariants({
+              state: badge.isUnlocked ? "unlocked" : "locked"
+            }),
+            ...api.getBadgeAriaProps(badge),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-3xl", children: badge.icon }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: badge.name }),
+              !badge.isUnlocked && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Locked" })
+            ]
+          },
+          badge.name
+        ))
+      }
+    );
+  }
+);
+export {
+  BadgeDisplay,
+  ProgressBar,
+  StatsGrid,
+  badgeGridVariants,
+  badgeItemVariants,
+  progressBarVariants,
+  statCardVariants,
+  statsGridVariants
+};
+//# sourceMappingURL=react-progress-display.js.map

package/dist/react-progress-display.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../progress-display/src/progress-display.ts", "../../progress-display/src/progress-display.styles.ts", "../../react-progress-display/src/progress-display.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport interface StatCardData {\n  label: string\n  value: number\n  icon?: string\n  color?: string\n}\n\nexport interface BadgeData {\n  name: string\n  description: string\n  icon: string\n  unlockedAt?: string\n  isUnlocked: boolean\n}\n\nexport interface ProgressDisplayProps {\n  stats: StatCardData[]\n  badges: BadgeData[]\n  level?: number\n  accuracy?: number\n}\n\nexport interface ProgressDisplayAPI {\n  /** The computed stats array */\n  stats: StatCardData[]\n  /** The badges array */\n  badges: BadgeData[]\n  /** ARIA props for the stats region */\n  ariaProps: Partial<AccessibilityProps>\n  /** Get ARIA props for a specific badge */\n  getBadgeAriaProps: (badge: BadgeData) => Partial<AccessibilityProps>\n}\n\nexport function createProgressDisplay(props: ProgressDisplayProps): ProgressDisplayAPI {\n  const { stats, badges } = props\n\n  const ariaProps: Partial<AccessibilityProps> = {\n    role: 'region',\n    'aria-label': 'Progress statistics',\n  }\n\n  function getBadgeAriaProps(badge: BadgeData): Partial<AccessibilityProps> {\n    const label = badge.isUnlocked\n      ? `${badge.name}: ${badge.description}`\n      : `${badge.name}: ${badge.description} (locked)`\n\n    return {\n      'aria-label': label,\n    }\n  }\n\n  return {\n    stats,\n    badges,\n    ariaProps,\n    getBadgeAriaProps,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const statsGridVariants = cva({\n  base: 'grid gap-4',\n  variants: {\n    columns: {\n      '2': 'grid-cols-2',\n      '3': 'grid-cols-3',\n      '4': 'grid-cols-4',\n    },\n  },\n  defaultVariants: {\n    columns: '3',\n  },\n})\n\nexport const statCardVariants = cva({\n  base: 'rounded-lg border p-4 text-center shadow-sm',\n  variants: {\n    color: {\n      default: 'bg-card text-card-foreground',\n      primary: 'bg-primary/10 text-primary border-primary/20',\n      success: 'bg-success/10 text-success border-success/20',\n      warning: 'bg-warning/10 text-warning border-warning/20',\n      destructive: 'bg-destructive/10 text-destructive border-destructive/20',\n    },\n  },\n  defaultVariants: {\n    color: 'default',\n  },\n})\n\nexport const badgeGridVariants = cva({\n  base: 'grid gap-4',\n  variants: {\n    columns: {\n      '3': 'grid-cols-3',\n      '4': 'grid-cols-4',\n      '5': 'grid-cols-5',\n    },\n  },\n  defaultVariants: {\n    columns: '4',\n  },\n})\n\nexport const badgeItemVariants = cva({\n  base: 'flex flex-col items-center gap-2 rounded-lg border p-4 text-center transition-opacity',\n  variants: {\n    state: {\n      unlocked: 'opacity-100 bg-card',\n      locked: 'opacity-50 bg-muted grayscale',\n    },\n  },\n  defaultVariants: {\n    state: 'locked',\n  },\n})\n\nexport const progressBarVariants = cva({\n  base: 'h-2 w-full overflow-hidden rounded-full bg-secondary',\n  variants: {\n    size: {\n      sm: 'h-1',\n      md: 'h-2',\n      lg: 'h-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createProgressDisplay,\n  statsGridVariants,\n  statCardVariants,\n  badgeGridVariants,\n  badgeItemVariants,\n  progressBarVariants,\n  type StatCardData,\n  type BadgeData,\n} from '@refraction-ui/progress-display'\nimport { cn } from '@refraction-ui/shared'\n\n/* ------------------------------------------------------------------ */\n/*  StatsGrid                                                          */\n/* ------------------------------------------------------------------ */\n\nexport interface StatsGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  stats: StatCardData[]\n  badges?: BadgeData[]\n}\n\nexport const StatsGrid = React.forwardRef<HTMLDivElement, StatsGridProps>(\n  function StatsGrid({ stats, badges = [], className, ...props }, ref) {\n    const api = createProgressDisplay({ stats, badges })\n\n    return (\n      <div\n        ref={ref}\n        className={cn(statsGridVariants(), className)}\n        {...api.ariaProps}\n        {...props}\n      >\n        {api.stats.map((stat) => (\n          <div\n            key={stat.label}\n            className={statCardVariants({\n              color: (stat.color as 'default' | 'primary' | 'success' | 'warning' | 'destructive') ?? 'default',\n            })}\n          >\n            {stat.icon && <span className=\"text-2xl\">{stat.icon}</span>}\n            <div className=\"text-2xl font-bold\">{stat.value}</div>\n            <div className=\"text-sm text-muted-foreground\">{stat.label}</div>\n          </div>\n        ))}\n      </div>\n    )\n  },\n)\n\n/* ------------------------------------------------------------------ */\n/*  ProgressBar                                                        */\n/* ------------------------------------------------------------------ */\n\nexport interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: number\n  max?: number\n  size?: 'sm' | 'md' | 'lg'\n}\n\nexport const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(\n  function ProgressBar({ value, max = 100, size, className, ...props }, ref) {\n    const percent = Math.min(100, Math.max(0, (value / max) * 100))\n\n    return (\n      <div\n        ref={ref}\n        className={cn(progressBarVariants({ size }), className)}\n        role=\"progressbar\"\n        aria-valuenow={value}\n        aria-valuemin={0}\n        aria-valuemax={max}\n        {...props}\n      >\n        <div\n          className=\"h-full rounded-full bg-primary transition-all\"\n          style={{ width: `${percent}%` }}\n        />\n      </div>\n    )\n  },\n)\n\n/* ------------------------------------------------------------------ */\n/*  BadgeDisplay                                                       */\n/* ------------------------------------------------------------------ */\n\nexport interface BadgeDisplayProps extends React.HTMLAttributes<HTMLDivElement> {\n  badges: BadgeData[]\n}\n\nexport const BadgeDisplay = React.forwardRef<HTMLDivElement, BadgeDisplayProps>(\n  function BadgeDisplay({ badges, className, ...props }, ref) {\n    const api = createProgressDisplay({ stats: [], badges })\n\n    return (\n      <div\n        ref={ref}\n        className={cn(badgeGridVariants(), className)}\n        {...props}\n      >\n        {api.badges.map((badge) => (\n          <div\n            key={badge.name}\n            className={badgeItemVariants({\n              state: badge.isUnlocked ? 'unlocked' : 'locked',\n            })}\n            {...api.getBadgeAriaProps(badge)}\n          >\n            <span className=\"text-3xl\">{badge.icon}</span>\n            <span className=\"font-medium\">{badge.name}</span>\n            {!badge.isUnlocked && (\n              <span className=\"text-xs text-muted-foreground\">Locked</span>\n            )}\n          </div>\n        ))}\n      </div>\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["StatsGrid", "ProgressBar", "BadgeDisplay"]
+}

package/dist/react-radial-gauge.js

@@ -0,0 +1,193 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-radial-gauge/dist/index.js
+import * as React from "react";
+
+// ../radial-gauge/dist/index.js
+var GAUGE_SIZE_PX = {
+  sm: 80,
+  md: 120,
+  lg: 160
+};
+function clampValue(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function valueToFraction(value, min, max) {
+  if (max === min) return 0;
+  return clampValue((value - min) / (max - min), 0, 1);
+}
+function gaugeStrokeDashoffset(fraction, circumference) {
+  return circumference * (1 - fraction);
+}
+function resolveZoneTone(value, zones, _max) {
+  if (!zones || zones.length === 0) return "default";
+  const sorted = [...zones].sort((a, b) => a.upTo - b.upTo);
+  for (const zone of sorted) {
+    if (value <= zone.upTo) return zone.tone;
+  }
+  return sorted[sorted.length - 1].tone;
+}
+function createRadialGauge(props) {
+  const { value, min = 0, max = 100, size = "md" } = props;
+  const clamped = clampValue(value, min, max);
+  const ariaProps = {
+    role: "meter",
+    "aria-valuenow": clamped,
+    "aria-valuemin": min,
+    "aria-valuemax": max
+  };
+  const dataAttributes = {
+    "data-size": size,
+    "data-value": String(clamped)
+  };
+  return { ariaProps, dataAttributes };
+}
+var radialGaugeRootVariants = cva({
+  base: "inline-block shrink-0",
+  variants: {
+    size: {
+      sm: "",
+      md: "",
+      lg: ""
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var gaugeTrackClass = "fill-none stroke-muted-foreground/20";
+var gaugeArcClass = "fill-none stroke-current transition-[stroke-dashoffset] duration-300 ease-out";
+var gaugeArcToneVariants = cva({
+  base: "",
+  variants: {
+    tone: {
+      default: "text-foreground",
+      success: "text-emerald-500",
+      warning: "text-amber-500",
+      danger: "text-destructive"
+    }
+  },
+  defaultVariants: {
+    tone: "default"
+  }
+});
+var gaugeLabelClass = "fill-foreground text-center font-semibold";
+var gaugeSublabelClass = "fill-muted-foreground";
+var GAUGE_LABEL_FONT_SIZE = {
+  sm: 14,
+  md: 20,
+  lg: 26
+};
+var GAUGE_SUBLABEL_FONT_SIZE = {
+  sm: 9,
+  md: 11,
+  lg: 13
+};
+
+// ../react-radial-gauge/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var RadialGauge = React.forwardRef(
+  function RadialGauge2({
+    value,
+    min = 0,
+    max = 100,
+    size = "md",
+    thickness = 8,
+    label,
+    sublabel,
+    zones,
+    showValue = true,
+    className,
+    ...props
+  }, ref) {
+    const diameter = GAUGE_SIZE_PX[size];
+    const cx = diameter / 2;
+    const cy = diameter / 2;
+    const r = cx - thickness / 2;
+    const clamped = clampValue(value, min, max);
+    const fraction = valueToFraction(clamped, min, max);
+    const circumference = 2 * Math.PI * r;
+    const dashoffset = gaugeStrokeDashoffset(fraction, circumference);
+    const tone = zones && zones.length > 0 ? resolveZoneTone(clamped, zones, max) : "default";
+    const api = createRadialGauge({ value, min, max, size });
+    const centerLabel = label ?? (showValue ? String(clamped) : null);
+    const labelFontSize = GAUGE_LABEL_FONT_SIZE[size];
+    const sublabelFontSize = GAUGE_SUBLABEL_FONT_SIZE[size];
+    const labelDy = sublabel ? -sublabelFontSize * 0.8 : 0;
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref,
+        width: diameter,
+        height: diameter,
+        viewBox: `0 0 ${diameter} ${diameter}`,
+        role: "meter",
+        "aria-valuenow": Number(api.ariaProps["aria-valuenow"]),
+        "aria-valuemin": Number(api.ariaProps["aria-valuemin"]),
+        "aria-valuemax": Number(api.ariaProps["aria-valuemax"]),
+        className: cn(radialGaugeRootVariants({ size }), className),
+        ...api.dataAttributes,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx,
+              cy,
+              r,
+              strokeWidth: thickness,
+              className: gaugeTrackClass
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx,
+              cy,
+              r,
+              strokeWidth: thickness,
+              strokeDasharray: `${circumference} ${circumference}`,
+              strokeDashoffset: dashoffset,
+              strokeLinecap: "round",
+              transform: `rotate(-90 ${cx} ${cy})`,
+              className: cn(gaugeArcClass, gaugeArcToneVariants({ tone }))
+            }
+          ),
+          centerLabel != null && /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: cx,
+              y: cy,
+              textAnchor: "middle",
+              dominantBaseline: "central",
+              fontSize: labelFontSize,
+              dy: labelDy,
+              className: gaugeLabelClass,
+              children: centerLabel
+            }
+          ),
+          sublabel != null && /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: cx,
+              y: cy,
+              textAnchor: "middle",
+              dominantBaseline: "central",
+              fontSize: sublabelFontSize,
+              dy: labelDy + labelFontSize * 1.1,
+              className: gaugeSublabelClass,
+              children: sublabel
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  RadialGauge
+};
+//# sourceMappingURL=react-radial-gauge.js.map

package/dist/react-radial-gauge.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../radial-gauge/src/radial-gauge.ts", "../../radial-gauge/src/radial-gauge.styles.ts", "../../react-radial-gauge/src/radial-gauge.tsx"],
+  "sourcesContent": ["\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** The visual size of the gauge. */\nexport type GaugeSize = 'sm' | 'md' | 'lg'\n\n/** Tone mapped to a zone range. */\nexport type GaugeTone = 'default' | 'success' | 'warning' | 'danger'\n\n/**\n * A threshold zone that applies a semantic tone when the gauge value falls\n * at or below `upTo`. Zones should be listed in ascending `upTo` order; the\n * first zone whose `upTo >= value` wins.\n */\nexport interface GaugeZone {\n  /** Value up to (and including) which this zone applies. */\n  upTo: number\n  /** Semantic tone for the arc while the value is in this zone. */\n  tone: GaugeTone\n}\n\nexport interface RadialGaugeProps {\n  /** Current gauge value. */\n  value: number\n  /** Minimum possible value. */\n  min?: number\n  /** Maximum possible value. */\n  max?: number\n  /** Visual size. */\n  size?: GaugeSize\n}\n\nexport interface RadialGaugeAPI {\n  /** ARIA attributes to spread on the SVG element (`role=\"meter\"`). */\n  ariaProps: Record<string, string | number>\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n// ---------------------------------------------------------------------------\n// Pixel diameters for each size variant (exported for use in adapters)\n// ---------------------------------------------------------------------------\nexport const GAUGE_SIZE_PX: Record<GaugeSize, number> = {\n  sm: 80,\n  md: 120,\n  lg: 160,\n}\n\n// ---------------------------------------------------------------------------\n// Pure geometry helpers\n// ---------------------------------------------------------------------------\n\n/**\n * Clamp `value` to the inclusive range `[min, max]`.\n */\nexport function clampValue(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max)\n}\n\n/**\n * Map a `value` within `[min, max]` to a fraction in `[0, 1]`.\n * Returns 0 when `min === max` to avoid division by zero.\n */\nexport function valueToFraction(value: number, min: number, max: number): number {\n  if (max === min) return 0\n  return clampValue((value - min) / (max - min), 0, 1)\n}\n\n/**\n * Convert polar coordinates to Cartesian.\n * `angleDeg` is measured clockwise from the positive x-axis (SVG convention).\n */\nexport function polarToCartesian(\n  cx: number,\n  cy: number,\n  r: number,\n  angleDeg: number,\n): { x: number; y: number } {\n  const rad = ((angleDeg - 90) * Math.PI) / 180\n  return {\n    x: cx + r * Math.cos(rad),\n    y: cy + r * Math.sin(rad),\n  }\n}\n\n/**\n * Build an SVG arc path `d` string from `startAngleDeg` to `endAngleDeg`\n * (both measured clockwise from the top / 12-o'clock position).\n *\n * Returns an empty string when the arc span is zero.\n */\nexport function describeArc(\n  cx: number,\n  cy: number,\n  r: number,\n  startAngleDeg: number,\n  endAngleDeg: number,\n): string {\n  const span = endAngleDeg - startAngleDeg\n  if (span === 0) return ''\n\n  // For a full circle we need two arcs to avoid SVG treating start === end as\n  // a no-op.  Shift the end by 0.001° so the path stays valid.\n  const clampedEnd = span >= 360 ? startAngleDeg + 359.999 : endAngleDeg\n\n  const start = polarToCartesian(cx, cy, r, startAngleDeg)\n  const end = polarToCartesian(cx, cy, r, clampedEnd)\n  const largeArc = clampedEnd - startAngleDeg > 180 ? 1 : 0\n\n  return [\n    `M ${start.x} ${start.y}`,\n    `A ${r} ${r} 0 ${largeArc} 1 ${end.x} ${end.y}`,\n  ].join(' ')\n}\n\n/**\n * Compute the `stroke-dashoffset` for a full-circle ring gauge.\n *\n * With `stroke-dasharray=\"circumference circumference\"` and this offset, the\n * visible portion of the stroke equals `fraction × circumference`.\n */\nexport function gaugeStrokeDashoffset(fraction: number, circumference: number): number {\n  return circumference * (1 - fraction)\n}\n\n// ---------------------------------------------------------------------------\n// Zone resolution\n// ---------------------------------------------------------------------------\n\n/**\n * Find the active zone tone for the current `value`.\n * Zones are tested in ascending `upTo` order; the first zone whose\n * `upTo >= value` wins. Falls back to `'default'` when no zone matches.\n */\nexport function resolveZoneTone(\n  value: number,\n  zones: GaugeZone[],\n  _max: number,\n): GaugeTone {\n  if (!zones || zones.length === 0) return 'default'\n\n  // Sort a copy ascending by upTo so callers don't have to pre-sort.\n  const sorted = [...zones].sort((a, b) => a.upTo - b.upTo)\n\n  for (const zone of sorted) {\n    if (value <= zone.upTo) return zone.tone\n  }\n\n  // Value is above all zone thresholds — use the last zone's tone.\n  return sorted[sorted.length - 1].tone\n}\n\n// ---------------------------------------------------------------------------\n// Factory\n// ---------------------------------------------------------------------------\n\n/**\n * Build the framework-agnostic props for a radial gauge element.\n *\n * Returns `role=\"meter\"` plus ARIA value attributes and data attributes;\n * adapters spread these onto their `<svg>` element.\n */\nexport function createRadialGauge(props: RadialGaugeProps): RadialGaugeAPI {\n  const { value, min = 0, max = 100, size = 'md' } = props\n\n  const clamped = clampValue(value, min, max)\n\n  const ariaProps: Record<string, string | number> = {\n    role: 'meter',\n    'aria-valuenow': clamped,\n    'aria-valuemin': min,\n    'aria-valuemax': max,\n  }\n\n  const dataAttributes: Record<string, string> = {\n    'data-size': size,\n    'data-value': String(clamped),\n  }\n\n  return { ariaProps, dataAttributes }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * Root SVG element variants — controls the rendered size via an inline\n * width/height (adapters use GAUGE_SIZE_PX) and sets up the color context.\n */\nexport const radialGaugeRootVariants = cva({\n  base: 'inline-block shrink-0',\n  variants: {\n    size: {\n      sm: '',\n      md: '',\n      lg: '',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\n/**\n * Track (background) circle stroke class.\n * Uses a muted foreground so it sits behind the value arc without competing.\n */\nexport const gaugeTrackClass = 'fill-none stroke-muted-foreground/20'\n\n/**\n * Value arc stroke class — resolved per tone via {@link gaugeArcToneVariants}.\n * `currentColor` stroke picks up the Tailwind text-* class applied by the\n * tone variant so we only need one class-generating helper.\n */\nexport const gaugeArcClass = 'fill-none stroke-current transition-[stroke-dashoffset] duration-300 ease-out'\n\n/**\n * Tone variants for the value arc.  Adapters combine this with `gaugeArcClass`.\n */\nexport const gaugeArcToneVariants = cva({\n  base: '',\n  variants: {\n    tone: {\n      default: 'text-foreground',\n      success: 'text-emerald-500',\n      warning: 'text-amber-500',\n      danger: 'text-destructive',\n    },\n  },\n  defaultVariants: {\n    tone: 'default',\n  },\n})\n\n/** Center label (primary text) classes. */\nexport const gaugeLabelClass = 'fill-foreground text-center font-semibold'\n\n/** Center sub-label (secondary text) classes. */\nexport const gaugeSublabelClass = 'fill-muted-foreground'\n\n/**\n * Font size for the primary label by size variant.\n * Expressed as SVG `font-size` values (px) for use in the `<text>` element.\n */\nexport const GAUGE_LABEL_FONT_SIZE: Record<'sm' | 'md' | 'lg', number> = {\n  sm: 14,\n  md: 20,\n  lg: 26,\n}\n\n/**\n * Font size for the sub-label by size variant.\n */\nexport const GAUGE_SUBLABEL_FONT_SIZE: Record<'sm' | 'md' | 'lg', number> = {\n  sm: 9,\n  md: 11,\n  lg: 13,\n}\n", "import * as React from 'react'\nimport {\n  clampValue,\n  valueToFraction,\n  gaugeStrokeDashoffset,\n  resolveZoneTone,\n  createRadialGauge,\n  radialGaugeRootVariants,\n  gaugeTrackClass,\n  gaugeArcClass,\n  gaugeArcToneVariants,\n  gaugeLabelClass,\n  gaugeSublabelClass,\n  GAUGE_SIZE_PX,\n  GAUGE_LABEL_FONT_SIZE,\n  GAUGE_SUBLABEL_FONT_SIZE,\n  type GaugeSize,\n  type GaugeTone,\n  type GaugeZone,\n} from '@refraction-ui/radial-gauge'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { GaugeSize, GaugeTone, GaugeZone }\n\nexport interface RadialGaugeProps extends React.SVGAttributes<SVGSVGElement> {\n  /** Current value. */\n  value: number\n  /** Minimum value. Defaults to 0. */\n  min?: number\n  /** Maximum value. Defaults to 100. */\n  max?: number\n  /** Visual size of the gauge. Defaults to 'md'. */\n  size?: GaugeSize\n  /** Stroke thickness in px. Defaults to 8. */\n  thickness?: number\n  /** Primary center label. When omitted and `showValue` is true, the numeric value is shown. */\n  label?: React.ReactNode\n  /** Secondary label shown below the primary label. */\n  sublabel?: React.ReactNode\n  /**\n   * Threshold zones that colour the arc based on the current value.\n   * List in ascending `upTo` order for clarity (internally sorted).\n   */\n  zones?: GaugeZone[]\n  /** Show the numeric value in the center when no explicit label is given. Defaults to true. */\n  showValue?: boolean\n  /** Accessible name for the gauge. */\n  'aria-label'?: string\n}\n\n/**\n * RadialGauge — a circular progress / gauge component.\n *\n * Renders an SVG with a background track ring and a value arc whose length is\n * proportional to the current value fraction. Center text shows the value or a\n * custom label. Supports semantic zone colouring (success / warning / danger)\n * so the arc hue communicates health at a glance — ideal for score cards,\n * interview report rings, and dashboard KPIs.\n *\n * Accessibility: `role=\"meter\"` with `aria-valuenow/min/max` on the SVG.\n */\nexport const RadialGauge = React.forwardRef<SVGSVGElement, RadialGaugeProps>(\n  function RadialGauge(\n    {\n      value,\n      min = 0,\n      max = 100,\n      size = 'md',\n      thickness = 8,\n      label,\n      sublabel,\n      zones,\n      showValue = true,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const diameter = GAUGE_SIZE_PX[size]\n    const cx = diameter / 2\n    const cy = diameter / 2\n    // Radius inset by half the stroke width so it stays within the viewBox.\n    const r = cx - thickness / 2\n\n    const clamped = clampValue(value, min, max)\n    const fraction = valueToFraction(clamped, min, max)\n\n    const circumference = 2 * Math.PI * r\n    const dashoffset = gaugeStrokeDashoffset(fraction, circumference)\n\n    const tone = zones && zones.length > 0 ? resolveZoneTone(clamped, zones, max) : 'default'\n\n    const api = createRadialGauge({ value, min, max, size })\n\n    // Primary center content: explicit label wins; else show numeric value if requested.\n    const centerLabel = label ?? (showValue ? String(clamped) : null)\n    const labelFontSize = GAUGE_LABEL_FONT_SIZE[size]\n    const sublabelFontSize = GAUGE_SUBLABEL_FONT_SIZE[size]\n\n    // Vertical offset for the label. When a sublabel is present, nudge up slightly.\n    const labelDy = sublabel ? -sublabelFontSize * 0.8 : 0\n\n    return (\n      <svg\n        ref={ref}\n        width={diameter}\n        height={diameter}\n        viewBox={`0 0 ${diameter} ${diameter}`}\n        role=\"meter\"\n        aria-valuenow={Number(api.ariaProps['aria-valuenow'])}\n        aria-valuemin={Number(api.ariaProps['aria-valuemin'])}\n        aria-valuemax={Number(api.ariaProps['aria-valuemax'])}\n        className={cn(radialGaugeRootVariants({ size }), className)}\n        {...api.dataAttributes}\n        {...props}\n      >\n        {/* Background track */}\n        <circle\n          cx={cx}\n          cy={cy}\n          r={r}\n          strokeWidth={thickness}\n          className={gaugeTrackClass}\n        />\n\n        {/* Value arc — ring style: rotate -90° to start at 12-o'clock */}\n        <circle\n          cx={cx}\n          cy={cy}\n          r={r}\n          strokeWidth={thickness}\n          strokeDasharray={`${circumference} ${circumference}`}\n          strokeDashoffset={dashoffset}\n          strokeLinecap=\"round\"\n          transform={`rotate(-90 ${cx} ${cy})`}\n          className={cn(gaugeArcClass, gaugeArcToneVariants({ tone }))}\n        />\n\n        {/* Center label */}\n        {centerLabel != null && (\n          <text\n            x={cx}\n            y={cy}\n            textAnchor=\"middle\"\n            dominantBaseline=\"central\"\n            fontSize={labelFontSize}\n            dy={labelDy}\n            className={gaugeLabelClass}\n          >\n            {centerLabel}\n          </text>\n        )}\n\n        {/* Sub-label */}\n        {sublabel != null && (\n          <text\n            x={cx}\n            y={cy}\n            textAnchor=\"middle\"\n            dominantBaseline=\"central\"\n            fontSize={sublabelFontSize}\n            dy={labelDy + labelFontSize * 1.1}\n            className={gaugeSublabelClass}\n          >\n            {sublabel}\n          </text>\n        )}\n      </svg>\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["RadialGauge"]
+}

package/dist/react-radio.js

@@ -0,0 +1,169 @@
+import {
+  cn,
+  cva,
+  devWarn
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-radio/dist/index.js
+import * as React from "react";
+
+// ../radio/dist/index.js
+function createRadioGroup(props = {}) {
+  const { value: controlled, defaultValue, onValueChange, name, disabled = false, orientation = "vertical" } = props;
+  let selected = controlled ?? defaultValue;
+  function select(value) {
+    if (disabled) return;
+    selected = value;
+    onValueChange?.(value);
+  }
+  const groupProps = {
+    role: "radiogroup",
+    "aria-orientation": orientation,
+    ...disabled ? { "aria-disabled": true } : {}
+  };
+  function getItemProps(value, itemDisabled) {
+    const isSelected = selected === value;
+    const isDisabled = disabled || itemDisabled;
+    return {
+      role: "radio",
+      "aria-checked": isSelected,
+      "aria-disabled": isDisabled || void 0,
+      tabIndex: isSelected ? 0 : -1,
+      "data-state": isSelected ? "checked" : "unchecked",
+      ...isDisabled ? { "data-disabled": "" } : {},
+      ...name ? { name } : {}
+    };
+  }
+  const keyboardHandlers = {
+    ArrowDown(e) {
+      e.preventDefault();
+    },
+    ArrowUp(e) {
+      e.preventDefault();
+    },
+    ArrowRight(e) {
+      e.preventDefault();
+    },
+    ArrowLeft(e) {
+      e.preventDefault();
+    }
+  };
+  return {
+    state: { get selectedValue() {
+      return selected;
+    } },
+    groupProps,
+    getItemProps,
+    select,
+    keyboardHandlers
+  };
+}
+var radioGroupVariants = cva({
+  base: "flex gap-3",
+  variants: {
+    orientation: {
+      vertical: "flex-col",
+      horizontal: "flex-row"
+    }
+  },
+  defaultVariants: { orientation: "vertical" }
+});
+var radioItemVariants = cva({
+  base: "flex items-center gap-2 cursor-pointer",
+  variants: {
+    disabled: {
+      true: "opacity-50 cursor-not-allowed",
+      false: ""
+    }
+  },
+  defaultVariants: { disabled: "false" }
+});
+var radioCircleVariants = cva({
+  base: "h-4 w-4 rounded-full border border-primary transition-colors",
+  variants: {
+    checked: {
+      true: "border-primary bg-primary",
+      false: "border-input"
+    }
+  },
+  defaultVariants: { checked: "false" }
+});
+
+// ../react-radio/dist/index.js
+var RadioContext = React.createContext(null);
+var RadioGroup = React.forwardRef(
+  function RadioGroup2({ children, className, value: controlledValue, defaultValue, onValueChange, name, disabled = false, orientation = "vertical" }, ref) {
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const isControlled = controlledValue !== void 0;
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const api = createRadioGroup({ value: currentValue, name, disabled, orientation });
+    const handleChange = React.useCallback(
+      (val) => {
+        if (!isControlled) setInternalValue(val);
+        onValueChange?.(val);
+      },
+      [isControlled, onValueChange]
+    );
+    const ctx = React.useMemo(
+      () => ({ value: currentValue, onValueChange: handleChange, name, disabled }),
+      [currentValue, handleChange, name, disabled]
+    );
+    return React.createElement(
+      RadioContext.Provider,
+      { value: ctx },
+      React.createElement(
+        "div",
+        { ref, ...api.groupProps, className: cn(radioGroupVariants({ orientation }), className) },
+        children
+      )
+    );
+  }
+);
+var RadioItem = React.forwardRef(
+  function RadioItem2({ value, children, disabled = false, className }, ref) {
+    const ctx = React.useContext(RadioContext);
+    if (!ctx) {
+      devWarn(
+        "react-radio/radio-item-outside-group",
+        "RadioItem was rendered outside of <RadioGroup>. Wrap it in <RadioGroup>."
+      );
+      throw new Error("RadioItem must be used within RadioGroup");
+    }
+    const isChecked = ctx.value === value;
+    const isDisabled = ctx.disabled || disabled;
+    return React.createElement(
+      "label",
+      {
+        ref,
+        className: cn(radioItemVariants({ disabled: isDisabled ? "true" : "false" }), className),
+        "data-state": isChecked ? "checked" : "unchecked"
+      },
+      React.createElement(
+        "button",
+        {
+          type: "button",
+          role: "radio",
+          "aria-checked": isChecked,
+          "aria-disabled": isDisabled || void 0,
+          tabIndex: isChecked ? 0 : -1,
+          disabled: isDisabled,
+          className: cn(radioCircleVariants({ checked: isChecked ? "true" : "false" })),
+          onClick: () => !isDisabled && ctx.onValueChange(value)
+        },
+        isChecked && React.createElement(
+          "span",
+          { className: "block h-2 w-2 rounded-full bg-primary-foreground mx-auto" }
+        )
+      ),
+      children && React.createElement("span", { className: "text-sm" }, children)
+    );
+  }
+);
+export {
+  RadioGroup,
+  RadioItem,
+  radioCircleVariants,
+  radioGroupVariants,
+  radioItemVariants
+};
+//# sourceMappingURL=react-radio.js.map

package/dist/react-radio.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../radio/src/radio.ts", "../../radio/src/radio.styles.ts", "../../react-radio/src/radio.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport interface RadioOption {\n  value: string\n  label: string\n  disabled?: boolean\n}\n\nexport interface RadioGroupProps {\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  name?: string\n  disabled?: boolean\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport interface RadioGroupAPI {\n  state: { selectedValue: string | undefined }\n  groupProps: Partial<AccessibilityProps> & Record<string, unknown>\n  getItemProps(value: string, disabled?: boolean): Partial<AccessibilityProps> & Record<string, unknown>\n  select(value: string): void\n  keyboardHandlers: Record<string, (e: KeyboardEvent) => void>\n}\n\nexport function createRadioGroup(props: RadioGroupProps = {}): RadioGroupAPI {\n  const { value: controlled, defaultValue, onValueChange, name, disabled = false, orientation = 'vertical' } = props\n  let selected = controlled ?? defaultValue\n\n  function select(value: string) {\n    if (disabled) return\n    selected = value\n    onValueChange?.(value)\n  }\n\n  const groupProps = {\n    role: 'radiogroup' as const,\n    'aria-orientation': orientation,\n    ...(disabled ? { 'aria-disabled': true } : {}),\n  }\n\n  function getItemProps(value: string, itemDisabled?: boolean) {\n    const isSelected = selected === value\n    const isDisabled = disabled || itemDisabled\n    return {\n      role: 'radio' as const,\n      'aria-checked': isSelected,\n      'aria-disabled': isDisabled || undefined,\n      tabIndex: isSelected ? 0 : -1,\n      'data-state': isSelected ? 'checked' : 'unchecked',\n      ...(isDisabled ? { 'data-disabled': '' } : {}),\n      ...(name ? { name } : {}),\n    }\n  }\n\n  const keyboardHandlers: Record<string, (e: KeyboardEvent) => void> = {\n    ArrowDown(e) { e.preventDefault() },\n    ArrowUp(e) { e.preventDefault() },\n    ArrowRight(e) { e.preventDefault() },\n    ArrowLeft(e) { e.preventDefault() },\n  }\n\n  return {\n    state: { get selectedValue() { return selected } },\n    groupProps,\n    getItemProps,\n    select,\n    keyboardHandlers,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const radioGroupVariants = cva({\n  base: 'flex gap-3',\n  variants: {\n    orientation: {\n      vertical: 'flex-col',\n      horizontal: 'flex-row',\n    },\n  },\n  defaultVariants: { orientation: 'vertical' },\n})\n\nexport const radioItemVariants = cva({\n  base: 'flex items-center gap-2 cursor-pointer',\n  variants: {\n    disabled: {\n      true: 'opacity-50 cursor-not-allowed',\n      false: '',\n    },\n  },\n  defaultVariants: { disabled: 'false' },\n})\n\nexport const radioCircleVariants = cva({\n  base: 'h-4 w-4 rounded-full border border-primary transition-colors',\n  variants: {\n    checked: {\n      true: 'border-primary bg-primary',\n      false: 'border-input',\n    },\n  },\n  defaultVariants: { checked: 'false' },\n})\n", "import * as React from 'react'\nimport {\n  createRadioGroup,\n  radioGroupVariants,\n  radioItemVariants,\n  radioCircleVariants,\n  type RadioGroupProps as CoreRadioGroupProps,\n} from '@refraction-ui/radio'\nimport { cn, devWarn } from '@refraction-ui/shared'\n\ninterface RadioContextValue {\n  value: string | undefined\n  onValueChange: (value: string) => void\n  name?: string\n  disabled: boolean\n}\n\nconst RadioContext = React.createContext<RadioContextValue | null>(null)\n\nexport interface RadioGroupProps extends CoreRadioGroupProps {\n  children: React.ReactNode\n  className?: string\n}\n\nexport const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(\n  function RadioGroup({ children, className, value: controlledValue, defaultValue, onValueChange, name, disabled = false, orientation = 'vertical' }: RadioGroupProps, ref) {\n  const [internalValue, setInternalValue] = React.useState(defaultValue)\n  const isControlled = controlledValue !== undefined\n  const currentValue = isControlled ? controlledValue : internalValue\n\n  const api = createRadioGroup({ value: currentValue, name, disabled, orientation })\n\n  const handleChange = React.useCallback(\n    (val: string) => {\n      if (!isControlled) setInternalValue(val)\n      onValueChange?.(val)\n    },\n    [isControlled, onValueChange],\n  )\n\n  const ctx = React.useMemo<RadioContextValue>(\n    () => ({ value: currentValue, onValueChange: handleChange, name, disabled }),\n    [currentValue, handleChange, name, disabled],\n  )\n\n  return React.createElement(\n    RadioContext.Provider,\n    { value: ctx },\n    React.createElement(\n      'div',\n      { ref, ...api.groupProps, className: cn(radioGroupVariants({ orientation }), className) },\n      children,\n    ),\n  )\n  },\n)\n\nexport interface RadioItemProps {\n  value: string\n  children?: React.ReactNode\n  disabled?: boolean\n  className?: string\n}\n\nexport const RadioItem = React.forwardRef<HTMLLabelElement, RadioItemProps>(\n  function RadioItem({ value, children, disabled = false, className }, ref) {\n  const ctx = React.useContext(RadioContext)\n  if (!ctx) {\n    devWarn(\n      'react-radio/radio-item-outside-group',\n      'RadioItem was rendered outside of <RadioGroup>. Wrap it in <RadioGroup>.',\n    )\n    throw new Error('RadioItem must be used within RadioGroup')\n  }\n\n  const isChecked = ctx.value === value\n  const isDisabled = ctx.disabled || disabled\n\n  return React.createElement(\n    'label',\n    {\n      ref,\n      className: cn(radioItemVariants({ disabled: isDisabled ? 'true' : 'false' }), className),\n      'data-state': isChecked ? 'checked' : 'unchecked',\n    },\n    React.createElement(\n      'button',\n      {\n        type: 'button',\n        role: 'radio',\n        'aria-checked': isChecked,\n        'aria-disabled': isDisabled || undefined,\n        tabIndex: isChecked ? 0 : -1,\n        disabled: isDisabled,\n        className: cn(radioCircleVariants({ checked: isChecked ? 'true' : 'false' })),\n        onClick: () => !isDisabled && ctx.onValueChange(value),\n      },\n      isChecked &&\n        React.createElement(\n          'span',\n          { className: 'block h-2 w-2 rounded-full bg-primary-foreground mx-auto' },\n        ),\n    ),\n    children && React.createElement('span', { className: 'text-sm' }, children),\n  )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["RadioGroup", "RadioItem"]
+}