@dev-dga/react 0.11.0 → 0.12.0

package/dist/chunk-7BOSIHW6.cjs

@@ -0,0 +1,173 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
+
+
+
+
+var _chunkYS2JJ73Mcjs = require('./chunk-YS2JJ73M.cjs');
+
+
+var _chunkV6MXOJQ4cjs = require('./chunk-V6MXOJQ4.cjs');
+
+// src/components/Metric/Metric.tsx
+var _react = require('react');
+var _classvarianceauthority = require('class-variance-authority');
+var _jsxruntime = require('react/jsx-runtime');
+var metricVariants = _classvarianceauthority.cva.call(void 0, "ddga-metric", {
+  variants: {
+    // SDGA "Style" axis: large = chart below, small = chart beside.
+    layout: {
+      large: "ddga-metric--large",
+      small: "ddga-metric--small"
+    }
+  },
+  defaultVariants: {
+    layout: "large"
+  }
+});
+var CHANGE_ICONS = {
+  "01": { up: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.ArrowUp, { "aria-hidden": "true" }), down: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.ArrowDown, { "aria-hidden": "true" }) },
+  "02": { up: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.TrendUp, { "aria-hidden": "true" }), down: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.TrendDown, { "aria-hidden": "true" }) }
+};
+var CHART_H = 64;
+var CHART_PAD = 6;
+function Metric({
+  layout,
+  icon,
+  label,
+  action,
+  value,
+  change,
+  trend,
+  changeType,
+  changeLabel,
+  chart,
+  footer,
+  className,
+  children,
+  ...props
+}) {
+  const hasHeader = icon != null || label != null || action != null;
+  const hasInfo = change != null || changeLabel != null;
+  const hasFigures = value != null || hasInfo;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      "data-slot": "metric",
+      "data-layout": _nullishCoalesce(layout, () => ( "large")),
+      className: _chunkV6MXOJQ4cjs.cn.call(void 0, metricVariants({ layout }), className),
+      ...props,
+      children: [
+        hasHeader ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "ddga-metric__header", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "ddga-metric__heading", children: [
+            icon != null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ddga-metric__icon", "aria-hidden": "true", children: icon }) : null,
+            label != null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MetricLabel, { children: label }) : null
+          ] }),
+          action != null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "ddga-metric__action", children: action }) : null
+        ] }) : null,
+        hasFigures || chart != null ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "ddga-metric__body", children: [
+          hasFigures ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "ddga-metric__figures", children: [
+            value != null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MetricValue, { children: value }) : null,
+            hasInfo ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "ddga-metric__info", children: [
+              change != null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MetricChange, { trend, type: changeType, children: change }) : null,
+              changeLabel != null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ddga-metric__change-label", children: changeLabel }) : null
+            ] }) : null
+          ] }) : null,
+          chart
+        ] }) : null,
+        children,
+        footer != null ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "ddga-metric__footer", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "ddga-metric__divider", role: "separator", "aria-orientation": "horizontal" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "ddga-metric__actions", children: footer })
+        ] }) : null
+      ]
+    }
+  );
+}
+function MetricLabel({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-slot": "metric-label", className: _chunkV6MXOJQ4cjs.cn.call(void 0, "ddga-metric__label", className), ...props });
+}
+function MetricValue({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-slot": "metric-value", className: _chunkV6MXOJQ4cjs.cn.call(void 0, "ddga-metric__value", className), ...props });
+}
+function MetricChange({ trend, type, className, children, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      "data-slot": "metric-change",
+      "data-trend": trend,
+      "data-type": _nullishCoalesce(type, () => ( "01")),
+      className: _chunkV6MXOJQ4cjs.cn.call(void 0, 
+        "ddga-metric__change",
+        trend ? `ddga-metric__change--${trend}` : null,
+        className
+      ),
+      ...props,
+      children: [
+        trend ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ddga-metric__change-icon", children: CHANGE_ICONS[_nullishCoalesce(type, () => ( "01"))][trend] }) : null,
+        children
+      ]
+    }
+  );
+}
+function MetricChart({ data, trend, markers, className, ...props }) {
+  const gradientId = _react.useId.call(void 0, );
+  const n = data.length;
+  const max = Math.max(...data);
+  const min = Math.min(...data);
+  const span = max - min || 1;
+  const pts = data.map((v, i) => {
+    const x = n <= 1 ? 50 : i / (n - 1) * 100;
+    const y = CHART_H - CHART_PAD - (v - min) / span * (CHART_H - 2 * CHART_PAD);
+    return [x, y];
+  });
+  const line = pts.map(([x, y], i) => `${i === 0 ? "M" : "L"}${x.toFixed(2)},${y.toFixed(2)}`).join(" ");
+  const area = pts.length ? `${line} L100,${CHART_H} L0,${CHART_H} Z` : "";
+  const markerIdx = _nullishCoalesce(markers, () => ( (n ? [data.indexOf(max)] : [])));
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      "data-slot": "metric-chart",
+      "data-trend": _nullishCoalesce(trend, () => ( "up")),
+      className: _chunkV6MXOJQ4cjs.cn.call(void 0, "ddga-metric__chart", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "svg",
+          {
+            className: "ddga-metric__chart-svg",
+            viewBox: `0 0 100 ${CHART_H}`,
+            preserveAspectRatio: "none",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "defs", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "0%", stopColor: "var(--ddga-metric-chart-area)", stopOpacity: "0.2" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "100%", stopColor: "var(--ddga-metric-chart-area)", stopOpacity: "0" })
+              ] }) }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { className: "ddga-metric__chart-area", d: area, fill: `url(#${gradientId})` }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { className: "ddga-metric__chart-line", d: line, vectorEffect: "non-scaling-stroke" })
+            ]
+          }
+        ),
+        markerIdx.map((i) => {
+          const p = pts[i];
+          return p ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "span",
+            {
+              className: "ddga-metric__chart-marker",
+              style: { left: `${p[0]}%`, top: `${(p[1] / CHART_H * 100).toFixed(2)}%` }
+            },
+            i
+          ) : null;
+        })
+      ]
+    }
+  );
+}
+
+
+
+
+
+
+exports.metricVariants = metricVariants; exports.Metric = Metric; exports.MetricChange = MetricChange; exports.MetricChart = MetricChart;
+//# sourceMappingURL=chunk-7BOSIHW6.cjs.map

package/dist/chunk-7BOSIHW6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-7BOSIHW6.cjs","../src/components/Metric/Metric.tsx"],"names":[],"mappings":"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","file":"/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-7BOSIHW6.cjs","sourcesContent":[null,"'use client';\n\nimport { useId, type ReactNode } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { ArrowUp, ArrowDown, TrendUp, TrendDown } from '../../internal/icons';\n\n// ─── 1. Variants (cva) ─── //\n\nconst metricVariants = cva('ddga-metric', {\n  variants: {\n    // SDGA \"Style\" axis: large = chart below, small = chart beside.\n    layout: {\n      large: 'ddga-metric--large',\n      small: 'ddga-metric--small',\n    },\n  },\n  defaultVariants: {\n    layout: 'large',\n  },\n});\n\ntype Trend = 'up' | 'down';\ntype ChangeType = '01' | '02';\n\n// trend → glyph, per SDGA change Type. 01 = directional arrow · 02 = trend glyph.\nconst CHANGE_ICONS: Record<ChangeType, Record<Trend, ReactNode>> = {\n  '01': { up: <ArrowUp aria-hidden=\"true\" />, down: <ArrowDown aria-hidden=\"true\" /> },\n  '02': { up: <TrendUp aria-hidden=\"true\" />, down: <TrendDown aria-hidden=\"true\" /> },\n};\n\n// Chart coords: 0..100 × 0..64; PAD keeps the line off the edges.\nconst CHART_H = 64;\nconst CHART_PAD = 6;\n\n// ─── 2. Types ─── //\n\ninterface MetricProps extends React.ComponentProps<'div'>, VariantProps<typeof metricVariants> {\n  /** Featured icon, shown in a 32px brand-tinted circle at the start of the header. */\n  icon?: ReactNode;\n  /** Short label beside the icon (e.g. \"24h Views\"). */\n  label?: ReactNode;\n  /** Header slot at the inline-end (e.g. a \"more\" menu trigger button). */\n  action?: ReactNode;\n  /** The metric, pre-formatted by the consumer (e.g. \"50%\", \"SAR 1.2M\"). */\n  value?: ReactNode;\n  /** Change text — include the sign (e.g. \"+100%\") so AT conveys direction; color comes from `trend`. */\n  change?: ReactNode;\n  /** Trend: `up` → success arrow, `down` → error arrow. Drives the glyph + color. */\n  trend?: Trend;\n  /** Change glyph style — `01` directional arrow (default) · `02` trend glyph. */\n  changeType?: ChangeType;\n  /** Muted comparison text beside the change (e.g. \"vs last month\"). */\n  changeLabel?: ReactNode;\n  /** Trend chart — pass a `<MetricChart>` (full-width in `large`, beside the value in `small`). */\n  chart?: ReactNode;\n  /** Footer actions; when present, a full-bleed divider sits above a space-between actions row. */\n  footer?: ReactNode;\n}\n\ninterface MetricChangeProps extends React.ComponentProps<'div'> {\n  trend?: Trend;\n  /** `01` directional arrow (default) · `02` trend glyph. */\n  type?: ChangeType;\n}\n\ninterface MetricChartProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  /** The series to plot (any numeric scale). */\n  data: number[];\n  /** Line + area + marker color: `up` → success, `down` → error. Default `up`. */\n  trend?: Trend;\n  /** Indices of `data` to mark with a dot. Defaults to the highest point. */\n  markers?: number[];\n}\n\n// ─── 3. Components ─── //\n\n/**\n * DGA Platforms Code \"Metric\" card: featured-icon + label header, a large value\n * with an inline trend change, an optional `chart` (a `<MetricChart>`), and an\n * optional actions `footer`. Lay several out with `<MetricGroup>`.\n */\nfunction Metric({\n  layout,\n  icon,\n  label,\n  action,\n  value,\n  change,\n  trend,\n  changeType,\n  changeLabel,\n  chart,\n  footer,\n  className,\n  children,\n  ...props\n}: MetricProps) {\n  const hasHeader = icon != null || label != null || action != null;\n  const hasInfo = change != null || changeLabel != null;\n  const hasFigures = value != null || hasInfo;\n  return (\n    <div\n      data-slot=\"metric\"\n      data-layout={layout ?? 'large'}\n      className={cn(metricVariants({ layout }), className)}\n      {...props}\n    >\n      {hasHeader ? (\n        <div className=\"ddga-metric__header\">\n          <div className=\"ddga-metric__heading\">\n            {icon != null ? (\n              <span className=\"ddga-metric__icon\" aria-hidden=\"true\">\n                {icon}\n              </span>\n            ) : null}\n            {label != null ? <MetricLabel>{label}</MetricLabel> : null}\n          </div>\n          {action != null ? <div className=\"ddga-metric__action\">{action}</div> : null}\n        </div>\n      ) : null}\n\n      {hasFigures || chart != null ? (\n        <div className=\"ddga-metric__body\">\n          {hasFigures ? (\n            <div className=\"ddga-metric__figures\">\n              {value != null ? <MetricValue>{value}</MetricValue> : null}\n              {hasInfo ? (\n                <div className=\"ddga-metric__info\">\n                  {change != null ? (\n                    <MetricChange trend={trend} type={changeType}>\n                      {change}\n                    </MetricChange>\n                  ) : null}\n                  {changeLabel != null ? (\n                    <span className=\"ddga-metric__change-label\">{changeLabel}</span>\n                  ) : null}\n                </div>\n              ) : null}\n            </div>\n          ) : null}\n          {chart}\n        </div>\n      ) : null}\n\n      {children}\n\n      {footer != null ? (\n        <div className=\"ddga-metric__footer\">\n          <div className=\"ddga-metric__divider\" role=\"separator\" aria-orientation=\"horizontal\" />\n          <div className=\"ddga-metric__actions\">{footer}</div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nfunction MetricLabel({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div data-slot=\"metric-label\" className={cn('ddga-metric__label', className)} {...props} />\n  );\n}\n\nfunction MetricValue({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div data-slot=\"metric-value\" className={cn('ddga-metric__value', className)} {...props} />\n  );\n}\n\nfunction MetricChange({ trend, type, className, children, ...props }: MetricChangeProps) {\n  return (\n    <div\n      data-slot=\"metric-change\"\n      data-trend={trend}\n      data-type={type ?? '01'}\n      className={cn(\n        'ddga-metric__change',\n        trend ? `ddga-metric__change--${trend}` : null,\n        className,\n      )}\n      {...props}\n    >\n      {trend ? (\n        <span className=\"ddga-metric__change-icon\">{CHANGE_ICONS[type ?? '01'][trend]}</span>\n      ) : null}\n      {children}\n    </div>\n  );\n}\n\n/**\n * The Metric trend chart: a line over a faded area with a marker, colored by\n * `trend` (up → success, down → error). Plots `data` as a small inline SVG — no\n * charting dependency.\n */\nfunction MetricChart({ data, trend, markers, className, ...props }: MetricChartProps) {\n  const gradientId = useId();\n  const n = data.length;\n  const max = Math.max(...data);\n  const min = Math.min(...data);\n  const span = max - min || 1;\n  const pts = data.map((v, i) => {\n    const x = n <= 1 ? 50 : (i / (n - 1)) * 100;\n    const y = CHART_H - CHART_PAD - ((v - min) / span) * (CHART_H - 2 * CHART_PAD);\n    return [x, y] as const;\n  });\n  const line = pts\n    .map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(2)},${y.toFixed(2)}`)\n    .join(' ');\n  const area = pts.length ? `${line} L100,${CHART_H} L0,${CHART_H} Z` : '';\n  const markerIdx = markers ?? (n ? [data.indexOf(max)] : []);\n  return (\n    <div\n      data-slot=\"metric-chart\"\n      data-trend={trend ?? 'up'}\n      className={cn('ddga-metric__chart', className)}\n      {...props}\n    >\n      <svg\n        className=\"ddga-metric__chart-svg\"\n        viewBox={`0 0 100 ${CHART_H}`}\n        preserveAspectRatio=\"none\"\n        aria-hidden=\"true\"\n      >\n        <defs>\n          <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"0%\" stopColor=\"var(--ddga-metric-chart-area)\" stopOpacity=\"0.2\" />\n            <stop offset=\"100%\" stopColor=\"var(--ddga-metric-chart-area)\" stopOpacity=\"0\" />\n          </linearGradient>\n        </defs>\n        <path className=\"ddga-metric__chart-area\" d={area} fill={`url(#${gradientId})`} />\n        <path className=\"ddga-metric__chart-line\" d={line} vectorEffect=\"non-scaling-stroke\" />\n      </svg>\n      {markerIdx.map((i) => {\n        const p = pts[i];\n        return p ? (\n          <span\n            key={i}\n            className=\"ddga-metric__chart-marker\"\n            style={{ left: `${p[0]}%`, top: `${((p[1] / CHART_H) * 100).toFixed(2)}%` }}\n          />\n        ) : null;\n      })}\n    </div>\n  );\n}\n\n// ─── 4. Exports ─── //\n\nexport { Metric, MetricChange, MetricChart, metricVariants };\nexport type { MetricProps, MetricChangeProps, MetricChartProps };\n"]}

package/dist/chunk-7EEKESAA.js

@@ -0,0 +1,167 @@
+import {
+  DgaContext
+} from "./chunk-TMXABSFE.js";
+import {
+  cn
+} from "./chunk-7NTT2UXP.js";
+
+// src/components/SaudiRiyal/SaudiRiyal.tsx
+import { useContext } from "react";
+import { Slot as SlotPrimitive } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var saudiRiyalSymbolVariants = cva("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 = cva("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 = useContext(DgaContext);
+  const isHidden = ariaHidden === true || ariaHidden === "true";
+  const label = isHidden ? void 0 : ariaLabel ?? LABELS[ctx?.dir ?? "ltr"];
+  return /* @__PURE__ */ jsxs(
+    "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 : role ?? "img",
+      "aria-label": label,
+      "aria-hidden": isHidden || void 0,
+      className: cn(saudiRiyalSymbolVariants({ size, tone, appearance }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("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__ */ jsx("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 {
+    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 = useContext(DgaContext);
+  const dir = ctx?.dir ?? "ltr";
+  const label = currencyLabel ?? LABELS[dir];
+  let visual;
+  let srNumber = null;
+  if (typeof value === "number") {
+    const { sign, number } = formatParts(value, ctx?.locale ?? "en", numerals, decimals);
+    visual = dir === "rtl" ? `${number}${sign}` : `${sign}${number}`;
+    srNumber = `${sign}${number}`;
+  } else {
+    visual = value ?? (asChild ? null : children);
+  }
+  const Comp = asChild ? SlotPrimitive.Slot : "span";
+  return /* @__PURE__ */ jsxs(
+    Comp,
+    {
+      "data-slot": "saudi-riyal",
+      dir: "ltr",
+      className: cn(saudiRiyalVariants({ size, tone }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SaudiRiyalSymbol, { className: "ddga-riyal__symbol", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "ddga-riyal__value", "aria-hidden": srNumber != null || void 0, children: visual }),
+        srNumber != null || label ? /* @__PURE__ */ jsxs("span", { className: "ddga-sr-only", children: [
+          srNumber != null ? `${srNumber} ` : null,
+          label
+        ] }) : null,
+        asChild ? /* @__PURE__ */ jsx(SlotPrimitive.Slottable, { children }) : null
+      ]
+    }
+  );
+}
+
+export {
+  saudiRiyalSymbolVariants,
+  saudiRiyalVariants,
+  SaudiRiyalSymbol,
+  SaudiRiyal
+};
+//# sourceMappingURL=chunk-7EEKESAA.js.map

package/dist/chunk-7EEKESAA.js.map

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

package/dist/chunk-7F24FFIV.cjs

@@ -0,0 +1,260 @@
+"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 _chunkG6ZOJVIGcjs = require('./chunk-G6ZOJVIG.cjs');
+
+
+
+
+var _chunkYS2JJ73Mcjs = require('./chunk-YS2JJ73M.cjs');
+
+
+var _chunkV6MXOJQ4cjs = require('./chunk-V6MXOJQ4.cjs');
+
+// src/components/CodeSnippet/CodeSnippet.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var COMMENT_SYNTAX = {
+  java: { line: "//", block: ["/*", "*/"] },
+  c: { line: "//", block: ["/*", "*/"] },
+  cpp: { line: "//", block: ["/*", "*/"] },
+  "c++": { line: "//", block: ["/*", "*/"] },
+  php: { line: "//", block: ["/*", "*/"] },
+  js: { line: "//", block: ["/*", "*/"] },
+  javascript: { line: "//", block: ["/*", "*/"] },
+  ts: { line: "//", block: ["/*", "*/"] },
+  typescript: { line: "//", block: ["/*", "*/"] },
+  python: { line: "#" },
+  py: { line: "#" },
+  ruby: { line: "#" },
+  sh: { line: "#" },
+  bash: { line: "#" },
+  shell: { line: "#" },
+  html: { block: ["<!--", "-->"] },
+  xml: { block: ["<!--", "-->"] }
+};
+function renderGreyedLines(code, language) {
+  const syntax = _nullishCoalesce(COMMENT_SYNTAX[language.toLowerCase()], () => ( {}));
+  const lines = code.split("\n");
+  let inBlock = false;
+  return lines.map((line, i) => {
+    const trimmed = line.trimStart();
+    let isComment = false;
+    if (syntax.block) {
+      const [open, close] = syntax.block;
+      if (inBlock) {
+        isComment = true;
+        if (line.includes(close)) inBlock = false;
+      } else if (trimmed.startsWith(open)) {
+        isComment = true;
+        if (line.indexOf(close, line.indexOf(open) + open.length) === -1) inBlock = true;
+      }
+    }
+    if (!isComment && syntax.line && trimmed.startsWith(syntax.line)) isComment = true;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "span",
+      {
+        className: _chunkV6MXOJQ4cjs.cn.call(void 0, "ddga-code-snippet__line", isComment && "ddga-code-snippet__line--comment"),
+        children: line
+      },
+      i
+    );
+  });
+}
+function CopyButton({
+  text,
+  size,
+  onCopy,
+  copyLabel = "Copy code",
+  copiedLabel = "Copied"
+}) {
+  const [copied, setCopied] = _react.useState.call(void 0, false);
+  const timer = _react.useRef.call(void 0, void 0);
+  _react.useEffect.call(void 0, () => () => clearTimeout(timer.current), []);
+  async function handleCopy() {
+    if (typeof navigator === "undefined" || !_optionalChain([navigator, 'access', _2 => _2.clipboard, 'optionalAccess', _3 => _3.writeText])) return;
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch (e) {
+      return;
+    }
+    _optionalChain([onCopy, 'optionalCall', _4 => _4(text)]);
+    setCopied(true);
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setCopied(false), 1500);
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "button",
+      {
+        type: "button",
+        onClick: handleCopy,
+        "aria-label": copyLabel,
+        "data-slot": "code-snippet-copy",
+        className: _chunkV6MXOJQ4cjs.cn.call(void 0, "ddga-code-snippet__copy-button", `ddga-code-snippet__copy-button--${size}`),
+        children: copied ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.Check, { "aria-hidden": true }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.Copy, { "aria-hidden": true })
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ddga-sr-only", "aria-live": "polite", children: copied ? copiedLabel : "" })
+  ] });
+}
+function CodeSnippetPanel({
+  language,
+  lineNumbers,
+  maxLines,
+  renderCode,
+  onCopy,
+  copyLabel,
+  copiedLabel,
+  expanded,
+  onToggleExpanded
+}) {
+  const lines = language.code.split("\n");
+  const collapsible = maxLines != null && lines.length > maxLines;
+  const collapsed = collapsible && !expanded;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "ddga-code-snippet__panel", "data-slot": "code-snippet-panel", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: _chunkV6MXOJQ4cjs.cn.call(void 0, 
+          "ddga-code-snippet__viewport",
+          collapsed && "ddga-code-snippet__viewport--collapsed"
+        ),
+        style: collapsed ? { "--ddga-code-snippet-max-lines": maxLines } : void 0,
+        children: [
+          lineNumbers && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "ddga-code-snippet__gutter", "aria-hidden": true, children: lines.map((_, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ddga-code-snippet__line-number", children: i + 1 }, i)) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "ddga-code-snippet__scroll", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "pre", { className: "ddga-code-snippet__code", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "code", { children: renderCode ? renderCode({ code: language.code, language: language.value }) : renderGreyedLines(language.code, language.value) }) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      CopyButton,
+      {
+        text: language.code,
+        size: "md",
+        onCopy,
+        copyLabel,
+        copiedLabel
+      }
+    ),
+    collapsible && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "button",
+      {
+        type: "button",
+        className: "ddga-code-snippet__show-more",
+        "aria-expanded": expanded,
+        onClick: onToggleExpanded,
+        children: [
+          expanded ? "Show Less" : "Show More",
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkYS2JJ73Mcjs.ChevronDown,
+            {
+              "aria-hidden": true,
+              className: _chunkV6MXOJQ4cjs.cn.call(void 0, 
+                "ddga-code-snippet__show-more-icon",
+                expanded && "ddga-code-snippet__show-more-icon--up"
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function CodeSnippet({
+  languages,
+  value,
+  defaultValue,
+  onValueChange,
+  lineNumbers = true,
+  maxLines,
+  renderCode,
+  onCopy,
+  copyLabel,
+  copiedLabel,
+  className,
+  ...props
+}) {
+  const [expanded, setExpanded] = _react.useState.call(void 0, {});
+  const showTabs = languages.length > 1;
+  const panelFor = (l) => ({
+    language: l,
+    lineNumbers,
+    maxLines,
+    renderCode,
+    onCopy,
+    copyLabel,
+    copiedLabel,
+    expanded: !!expanded[l.value],
+    onToggleExpanded: () => setExpanded((m) => ({ ...m, [l.value]: !m[l.value] }))
+  });
+  return (
+    // Code is always LTR — force it at the root so the whole component ignores page direction.
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        "data-slot": "code-snippet",
+        className: _chunkV6MXOJQ4cjs.cn.call(void 0, "ddga-code-snippet", className),
+        ...props,
+        dir: "ltr",
+        children: showTabs ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _chunkG6ZOJVIGcjs.Tabs,
+          {
+            dir: "ltr",
+            className: "ddga-code-snippet__tabs",
+            value,
+            defaultValue: _nullishCoalesce(defaultValue, () => ( languages[0].value)),
+            onValueChange,
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkG6ZOJVIGcjs.TabsList, { className: "ddga-code-snippet__tab-list", children: languages.map((l) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkG6ZOJVIGcjs.TabsTrigger, { value: l.value, children: l.label }, l.value)) }),
+              languages.map((l) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkG6ZOJVIGcjs.TabsContent, { value: l.value, className: "ddga-code-snippet__tab-content", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CodeSnippetPanel, { ...panelFor(l) }) }, l.value))
+            ]
+          }
+        ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CodeSnippetPanel, { ...panelFor(languages[0]) })
+      }
+    )
+  );
+}
+function CodeSnippetInline({
+  prefix,
+  children,
+  onCopy,
+  copyLabel,
+  copiedLabel,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      "data-slot": "code-snippet-inline",
+      className: _chunkV6MXOJQ4cjs.cn.call(void 0, "ddga-code-snippet-inline", className),
+      ...props,
+      dir: "ltr",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "ddga-code-snippet-inline__text", children: [
+          prefix != null && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ddga-code-snippet-inline__prefix", "data-slot": "code-snippet-prefix", children: prefix }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ddga-code-snippet-inline__command", "data-slot": "code-snippet-command", children })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          CopyButton,
+          {
+            text: children,
+            size: "sm",
+            onCopy,
+            copyLabel,
+            copiedLabel
+          }
+        )
+      ]
+    }
+  );
+}
+
+
+
+
+exports.CodeSnippet = CodeSnippet; exports.CodeSnippetInline = CodeSnippetInline;
+//# sourceMappingURL=chunk-7F24FFIV.cjs.map