@mari-ui/components 0.0.0-stage → 0.1.1

package/dist/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/progress/Progress.tsx"],"sourcesContent":["import React from \"react\";\nimport { CheckIcon, CircleCheckIcon, CircleXIcon, XIcon } from \"lucide-react\";\nimport { cn, type ColorRole } from \"@mari-ui/core\";\nimport { bgSolidClass, strokeSolidClass, textClass } from \"../lib/colorClasses\";\nimport { skeletonFill } from \"../lib/skeleton\";\nimport type { ProgressProps, ProgressStatus } from \"./types\";\n\nexport type { ProgressProps };\n\nconst clamp = (n: number | undefined) => Math.min(100, Math.max(0, n ?? 0));\n\n/** Çizgi kalınlığı rem (px yasak): 4 / 8 / 12px. */\nconst LINE_HEIGHT = { sm: \"h-1\", md: \"h-2\", lg: \"h-3\" } as const;\nconst LINE_TEXT = { sm: \"text-xs\", md: \"text-sm\", lg: \"text-sm\" } as const;\n/** Daire çapı rem + viewBox birimi kalınlık. */\nconst CIRCLE_SIZE = { sm: \"3rem\", md: \"5rem\", lg: \"7.5rem\" } as const;\nconst CIRCLE_STROKE = { sm: 10, md: 8, lg: 6 } as const;\nconst CIRCLE_TEXT = { sm: \"text-xs\", md: \"text-base\", lg: \"text-2xl\" } as const;\nconst CIRCLE_ICON = { sm: 16, md: 28, lg: 40 } as const;\n\nfunction resolveStatus(status: ProgressStatus | undefined, percent: number): ProgressStatus {\n  if (status) return status;\n  return percent >= 100 ? \"success\" : \"normal\";\n}\n\nfunction resolveColor(status: ProgressStatus, color: ColorRole | undefined): ColorRole {\n  if (status === \"success\") return \"success\";\n  if (status === \"exception\") return \"error\";\n  return color ?? \"primary\";\n}\n\n/** `%45` (tr-TR: yüzde işareti önde). */\nconst defaultFormat = (p: number) => `%${Math.round(p)}`;\n\nfunction valueText(format: ProgressProps[\"format\"], percent: number, status: ProgressStatus): string {\n  const custom = format?.(percent);\n  const base = typeof custom === \"string\" || typeof custom === \"number\" ? String(custom) : defaultFormat(percent);\n  if (status === \"exception\") return `${base}, hata`;\n  if (status === \"success\") return `${base}, tamamlandı`;\n  return base;\n}\n\nfunction Info({ status, percent, format, circle, size, color }: Readonly<{ status: ProgressStatus; percent: number; format: ProgressProps[\"format\"]; circle: boolean; size: NonNullable<ProgressProps[\"size\"]>; color: ColorRole }>) {\n  // Özel format varsa her durumda metin; yoksa bitince/hatada ikon.\n  if (!format && (status === \"success\" || status === \"exception\")) {\n    // Dairede ortadaki alan geniş: yalın ✓/✕; çizginin yanında daire içinde ikon.\n    const icons = circle ? { success: CheckIcon, exception: XIcon } : { success: CircleCheckIcon, exception: CircleXIcon };\n    const Icon = icons[status];\n    return <Icon aria-hidden size={circle ? CIRCLE_ICON[size] : 16} className={textClass[color]} />;\n  }\n  return <>{(format ?? defaultFormat)(percent)}</>;\n}\n\n/**\n * Faz 16.2 — yapı ant.design Progress'ten. Çizgi (varsayılan, `steps` ile\n * parçalı) ve daire. `%100` kendiliğinden başarı; `exception` hata.\n *\n * Erişilebilirlik: `role=\"progressbar\"` + `aria-valuenow/min/max` ve okunur\n * `aria-valuetext` (\"%45\", \"3 / 5 dosya\", \"%100, tamamlandı\"). Ad zorunlu —\n * `aria-label` ya da görünür bir başlığa `aria-labelledby`. Durum rengi tek\n * başına anlam taşımaz: ikon ve valuetext de söyler. Geçişler ve `active`\n * parıltısı hareket azaltmada durur.\n */\nexport function Progress({\n  percent: rawPercent,\n  type = \"line\",\n  status: statusProp,\n  color: colorProp,\n  success,\n  steps,\n  showInfo = true,\n  format,\n  size = \"md\",\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  className,\n  skeleton = false,\n}: Readonly<ProgressProps>) {\n  const percent = clamp(rawPercent);\n  const status = resolveStatus(statusProp, percent);\n  const color = resolveColor(status, colorProp);\n  const successPercent = success ? Math.min(clamp(success.percent), percent) : 0;\n\n  const a11y = skeleton\n    ? { \"aria-hidden\": true as const }\n    : {\n        role: \"progressbar\",\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-valuemin\": 0,\n        \"aria-valuemax\": 100,\n        \"aria-valuenow\": Math.round(percent),\n        \"aria-valuetext\": valueText(format, percent, status),\n      };\n\n  if (type === \"circle\") {\n    return (\n      <div {...a11y} className={cn(\"relative inline-flex shrink-0 items-center justify-center\", className)} style={{ width: CIRCLE_SIZE[size], height: CIRCLE_SIZE[size] }}>\n        <CircleTrack percent={percent} successPercent={successPercent} stroke={CIRCLE_STROKE[size]} color={color} skeleton={skeleton} />\n        {showInfo && !skeleton && (\n          <span aria-hidden className={cn(\"absolute inset-0 flex items-center justify-center font-semibold tabular-nums text-mari-foreground\", CIRCLE_TEXT[size])}>\n            <Info status={status} percent={percent} format={format} circle size={size} color={color} />\n          </span>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div {...a11y} className={cn(\"flex w-full items-center gap-3\", className)}>\n      {steps ? (\n        <StepsTrack steps={steps} percent={percent} color={color} size={size} skeleton={skeleton} />\n      ) : (\n        <div className={cn(\"relative min-w-0 flex-1 overflow-hidden rounded-full\", LINE_HEIGHT[size], skeleton ? skeletonFill(true) : \"bg-mari-surface-alt\")}>\n          {!skeleton && (\n            <>\n              <span\n                className={cn(\n                  \"absolute inset-y-0 left-0 rounded-full transition-[width] duration-300 ease-out motion-reduce:transition-none\",\n                  bgSolidClass[color],\n                  status === \"active\" && \"overflow-hidden\"\n                )}\n                style={{ width: `${percent}%` }}\n              >\n                {status === \"active\" && (\n                  <span className=\"absolute inset-0 animate-[mari-progress-active_1.6s_ease-out_infinite] bg-linear-to-r from-transparent via-white/40 to-transparent motion-reduce:hidden\" />\n                )}\n              </span>\n              {successPercent > 0 && (\n                <span className={cn(\"absolute inset-y-0 left-0 rounded-full transition-[width] duration-300 motion-reduce:transition-none\", bgSolidClass.success)} style={{ width: `${successPercent}%` }} />\n              )}\n            </>\n          )}\n        </div>\n      )}\n      {showInfo && (\n        <span aria-hidden className={cn(\"flex min-w-9 shrink-0 items-center justify-end tabular-nums text-mari-muted\", LINE_TEXT[size], skeleton && \"invisible\")}>\n          <Info status={status} percent={percent} format={format} circle={false} size={size} color={color} />\n        </span>\n      )}\n    </div>\n  );\n}\n\nfunction StepsTrack({ steps, percent, color, size, skeleton }: Readonly<{ steps: number; percent: number; color: ColorRole; size: NonNullable<ProgressProps[\"size\"]>; skeleton: boolean }>) {\n  const filled = Math.round((percent / 100) * steps);\n  const segmentFill = (i: number) => {\n    if (skeleton) return skeletonFill(true);\n    return i < filled ? bgSolidClass[color] : \"bg-mari-surface-alt\";\n  };\n  return (\n    <div className=\"flex min-w-0 flex-1 gap-1\">\n      {Array.from({ length: steps }, (_, i) => (\n        <span key={i} className={cn(\"flex-1 rounded-full transition-colors duration-200 motion-reduce:transition-none\", LINE_HEIGHT[size], segmentFill(i))} />\n      ))}\n    </div>\n  );\n}\n\nfunction CircleTrack({ percent, successPercent, stroke, color, skeleton }: Readonly<{ percent: number; successPercent: number; stroke: number; color: ColorRole; skeleton: boolean }>) {\n  const box = 100;\n  const r = (box - stroke) / 2;\n  const c = 2 * Math.PI * r;\n  const arc = (p: number) => `${(p / 100) * c} ${c}`;\n  return (\n    <svg aria-hidden viewBox={`0 0 ${box} ${box}`} className=\"size-full -rotate-90\">\n      <circle cx={box / 2} cy={box / 2} r={r} fill=\"none\" strokeWidth={stroke} className={skeleton ? \"stroke-mari-border/70\" : \"stroke-mari-surface-alt\"} />\n      {!skeleton && (\n        <>\n          <circle\n            cx={box / 2}\n            cy={box / 2}\n            r={r}\n            fill=\"none\"\n            strokeWidth={stroke}\n            strokeLinecap=\"round\"\n            strokeDasharray={arc(percent)}\n            className={cn(strokeSolidClass[color], \"transition-[stroke-dasharray] duration-300 motion-reduce:transition-none\", percent === 0 && \"opacity-0\")}\n          />\n          {successPercent > 0 && (\n            <circle cx={box / 2} cy={box / 2} r={r} fill=\"none\" strokeWidth={stroke} strokeLinecap=\"round\" strokeDasharray={arc(successPercent)} className={strokeSolidClass.success} />\n          )}\n        </>\n      )}\n    </svg>\n  );\n}\n"],"mappings":";;;;;;;;;;AACA,SAAS,WAAW,iBAAiB,aAAa,aAAa;AAC/D,SAAS,UAA0B;AA8CxB,SAEF,UAFE,KAiDL,YAjDK;AAvCX,IAAM,QAAQ,CAAC,MAA0B,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC,CAAC;AAG1E,IAAM,cAAc,EAAE,IAAI,OAAO,IAAI,OAAO,IAAI,MAAM;AACtD,IAAM,YAAY,EAAE,IAAI,WAAW,IAAI,WAAW,IAAI,UAAU;AAEhE,IAAM,cAAc,EAAE,IAAI,QAAQ,IAAI,QAAQ,IAAI,SAAS;AAC3D,IAAM,gBAAgB,EAAE,IAAI,IAAI,IAAI,GAAG,IAAI,EAAE;AAC7C,IAAM,cAAc,EAAE,IAAI,WAAW,IAAI,aAAa,IAAI,WAAW;AACrE,IAAM,cAAc,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG;AAE7C,SAAS,cAAc,QAAoC,SAAiC;AAC1F,MAAI,OAAQ,QAAO;AACnB,SAAO,WAAW,MAAM,YAAY;AACtC;AAEA,SAAS,aAAa,QAAwB,OAAyC;AACrF,MAAI,WAAW,UAAW,QAAO;AACjC,MAAI,WAAW,YAAa,QAAO;AACnC,SAAO,SAAS;AAClB;AAGA,IAAM,gBAAgB,CAAC,MAAc,IAAI,KAAK,MAAM,CAAC,CAAC;AAEtD,SAAS,UAAU,QAAiC,SAAiB,QAAgC;AACnG,QAAM,SAAS,SAAS,OAAO;AAC/B,QAAM,OAAO,OAAO,WAAW,YAAY,OAAO,WAAW,WAAW,OAAO,MAAM,IAAI,cAAc,OAAO;AAC9G,MAAI,WAAW,YAAa,QAAO,GAAG,IAAI;AAC1C,MAAI,WAAW,UAAW,QAAO,GAAG,IAAI;AACxC,SAAO;AACT;AAEA,SAAS,KAAK,EAAE,QAAQ,SAAS,QAAQ,QAAQ,MAAM,MAAM,GAAwK;AAEnO,MAAI,CAAC,WAAW,WAAW,aAAa,WAAW,cAAc;AAE/D,UAAM,QAAQ,SAAS,EAAE,SAAS,WAAW,WAAW,MAAM,IAAI,EAAE,SAAS,iBAAiB,WAAW,YAAY;AACrH,UAAM,OAAO,MAAM,MAAM;AACzB,WAAO,oBAAC,QAAK,eAAW,MAAC,MAAM,SAAS,YAAY,IAAI,IAAI,IAAI,WAAW,UAAU,KAAK,GAAG;AAAA,EAC/F;AACA,SAAO,gCAAI,qBAAU,eAAe,OAAO,GAAE;AAC/C;AAYO,SAAS,SAAS;AAAA,EACvB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,OAAO;AAAA,EACP,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB;AAAA,EACA,WAAW;AACb,GAA4B;AAC1B,QAAM,UAAU,MAAM,UAAU;AAChC,QAAM,SAAS,cAAc,YAAY,OAAO;AAChD,QAAM,QAAQ,aAAa,QAAQ,SAAS;AAC5C,QAAM,iBAAiB,UAAU,KAAK,IAAI,MAAM,QAAQ,OAAO,GAAG,OAAO,IAAI;AAE7E,QAAM,OAAO,WACT,EAAE,eAAe,KAAc,IAC/B;AAAA,IACE,MAAM;AAAA,IACN,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB,KAAK,MAAM,OAAO;AAAA,IACnC,kBAAkB,UAAU,QAAQ,SAAS,MAAM;AAAA,EACrD;AAEJ,MAAI,SAAS,UAAU;AACrB,WACE,qBAAC,SAAK,GAAG,MAAM,WAAW,GAAG,6DAA6D,SAAS,GAAG,OAAO,EAAE,OAAO,YAAY,IAAI,GAAG,QAAQ,YAAY,IAAI,EAAE,GACjK;AAAA,0BAAC,eAAY,SAAkB,gBAAgC,QAAQ,cAAc,IAAI,GAAG,OAAc,UAAoB;AAAA,MAC7H,YAAY,CAAC,YACZ,oBAAC,UAAK,eAAW,MAAC,WAAW,GAAG,qGAAqG,YAAY,IAAI,CAAC,GACpJ,8BAAC,QAAK,QAAgB,SAAkB,QAAgB,QAAM,MAAC,MAAY,OAAc,GAC3F;AAAA,OAEJ;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAK,GAAG,MAAM,WAAW,GAAG,kCAAkC,SAAS,GACrE;AAAA,YACC,oBAAC,cAAW,OAAc,SAAkB,OAAc,MAAY,UAAoB,IAE1F,oBAAC,SAAI,WAAW,GAAG,wDAAwD,YAAY,IAAI,GAAG,WAAW,aAAa,IAAI,IAAI,qBAAqB,GAChJ,WAAC,YACA,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,aAAa,KAAK;AAAA,YAClB,WAAW,YAAY;AAAA,UACzB;AAAA,UACA,OAAO,EAAE,OAAO,GAAG,OAAO,IAAI;AAAA,UAE7B,qBAAW,YACV,oBAAC,UAAK,WAAU,2JAA0J;AAAA;AAAA,MAE9K;AAAA,MACC,iBAAiB,KAChB,oBAAC,UAAK,WAAW,GAAG,wGAAwG,aAAa,OAAO,GAAG,OAAO,EAAE,OAAO,GAAG,cAAc,IAAI,GAAG;AAAA,OAE/L,GAEJ;AAAA,IAED,YACC,oBAAC,UAAK,eAAW,MAAC,WAAW,GAAG,+EAA+E,UAAU,IAAI,GAAG,YAAY,WAAW,GACrJ,8BAAC,QAAK,QAAgB,SAAkB,QAAgB,QAAQ,OAAO,MAAY,OAAc,GACnG;AAAA,KAEJ;AAEJ;AAEA,SAAS,WAAW,EAAE,OAAO,SAAS,OAAO,MAAM,SAAS,GAAgI;AAC1L,QAAM,SAAS,KAAK,MAAO,UAAU,MAAO,KAAK;AACjD,QAAM,cAAc,CAAC,MAAc;AACjC,QAAI,SAAU,QAAO,aAAa,IAAI;AACtC,WAAO,IAAI,SAAS,aAAa,KAAK,IAAI;AAAA,EAC5C;AACA,SACE,oBAAC,SAAI,WAAU,6BACZ,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MACjC,oBAAC,UAAa,WAAW,GAAG,oFAAoF,YAAY,IAAI,GAAG,YAAY,CAAC,CAAC,KAAtI,CAAyI,CACrJ,GACH;AAEJ;AAEA,SAAS,YAAY,EAAE,SAAS,gBAAgB,QAAQ,OAAO,SAAS,GAA+G;AACrL,QAAM,MAAM;AACZ,QAAM,KAAK,MAAM,UAAU;AAC3B,QAAM,IAAI,IAAI,KAAK,KAAK;AACxB,QAAM,MAAM,CAAC,MAAc,GAAI,IAAI,MAAO,CAAC,IAAI,CAAC;AAChD,SACE,qBAAC,SAAI,eAAW,MAAC,SAAS,OAAO,GAAG,IAAI,GAAG,IAAI,WAAU,wBACvD;AAAA,wBAAC,YAAO,IAAI,MAAM,GAAG,IAAI,MAAM,GAAG,GAAM,MAAK,QAAO,aAAa,QAAQ,WAAW,WAAW,0BAA0B,2BAA2B;AAAA,IACnJ,CAAC,YACA,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,MAAM;AAAA,UACV,IAAI,MAAM;AAAA,UACV;AAAA,UACA,MAAK;AAAA,UACL,aAAa;AAAA,UACb,eAAc;AAAA,UACd,iBAAiB,IAAI,OAAO;AAAA,UAC5B,WAAW,GAAG,iBAAiB,KAAK,GAAG,4EAA4E,YAAY,KAAK,WAAW;AAAA;AAAA,MACjJ;AAAA,MACC,iBAAiB,KAChB,oBAAC,YAAO,IAAI,MAAM,GAAG,IAAI,MAAM,GAAG,GAAM,MAAK,QAAO,aAAa,QAAQ,eAAc,SAAQ,iBAAiB,IAAI,cAAc,GAAG,WAAW,iBAAiB,SAAS;AAAA,OAE9K;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/qrcode.d.ts

@@ -0,0 +1 @@
+export * from "./types/qrcode/index";

package/dist/qrcode.js

@@ -0,0 +1,212 @@
+"use client";
+
+import {
+  skeletonBoxProps
+} from "./chunk-54HHEXXD.js";
+
+// src/qrcode/QRCode.tsx
+import { useId, useMemo } from "react";
+import { CircleCheckIcon, Loader2Icon, RotateCwIcon } from "lucide-react";
+import { cn } from "@mari-ui/core";
+import { neutralRamp } from "@mari-ui/tokens";
+
+// src/qrcode/utils.ts
+import qrcode from "qrcode-generator";
+var r2 = (n) => Math.round(n * 100) / 100;
+function svgRect(x, y, w, h) {
+  return `M${r2(x)},${r2(y)}h${r2(w)}v${r2(h)}h${r2(-w)}z`;
+}
+function svgCircle(cx, cy, radius) {
+  return `M${r2(cx - radius)},${r2(cy)}a${r2(radius)},${r2(radius)} 0 1,0 ${r2(radius * 2)},0a${r2(radius)},${r2(radius)} 0 1,0 ${r2(-radius * 2)},0z`;
+}
+function svgRoundRect(x, y, w, h, rad) {
+  const r = Math.min(rad, w / 2, h / 2);
+  return `M${r2(x + r)},${r2(y)}h${r2(w - 2 * r)}a${r2(r)},${r2(r)} 0 0 1 ${r2(r)},${r2(r)}v${r2(h - 2 * r)}a${r2(r)},${r2(r)} 0 0 1 ${r2(-r)},${r2(r)}h${r2(-(w - 2 * r))}a${r2(r)},${r2(r)} 0 0 1 ${r2(-r)},${r2(-r)}v${r2(-(h - 2 * r))}a${r2(r)},${r2(r)} 0 0 1 ${r2(r)},${r2(-r)}z`;
+}
+function svgHeart(x, y, s) {
+  const p = r2;
+  return `M${p(x + s * 0.5)},${p(y + s * 0.25)}C${p(x + s * 0.3)},${p(y)} ${p(x)},${p(y)} ${p(x)},${p(y + s * 0.25)}C${p(x)},${p(y + s * 0.55)} ${p(x + s * 0.3)},${p(y + s * 0.7)} ${p(x + s * 0.5)},${p(y + s * 0.9)}C${p(x + s * 0.7)},${p(y + s * 0.7)} ${p(x + s)},${p(y + s * 0.55)} ${p(x + s)},${p(y + s * 0.25)}C${p(x + s)},${p(y)} ${p(x + s * 0.7)},${p(y)} ${p(x + s * 0.5)},${p(y + s * 0.25)}z`;
+}
+function dotPath(x, y, s, type) {
+  switch (type) {
+    case "square":
+      return svgRect(x, y, s, s);
+    case "dots":
+      return svgCircle(x + s / 2, y + s / 2, s / 2);
+    case "rounded":
+      return svgRoundRect(x, y, s, s, s * 0.25);
+    case "extra-rounded":
+      return svgRoundRect(x, y, s, s, s * 0.48);
+  }
+}
+function cornerSquarePath(x, y, type) {
+  switch (type) {
+    case "square":
+      return `${svgRect(x, y, 7, 7)} ${svgRect(x + 1, y + 1, 5, 5)}`;
+    case "extra-rounded":
+      return `${svgRoundRect(x, y, 7, 7, 1.4)} ${svgRoundRect(x + 1, y + 1, 5, 5, 0.5)}`;
+    case "dot":
+      return `${svgCircle(x + 3.5, y + 3.5, 3.5)} ${svgCircle(x + 3.5, y + 3.5, 2.5)}`;
+  }
+}
+function cornerDotPath(x, y, type) {
+  switch (type) {
+    case "square":
+      return svgRect(x, y, 3, 3);
+    case "dot":
+      return svgCircle(x + 1.5, y + 1.5, 1.5);
+    case "heart":
+      return svgHeart(x, y, 3);
+  }
+}
+function toByteString(value) {
+  return Array.from(new TextEncoder().encode(value), (b) => String.fromCharCode(b)).join("");
+}
+function buildQRModel({ value, errorLevel, margin, dotType, cornerSquareType, cornerDotType }) {
+  const qr = qrcode(0, errorLevel);
+  qr.addData(toByteString(value), "Byte");
+  qr.make();
+  const n = qr.getModuleCount();
+  const finders = [
+    [0, 0],
+    [0, n - 7],
+    [n - 7, 0]
+  ];
+  const isFinder = (row, col) => finders.some(([fr, fc]) => row >= fr && row < fr + 7 && col >= fc && col < fc + 7);
+  let dataPath = "";
+  for (let row = 0; row < n; row++) {
+    for (let col = 0; col < n; col++) {
+      if (isFinder(row, col) || !qr.isDark(row, col)) continue;
+      dataPath += dotPath(margin + col, margin + row, 1, dotType);
+    }
+  }
+  const corners = finders.map(([fr, fc]) => ({
+    ring: cornerSquarePath(margin + fc, margin + fr, cornerSquareType),
+    dot: cornerDotPath(margin + fc + 2, margin + fr + 2, cornerDotType)
+  }));
+  return { size: n + margin * 2, moduleCount: n, dataPath, corners };
+}
+
+// src/qrcode/QRCode.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_COLOR = neutralRamp[950];
+function StatusLayer({ status, onRefresh }) {
+  if (status === "loading") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Loader2Icon, { size: 28, "aria-hidden": true, className: "animate-spin text-mari-primary motion-reduce:animate-none" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-mari-muted", children: "Haz\u0131rlan\u0131yor\u2026" })
+    ] });
+  }
+  if (status === "scanned") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(CircleCheckIcon, { size: 28, "aria-hidden": true, className: "text-mari-success" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-mari-foreground", children: "Tarand\u0131" }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-mari-muted", children: "Telefonunuzdan onaylay\u0131n" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-mari-foreground", children: "QR kodun s\xFCresi doldu" }),
+    onRefresh && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onRefresh,
+        className: "relative inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-sm font-medium text-mari-primary transition-colors hover:bg-mari-primary-subtle focus-visible:outline-2 focus-visible:outline-mari-ring pointer-coarse:before:absolute pointer-coarse:before:inset-x-0 pointer-coarse:before:-inset-y-1.5",
+        children: [
+          /* @__PURE__ */ jsx(RotateCwIcon, { size: 14, "aria-hidden": true }),
+          "Yenile"
+        ]
+      }
+    )
+  ] });
+}
+function QRCode({
+  value,
+  size = "10rem",
+  errorLevel,
+  color = DEFAULT_COLOR,
+  colorEnd,
+  bgColor = "#ffffff",
+  cornerColor,
+  dotType = "square",
+  cornerSquareType = "square",
+  cornerDotType = "square",
+  icon,
+  iconSize = 0.22,
+  margin = 2,
+  bordered = true,
+  status = "active",
+  onRefresh,
+  statusRender,
+  "aria-label": ariaLabel = "QR kod",
+  className,
+  skeleton = false
+}) {
+  const gradientId = useId();
+  const level = errorLevel ?? (icon ? "H" : "M");
+  const model = useMemo(
+    () => buildQRModel({ value, errorLevel: level, margin, dotType, cornerSquareType, cornerDotType }),
+    [value, level, margin, dotType, cornerSquareType, cornerDotType]
+  );
+  const fill = colorEnd ? `url(#${gradientId})` : color;
+  const cornerFill = cornerColor ?? fill;
+  const iconEdge = model.size * Math.min(Math.max(iconSize, 0.1), 0.3);
+  const iconPos = (model.size - iconEdge) / 2;
+  const iconPad = iconEdge * 0.08;
+  const dimension = typeof size === "number" ? `${size}px` : size;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-busy": skeleton || status === "loading" || void 0,
+      className: cn("relative inline-flex shrink-0", bordered && "rounded-lg border border-mari-border bg-mari-surface p-2", className),
+      children: [
+        skeleton ? /* @__PURE__ */ jsx("span", { ...skeletonBoxProps("block rounded-md"), style: { width: dimension, height: dimension } }) : /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            role: "img",
+            "aria-label": ariaLabel,
+            viewBox: `0 0 ${model.size} ${model.size}`,
+            width: dimension,
+            height: dimension,
+            shapeRendering: dotType === "square" && cornerSquareType === "square" && cornerDotType === "square" ? "crispEdges" : void 0,
+            className: cn("block rounded-md", status !== "active" && "opacity-10"),
+            children: [
+              colorEnd && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: colorEnd })
+              ] }) }),
+              bgColor !== "transparent" && /* @__PURE__ */ jsx("rect", { width: model.size, height: model.size, fill: bgColor }),
+              /* @__PURE__ */ jsx("path", { d: model.dataPath, fill }),
+              model.corners.map((c, i) => (
+                // Üç konum işareti sabit sırada.
+                /* @__PURE__ */ jsxs("g", { fill: cornerFill, children: [
+                  /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: c.ring }),
+                  /* @__PURE__ */ jsx("path", { d: c.dot })
+                ] }, i)
+              )),
+              icon && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    x: iconPos - iconPad,
+                    y: iconPos - iconPad,
+                    width: iconEdge + iconPad * 2,
+                    height: iconEdge + iconPad * 2,
+                    rx: iconPad * 2,
+                    fill: bgColor === "transparent" ? "#ffffff" : bgColor
+                  }
+                ),
+                /* @__PURE__ */ jsx("image", { href: icon, x: iconPos, y: iconPos, width: iconEdge, height: iconEdge, preserveAspectRatio: "xMidYMid meet" })
+              ] })
+            ]
+          }
+        ),
+        !skeleton && status !== "active" && /* @__PURE__ */ jsx("div", { role: "status", className: "absolute inset-0 flex flex-col items-center justify-center gap-1.5 rounded-lg p-2 text-center", children: statusRender ? statusRender(status) : /* @__PURE__ */ jsx(StatusLayer, { status, onRefresh }) })
+      ]
+    }
+  );
+}
+export {
+  QRCode
+};
+//# sourceMappingURL=qrcode.js.map

package/dist/qrcode.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/qrcode/QRCode.tsx","../src/qrcode/utils.ts"],"sourcesContent":["\"use client\";\n\nimport React, { useId, useMemo } from \"react\";\nimport { CircleCheckIcon, Loader2Icon, RotateCwIcon } from \"lucide-react\";\nimport { cn } from \"@mari-ui/core\";\nimport { neutralRamp } from \"@mari-ui/tokens\";\nimport { skeletonBoxProps } from \"../lib/skeleton\";\nimport type { QRCodeProps, QRStatus } from \"./types\";\nimport { buildQRModel } from \"./utils\";\n\nexport type { QRCodeProps };\n\nconst DEFAULT_COLOR = neutralRamp[950];\n\nfunction StatusLayer({ status, onRefresh }: Readonly<{ status: Exclude<QRStatus, \"active\">; onRefresh?: () => void }>) {\n  if (status === \"loading\") {\n    return (\n      <>\n        <Loader2Icon size={28} aria-hidden className=\"animate-spin text-mari-primary motion-reduce:animate-none\" />\n        <span className=\"text-sm text-mari-muted\">Hazırlanıyor…</span>\n      </>\n    );\n  }\n  if (status === \"scanned\") {\n    return (\n      <>\n        <CircleCheckIcon size={28} aria-hidden className=\"text-mari-success\" />\n        <span className=\"text-sm font-medium text-mari-foreground\">Tarandı</span>\n        <span className=\"text-xs text-mari-muted\">Telefonunuzdan onaylayın</span>\n      </>\n    );\n  }\n  return (\n    <>\n      <span className=\"text-sm font-medium text-mari-foreground\">QR kodun süresi doldu</span>\n      {onRefresh && (\n        <button\n          type=\"button\"\n          onClick={onRefresh}\n          className=\"relative inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-sm font-medium text-mari-primary transition-colors hover:bg-mari-primary-subtle focus-visible:outline-2 focus-visible:outline-mari-ring pointer-coarse:before:absolute pointer-coarse:before:inset-x-0 pointer-coarse:before:-inset-y-1.5\"\n        >\n          <RotateCwIcon size={14} aria-hidden />\n          Yenile\n        </button>\n      )}\n    </>\n  );\n}\n\n/**\n * Faz 16.3 — yapı ant.design QRCode'dan (değer, boyut, hata düzeltme, renk,\n * ikon, kenarlık, durum katmanı: loading/expired/scanned + Yenile), çizim\n * kullanıcının `qr-code-generator` projesindeki renderer'dan (nokta stilleri,\n * köşe şekilleri, gradyan, logo). Tek bağımlılık `qrcode-generator` (MIT, sıfır\n * bağımlılık). Saf SVG → SSR'da da çizilir, her çözünürlükte keskin.\n *\n * Varsayılan renkler temadan bağımsız koyu-üstü-açık: bazı okuyucular ters\n * (açık-üstü-koyu) QR'ı çözemez. Erişilebilirlik: `role=\"img\"` + ad; kodun\n * içeriğini (URL) görünür metin olarak da verin — görme engelli kullanıcı\n * QR'ı okutamaz. Durum katmanı `role=\"status\"` ile duyurulur.\n */\nexport function QRCode({\n  value,\n  size = \"10rem\",\n  errorLevel,\n  color = DEFAULT_COLOR,\n  colorEnd,\n  bgColor = \"#ffffff\",\n  cornerColor,\n  dotType = \"square\",\n  cornerSquareType = \"square\",\n  cornerDotType = \"square\",\n  icon,\n  iconSize = 0.22,\n  margin = 2,\n  bordered = true,\n  status = \"active\",\n  onRefresh,\n  statusRender,\n  \"aria-label\": ariaLabel = \"QR kod\",\n  className,\n  skeleton = false,\n}: Readonly<QRCodeProps>) {\n  const gradientId = useId();\n  const level = errorLevel ?? (icon ? \"H\" : \"M\");\n  const model = useMemo(\n    () => buildQRModel({ value, errorLevel: level, margin, dotType, cornerSquareType, cornerDotType }),\n    [value, level, margin, dotType, cornerSquareType, cornerDotType]\n  );\n\n  const fill = colorEnd ? `url(#${gradientId})` : color;\n  const cornerFill = cornerColor ?? fill;\n  const iconEdge = model.size * Math.min(Math.max(iconSize, 0.1), 0.3);\n  const iconPos = (model.size - iconEdge) / 2;\n  const iconPad = iconEdge * 0.08;\n  const dimension = typeof size === \"number\" ? `${size}px` : size;\n\n  return (\n    <div\n      aria-busy={skeleton || status === \"loading\" || undefined}\n      className={cn(\"relative inline-flex shrink-0\", bordered && \"rounded-lg border border-mari-border bg-mari-surface p-2\", className)}\n    >\n      {skeleton ? (\n        <span {...skeletonBoxProps(\"block rounded-md\")} style={{ width: dimension, height: dimension }} />\n      ) : (\n        <svg\n          role=\"img\"\n          aria-label={ariaLabel}\n          viewBox={`0 0 ${model.size} ${model.size}`}\n          width={dimension}\n          height={dimension}\n          // Yalnız TAMAMEN kare kodda: crispEdges yuvarlak/kalp köşe işaretlerini\n          // tırtıklı çizip okunamaz yapıyordu (jsQR ile ölçüldü).\n          shapeRendering={dotType === \"square\" && cornerSquareType === \"square\" && cornerDotType === \"square\" ? \"crispEdges\" : undefined}\n          className={cn(\"block rounded-md\", status !== \"active\" && \"opacity-10\")}\n        >\n          {colorEnd && (\n            <defs>\n              <linearGradient id={gradientId} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n                <stop offset=\"0%\" stopColor={color} />\n                <stop offset=\"100%\" stopColor={colorEnd} />\n              </linearGradient>\n            </defs>\n          )}\n          {bgColor !== \"transparent\" && <rect width={model.size} height={model.size} fill={bgColor} />}\n          <path d={model.dataPath} fill={fill} />\n          {model.corners.map((c, i) => (\n            // Üç konum işareti sabit sırada.\n            <g key={i} fill={cornerFill}>\n              <path fillRule=\"evenodd\" d={c.ring} />\n              <path d={c.dot} />\n            </g>\n          ))}\n          {icon && (\n            <>\n              <rect\n                x={iconPos - iconPad}\n                y={iconPos - iconPad}\n                width={iconEdge + iconPad * 2}\n                height={iconEdge + iconPad * 2}\n                rx={iconPad * 2}\n                fill={bgColor === \"transparent\" ? \"#ffffff\" : bgColor}\n              />\n              <image href={icon} x={iconPos} y={iconPos} width={iconEdge} height={iconEdge} preserveAspectRatio=\"xMidYMid meet\" />\n            </>\n          )}\n        </svg>\n      )}\n      {!skeleton && status !== \"active\" && (\n        <div role=\"status\" className=\"absolute inset-0 flex flex-col items-center justify-center gap-1.5 rounded-lg p-2 text-center\">\n          {statusRender ? statusRender(status) : <StatusLayer status={status} onRefresh={onRefresh} />}\n        </div>\n      )}\n    </div>\n  );\n}\n","import qrcode from \"qrcode-generator\";\nimport type { QRCornerDotType, QRCornerSquareType, QRDotType, QRErrorLevel } from \"./types\";\n\n/**\n * Faz 16.3 — kullanıcının `qr-code-generator` projesindeki `renderQRtoSVG`\n * mantığının saf (DOM'suz, SSR'da çalışan) portu. Birim = 1 modül: viewBox\n * modül cinsindendir, boyut CSS ile verilir → her çözünürlükte keskin.\n */\n\nconst r2 = (n: number) => Math.round(n * 100) / 100;\n\nexport function svgRect(x: number, y: number, w: number, h: number): string {\n  return `M${r2(x)},${r2(y)}h${r2(w)}v${r2(h)}h${r2(-w)}z`;\n}\n\nexport function svgCircle(cx: number, cy: number, radius: number): string {\n  // İki 180° yay (başı = sonu olan tek yay SVG'de çizilmez).\n  return `M${r2(cx - radius)},${r2(cy)}a${r2(radius)},${r2(radius)} 0 1,0 ${r2(radius * 2)},0a${r2(radius)},${r2(radius)} 0 1,0 ${r2(-radius * 2)},0z`;\n}\n\nexport function svgRoundRect(x: number, y: number, w: number, h: number, rad: number): string {\n  const r = Math.min(rad, w / 2, h / 2);\n  return (\n    `M${r2(x + r)},${r2(y)}` +\n    `h${r2(w - 2 * r)}` +\n    `a${r2(r)},${r2(r)} 0 0 1 ${r2(r)},${r2(r)}` +\n    `v${r2(h - 2 * r)}` +\n    `a${r2(r)},${r2(r)} 0 0 1 ${r2(-r)},${r2(r)}` +\n    `h${r2(-(w - 2 * r))}` +\n    `a${r2(r)},${r2(r)} 0 0 1 ${r2(-r)},${r2(-r)}` +\n    `v${r2(-(h - 2 * r))}` +\n    `a${r2(r)},${r2(r)} 0 0 1 ${r2(r)},${r2(-r)}z`\n  );\n}\n\nexport function svgHeart(x: number, y: number, s: number): string {\n  const p = r2;\n  return (\n    `M${p(x + s * 0.5)},${p(y + s * 0.25)}` +\n    `C${p(x + s * 0.3)},${p(y)} ${p(x)},${p(y)} ${p(x)},${p(y + s * 0.25)}` +\n    `C${p(x)},${p(y + s * 0.55)} ${p(x + s * 0.3)},${p(y + s * 0.7)} ${p(x + s * 0.5)},${p(y + s * 0.9)}` +\n    `C${p(x + s * 0.7)},${p(y + s * 0.7)} ${p(x + s)},${p(y + s * 0.55)} ${p(x + s)},${p(y + s * 0.25)}` +\n    `C${p(x + s)},${p(y)} ${p(x + s * 0.7)},${p(y)} ${p(x + s * 0.5)},${p(y + s * 0.25)}z`\n  );\n}\n\n/*\n * Kaynak renderer'daki kalp NOKTA ve kalp köşe HALKASI bilinçli olarak yok:\n * tarayıcıda jsQR ile çözdürüldüğünde (200/400px) hiçbir kombinasyonda\n * okunamadı. Kalp yalnız 3×3 merkezde (cornerDotType) — o okunuyor.\n */\nfunction dotPath(x: number, y: number, s: number, type: QRDotType): string {\n  switch (type) {\n    case \"square\":\n      return svgRect(x, y, s, s);\n    case \"dots\":\n      return svgCircle(x + s / 2, y + s / 2, s / 2);\n    case \"rounded\":\n      return svgRoundRect(x, y, s, s, s * 0.25);\n    case \"extra-rounded\":\n      return svgRoundRect(x, y, s, s, s * 0.48);\n  }\n}\n\n/** Konum işaretinin 7×7 halkası: dış − iç (evenodd ile delinir). */\nfunction cornerSquarePath(x: number, y: number, type: QRCornerSquareType): string {\n  switch (type) {\n    case \"square\":\n      return `${svgRect(x, y, 7, 7)} ${svgRect(x + 1, y + 1, 5, 5)}`;\n    case \"extra-rounded\":\n      return `${svgRoundRect(x, y, 7, 7, 1.4)} ${svgRoundRect(x + 1, y + 1, 5, 5, 0.5)}`;\n    case \"dot\":\n      return `${svgCircle(x + 3.5, y + 3.5, 3.5)} ${svgCircle(x + 3.5, y + 3.5, 2.5)}`;\n  }\n}\n\n/** Konum işaretinin 3×3 merkezi. */\nfunction cornerDotPath(x: number, y: number, type: QRCornerDotType): string {\n  switch (type) {\n    case \"square\":\n      return svgRect(x, y, 3, 3);\n    case \"dot\":\n      return svgCircle(x + 1.5, y + 1.5, 1.5);\n    case \"heart\":\n      return svgHeart(x, y, 3);\n  }\n}\n\n/**\n * UTF-8 baytlarını tek baytlık karakter dizisine çevirir. `qrcode-generator`ın\n * varsayılan kodlaması her karakterin yalnız alt baytını alır: \"ş\" (U+015F)\n * \"_\" olur ve Türkçe içerik bozuk kodlanır. Kütüphanenin global\n * `stringToBytes` ayarına dokunmadan doğru baytları verir.\n */\nexport function toByteString(value: string): string {\n  return Array.from(new TextEncoder().encode(value), (b) => String.fromCharCode(b)).join(\"\");\n}\n\nexport interface QRModel {\n  /** Kenar boşluğu dahil viewBox kenarı (modül). */\n  size: number;\n  moduleCount: number;\n  /** Konum işaretleri hariç tüm veri modülleri — tek yol. */\n  dataPath: string;\n  /** Üç konum işaretinin halka + merkez yolları. */\n  corners: { ring: string; dot: string }[];\n}\n\nexport interface QRModelOptions {\n  value: string;\n  errorLevel: QRErrorLevel;\n  margin: number;\n  dotType: QRDotType;\n  cornerSquareType: QRCornerSquareType;\n  cornerDotType: QRCornerDotType;\n}\n\nexport function buildQRModel({ value, errorLevel, margin, dotType, cornerSquareType, cornerDotType }: QRModelOptions): QRModel {\n  const qr = qrcode(0, errorLevel);\n  qr.addData(toByteString(value), \"Byte\");\n  qr.make();\n\n  const n = qr.getModuleCount();\n  const finders = [\n    [0, 0],\n    [0, n - 7],\n    [n - 7, 0],\n  ] as const;\n  const isFinder = (row: number, col: number) => finders.some(([fr, fc]) => row >= fr && row < fr + 7 && col >= fc && col < fc + 7);\n\n  // Her nokta modülün TAMAMINI kaplar. Kaynak renderer her yandan %15 boşluk\n  // bırakıyordu (nokta = modülün %70'i): tarayıcıda jsQR ile çözdürüldüğünde o\n  // boşlukla stilli kodlar hiç çözülmedi, %5'te bazı boyutlarda çözülmedi,\n  // boşluksuz tüm stiller 150–600px'te çözüldü. Değiştirirseniz yeniden doğrulayın.\n  let dataPath = \"\";\n  for (let row = 0; row < n; row++) {\n    for (let col = 0; col < n; col++) {\n      if (isFinder(row, col) || !qr.isDark(row, col)) continue;\n      dataPath += dotPath(margin + col, margin + row, 1, dotType);\n    }\n  }\n\n  const corners = finders.map(([fr, fc]) => ({\n    ring: cornerSquarePath(margin + fc, margin + fr, cornerSquareType),\n    dot: cornerDotPath(margin + fc + 2, margin + fr + 2, cornerDotType),\n  }));\n\n  return { size: n + margin * 2, moduleCount: n, dataPath, corners };\n}\n"],"mappings":"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","names":[]}

package/dist/radio.d.ts

@@ -0,0 +1 @@
+export * from "./types/radio/index";

package/dist/radio.js

@@ -0,0 +1,221 @@
+"use client";
+
+import {
+  useFieldGroup,
+  useFieldSkeleton
+} from "./chunk-LBQMEHK6.js";
+import {
+  checkableTouchTargetClass,
+  fontSizeClass
+} from "./chunk-FFXRFQSU.js";
+import {
+  bgSolidClass,
+  borderStrongColorClass,
+  checkedBgSolidClass,
+  checkedBorderStrongClass
+} from "./chunk-IP2J3BWY.js";
+import {
+  skeletonBoxProps
+} from "./chunk-54HHEXXD.js";
+
+// src/radio/Radio.tsx
+import { forwardRef, useId, useImperativeHandle, useRef } from "react";
+import { cn as cn2, useControllableState } from "@mari-ui/core";
+
+// src/radio/utils.ts
+import { cn } from "@mari-ui/core";
+var SIZE_CLASS = {
+  sm: "w-3 h-3 text-sm",
+  md: "w-4 h-4 text-base",
+  lg: "w-5 h-5 text-lg"
+};
+var DOT_SIZE_CLASS = {
+  sm: "w-1 h-1",
+  md: "w-2 h-2",
+  lg: "w-2.5 h-2.5"
+};
+function getSizeClasses(size) {
+  return SIZE_CLASS[size];
+}
+function getDotSizeClasses(size) {
+  return DOT_SIZE_CLASS[size];
+}
+function getVariantClasses(variant, color) {
+  const fillColor = color ?? "primary";
+  const restBorderClass = color ? borderStrongColorClass[color] : "border-mari-input";
+  if (variant === "solid") return cn("border bg-mari-surface-alt", restBorderClass, checkedBgSolidClass[fillColor], "checked:border-transparent");
+  return cn("border bg-mari-surface", restBorderClass, checkedBorderStrongClass[fillColor]);
+}
+function getVariantDotClasses(variant, color) {
+  const fillColor = color ?? "primary";
+  return variant === "solid" ? "bg-mari-surface" : bgSolidClass[fillColor];
+}
+
+// src/radio/Radio.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DESCRIPTION_INDENT_CLASS = { sm: "pl-5", md: "pl-6", lg: "pl-7" };
+var Radio = forwardRef(
+  ({
+    autoFocus = false,
+    checked,
+    defaultChecked = false,
+    disabled = false,
+    onChange,
+    onBlur,
+    onFocus,
+    className,
+    classNames = {},
+    label,
+    description,
+    variant = "outline",
+    color,
+    size = "md",
+    id,
+    value,
+    name,
+    skeleton = false
+  }, ref) => {
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => inputRef.current, []);
+    const [isChecked, setIsChecked] = useControllableState({ value: checked, defaultValue: defaultChecked });
+    const descriptionId = useId();
+    const handleChange = (e) => {
+      setIsChecked(e.target.checked);
+      onChange?.(e);
+    };
+    if (skeleton) {
+      return /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: cn2("inline-flex items-center gap-2", classNames.wrapper), children: [
+        /* @__PURE__ */ jsx("span", { ...skeletonBoxProps(cn2("shrink-0 rounded-full", getSizeClasses(size))) }),
+        label && /* @__PURE__ */ jsx("span", { ...skeletonBoxProps(cn2("rounded-sm", fontSizeClass[size])), children: label })
+      ] });
+    }
+    const baseClasses = cn2(
+      "relative shrink-0 cursor-pointer appearance-none rounded-full border transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring",
+      getSizeClasses(size),
+      getVariantClasses(variant, color),
+      disabled && "opacity-50 cursor-not-allowed",
+      classNames.radio,
+      className
+    );
+    return /* @__PURE__ */ jsxs("label", { className: cn2("inline-flex flex-col gap-1 cursor-pointer", disabled && "cursor-not-allowed", classNames.wrapper), children: [
+      /* @__PURE__ */ jsxs("span", { className: cn2("relative inline-flex items-center gap-2", checkableTouchTargetClass[size]), children: [
+        /* @__PURE__ */ jsxs("span", { className: "relative inline-flex items-center justify-center", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              id,
+              type: "radio",
+              autoFocus,
+              checked: isChecked,
+              disabled,
+              value,
+              name,
+              "aria-describedby": description ? descriptionId : void 0,
+              onChange: handleChange,
+              onBlur,
+              onFocus,
+              className: baseClasses
+            }
+          ),
+          isChecked && // Nokta küçükten büyür (@starting-style) — seçim anlık "belirmez".
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn2(
+                "pointer-events-none absolute rounded-full transition-[scale] duration-150 starting:scale-0 motion-reduce:transition-none",
+                getDotSizeClasses(size),
+                getVariantDotClasses(variant, color)
+              )
+            }
+          )
+        ] }),
+        label && /* @__PURE__ */ jsx("span", { className: cn2("select-none text-mari-foreground", fontSizeClass[size], disabled && "text-mari-disabled", classNames.label), children: label })
+      ] }),
+      description && // Etiket hizasında başlar (kutu genişliği + gap): sm 12+8, md 16+8, lg 20+8px.
+      /* @__PURE__ */ jsx("span", { id: descriptionId, className: cn2("text-xs text-mari-muted", DESCRIPTION_INDENT_CLASS[size]), children: description })
+    ] });
+  }
+);
+Radio.displayName = "Radio";
+
+// src/radio/RadioGroup.tsx
+import { useId as useId2 } from "react";
+import { cn as cn3, useControllableState as useControllableState2 } from "@mari-ui/core";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function RadioGroup({
+  name,
+  value,
+  defaultValue,
+  disabled = false,
+  options = [],
+  onChange,
+  variant = "outline",
+  color,
+  size = "md",
+  block = false,
+  orientation = "horizontal",
+  className,
+  skeleton: ownSkeleton,
+  "aria-label": ownAriaLabel,
+  "aria-labelledby": ownAriaLabelledBy
+}) {
+  const field = useFieldGroup({ "aria-label": ownAriaLabel, "aria-labelledby": ownAriaLabelledBy, disabled });
+  const skeleton = useFieldSkeleton(ownSkeleton);
+  const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } = field;
+  const groupDisabled = !!field.disabled;
+  const groupColor = field["aria-invalid"] ? color ?? "error" : color;
+  const [selectedValue, setSelectedValue] = useControllableState2({
+    value,
+    defaultValue,
+    onChange: (v) => v !== void 0 && onChange?.(v)
+  });
+  const autoName = useId2();
+  const groupName = name ?? autoName;
+  const parsedOptions = options.map(
+    (opt) => typeof opt === "string" || typeof opt === "number" ? { label: opt, value: opt } : opt
+  );
+  return (
+    // `role="radiogroup"` eskiden yoktu — birden çok `<input type="radio">`
+    // sadece aynı `name`'i paylaşarak native olarak bir grup oluşturuyordu
+    // ama ekran okuyucuya bunun tek bir SEÇİM grubu olduğu (ve varsa grubun
+    // adının) ayrıca duyurulması gerekir.
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        role: "radiogroup",
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": field["aria-describedby"],
+        "aria-invalid": field["aria-invalid"],
+        "aria-required": field["aria-required"],
+        "aria-orientation": orientation,
+        "aria-busy": skeleton || void 0,
+        className: cn3("flex", orientation === "vertical" ? "flex-col gap-3" : "flex-wrap gap-x-4 gap-y-2", block && "w-full", className),
+        children: parsedOptions.map((opt) => /* @__PURE__ */ jsx2(
+          Radio,
+          {
+            value: opt.value,
+            name: groupName,
+            label: opt.label,
+            description: opt.description,
+            skeleton,
+            disabled: groupDisabled || opt.disabled,
+            checked: selectedValue === opt.value,
+            onChange: () => setSelectedValue(opt.value),
+            size,
+            variant,
+            color: groupColor
+          },
+          opt.value
+        ))
+      }
+    )
+  );
+}
+RadioGroup.displayName = "RadioGroup";
+export {
+  Radio,
+  RadioGroup
+};
+//# sourceMappingURL=radio.js.map

package/dist/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/radio/Radio.tsx","../src/radio/utils.ts","../src/radio/RadioGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { forwardRef, useId, useImperativeHandle, useRef } from \"react\";\nimport { cn, useControllableState } from \"@mari-ui/core\";\nimport { skeletonBoxProps } from \"../lib/skeleton\";\nimport { checkableTouchTargetClass, fontSizeClass } from \"../lib/sizeClasses\";\nimport type { RadioChangeEvent, RadioProps } from \"./types\";\nimport { getDotSizeClasses, getSizeClasses, getVariantClasses, getVariantDotClasses } from \"./utils\";\n\nexport type { RadioProps };\n\n/**\n * Eskiden `isChecked` sadece İLK render'da `defaultChecked ?? checked ?? false`\n * ile kuruluyor, sonra `checked` prop'u değiştiğinde bir `useEffect` ile\n * SENKRONİZE edilmeye çalışılıyordu — ama JSX zaten `checked ?? isChecked`\n * kullandığı için bu effect'in render üzerinde hiçbir etkisi yoktu (ölü\n * senkronizasyon). `useControllableState` bunu tek, doğru bir mekanizmaya indirger.\n */\nconst DESCRIPTION_INDENT_CLASS = { sm: \"pl-5\", md: \"pl-6\", lg: \"pl-7\" } as const;\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      autoFocus = false,\n      checked,\n      defaultChecked = false,\n      disabled = false,\n      onChange,\n      onBlur,\n      onFocus,\n      className,\n      classNames = {},\n      label,\n      description,\n      variant = \"outline\",\n      color,\n      size = \"md\",\n      id,\n      value,\n      name,\n      skeleton = false,\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(ref, () => inputRef.current!, []);\n\n    const [isChecked, setIsChecked] = useControllableState<boolean>({ value: checked, defaultValue: defaultChecked });\n    const descriptionId = useId();\n\n    const handleChange = (e: RadioChangeEvent) => {\n      setIsChecked(e.target.checked);\n      onChange?.(e);\n    };\n\n    if (skeleton) {\n      return (\n        <span aria-hidden className={cn(\"inline-flex items-center gap-2\", classNames.wrapper)}>\n          <span {...skeletonBoxProps(cn(\"shrink-0 rounded-full\", getSizeClasses(size)))} />\n          {label && <span {...skeletonBoxProps(cn(\"rounded-sm\", fontSizeClass[size]))}>{label}</span>}\n        </span>\n      );\n    }\n\n    const baseClasses = cn(\n      \"relative shrink-0 cursor-pointer appearance-none rounded-full border transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring\",\n      getSizeClasses(size),\n      getVariantClasses(variant, color),\n      disabled && \"opacity-50 cursor-not-allowed\",\n      classNames.radio,\n      className\n    );\n\n    return (\n      <label className={cn(\"inline-flex flex-col gap-1 cursor-pointer\", disabled && \"cursor-not-allowed\", classNames.wrapper)}>\n        <span className={cn(\"relative inline-flex items-center gap-2\", checkableTouchTargetClass[size])}>\n          <span className=\"relative inline-flex items-center justify-center\">\n            <input\n              ref={inputRef}\n              id={id}\n              type=\"radio\"\n              // eslint-disable-next-line jsx-a11y/no-autofocus -- pass-through: kütüphane autofocus'u ZORLAMIYOR, tüketicinin verdiği prop'u iletiyor.\n              autoFocus={autoFocus}\n              checked={isChecked}\n              disabled={disabled}\n              value={value}\n              name={name}\n              aria-describedby={description ? descriptionId : undefined}\n              onChange={handleChange}\n              onBlur={onBlur}\n              onFocus={onFocus}\n              className={baseClasses}\n            />\n            {isChecked && (\n              // Nokta küçükten büyür (@starting-style) — seçim anlık \"belirmez\".\n              <span\n                className={cn(\n                  \"pointer-events-none absolute rounded-full transition-[scale] duration-150 starting:scale-0 motion-reduce:transition-none\",\n                  getDotSizeClasses(size),\n                  getVariantDotClasses(variant, color)\n                )}\n              />\n            )}\n          </span>\n          {label && (\n            <span className={cn(\"select-none text-mari-foreground\", fontSizeClass[size], disabled && \"text-mari-disabled\", classNames.label)}>\n              {label}\n            </span>\n          )}\n        </span>\n        {description && (\n          // Etiket hizasında başlar (kutu genişliği + gap): sm 12+8, md 16+8, lg 20+8px.\n          <span id={descriptionId} className={cn(\"text-xs text-mari-muted\", DESCRIPTION_INDENT_CLASS[size])}>\n            {description}\n          </span>\n        )}\n      </label>\n    );\n  }\n);\n\nRadio.displayName = \"Radio\";\n","import { cn, type ColorRole, type Size, type Variant } from \"@mari-ui/core\";\nimport { bgSolidClass, borderStrongColorClass, checkedBgSolidClass, checkedBorderStrongClass } from \"../lib/colorClasses\";\n\nconst SIZE_CLASS: Record<Size, string> = {\n  sm: \"w-3 h-3 text-sm\",\n  md: \"w-4 h-4 text-base\",\n  lg: \"w-5 h-5 text-lg\",\n};\n\nconst DOT_SIZE_CLASS: Record<Size, string> = {\n  sm: \"w-1 h-1\",\n  md: \"w-2 h-2\",\n  lg: \"w-2.5 h-2.5\",\n};\n\nexport function getSizeClasses(size: Size): string {\n  return SIZE_CLASS[size];\n}\n\nexport function getDotSizeClasses(size: Size): string {\n  return DOT_SIZE_CLASS[size];\n}\n\n/**\n * `color` verilmediyse dinlenme halindeki (seçilmemiş) kenarlık nötr/gri\n * (`border-mari-input`) — sadece seçilince rol rengine bürünür.\n *\n * Faz 15: `solid` varyantında dolgu `checked:` önekisizdi — SEÇİLMEMİŞ radio\n * da tamamen dolu çiziliyor, bir grupta hepsi seçili görünüyordu. Açıkça\n * verilen renk (doğrulama) ve seçili halka rol renginde (açık `-border` tonu <3:1).\n */\nexport function getVariantClasses(variant: Extract<Variant, \"solid\" | \"outline\">, color: ColorRole | undefined): string {\n  const fillColor = color ?? \"primary\";\n  const restBorderClass = color ? borderStrongColorClass[color] : \"border-mari-input\";\n  if (variant === \"solid\") return cn(\"border bg-mari-surface-alt\", restBorderClass, checkedBgSolidClass[fillColor], \"checked:border-transparent\");\n  return cn(\"border bg-mari-surface\", restBorderClass, checkedBorderStrongClass[fillColor]);\n}\n\nexport function getVariantDotClasses(variant: Extract<Variant, \"solid\" | \"outline\">, color: ColorRole | undefined): string {\n  const fillColor = color ?? \"primary\";\n  return variant === \"solid\" ? \"bg-mari-surface\" : bgSolidClass[fillColor];\n}\n","\"use client\";\n\nimport React, { useId } from \"react\";\nimport { cn, useControllableState } from \"@mari-ui/core\";\nimport { useFieldGroup, useFieldSkeleton } from \"../lib/fieldContext\";\nimport { Radio } from \"./Radio\";\nimport type { RadioGroupProps, RadioOption } from \"./types\";\n\nexport type { RadioGroupProps };\n\nexport function RadioGroup({\n  name,\n  value,\n  defaultValue,\n  disabled = false,\n  options = [],\n  onChange,\n  variant = \"outline\",\n  color,\n  size = \"md\",\n  block = false,\n  orientation = \"horizontal\",\n  className,\n  skeleton: ownSkeleton,\n  \"aria-label\": ownAriaLabel,\n  \"aria-labelledby\": ownAriaLabelledBy,\n}: Readonly<RadioGroupProps>) {\n  // Field içindeyse etiketi grubun adı olur; ipucu/hata, zorunluluk ve devre dışı oradan.\n  const field = useFieldGroup({ \"aria-label\": ownAriaLabel, \"aria-labelledby\": ownAriaLabelledBy, disabled });\n  const skeleton = useFieldSkeleton(ownSkeleton);\n  const { \"aria-label\": ariaLabel, \"aria-labelledby\": ariaLabelledBy } = field;\n  const groupDisabled = !!field.disabled;\n  const groupColor = field[\"aria-invalid\"] ? (color ?? \"error\") : color;\n  const [selectedValue, setSelectedValue] = useControllableState<string | number | undefined>({\n    value,\n    defaultValue,\n    onChange: (v) => v !== undefined && onChange?.(v),\n  });\n\n  // Faz 15: `name` verilmezse radyolar tarayıcı gözünde tek bir grup OLMUYORDU —\n  // Ok tuşlarıyla gezinme çalışmıyor, Tab her seçenekte duruyordu. Otomatik ad.\n  const autoName = useId();\n  const groupName = name ?? autoName;\n\n  const parsedOptions: RadioOption[] = options.map((opt) =>\n    typeof opt === \"string\" || typeof opt === \"number\" ? { label: opt, value: opt } : opt\n  );\n\n  return (\n    // `role=\"radiogroup\"` eskiden yoktu — birden çok `<input type=\"radio\">`\n    // sadece aynı `name`'i paylaşarak native olarak bir grup oluşturuyordu\n    // ama ekran okuyucuya bunun tek bir SEÇİM grubu olduğu (ve varsa grubun\n    // adının) ayrıca duyurulması gerekir.\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-describedby={field[\"aria-describedby\"]}\n      aria-invalid={field[\"aria-invalid\"]}\n      aria-required={field[\"aria-required\"]}\n      aria-orientation={orientation}\n      aria-busy={skeleton || undefined}\n      className={cn(\"flex\", orientation === \"vertical\" ? \"flex-col gap-3\" : \"flex-wrap gap-x-4 gap-y-2\", block && \"w-full\", className)}\n    >\n      {parsedOptions.map((opt) => (\n        <Radio\n          key={opt.value}\n          value={opt.value}\n          name={groupName}\n          label={opt.label}\n          description={opt.description}\n          skeleton={skeleton}\n          disabled={groupDisabled || opt.disabled}\n          checked={selectedValue === opt.value}\n          onChange={() => setSelectedValue(opt.value)}\n          size={size}\n          variant={variant}\n          color={groupColor}\n        />\n      ))}\n    </div>\n  );\n}\n\nRadioGroup.displayName = \"RadioGroup\";\n"],"mappings":"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","names":["cn","cn","useId","cn","useControllableState","jsx","useControllableState","useId","cn"]}

package/dist/rate.d.ts

@@ -0,0 +1 @@
+export * from "./types/rate/index";