@dev-dga/react 0.11.0 → 0.12.0

package/dist/{chunk-MQN6A3CE.js → chunk-VJV3K53D.js}

@@ -1,9 +1,9 @@
 import {
   Star
-} from "./chunk-CDS4SYEQ.js";
+} from "./chunk-FFGALWM2.js";
 import {
   FieldMessage
-} from "./chunk-E7WQI7PE.js";
+} from "./chunk-E5ZIKIGB.js";
 import {
   useFieldA11y
 } from "./chunk-HN5AFDQA.js";
@@ -21,10 +21,15 @@ var ratingVariants = cva("ddga-rating", {
       sm: "ddga-rating--sm",
       md: "ddga-rating--md",
       lg: "ddga-rating--lg"
+    },
+    tone: {
+      default: "",
+      brand: "ddga-rating--brand"
     }
   },
   defaultVariants: {
-    size: "md"
+    size: "md",
+    tone: "default"
   }
 });
 function clamp(value, min, max) {
@@ -48,6 +53,8 @@ function Rating({
   readOnly = false,
   disabled = false,
   size,
+  tone,
+  icon,
   label,
   helperText,
   errorMessage,
@@ -70,8 +77,7 @@ function Rating({
     error,
     errorMessage,
     helperText,
-    // role=slider / role=img always have an accessible name (label or the
-    // value text), so suppress the no-label dev warning.
+    // role=slider/img always has an accessible name → suppress the no-label warning.
     "aria-label": props["aria-label"] ?? formatValueText(currentValue, max),
     "aria-labelledby": props["aria-labelledby"]
   });
@@ -121,6 +127,7 @@ function Rating({
     event.preventDefault();
     commit(clamp(next, 0, max));
   }
+  const symbol = icon ?? /* @__PURE__ */ jsx(Star, {});
   const stars = Array.from({ length: max }, (_, index) => {
     const level = fillFor(index, displayValue, allowHalf);
     return /* @__PURE__ */ jsxs(
@@ -132,18 +139,19 @@ function Rating({
         onPointerMove: interactive ? (event) => setHover(pointerValue(event, index)) : void 0,
         onClick: interactive ? (event) => commit(pointerValue(event, index)) : void 0,
         children: [
-          /* @__PURE__ */ jsx(Star, { className: "ddga-rating__star-bg", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx("span", { className: "ddga-rating__star-fill", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Star, { className: "ddga-rating__star-fg", "aria-hidden": "true" }) })
+          /* @__PURE__ */ jsx("span", { className: "ddga-rating__star-bg", "aria-hidden": "true", children: symbol }),
+          /* @__PURE__ */ jsx("span", { className: "ddga-rating__star-fill", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "ddga-rating__star-fg", "aria-hidden": "true", children: symbol }) })
         ]
       },
       index
     );
   });
   const sharedProps = {
+    ...props,
     ref: rootRef,
     "data-slot": "rating",
     "data-disabled": disabled || void 0,
-    className: cn(ratingVariants({ size }), hasError && "ddga-rating--error", className),
+    className: cn(ratingVariants({ size, tone }), hasError && "ddga-rating--error", className),
     onPointerLeave: interactive ? () => setHover(null) : void 0
   };
   const labelledBy = label ? `${fieldId}-label` : props["aria-labelledby"];
@@ -179,4 +187,4 @@ export {
   ratingVariants,
   Rating
 };
-//# sourceMappingURL=chunk-MQN6A3CE.js.map
+//# sourceMappingURL=chunk-VJV3K53D.js.map

package/dist/chunk-VJV3K53D.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Rating/Rating.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useState, type ReactNode } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { useFieldA11y, FieldMessage } from '../../field';\nimport { Star } from '../../internal/icons';\n\nconst ratingVariants = cva('ddga-rating', {\n  variants: {\n    size: {\n      sm: 'ddga-rating--sm',\n      md: 'ddga-rating--md',\n      lg: 'ddga-rating--lg',\n    },\n    tone: {\n      default: '',\n      brand: 'ddga-rating--brand',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    tone: 'default',\n  },\n});\n\ninterface RatingProps\n  extends\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'onClick' | 'defaultValue' | 'dir'>,\n    VariantProps<typeof ratingVariants> {\n  /** Controlled value (0…max). `.5` increments are allowed when `allowHalf`. */\n  value?: number;\n  /** Uncontrolled initial value. Defaults to 0. */\n  defaultValue?: number;\n  /** Fires with the chosen rating. */\n  onValueChange?: (value: number) => void;\n\n  /** Number of stars. Defaults to 5. */\n  max?: number;\n  /** Allow half-star (`.5`) precision. */\n  allowHalf?: boolean;\n  /** Display only — no interaction, exposed as `role=\"img\"`. */\n  readOnly?: boolean;\n  /** Non-interactive and dimmed. */\n  disabled?: boolean;\n\n  /** Visible field label. */\n  label?: ReactNode;\n  /** Hint shown below the field. Hidden while an error message is showing. */\n  helperText?: ReactNode;\n  /** Message shown below the field when `error` is true. */\n  errorMessage?: ReactNode;\n  /** Marks the field invalid: sets `aria-invalid` and error styling. */\n  error?: boolean;\n\n  /** SDGA Style axis. `default` (gold) · `brand` (SA green). Recolor per\n   *  instance via the `--ddga-rating-color` CSS variable. */\n  tone?: 'default' | 'brand';\n\n  /** Symbol rendered instead of the default star (e.g. a heart). Used for both\n   *  the empty and filled layers — fill/empty colors come from CSS, so pass an\n   *  icon that uses `currentColor`. Defaults to the SDGA star. */\n  icon?: ReactNode;\n\n  /** Builds the accessible value text / read-only label. Defaults to\n   *  `\"{value} out of {max} stars\"`. Override for localization. */\n  formatValueText?: (value: number, max: number) => string;\n\n  id?: string;\n  className?: string;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nfunction defaultValueText(value: number, max: number): string {\n  return `${value} out of ${max} stars`;\n}\n\n/** Fill level for the star at 0-based `index` given the current value. */\nfunction fillFor(index: number, value: number, allowHalf: boolean): 'full' | 'half' | 'empty' {\n  if (value >= index + 1) return 'full';\n  if (allowHalf && value >= index + 0.5) return 'half';\n  return 'empty';\n}\n\nfunction Rating({\n  id: externalId,\n  value,\n  defaultValue,\n  onValueChange,\n  max = 5,\n  allowHalf = false,\n  readOnly = false,\n  disabled = false,\n  size,\n  tone,\n  icon,\n  label,\n  helperText,\n  errorMessage,\n  error,\n  formatValueText = defaultValueText,\n  className,\n  ...props\n}: RatingProps) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const isControlled = value !== undefined;\n  const [internal, setInternal] = useState<number>(defaultValue ?? 0);\n  const currentValue = isControlled ? value : internal;\n\n  const [hover, setHover] = useState<number | null>(null);\n  const interactive = !readOnly && !disabled;\n  const stepSize = allowHalf ? 0.5 : 1;\n\n  const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } =\n    useFieldA11y({\n      name: 'Rating',\n      id: externalId,\n      label,\n      error,\n      errorMessage,\n      helperText,\n      // role=slider/img always has an accessible name → suppress the no-label warning.\n      'aria-label': props['aria-label'] ?? formatValueText(currentValue, max),\n      'aria-labelledby': props['aria-labelledby'],\n    });\n\n  const displayValue = hover ?? currentValue;\n\n  function commit(next: number) {\n    if (!isControlled) setInternal(next);\n    onValueChange?.(next);\n  }\n\n  function readDir(): 'ltr' | 'rtl' {\n    const el = rootRef.current;\n    if (!el || typeof getComputedStyle !== 'function') return 'ltr';\n    return getComputedStyle(el).direction === 'rtl' ? 'rtl' : 'ltr';\n  }\n\n  /** Value implied by the pointer position over star `index`. */\n  function pointerValue(event: React.PointerEvent | React.MouseEvent, index: number): number {\n    const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();\n    let fraction = rect.width ? (event.clientX - rect.left) / rect.width : 1;\n    if (readDir() === 'rtl') fraction = 1 - fraction;\n    if (allowHalf) return index + (fraction <= 0.5 ? 0.5 : 1);\n    return index + 1;\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n    if (!interactive) return;\n    const rtl = readDir() === 'rtl';\n    let next: number | null = null;\n    switch (event.key) {\n      case 'ArrowUp':\n        next = currentValue + stepSize;\n        break;\n      case 'ArrowDown':\n        next = currentValue - stepSize;\n        break;\n      case 'ArrowRight':\n        next = currentValue + (rtl ? -stepSize : stepSize);\n        break;\n      case 'ArrowLeft':\n        next = currentValue + (rtl ? stepSize : -stepSize);\n        break;\n      case 'Home':\n        next = 0;\n        break;\n      case 'End':\n        next = max;\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    commit(clamp(next, 0, max));\n  }\n\n  const symbol = icon ?? <Star />;\n\n  const stars = Array.from({ length: max }, (_, index) => {\n    const level = fillFor(index, displayValue, allowHalf);\n    return (\n      <span\n        key={index}\n        data-slot=\"rating-star\"\n        data-fill={level}\n        className=\"ddga-rating__star\"\n        onPointerMove={interactive ? (event) => setHover(pointerValue(event, index)) : undefined}\n        onClick={interactive ? (event) => commit(pointerValue(event, index)) : undefined}\n      >\n        <span className=\"ddga-rating__star-bg\" aria-hidden=\"true\">\n          {symbol}\n        </span>\n        <span className=\"ddga-rating__star-fill\" aria-hidden=\"true\">\n          <span className=\"ddga-rating__star-fg\" aria-hidden=\"true\">\n            {symbol}\n          </span>\n        </span>\n      </span>\n    );\n  });\n\n  const sharedProps = {\n    ...props,\n    ref: rootRef,\n    'data-slot': 'rating',\n    'data-disabled': disabled || undefined,\n    className: cn(ratingVariants({ size, tone }), hasError && 'ddga-rating--error', className),\n    onPointerLeave: interactive ? () => setHover(null) : undefined,\n  };\n\n  // Name precedence: visible label → consumer aria-labelledby/label → generic.\n  const labelledBy = label ? `${fieldId}-label` : props['aria-labelledby'];\n  const ariaLabel = labelledBy ? undefined : (props['aria-label'] ?? 'Rating');\n\n  return (\n    <div data-slot=\"rating-field\" className=\"ddga-field\">\n      {label && (\n        <span id={`${fieldId}-label`} className=\"ddga-rating__label\">\n          {label}\n        </span>\n      )}\n\n      {readOnly ? (\n        <div {...sharedProps} role=\"img\" aria-label={formatValueText(currentValue, max)}>\n          {stars}\n        </div>\n      ) : (\n        <div\n          {...sharedProps}\n          role=\"slider\"\n          id={fieldId}\n          tabIndex={disabled ? -1 : 0}\n          aria-valuemin={0}\n          aria-valuemax={max}\n          aria-valuenow={currentValue}\n          aria-valuetext={formatValueText(currentValue, max)}\n          aria-labelledby={labelledBy}\n          aria-label={ariaLabel}\n          aria-invalid={controlProps['aria-invalid']}\n          aria-describedby={controlProps['aria-describedby']}\n          aria-disabled={disabled || undefined}\n          onKeyDown={handleKeyDown}\n        >\n          {stars}\n        </div>\n      )}\n\n      {hasErrorMessage && (\n        <FieldMessage id={errorId} variant=\"error\">\n          {errorMessage}\n        </FieldMessage>\n      )}\n      {hasHelper && (\n        <FieldMessage id={helperId} variant=\"helper\">\n          {helperText}\n        </FieldMessage>\n      )}\n    </div>\n  );\n}\n\nexport { Rating, ratingVariants };\nexport type { RatingProps };\n"],"mappings":"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","names":[]}

package/dist/chunk-VMR4KVFM.cjs

@@ -0,0 +1 @@
+"use strict";//# sourceMappingURL=chunk-VMR4KVFM.cjs.map

package/dist/chunk-VMR4KVFM.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-VMR4KVFM.cjs"],"names":[],"mappings":"AAAA","file":"/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-VMR4KVFM.cjs"}

package/dist/{chunk-JWUYPAFC.cjs → chunk-VN2YHNUE.cjs}

@@ -1,10 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
 
-var _chunkIKWD2OENcjs = require('./chunk-IKWD2OEN.cjs');
 
 
-var _chunkN4FHLSNVcjs = require('./chunk-N4FHLSNV.cjs');
+var _chunkYS2JJ73Mcjs = require('./chunk-YS2JJ73M.cjs');
+
+
+var _chunk3UT22WQMcjs = require('./chunk-3UT22WQM.cjs');
 
 
 var _chunkNH3KGR65cjs = require('./chunk-NH3KGR65.cjs');
@@ -19,16 +21,26 @@ var _jsxruntime = require('react/jsx-runtime');
 var numberInputVariants = _classvarianceauthority.cva.call(void 0, "ddga-number-input", {
   variants: {
     size: {
-      sm: "ddga-number-input--sm",
       md: "ddga-number-input--md",
       lg: "ddga-number-input--lg"
     },
+    variant: {
+      default: "ddga-number-input--default",
+      "filled-lighter": "ddga-number-input--filled-lighter",
+      "filled-darker": "ddga-number-input--filled-darker"
+    },
+    stepperVariant: {
+      solid: "",
+      subtle: "ddga-number-input--steppers-subtle"
+    },
     error: {
       true: "ddga-number-input--error"
     }
   },
   defaultVariants: {
-    size: "md"
+    size: "lg",
+    variant: "default",
+    stepperVariant: "solid"
   }
 });
 function clamp(value, min, max) {
@@ -50,6 +62,8 @@ function NumberInput({
   max,
   step = 1,
   size,
+  variant,
+  stepperVariant,
   hideControls = false,
   decrementLabel = "Decrease",
   incrementLabel = "Increase",
@@ -59,6 +73,7 @@ function NumberInput({
   error,
   required,
   disabled,
+  readOnly,
   className,
   onBlur,
   onKeyDown,
@@ -71,6 +86,7 @@ function NumberInput({
   const allowDecimal = !Number.isInteger(step);
   const allowNegative = min == null || min < 0;
   const displayValue = _nullishCoalesce(draft, () => ( (numericValue == null ? "" : formatNumber(numericValue))));
+  const locked = disabled || readOnly;
   const allowedPattern = new RegExp(
     `^${allowNegative ? "-?" : ""}\\d*${allowDecimal ? "(\\.\\d*)?" : ""}$`
   );
@@ -112,7 +128,7 @@ function NumberInput({
     setDraft(null);
   }
   function handleKeyDown(event) {
-    if (!disabled) {
+    if (!locked) {
       if (event.key === "ArrowUp") {
         event.preventDefault();
         stepBy(1);
@@ -127,26 +143,29 @@ function NumberInput({
   const atMax = max != null && numericValue != null && numericValue >= max;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { "data-slot": "number-input-field", className: "ddga-field", children: [
     label && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { htmlFor: fieldId, className: "ddga-number-input__label", children: [
-      label,
-      required && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "aria-hidden": "true", className: "ddga-number-input__required", children: "*" })
+      required && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "aria-hidden": "true", className: "ddga-number-input__required", children: "*" }),
+      label
     ] }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
       {
         "data-slot": "number-input-control",
-        className: _chunkV6MXOJQ4cjs.cn.call(void 0, numberInputVariants({ size, error: hasError }), className),
+        className: _chunkV6MXOJQ4cjs.cn.call(void 0, 
+          numberInputVariants({ size, variant, stepperVariant, error: hasError }),
+          className
+        ),
         children: [
           !hideControls && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "button",
             {
               type: "button",
-              "data-slot": "number-input-decrement",
-              className: "ddga-number-input__step ddga-number-input__step--decrement",
-              "aria-label": decrementLabel,
-              onClick: () => stepBy(-1),
-              disabled: disabled || atMin,
+              "data-slot": "number-input-increment",
+              className: "ddga-number-input__step ddga-number-input__step--increment",
+              "aria-label": incrementLabel,
+              onClick: () => stepBy(1),
+              disabled: locked || atMax,
               tabIndex: -1,
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkIKWD2OENcjs.Minus, { "aria-hidden": "true" })
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.Plus, { "aria-hidden": "true" })
             }
           ),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -159,6 +178,7 @@ function NumberInput({
               value: displayValue,
               required,
               disabled,
+              readOnly,
               onChange: handleChange,
               onBlur: handleBlur,
               onKeyDown: handleKeyDown,
@@ -170,20 +190,20 @@ function NumberInput({
             "button",
             {
               type: "button",
-              "data-slot": "number-input-increment",
-              className: "ddga-number-input__step ddga-number-input__step--increment",
-              "aria-label": incrementLabel,
-              onClick: () => stepBy(1),
-              disabled: disabled || atMax,
+              "data-slot": "number-input-decrement",
+              className: "ddga-number-input__step ddga-number-input__step--decrement",
+              "aria-label": decrementLabel,
+              onClick: () => stepBy(-1),
+              disabled: locked || atMin,
               tabIndex: -1,
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkIKWD2OENcjs.Plus, { "aria-hidden": "true" })
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.Minus, { "aria-hidden": "true" })
             }
           )
         ]
       }
     ),
-    hasErrorMessage && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkN4FHLSNVcjs.FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
-    hasHelper && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkN4FHLSNVcjs.FieldMessage, { id: helperId, variant: "helper", children: helperText })
+    hasErrorMessage && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3UT22WQMcjs.FieldMessage, { id: errorId, variant: "error", icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.AlertCircle, { width: 16, height: 16 }), children: errorMessage }),
+    hasHelper && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3UT22WQMcjs.FieldMessage, { id: helperId, variant: "helper", icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.Info, { width: 16, height: 16 }), children: helperText })
   ] });
 }
 
@@ -191,4 +211,4 @@ function NumberInput({
 
 
 exports.numberInputVariants = numberInputVariants; exports.NumberInput = NumberInput;
-//# sourceMappingURL=chunk-JWUYPAFC.cjs.map
+//# sourceMappingURL=chunk-VN2YHNUE.cjs.map

package/dist/chunk-VN2YHNUE.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-VN2YHNUE.cjs","../src/components/NumberInput/NumberInput.tsx"],"names":[],"mappings":"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","file":"/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-VN2YHNUE.cjs","sourcesContent":[null,"'use client';\n\nimport { useState, type ReactNode } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { useFieldA11y, FieldMessage } from '../../field';\nimport { Plus, Minus, Info, AlertCircle } from '../../internal/icons';\n\n// Applied to the *control* (the bordered box housing the ＋ button, the field\n// and the − button). Aligned to DGA Platforms Code \"Number Input\": Medium 32 /\n// Large 40, three fill styles, gray-400 border — the same field model as\n// TextInput, plus the SDGA Input Prefix-Suffix ± steppers.\nconst numberInputVariants = cva('ddga-number-input', {\n  variants: {\n    size: {\n      md: 'ddga-number-input--md',\n      lg: 'ddga-number-input--lg',\n    },\n    variant: {\n      default: 'ddga-number-input--default',\n      'filled-lighter': 'ddga-number-input--filled-lighter',\n      'filled-darker': 'ddga-number-input--filled-darker',\n    },\n    stepperVariant: {\n      solid: '',\n      subtle: 'ddga-number-input--steppers-subtle',\n    },\n    error: {\n      true: 'ddga-number-input--error',\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n    variant: 'default',\n    stepperVariant: 'solid',\n  },\n});\n\ninterface NumberInputProps\n  extends\n    Omit<\n      React.ComponentProps<'input'>,\n      'value' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'min' | 'max' | 'step'\n    >,\n    VariantProps<typeof numberInputVariants> {\n  /** Controlled value. `null` represents an empty field. */\n  value?: number | null;\n  /** Uncontrolled initial value. */\n  defaultValue?: number | null;\n  /** Fires with the parsed value, or `null` when the field is cleared. */\n  onValueChange?: (value: number | null) => void;\n\n  /** Lower bound. Clamped on blur and at the stepper buttons. */\n  min?: number;\n  /** Upper bound. Clamped on blur and at the stepper buttons. */\n  max?: number;\n  /** Stepper / ArrowUp-Down increment. Defaults to 1. */\n  step?: number;\n\n  /** Hide the ＋ / − buttons (keyboard + typing only). */\n  hideControls?: boolean;\n  /** Accessible label for the decrement button. Defaults to `'Decrease'`. */\n  decrementLabel?: string;\n  /** Accessible label for the increment button. Defaults to `'Increase'`. */\n  incrementLabel?: string;\n\n  /** Visible field label, auto-associated to the input via `htmlFor`/`id`. */\n  label?: ReactNode;\n  /** Hint shown below the field. Hidden while an error message is showing. */\n  helperText?: ReactNode;\n  /** Message shown below the field when `error` is true. */\n  errorMessage?: ReactNode;\n  /** Marks the field invalid: sets `aria-invalid` and error styling. */\n  error?: boolean;\n}\n\nfunction clamp(value: number, min: number | undefined, max: number | undefined): number {\n  let next = value;\n  if (min != null) next = Math.max(min, next);\n  if (max != null) next = Math.min(max, next);\n  return next;\n}\n\n// `String(n)` switches to exponential notation for very small/large magnitudes\n// (e.g. `String(2e-7)` → \"2e-7\"), which looks broken in a field and contradicts\n// our input filter (which rejects \"e\"). Format to a plain decimal; values still\n// round to float64 precision (~15–17 sig digits) — arbitrary precision is out of scope.\nfunction formatNumber(value: number): string {\n  if (!Number.isFinite(value)) return '';\n  return value.toLocaleString('en-US', { useGrouping: false, maximumFractionDigits: 20 });\n}\n\nfunction NumberInput({\n  id: externalId,\n  value,\n  defaultValue,\n  onValueChange,\n  min,\n  max,\n  step = 1,\n  size,\n  variant,\n  stepperVariant,\n  hideControls = false,\n  decrementLabel = 'Decrease',\n  incrementLabel = 'Increase',\n  label,\n  helperText,\n  errorMessage,\n  error,\n  required,\n  disabled,\n  readOnly,\n  className,\n  onBlur,\n  onKeyDown,\n  ...props\n}: NumberInputProps) {\n  const isControlled = value !== undefined;\n  const [internal, setInternal] = useState<number | null>(defaultValue ?? null);\n  const numericValue = isControlled ? value : internal;\n\n  // While focused we keep the raw text so partial input (\"-\", \"1.\") survives a\n  // re-render; `null` means \"show the canonical numeric value\".\n  const [draft, setDraft] = useState<string | null>(null);\n\n  const allowDecimal = !Number.isInteger(step);\n  const allowNegative = min == null || min < 0;\n  const displayValue = draft ?? (numericValue == null ? '' : formatNumber(numericValue));\n  const locked = disabled || readOnly;\n\n  const allowedPattern = new RegExp(\n    `^${allowNegative ? '-?' : ''}\\\\d*${allowDecimal ? '(\\\\.\\\\d*)?' : ''}$`,\n  );\n\n  function commit(next: number | null) {\n    if (!isControlled) setInternal(next);\n    onValueChange?.(next);\n  }\n\n  const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } =\n    useFieldA11y({\n      name: 'NumberInput',\n      id: externalId,\n      label,\n      error,\n      errorMessage,\n      helperText,\n      'aria-label': props['aria-label'],\n      'aria-labelledby': props['aria-labelledby'],\n    });\n\n  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {\n    const raw = event.target.value;\n    // Reject anything that isn't valid (possibly partial) numeric input;\n    // returning without a state update reverts the controlled input.\n    if (!allowedPattern.test(raw)) return;\n    setDraft(raw);\n    if (raw.trim() === '') {\n      commit(null);\n      return;\n    }\n    const parsed = Number(raw);\n    if (Number.isFinite(parsed)) commit(parsed);\n  }\n\n  function handleBlur(event: React.FocusEvent<HTMLInputElement>) {\n    if (numericValue != null) commit(clamp(numericValue, min, max));\n    setDraft(null);\n    onBlur?.(event);\n  }\n\n  function stepBy(direction: 1 | -1) {\n    const base = numericValue ?? (direction > 0 ? (min ?? 0) : (max ?? 0));\n    const next = clamp(base + direction * step, min, max);\n    // Avoid floating-point dust from repeated decimal steps (0.1 + 0.2…).\n    const rounded = allowDecimal ? Number(next.toFixed(10)) : next;\n    commit(rounded);\n    setDraft(null);\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (!locked) {\n      if (event.key === 'ArrowUp') {\n        event.preventDefault();\n        stepBy(1);\n      } else if (event.key === 'ArrowDown') {\n        event.preventDefault();\n        stepBy(-1);\n      }\n    }\n    onKeyDown?.(event);\n  }\n\n  const atMin = min != null && numericValue != null && numericValue <= min;\n  const atMax = max != null && numericValue != null && numericValue >= max;\n\n  return (\n    <div data-slot=\"number-input-field\" className=\"ddga-field\">\n      {label && (\n        <label htmlFor={fieldId} className=\"ddga-number-input__label\">\n          {required && (\n            <span aria-hidden=\"true\" className=\"ddga-number-input__required\">\n              *\n            </span>\n          )}\n          {label}\n        </label>\n      )}\n      <div\n        data-slot=\"number-input-control\"\n        className={cn(\n          numberInputVariants({ size, variant, stepperVariant, error: hasError }),\n          className,\n        )}\n      >\n        {/* SDGA default order: ＋ leads, − trails. */}\n        {!hideControls && (\n          <button\n            type=\"button\"\n            data-slot=\"number-input-increment\"\n            className=\"ddga-number-input__step ddga-number-input__step--increment\"\n            aria-label={incrementLabel}\n            onClick={() => stepBy(1)}\n            disabled={locked || atMax}\n            tabIndex={-1}\n          >\n            <Plus aria-hidden=\"true\" />\n          </button>\n        )}\n        <input\n          {...props}\n          {...controlProps}\n          // type=text (not number): we own the steppers and keep digits Latin +\n          // LTR regardless of locale, sidestepping the native spinner.\n          type=\"text\"\n          inputMode={allowDecimal ? 'decimal' : 'numeric'}\n          value={displayValue}\n          required={required}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n          data-slot=\"number-input\"\n          className=\"ddga-number-input__field\"\n        />\n        {!hideControls && (\n          <button\n            type=\"button\"\n            data-slot=\"number-input-decrement\"\n            className=\"ddga-number-input__step ddga-number-input__step--decrement\"\n            aria-label={decrementLabel}\n            onClick={() => stepBy(-1)}\n            disabled={locked || atMin}\n            tabIndex={-1}\n          >\n            <Minus aria-hidden=\"true\" />\n          </button>\n        )}\n      </div>\n      {hasErrorMessage && (\n        <FieldMessage id={errorId} variant=\"error\" icon={<AlertCircle width={16} height={16} />}>\n          {errorMessage}\n        </FieldMessage>\n      )}\n      {hasHelper && (\n        <FieldMessage id={helperId} variant=\"helper\" icon={<Info width={16} height={16} />}>\n          {helperText}\n        </FieldMessage>\n      )}\n    </div>\n  );\n}\n\nexport { NumberInput, numberInputVariants };\nexport type { NumberInputProps };\n"]}

package/dist/{chunk-GVND3JE3.js → chunk-VRPFA4CN.js}

@@ -3,7 +3,7 @@ import {
   Check,
   Inbox,
   Search
-} from "./chunk-CDS4SYEQ.js";
+} from "./chunk-FFGALWM2.js";
 import {
   cn
 } from "./chunk-7NTT2UXP.js";
@@ -126,4 +126,4 @@ export {
   EmptyStateDescription,
   EmptyStateActions
 };
-//# sourceMappingURL=chunk-GVND3JE3.js.map
+//# sourceMappingURL=chunk-VRPFA4CN.js.map

package/dist/chunk-VYP5GX57.cjs

@@ -0,0 +1,167 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkFQLVTLUIcjs = require('./chunk-FQLVTLUI.cjs');
+
+
+var _chunkV6MXOJQ4cjs = require('./chunk-V6MXOJQ4.cjs');
+
+// src/components/SaudiRiyal/SaudiRiyal.tsx
+var _react = require('react');
+var _radixui = require('radix-ui');
+var _classvarianceauthority = require('class-variance-authority');
+var _jsxruntime = require('react/jsx-runtime');
+var saudiRiyalSymbolVariants = _classvarianceauthority.cva.call(void 0, "ddga-riyal-symbol", {
+  variants: {
+    size: {
+      "2xs": "ddga-riyal-symbol--2xs",
+      xs: "ddga-riyal-symbol--xs",
+      sm: "ddga-riyal-symbol--sm",
+      base: "ddga-riyal-symbol--base",
+      lg: "ddga-riyal-symbol--lg",
+      xl: "ddga-riyal-symbol--xl",
+      "2xl": "ddga-riyal-symbol--2xl",
+      "3xl": "ddga-riyal-symbol--3xl"
+    },
+    tone: {
+      default: "",
+      muted: "ddga-riyal-symbol--muted",
+      brand: "ddga-riyal-symbol--brand",
+      success: "ddga-riyal-symbol--success",
+      error: "ddga-riyal-symbol--error",
+      inverted: "ddga-riyal-symbol--inverted"
+    },
+    appearance: {
+      plain: "",
+      coin: "ddga-riyal-symbol--coin"
+    }
+  },
+  defaultVariants: { tone: "default", appearance: "plain" }
+});
+var saudiRiyalVariants = _classvarianceauthority.cva.call(void 0, "ddga-riyal", {
+  variants: {
+    size: {
+      "2xs": "ddga-riyal--2xs",
+      xs: "ddga-riyal--xs",
+      sm: "ddga-riyal--sm",
+      base: "ddga-riyal--base",
+      lg: "ddga-riyal--lg",
+      xl: "ddga-riyal--xl",
+      "2xl": "ddga-riyal--2xl",
+      "3xl": "ddga-riyal--3xl"
+    },
+    tone: {
+      default: "",
+      muted: "ddga-riyal--muted",
+      brand: "ddga-riyal--brand",
+      success: "ddga-riyal--success",
+      error: "ddga-riyal--error",
+      inverted: "ddga-riyal--inverted"
+    }
+  },
+  defaultVariants: { tone: "default" }
+});
+var LABELS = { ltr: "Saudi Riyal", rtl: "\u0631\u064A\u0627\u0644 \u0633\u0639\u0648\u062F\u064A" };
+function SaudiRiyalSymbol({
+  size,
+  tone,
+  appearance,
+  className,
+  role,
+  "aria-label": ariaLabel,
+  "aria-hidden": ariaHidden,
+  ...props
+}) {
+  const ctx = _react.useContext.call(void 0, _chunkFQLVTLUIcjs.DgaContext);
+  const isHidden = ariaHidden === true || ariaHidden === "true";
+  const label = isHidden ? void 0 : _nullishCoalesce(ariaLabel, () => ( LABELS[_nullishCoalesce(_optionalChain([ctx, 'optionalAccess', _ => _.dir]), () => ( "ltr"))]));
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "svg",
+    {
+      "data-slot": "saudi-riyal-symbol",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 1124.14 1256.39",
+      fill: "currentColor",
+      role: isHidden ? void 0 : _nullishCoalesce(role, () => ( "img")),
+      "aria-label": label,
+      "aria-hidden": isHidden || void 0,
+      className: _chunkV6MXOJQ4cjs.cn.call(void 0, saudiRiyalSymbolVariants({ size, tone, appearance }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M699.62,1113.02h0c-20.06,44.48-33.32,92.75-38.4,143.37l424.51-90.24c20.06-44.47,33.31-92.75,38.4-143.37l-424.51,90.24Z" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M1085.73,895.8c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.33v-135.2l292.27-62.11c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.27V66.13c-50.67,28.45-95.67,66.32-132.25,110.99v403.35l-132.25,28.11V0c-50.67,28.44-95.67,66.32-132.25,110.99v525.69l-295.91,62.88c-20.06,44.47-33.33,92.75-38.42,143.37l334.33-71.05v170.26l-358.3,76.14c-20.06,44.47-33.32,92.75-38.4,143.37l375.04-79.7c30.53-6.35,56.77-24.4,73.83-49.24l68.78-101.97v-.02c7.14-10.55,11.3-23.27,11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z" })
+      ]
+    }
+  );
+}
+var BIDI_MARKS = new RegExp(`[${String.fromCharCode(8206, 8207, 1564)}]`, "g");
+function formatParts(value, locale, numerals, decimals) {
+  if (!Number.isFinite(value)) return { sign: "", number: String(value) };
+  const loc = numerals === "auto" ? locale : `${locale}-u-nu-${numerals}`;
+  const opts = decimals != null ? { minimumFractionDigits: decimals, maximumFractionDigits: decimals } : {};
+  let nf;
+  try {
+    nf = new Intl.NumberFormat(loc, opts);
+  } catch (e) {
+    nf = new Intl.NumberFormat(void 0, opts);
+  }
+  let sign = "";
+  let number = "";
+  for (const part of nf.formatToParts(value)) {
+    const v = part.value.replace(BIDI_MARKS, "");
+    if (part.type === "minusSign") sign = v;
+    else number += v;
+  }
+  return { sign, number };
+}
+function SaudiRiyal({
+  value,
+  size,
+  tone,
+  decimals,
+  numerals = "latn",
+  currencyLabel,
+  asChild = false,
+  className,
+  children,
+  ...props
+}) {
+  const ctx = _react.useContext.call(void 0, _chunkFQLVTLUIcjs.DgaContext);
+  const dir = _nullishCoalesce(_optionalChain([ctx, 'optionalAccess', _2 => _2.dir]), () => ( "ltr"));
+  const label = _nullishCoalesce(currencyLabel, () => ( LABELS[dir]));
+  let visual;
+  let srNumber = null;
+  if (typeof value === "number") {
+    const { sign, number } = formatParts(value, _nullishCoalesce(_optionalChain([ctx, 'optionalAccess', _3 => _3.locale]), () => ( "en")), numerals, decimals);
+    visual = dir === "rtl" ? `${number}${sign}` : `${sign}${number}`;
+    srNumber = `${sign}${number}`;
+  } else {
+    visual = _nullishCoalesce(value, () => ( (asChild ? null : children)));
+  }
+  const Comp = asChild ? _radixui.Slot.Slot : "span";
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    Comp,
+    {
+      "data-slot": "saudi-riyal",
+      dir: "ltr",
+      className: _chunkV6MXOJQ4cjs.cn.call(void 0, saudiRiyalVariants({ size, tone }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SaudiRiyalSymbol, { className: "ddga-riyal__symbol", "aria-hidden": "true" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ddga-riyal__value", "aria-hidden": srNumber != null || void 0, children: visual }),
+        srNumber != null || label ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "ddga-sr-only", children: [
+          srNumber != null ? `${srNumber} ` : null,
+          label
+        ] }) : null,
+        asChild ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _radixui.Slot.Slottable, { children }) : null
+      ]
+    }
+  );
+}
+
+
+
+
+
+
+exports.saudiRiyalSymbolVariants = saudiRiyalSymbolVariants; exports.saudiRiyalVariants = saudiRiyalVariants; exports.SaudiRiyalSymbol = SaudiRiyalSymbol; exports.SaudiRiyal = SaudiRiyal;
+//# sourceMappingURL=chunk-VYP5GX57.cjs.map

package/dist/chunk-VYP5GX57.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-VYP5GX57.cjs","../src/components/SaudiRiyal/SaudiRiyal.tsx"],"names":[],"mappings":"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","file":"/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-VYP5GX57.cjs","sourcesContent":[null,"'use client';\n\nimport { useContext, type ReactNode } from 'react';\nimport { Slot as SlotPrimitive } from 'radix-ui';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { DgaContext } from '../../providers/DgaContext';\n\nconst saudiRiyalSymbolVariants = cva('ddga-riyal-symbol', {\n  variants: {\n    size: {\n      '2xs': 'ddga-riyal-symbol--2xs',\n      xs: 'ddga-riyal-symbol--xs',\n      sm: 'ddga-riyal-symbol--sm',\n      base: 'ddga-riyal-symbol--base',\n      lg: 'ddga-riyal-symbol--lg',\n      xl: 'ddga-riyal-symbol--xl',\n      '2xl': 'ddga-riyal-symbol--2xl',\n      '3xl': 'ddga-riyal-symbol--3xl',\n    },\n    tone: {\n      default: '',\n      muted: 'ddga-riyal-symbol--muted',\n      brand: 'ddga-riyal-symbol--brand',\n      success: 'ddga-riyal-symbol--success',\n      error: 'ddga-riyal-symbol--error',\n      inverted: 'ddga-riyal-symbol--inverted',\n    },\n    appearance: {\n      plain: '',\n      coin: 'ddga-riyal-symbol--coin',\n    },\n  },\n  defaultVariants: { tone: 'default', appearance: 'plain' },\n});\n\nconst saudiRiyalVariants = cva('ddga-riyal', {\n  variants: {\n    size: {\n      '2xs': 'ddga-riyal--2xs',\n      xs: 'ddga-riyal--xs',\n      sm: 'ddga-riyal--sm',\n      base: 'ddga-riyal--base',\n      lg: 'ddga-riyal--lg',\n      xl: 'ddga-riyal--xl',\n      '2xl': 'ddga-riyal--2xl',\n      '3xl': 'ddga-riyal--3xl',\n    },\n    tone: {\n      default: '',\n      muted: 'ddga-riyal--muted',\n      brand: 'ddga-riyal--brand',\n      success: 'ddga-riyal--success',\n      error: 'ddga-riyal--error',\n      inverted: 'ddga-riyal--inverted',\n    },\n  },\n  defaultVariants: { tone: 'default' },\n});\n\nconst LABELS = { ltr: 'Saudi Riyal', rtl: 'ريال سعودي' } as const;\n\ntype SaudiRiyalSymbolProps = Omit<React.SVGProps<SVGSVGElement>, 'children'> &\n  VariantProps<typeof saudiRiyalSymbolVariants>;\n\n/**\n * The official Saudi Riyal symbol as an inline SVG. Renders at `1em` (tracks the\n * surrounding font-size, so its height aligns with the text), inherits `currentColor`,\n * and is never mirrored in RTL. Standalone it exposes `role=\"img\"` + a localized\n * `aria-label`; pass `aria-hidden` to silence it (e.g. inside `SaudiRiyal`).\n */\nfunction SaudiRiyalSymbol({\n  size,\n  tone,\n  appearance,\n  className,\n  role,\n  'aria-label': ariaLabel,\n  'aria-hidden': ariaHidden,\n  ...props\n}: SaudiRiyalSymbolProps) {\n  const ctx = useContext(DgaContext);\n  const isHidden = ariaHidden === true || ariaHidden === 'true';\n  const label = isHidden ? undefined : (ariaLabel ?? LABELS[ctx?.dir ?? 'ltr']);\n  return (\n    <svg\n      data-slot=\"saudi-riyal-symbol\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 1124.14 1256.39\"\n      fill=\"currentColor\"\n      role={isHidden ? undefined : (role ?? 'img')}\n      aria-label={label}\n      aria-hidden={isHidden || undefined}\n      className={cn(saudiRiyalSymbolVariants({ size, tone, appearance }), className)}\n      {...props}\n    >\n      <path d=\"M699.62,1113.02h0c-20.06,44.48-33.32,92.75-38.4,143.37l424.51-90.24c20.06-44.47,33.31-92.75,38.4-143.37l-424.51,90.24Z\" />\n      <path d=\"M1085.73,895.8c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.33v-135.2l292.27-62.11c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.27V66.13c-50.67,28.45-95.67,66.32-132.25,110.99v403.35l-132.25,28.11V0c-50.67,28.44-95.67,66.32-132.25,110.99v525.69l-295.91,62.88c-20.06,44.47-33.33,92.75-38.42,143.37l334.33-71.05v170.26l-358.3,76.14c-20.06,44.47-33.32,92.75-38.4,143.37l375.04-79.7c30.53-6.35,56.77-24.4,73.83-49.24l68.78-101.97v-.02c7.14-10.55,11.3-23.27,11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z\" />\n    </svg>\n  );\n}\n\ntype Numerals = 'latn' | 'arab' | 'auto';\n\n// LRM / RLM / ALM — bidi control marks some locales inject around numbers.\nconst BIDI_MARKS = new RegExp(`[${String.fromCharCode(0x200e, 0x200f, 0x061c)}]`, 'g');\n\n// Split the sign from the digits so the minus can be placed per direction (SDGA rule 4)\n// while the digits stay a clean LTR run.\nfunction formatParts(\n  value: number,\n  locale: string,\n  numerals: Numerals,\n  decimals?: number,\n): { sign: string; number: string } {\n  if (!Number.isFinite(value)) return { sign: '', number: String(value) };\n  const loc = numerals === 'auto' ? locale : `${locale}-u-nu-${numerals}`;\n  const opts: Intl.NumberFormatOptions =\n    decimals != null ? { minimumFractionDigits: decimals, maximumFractionDigits: decimals } : {};\n  let nf: Intl.NumberFormat;\n  try {\n    nf = new Intl.NumberFormat(loc, opts);\n  } catch {\n    nf = new Intl.NumberFormat(undefined, opts);\n  }\n  let sign = '';\n  let number = '';\n  for (const part of nf.formatToParts(value)) {\n    // Drop bidi control marks (LRM/RLM/ALM) some locales inject — we place the\n    // sign ourselves inside a forced-LTR box, so they'd only garble the output.\n    const v = part.value.replace(BIDI_MARKS, '');\n    if (part.type === 'minusSign') sign = v;\n    else number += v;\n  }\n  return { sign, number };\n}\n\ninterface SaudiRiyalProps\n  extends Omit<React.ComponentProps<'span'>, 'children'>, VariantProps<typeof saudiRiyalVariants> {\n  /** The amount. A `number` is formatted (grouping, `decimals`, `numerals`); a string renders as-is (e.g. \"123 million\"). */\n  value?: number | string;\n  /** Fixed fraction digits (e.g. `2` → halalas). Omit to use the locale default. Numbers only. */\n  decimals?: number;\n  /** Digit system for a numeric `value`. @default 'latn' (matches SDGA examples); `'auto'` follows the locale. */\n  numerals?: Numerals;\n  /** Screen-reader currency name read after the amount. Defaults to a localized \"Saudi Riyal\". */\n  currencyLabel?: ReactNode;\n  /** Merge props onto a single child (e.g. an `<a>`) instead of a `<span>`. Content still comes from `value`. */\n  asChild?: boolean;\n  /** Passthrough content when `value` is omitted (ignored in `asChild` mode, where the child is the wrapper element). */\n  children?: ReactNode;\n}\n\n/**\n * A Saudi Riyal amount: the official symbol always at the physical start (left) of a\n * formatted number, enforcing the SDGA usage rules. The symbol never moves — the minus\n * sign sits left of the digits in LTR and to their right in RTL. Omit `value` to render\n * passthrough `children`; omit `size`/`tone` to inherit the surrounding text.\n */\nfunction SaudiRiyal({\n  value,\n  size,\n  tone,\n  decimals,\n  numerals = 'latn',\n  currencyLabel,\n  asChild = false,\n  className,\n  children,\n  ...props\n}: SaudiRiyalProps) {\n  const ctx = useContext(DgaContext);\n  const dir = ctx?.dir ?? 'ltr';\n  const label = currencyLabel ?? LABELS[dir];\n\n  let visual: ReactNode;\n  let srNumber: string | null = null;\n  if (typeof value === 'number') {\n    const { sign, number } = formatParts(value, ctx?.locale ?? 'en', numerals, decimals);\n    visual = dir === 'rtl' ? `${number}${sign}` : `${sign}${number}`;\n    srNumber = `${sign}${number}`;\n  } else {\n    visual = value ?? (asChild ? null : children);\n  }\n\n  const Comp = asChild ? SlotPrimitive.Slot : 'span';\n  return (\n    <Comp\n      data-slot=\"saudi-riyal\"\n      dir=\"ltr\"\n      className={cn(saudiRiyalVariants({ size, tone }), className)}\n      {...props}\n    >\n      <SaudiRiyalSymbol className=\"ddga-riyal__symbol\" aria-hidden=\"true\" />\n      <span className=\"ddga-riyal__value\" aria-hidden={srNumber != null || undefined}>\n        {visual}\n      </span>\n      {srNumber != null || label ? (\n        <span className=\"ddga-sr-only\">\n          {srNumber != null ? `${srNumber} ` : null}\n          {label}\n        </span>\n      ) : null}\n      {asChild ? <SlotPrimitive.Slottable>{children}</SlotPrimitive.Slottable> : null}\n    </Comp>\n  );\n}\n\nexport { SaudiRiyal, SaudiRiyalSymbol, saudiRiyalVariants, saudiRiyalSymbolVariants };\nexport type { SaudiRiyalProps, SaudiRiyalSymbolProps };\n"]}

package/dist/{chunk-DEC2WM3G.js → chunk-WGCK6KKL.js}

@@ -1,6 +1,6 @@
 import {
   FieldMessage
-} from "./chunk-E7WQI7PE.js";
+} from "./chunk-E5ZIKIGB.js";
 import {
   useFieldA11y
 } from "./chunk-HN5AFDQA.js";
@@ -15,9 +15,9 @@ import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
 var radioGroupVariants = cva("ddga-radio-group", {
   variants: {
-    size: {
-      sm: "ddga-radio-group--sm",
-      md: "ddga-radio-group--md"
+    variant: {
+      primary: "",
+      neutral: "ddga-radio-group--neutral"
     },
     orientation: {
       vertical: "ddga-radio-group--vertical",
@@ -25,22 +25,34 @@ var radioGroupVariants = cva("ddga-radio-group", {
     },
     error: {
       true: "ddga-radio-group--error"
+    },
+    readOnly: {
+      true: "ddga-radio-group--readonly"
     }
   },
   defaultVariants: {
-    size: "md",
+    variant: "primary",
     orientation: "vertical"
   }
 });
 var radioVariants = cva("ddga-radio");
+var READONLY_BLOCKED_KEYS = /* @__PURE__ */ new Set([
+  " ",
+  "Enter",
+  "ArrowUp",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight"
+]);
 function RadioGroup({
   id: externalId,
   label,
   helperText,
   errorMessage,
   error,
-  size,
+  variant,
   orientation,
+  readOnly,
   required,
   className,
   children,
@@ -69,10 +81,24 @@ function RadioGroup({
         "aria-invalid": controlProps["aria-invalid"],
         "aria-describedby": controlProps["aria-describedby"],
         "aria-labelledby": label ? labelId : props["aria-labelledby"],
+        "aria-readonly": readOnly || void 0,
         orientation: orientation === "horizontal" ? "horizontal" : "vertical",
         required,
+        onClickCapture: readOnly ? (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        } : void 0,
+        onKeyDownCapture: readOnly ? (event) => {
+          if (READONLY_BLOCKED_KEYS.has(event.key)) {
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        } : void 0,
         "data-slot": "radio-group",
-        className: cn(radioGroupVariants({ size, orientation, error: hasError }), className),
+        className: cn(
+          radioGroupVariants({ variant, orientation, error: hasError, readOnly }),
+          className
+        ),
         children
       }
     ),
@@ -91,14 +117,14 @@ function Radio({ id: externalId, label, className, ...props }) {
         id: itemId,
         "data-slot": "radio",
         className: cn(radioVariants(), className),
-        children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx("span", { className: "ddga-radio__circle", children: /* @__PURE__ */ jsx(
           RadioGroupPrimitive.Indicator,
           {
             "data-slot": "radio-indicator",
             className: "ddga-radio__indicator",
             children: /* @__PURE__ */ jsx("span", { className: "ddga-radio__dot", "aria-hidden": "true" })
           }
-        )
+        ) })
       }
     ),
     label && /* @__PURE__ */ jsx("label", { htmlFor: itemId, className: "ddga-radio__label", children: label })
@@ -111,4 +137,4 @@ export {
   RadioGroup,
   Radio
 };
-//# sourceMappingURL=chunk-DEC2WM3G.js.map
+//# sourceMappingURL=chunk-WGCK6KKL.js.map