feat(ui): renk paleti, ikonlar, MoneyInput ve navigasyon

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-05 02:57:58 +03:00
parent 8dd5fd42e3
commit d2aa9d8ae2
12 changed files with 600 additions and 6 deletions
@@ -0,0 +1,78 @@
+"use client";
+
+import { Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { ICON_KEYS, SWATCHES, type IconKey, type Swatch } from "@/shared/appearance";
+import { AppIcon } from "./app-icon";
+import { swatchStyle } from "./swatch";
+import { tr } from "@/i18n/tr";
+
+/** Renk seçici (radio grubu, klavye ile gezilebilir). */
+export function SwatchPicker({
+  value,
+  onChange,
+  labelledBy,
+}: {
+  value: Swatch;
+  onChange: (v: Swatch) => void;
+  labelledBy: string;
+}) {
+  return (
+    <div role="radiogroup" aria-labelledby={labelledBy} className="flex flex-wrap gap-2">
+      {SWATCHES.map((s) => (
+        <button
+          key={s}
+          type="button"
+          role="radio"
+          aria-checked={value === s}
+          aria-label={tr.swatches[s]}
+          title={tr.swatches[s]}
+          onClick={() => onChange(s)}
+          style={swatchStyle(s)}
+          className="flex size-8 items-center justify-center rounded-full bg-(--swatch) text-background ring-offset-2 ring-offset-background outline-none focus-visible:ring-3 focus-visible:ring-ring/50 aria-checked:ring-2 aria-checked:ring-(--swatch)"
+        >
+          {value === s ? <Check className="size-4" /> : null}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/** İkon seçici; seçili renkle önizler. */
+export function IconPicker({
+  value,
+  color,
+  onChange,
+  labelledBy,
+}: {
+  value: IconKey;
+  color: Swatch;
+  onChange: (v: IconKey) => void;
+  labelledBy: string;
+}) {
+  return (
+    <div
+      role="radiogroup"
+      aria-labelledby={labelledBy}
+      style={swatchStyle(color)}
+      className="grid max-h-44 grid-cols-8 gap-1 overflow-y-auto rounded-lg border p-1.5 sm:grid-cols-10"
+    >
+      {ICON_KEYS.map((key) => (
+        <button
+          key={key}
+          type="button"
+          role="radio"
+          aria-checked={value === key}
+          aria-label={key}
+          onClick={() => onChange(key)}
+          className={cn(
+            "flex aspect-square items-center justify-center rounded-md outline-none hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50",
+            "aria-checked:bg-(--swatch)/15 aria-checked:text-(--swatch) aria-checked:ring-1 aria-checked:ring-(--swatch)",
+          )}
+        >
+          <AppIcon name={key} className="size-4.5" />
+        </button>
+      ))}
+    </div>
+  );
+}