@mari-ui/components 0.0.0-stage → 0.1.0

package/dist/theme-customizer.js

@@ -0,0 +1,271 @@
+"use client";
+
+import {
+  ColorPicker
+} from "./chunk-QZRBO7BE.js";
+import "./chunk-QDFDMWXD.js";
+import "./chunk-LZHERDNB.js";
+import "./chunk-JNZODUXP.js";
+import "./chunk-V7KDUUV6.js";
+import "./chunk-NPM7IDYV.js";
+import "./chunk-P7Z5BREP.js";
+import "./chunk-XUKVQO6M.js";
+import "./chunk-S66GKX2W.js";
+import {
+  Segmented
+} from "./chunk-LEOIKO7C.js";
+import "./chunk-YZ7MDC6B.js";
+import "./chunk-KSPM2Z3T.js";
+import "./chunk-DUCIAQGR.js";
+import "./chunk-LBQMEHK6.js";
+import "./chunk-3ABWBQCS.js";
+import "./chunk-NS7FKOFI.js";
+import "./chunk-TCYDVNSU.js";
+import "./chunk-FFXRFQSU.js";
+import "./chunk-IP2J3BWY.js";
+import {
+  skeletonBoxProps
+} from "./chunk-54HHEXXD.js";
+
+// src/theme-customizer/ThemeCustomizer.tsx
+import { useEffect, useId } from "react";
+import { CheckIcon, MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
+import { cn, useControllableState } from "@mari-ui/core";
+import {
+  BLACK,
+  WHITE,
+  defaultThemeSettings as defaultThemeSettings2,
+  lightTheme,
+  pickAccessibleForeground
+} from "@mari-ui/tokens";
+
+// src/theme-customizer/applyTheme.ts
+import { buildThemeVars, defaultThemeSettings } from "@mari-ui/tokens";
+var DARK_QUERY = "(prefers-color-scheme: dark)";
+var appliedStates = /* @__PURE__ */ new WeakMap();
+function resolveColorScheme(mode) {
+  if (mode !== "system") return mode;
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "light";
+  return window.matchMedia(DARK_QUERY).matches ? "dark" : "light";
+}
+function restoreAttribute(el, name, value) {
+  if (value === null) el.removeAttribute(name);
+  else el.setAttribute(name, value);
+}
+var ownedVarNames;
+var getOwnedVarNames = () => ownedVarNames ?? (ownedVarNames = Object.keys(buildThemeVars({ primary: "#000000" }, "light")));
+function clearVars(el, state) {
+  for (const name of state.vars) el.style.removeProperty(name);
+  state.vars = [];
+}
+function applyTheme(settings = {}, target) {
+  if (typeof document === "undefined") return () => {
+  };
+  const el = target ?? document.documentElement;
+  const { mode, primary } = { ...defaultThemeSettings, ...settings };
+  const { spacing } = settings;
+  const previous = appliedStates.get(el);
+  if (previous) {
+    previous.stopListening?.();
+    clearVars(el, previous);
+  } else {
+    for (const name of getOwnedVarNames()) el.style.removeProperty(name);
+  }
+  const state = {
+    original: previous?.original ?? { theme: el.getAttribute("data-theme"), density: el.getAttribute("data-density") },
+    vars: []
+  };
+  appliedStates.set(el, state);
+  const paint = () => {
+    const resolved = resolveColorScheme(mode);
+    el.setAttribute("data-theme", resolved);
+    clearVars(el, state);
+    for (const [name, value] of Object.entries(buildThemeVars({ primary }, resolved))) {
+      el.style.setProperty(name, value);
+      state.vars.push(name);
+    }
+  };
+  paint();
+  if (spacing) el.setAttribute("data-density", spacing);
+  else restoreAttribute(el, "data-density", state.original.density);
+  if (mode === "system" && typeof window.matchMedia === "function") {
+    const query = window.matchMedia(DARK_QUERY);
+    query.addEventListener("change", paint);
+    state.stopListening = () => query.removeEventListener("change", paint);
+  }
+  return () => {
+    if (appliedStates.get(el) !== state) return;
+    state.stopListening?.();
+    clearVars(el, state);
+    restoreAttribute(el, "data-theme", state.original.theme);
+    restoreAttribute(el, "data-density", state.original.density);
+    appliedStates.delete(el);
+  };
+}
+
+// src/theme-customizer/ThemeCustomizer.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ALL_SECTIONS = ["mode", "color", "spacing"];
+var defaultAccentColors = [
+  { value: "#2563eb", label: "Mavi" },
+  { value: "#0891b2", label: "Camg\xF6be\u011Fi" },
+  { value: "#16a34a", label: "Ye\u015Fil" },
+  { value: "#eab308", label: "Sar\u0131" },
+  { value: "#ea580c", label: "Turuncu" },
+  { value: "#dc2626", label: "K\u0131rm\u0131z\u0131" },
+  { value: "#db2777", label: "Pembe" }
+];
+var MODE_ICON_RESPONSIVE = "[&_span:has(>svg)]:hidden @xs:[&_span:has(>svg)]:flex";
+var MODE_OPTIONS = [
+  { value: "light", label: "A\xE7\u0131k", icon: /* @__PURE__ */ jsx(SunIcon, { "aria-hidden": true }) },
+  { value: "dark", label: "Koyu", icon: /* @__PURE__ */ jsx(MoonIcon, { "aria-hidden": true }) },
+  { value: "system", label: "Sistem", icon: /* @__PURE__ */ jsx(MonitorIcon, { "aria-hidden": true }) }
+];
+var SPACING_OPTIONS = [
+  { value: "compact", label: "S\u0131k\u0131" },
+  { value: "normal", label: "Normal" },
+  { value: "comfortable", label: "Rahat" }
+];
+var HEX6 = /^#[0-9a-f]{6}$/i;
+var DEFAULT_SWATCH = lightTheme.color.primary.solid;
+function Swatch({ name, color, label, checked, disabled, skeleton, onSelect }) {
+  if (skeleton) return /* @__PURE__ */ jsx("span", { ...skeletonBoxProps("size-8 rounded-full") });
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: cn(
+        "relative grid size-8 place-items-center rounded-full",
+        "has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-mari-ring",
+        checked && "ring-2 ring-mari-foreground ring-offset-2 ring-offset-mari-surface",
+        disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+        "pointer-coarse:before:absolute pointer-coarse:before:-inset-1.5"
+      ),
+      style: { backgroundColor: color },
+      title: label,
+      children: [
+        /* @__PURE__ */ jsx("input", { type: "radio", name, className: "sr-only", checked, disabled, onChange: onSelect, "aria-label": label }),
+        checked && /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": true, className: "size-4", style: { color: pickAccessibleForeground(color, [WHITE, BLACK]) } })
+      ]
+    }
+  );
+}
+function ThemeCustomizer({
+  value,
+  defaultValue,
+  onChange,
+  apply = true,
+  target,
+  sections = ALL_SECTIONS,
+  colors = defaultAccentColors,
+  allowCustom = false,
+  disabled = false,
+  skeleton,
+  className
+}) {
+  const id = useId();
+  const [settings, setSettings] = useControllableState({
+    value,
+    defaultValue: { ...defaultThemeSettings2, ...defaultValue },
+    onChange
+  });
+  const { mode, primary, spacing } = settings;
+  useEffect(() => {
+    if (!apply) return;
+    applyTheme({ mode, primary, spacing }, target?.current ?? void 0);
+  }, [apply, target, mode, primary, spacing]);
+  const update = (patch) => setSettings({ ...settings, ...patch });
+  const isPreset = !primary || colors.some((c) => c.value.toLowerCase() === primary.toLowerCase());
+  const customValue = primary && !isPreset ? primary : null;
+  const renderSection = (section) => {
+    const labelId = `${id}-${section}`;
+    const heading = (text) => /* @__PURE__ */ jsx("p", { id: labelId, className: "mb-2 text-sm font-medium text-mari-foreground", children: text });
+    if (section === "mode") {
+      return /* @__PURE__ */ jsxs("div", { children: [
+        heading("G\xF6r\xFCn\xFCm"),
+        /* @__PURE__ */ jsx(
+          Segmented,
+          {
+            block: true,
+            "aria-labelledby": labelId,
+            options: MODE_OPTIONS,
+            className: MODE_ICON_RESPONSIVE,
+            value: mode,
+            onChange: (next) => update({ mode: next }),
+            disabled,
+            skeleton
+          }
+        )
+      ] }, section);
+    }
+    if (section === "spacing") {
+      return /* @__PURE__ */ jsxs("div", { children: [
+        heading("Yo\u011Funluk"),
+        /* @__PURE__ */ jsx(
+          Segmented,
+          {
+            block: true,
+            "aria-labelledby": labelId,
+            options: SPACING_OPTIONS,
+            value: spacing,
+            onChange: (next) => update({ spacing: next }),
+            disabled,
+            skeleton
+          }
+        )
+      ] }, section);
+    }
+    const swatches = [
+      { value: void 0, color: DEFAULT_SWATCH, label: "Varsay\u0131lan" },
+      ...colors.map((c) => ({ value: c.value, color: c.value, label: c.label }))
+    ];
+    return /* @__PURE__ */ jsxs("div", { children: [
+      heading("Vurgu rengi"),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+        /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-labelledby": labelId, className: "flex flex-wrap gap-3", children: swatches.map((swatch) => /* @__PURE__ */ jsx(
+          Swatch,
+          {
+            name: `${id}-accent`,
+            color: swatch.color,
+            label: swatch.label,
+            checked: swatch.value === void 0 ? !primary : primary?.toLowerCase() === swatch.value.toLowerCase(),
+            disabled,
+            skeleton,
+            onSelect: () => update({ primary: swatch.value })
+          },
+          swatch.label
+        )) }),
+        allowCustom && /* @__PURE__ */ jsx("div", { className: cn("rounded-md", customValue && "ring-2 ring-mari-foreground ring-offset-2 ring-offset-mari-surface"), children: /* @__PURE__ */ jsx(
+          ColorPicker,
+          {
+            "aria-label": "\xD6zel renk",
+            disabledAlpha: true,
+            value: customValue ?? primary ?? DEFAULT_SWATCH,
+            onChange: (next) => {
+              if (next && HEX6.test(next)) update({ primary: next.toLowerCase() });
+            },
+            disabled,
+            skeleton
+          }
+        ) })
+      ] })
+    ] }, section);
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("@container flex flex-col gap-5", className), children: sections.map(renderSection) });
+}
+
+// src/theme-customizer/index.ts
+import { saveTheme, loadTheme, getThemeScript, DEFAULT_THEME_STORAGE_KEY } from "@mari-ui/tokens";
+import { defaultThemeSettings as defaultThemeSettings3, spacingDensities } from "@mari-ui/tokens";
+export {
+  DEFAULT_THEME_STORAGE_KEY,
+  ThemeCustomizer,
+  applyTheme,
+  defaultAccentColors,
+  defaultThemeSettings3 as defaultThemeSettings,
+  getThemeScript,
+  loadTheme,
+  resolveColorScheme,
+  saveTheme,
+  spacingDensities
+};
+//# sourceMappingURL=theme-customizer.js.map

package/dist/theme-customizer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme-customizer/ThemeCustomizer.tsx","../src/theme-customizer/applyTheme.ts","../src/theme-customizer/index.ts"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useId } from \"react\";\nimport { CheckIcon, MonitorIcon, MoonIcon, SunIcon } from \"lucide-react\";\nimport { cn, useControllableState } from \"@mari-ui/core\";\nimport {\n  BLACK,\n  WHITE,\n  defaultThemeSettings,\n  lightTheme,\n  pickAccessibleForeground,\n  type ColorSchemePreference,\n  type HexColor,\n  type SpacingDensity,\n  type ThemeSettings,\n} from \"@mari-ui/tokens\";\nimport { ColorPicker } from \"../color-picker\";\nimport { Segmented } from \"../segmented\";\nimport { skeletonBoxProps } from \"../lib/skeleton\";\nimport { applyTheme } from \"./applyTheme\";\nimport type { ThemeAccentOption, ThemeCustomizerProps, ThemeCustomizerSection } from \"./types\";\n\nexport type { ThemeCustomizerProps };\n\nconst ALL_SECTIONS: ThemeCustomizerSection[] = [\"mode\", \"color\", \"spacing\"];\n\n/** Parlak sarı/camgöbeği bilinçli olarak listede: otomatik kontrast düzeltmesi onları zeminde görünür kılar. */\nexport const defaultAccentColors: ThemeAccentOption[] = [\n  { value: \"#2563eb\", label: \"Mavi\" },\n  { value: \"#0891b2\", label: \"Camgöbeği\" },\n  { value: \"#16a34a\", label: \"Yeşil\" },\n  { value: \"#eab308\", label: \"Sarı\" },\n  { value: \"#ea580c\", label: \"Turuncu\" },\n  { value: \"#dc2626\", label: \"Kırmızı\" },\n  { value: \"#db2777\", label: \"Pembe\" },\n];\n\n/** Dar yerleşimde (çekmece, <20rem) ikon sarmalayıcısıyla gizlenir — etiket kesilmez, boşluk kalmaz. */\nconst MODE_ICON_RESPONSIVE = \"[&_span:has(>svg)]:hidden @xs:[&_span:has(>svg)]:flex\";\n\nconst MODE_OPTIONS: Array<{ value: ColorSchemePreference; label: string; icon: React.ReactNode }> = [\n  { value: \"light\", label: \"Açık\", icon: <SunIcon aria-hidden /> },\n  { value: \"dark\", label: \"Koyu\", icon: <MoonIcon aria-hidden /> },\n  { value: \"system\", label: \"Sistem\", icon: <MonitorIcon aria-hidden /> },\n];\n\nconst SPACING_OPTIONS: Array<{ value: SpacingDensity; label: string }> = [\n  { value: \"compact\", label: \"Sıkı\" },\n  { value: \"normal\", label: \"Normal\" },\n  { value: \"comfortable\", label: \"Rahat\" },\n];\n\nconst HEX6 = /^#[0-9a-f]{6}$/i;\nconst DEFAULT_SWATCH = lightTheme.color.primary.solid;\n\ninterface SwatchProps {\n  name: string;\n  color: HexColor;\n  label: string;\n  checked: boolean;\n  disabled: boolean;\n  skeleton: boolean | undefined;\n  onSelect: () => void;\n}\n\n/** Gerçek radyo düğmesi (ok tuşları, tek Tab durağı tarayıcıdan) + görünen daire. */\nfunction Swatch({ name, color, label, checked, disabled, skeleton, onSelect }: Readonly<SwatchProps>) {\n  if (skeleton) return <span {...skeletonBoxProps(\"size-8 rounded-full\")} />;\n  return (\n    <label\n      className={cn(\n        \"relative grid size-8 place-items-center rounded-full\",\n        \"has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-mari-ring\",\n        checked && \"ring-2 ring-mari-foreground ring-offset-2 ring-offset-mari-surface\",\n        disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n        \"pointer-coarse:before:absolute pointer-coarse:before:-inset-1.5\"\n      )}\n      style={{ backgroundColor: color }}\n      title={label}\n    >\n      <input type=\"radio\" name={name} className=\"sr-only\" checked={checked} disabled={disabled} onChange={onSelect} aria-label={label} />\n      {checked && <CheckIcon aria-hidden className=\"size-4\" style={{ color: pickAccessibleForeground(color, [WHITE, BLACK]) }} />}\n    </label>\n  );\n}\n\n/**\n * Faz 16.8 — son kullanıcının uygulamanın görünümünü kişiselleştirdiği panel:\n * mod (açık/koyu/sistem), vurgu rengi, boşluk yoğunluğu. Kendi tasarımımız\n * (ant referansı yok). Satır içi durur; Popover/Drawer/ayarlar sayfasına\n * yerleştirmek tüketicinin işi.\n *\n * Seçim `applyTheme` ile anında uygulanır (provider yok). Seçilen vurgu rengi\n * zeminde görünür olacak kadar otomatik koyulaştırılır/açılır — kullanıcı\n * bozuk tema üretemez. Örnekte kullanıcının seçtiği renk gösterilir.\n */\nexport function ThemeCustomizer({\n  value,\n  defaultValue,\n  onChange,\n  apply = true,\n  target,\n  sections = ALL_SECTIONS,\n  colors = defaultAccentColors,\n  allowCustom = false,\n  disabled = false,\n  skeleton,\n  className,\n}: Readonly<ThemeCustomizerProps>) {\n  const id = useId();\n  const [settings, setSettings] = useControllableState<ThemeSettings>({\n    value,\n    defaultValue: { ...defaultThemeSettings, ...defaultValue },\n    onChange,\n  });\n  const { mode, primary, spacing } = settings;\n\n  useEffect(() => {\n    if (!apply) return;\n    // Temizlik yok (bilerek): panel kapanınca tema geri alınmamalı.\n    applyTheme({ mode, primary, spacing }, target?.current ?? undefined);\n  }, [apply, target, mode, primary, spacing]);\n\n  const update = (patch: Partial<ThemeSettings>) => setSettings({ ...settings, ...patch });\n  const isPreset = !primary || colors.some((c) => c.value.toLowerCase() === primary.toLowerCase());\n  const customValue = primary && !isPreset ? primary : null;\n\n  const renderSection = (section: ThemeCustomizerSection) => {\n    const labelId = `${id}-${section}`;\n    const heading = (text: string) => (\n      <p id={labelId} className=\"mb-2 text-sm font-medium text-mari-foreground\">\n        {text}\n      </p>\n    );\n\n    if (section === \"mode\") {\n      return (\n        <div key={section}>\n          {heading(\"Görünüm\")}\n          <Segmented\n            block\n            aria-labelledby={labelId}\n            options={MODE_OPTIONS}\n            className={MODE_ICON_RESPONSIVE}\n            value={mode}\n            onChange={(next) => update({ mode: next as ColorSchemePreference })}\n            disabled={disabled}\n            skeleton={skeleton}\n          />\n        </div>\n      );\n    }\n\n    if (section === \"spacing\") {\n      return (\n        <div key={section}>\n          {heading(\"Yoğunluk\")}\n          <Segmented\n            block\n            aria-labelledby={labelId}\n            options={SPACING_OPTIONS}\n            value={spacing}\n            onChange={(next) => update({ spacing: next as SpacingDensity })}\n            disabled={disabled}\n            skeleton={skeleton}\n          />\n        </div>\n      );\n    }\n\n    const swatches: Array<{ value: HexColor | undefined; color: HexColor; label: string }> = [\n      { value: undefined, color: DEFAULT_SWATCH, label: \"Varsayılan\" },\n      ...colors.map((c) => ({ value: c.value, color: c.value, label: c.label })),\n    ];\n    return (\n      <div key={section}>\n        {heading(\"Vurgu rengi\")}\n        <div className=\"flex flex-wrap items-center gap-3\">\n          <div role=\"radiogroup\" aria-labelledby={labelId} className=\"flex flex-wrap gap-3\">\n            {swatches.map((swatch) => (\n              <Swatch\n                key={swatch.label}\n                name={`${id}-accent`}\n                color={swatch.color}\n                label={swatch.label}\n                checked={swatch.value === undefined ? !primary : primary?.toLowerCase() === swatch.value.toLowerCase()}\n                disabled={disabled}\n                skeleton={skeleton}\n                onSelect={() => update({ primary: swatch.value })}\n              />\n            ))}\n          </div>\n          {allowCustom && (\n            <div className={cn(\"rounded-md\", customValue && \"ring-2 ring-mari-foreground ring-offset-2 ring-offset-mari-surface\")}>\n              <ColorPicker\n                aria-label=\"Özel renk\"\n                disabledAlpha\n                // Boşken \"renk yok\" (çizgili) simgesi yanıltıcıydı: seçici o anki\n                // renkten başlar; halka yalnız özel renk seçiliyken.\n                value={customValue ?? primary ?? DEFAULT_SWATCH}\n                onChange={(next) => {\n                  if (next && HEX6.test(next)) update({ primary: next.toLowerCase() as HexColor });\n                }}\n                disabled={disabled}\n                skeleton={skeleton}\n              />\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  };\n\n  return <div className={cn(\"@container flex flex-col gap-5\", className)}>{sections.map(renderSection)}</div>;\n}\n","\"use client\";\n\nimport { buildThemeVars, defaultThemeSettings, type ThemeMode, type ThemeSettings } from \"@mari-ui/tokens\";\n\nconst DARK_QUERY = \"(prefers-color-scheme: dark)\";\n\ninterface AppliedState {\n  /** İlk uygulamadan önceki öznitelikler — geri alırken bunlara dönülür. */\n  original: { theme: string | null; density: string | null };\n  vars: string[];\n  stopListening?: () => void;\n}\n\nconst appliedStates = new WeakMap<HTMLElement, AppliedState>();\n\n/** \"system\" tercihini o anki işletim sistemi ayarına çözer (SSR'da \"light\"). */\nexport function resolveColorScheme(mode: ThemeSettings[\"mode\"]): ThemeMode {\n  if (mode !== \"system\") return mode;\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return \"light\";\n  return window.matchMedia(DARK_QUERY).matches ? \"dark\" : \"light\";\n}\n\nfunction restoreAttribute(el: HTMLElement, name: string, value: string | null) {\n  if (value === null) el.removeAttribute(name);\n  else el.setAttribute(name, value);\n}\n\n/** Vurgu renginin yazabileceği tüm değişken adları (hangi renk olursa olsun aynı set). */\nlet ownedVarNames: string[] | undefined;\nconst getOwnedVarNames = () => (ownedVarNames ??= Object.keys(buildThemeVars({ primary: \"#000000\" }, \"light\")));\n\nfunction clearVars(el: HTMLElement, state: AppliedState) {\n  for (const name of state.vars) el.style.removeProperty(name);\n  state.vars = [];\n}\n\n/**\n * Son kullanıcı tema ayarını bir elemana uygular (varsayılan `<html>`) — provider\n * yok (Link kararıyla aynı). Mod `data-theme`, yoğunluk `data-density`\n * özniteliğiyle stylesheet'e bırakılır; yalnız vurgu rengi satır içi\n * `--mari-color-primary*` değişkenleri olarak yazılır. \"system\" modunda işletim\n * sistemi tercihi canlı izlenir.\n *\n * Aynı elemana tekrar çağrı öncekinin yerini alır. Dönen fonksiyon dinleyiciyi\n * bırakır ve elemanı ilk çağrıdan önceki haline döndürür (React effect temizliği).\n * Kalıcılık (localStorage, API…) tüketicinin işi.\n */\nexport function applyTheme(settings: Partial<ThemeSettings> = {}, target?: HTMLElement): () => void {\n  if (typeof document === \"undefined\") return () => {};\n  const el = target ?? document.documentElement;\n  const { mode, primary } = { ...defaultThemeSettings, ...settings };\n  const { spacing } = settings;\n\n  const previous = appliedStates.get(el);\n  if (previous) {\n    previous.stopListening?.();\n    clearVars(el, previous);\n  } else {\n    // Açılış script'i (`getThemeScript`) değişkenleri önceden yazmış olabilir;\n    // yeni ayarda vurgu rengi yoksa eskisi takılı kalmasın.\n    for (const name of getOwnedVarNames()) el.style.removeProperty(name);\n  }\n  const state: AppliedState = {\n    original: previous?.original ?? { theme: el.getAttribute(\"data-theme\"), density: el.getAttribute(\"data-density\") },\n    vars: [],\n  };\n  appliedStates.set(el, state);\n\n  const paint = () => {\n    const resolved = resolveColorScheme(mode);\n    el.setAttribute(\"data-theme\", resolved);\n    clearVars(el, state);\n    for (const [name, value] of Object.entries(buildThemeVars({ primary }, resolved))) {\n      el.style.setProperty(name, value);\n      state.vars.push(name);\n    }\n  };\n  paint();\n\n  // Yalnız açıkça verilen yoğunluk yazılır — \"normal\" da (config'teki varsayılan\n  // `:root:not([data-density])` farklıysa kullanıcının \"Normal\" seçimi onu ezebilmeli).\n  // Verilmediyse config varsayılanı geçerli kalsın: öznitelik ilk haline döner.\n  if (spacing) el.setAttribute(\"data-density\", spacing);\n  else restoreAttribute(el, \"data-density\", state.original.density);\n\n  if (mode === \"system\" && typeof window.matchMedia === \"function\") {\n    const query = window.matchMedia(DARK_QUERY);\n    query.addEventListener(\"change\", paint);\n    state.stopListening = () => query.removeEventListener(\"change\", paint);\n  }\n\n  return () => {\n    // Bu çağrının yerini daha yenisi aldıysa ona dokunma.\n    if (appliedStates.get(el) !== state) return;\n    state.stopListening?.();\n    clearVars(el, state);\n    restoreAttribute(el, \"data-theme\", state.original.theme);\n    restoreAttribute(el, \"data-density\", state.original.density);\n    appliedStates.delete(el);\n  };\n}\n","export { ThemeCustomizer, defaultAccentColors } from \"./ThemeCustomizer\";\nexport type { ThemeCustomizerProps, ThemeCustomizerSection, ThemeAccentOption } from \"./types\";\nexport { applyTheme, resolveColorScheme } from \"./applyTheme\";\nexport { saveTheme, loadTheme, getThemeScript, DEFAULT_THEME_STORAGE_KEY } from \"@mari-ui/tokens\";\nexport type { ThemeScriptOptions } from \"@mari-ui/tokens\";\nexport { defaultThemeSettings, spacingDensities } from \"@mari-ui/tokens\";\nexport type { ThemeSettings, ColorSchemePreference, SpacingDensity } from \"@mari-ui/tokens\";\n"],"mappings":"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","names":["defaultThemeSettings","defaultThemeSettings","defaultThemeSettings"]}

package/dist/timeline.d.ts

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

package/dist/timeline.js

@@ -0,0 +1,176 @@
+"use client";
+
+import {
+  useScrollable
+} from "./chunk-KG6A32KX.js";
+import {
+  ContentSkeleton
+} from "./chunk-V7KDUUV6.js";
+import {
+  SkeletonBlock
+} from "./chunk-NPM7IDYV.js";
+import "./chunk-XUKVQO6M.js";
+import {
+  textClass
+} from "./chunk-IP2J3BWY.js";
+import {
+  skeletonBoxProps
+} from "./chunk-54HHEXXD.js";
+
+// src/timeline/Timeline.tsx
+import { useRef } from "react";
+import { Loader2Icon } from "lucide-react";
+import { cn } from "@mari-ui/core";
+
+// src/timeline/utils.ts
+var PENDING_KEY = "__mari-timeline-pending__";
+function buildItems(items, pending, reverse) {
+  const all = [...items];
+  if (pending !== void 0 && pending !== null && pending !== false) {
+    all.push({ key: PENDING_KEY, content: pending === true ? "Devam ediyor\u2026" : pending, loading: true, color: "neutral" });
+  }
+  return reverse ? all.reverse() : all;
+}
+function resolveSide(mode, index, placement) {
+  if (mode === "start") return "after";
+  if (mode === "end") return "before";
+  if (placement) return placement === "start" ? "after" : "before";
+  return index % 2 === 0 ? "after" : "before";
+}
+function isThreeColumn(mode, titlePlacement) {
+  return mode === "alternate" || titlePlacement === "opposite";
+}
+
+// src/timeline/Timeline.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var PLACEHOLDER = /* @__PURE__ */ jsx(SkeletonBlock, { active: true, width: "60%", height: "0.75rem", radius: "sm", className: "my-1" });
+function Dot({ item, filled, skeleton }) {
+  const color = item.color ?? "primary";
+  let node;
+  if (skeleton) node = /* @__PURE__ */ jsx("span", { ...skeletonBoxProps("size-2.5 rounded-full") });
+  else if (item.loading) node = /* @__PURE__ */ jsx(Loader2Icon, { size: 14, "aria-hidden": true, className: "animate-spin text-mari-muted motion-reduce:animate-none" });
+  else if (item.icon) node = /* @__PURE__ */ jsx("span", { className: cn("flex size-5 items-center justify-center [&_svg]:size-4", textClass[color]), children: item.icon });
+  else node = /* @__PURE__ */ jsx("span", { className: cn("size-2.5 rounded-full border-2 border-current", textClass[color], filled ? "bg-current" : "bg-mari-surface") });
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex h-5 w-5 shrink-0 items-center justify-center", children: node });
+}
+function Rail({ dashed, horizontal }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "border-mari-border",
+        horizontal ? "mx-1 h-0 flex-1 border-t-2" : "mt-1 w-0 flex-1 border-l-2",
+        dashed && "border-dashed"
+      )
+    }
+  );
+}
+function Title({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("text-xs leading-5 text-mari-muted", className), children });
+}
+function threeColumnClass(mode) {
+  if (mode === "alternate") return "sm:grid-cols-[minmax(0,1fr)_1.25rem_minmax(0,1fr)]";
+  if (mode === "end") return "sm:grid-cols-[minmax(0,3fr)_1.25rem_minmax(0,1fr)]";
+  return "sm:grid-cols-[minmax(0,1fr)_1.25rem_minmax(0,3fr)]";
+}
+function VerticalRow({ item, index, last, nextLoading, props }) {
+  const { mode, variant, titlePlacement, skeleton } = props;
+  const side = resolveSide(mode, index, item.placement);
+  const three = isThreeColumn(mode, titlePlacement);
+  const opposite = titlePlacement === "opposite" && item.title !== void 0;
+  const before = side === "before";
+  const body = /* @__PURE__ */ jsxs(ContentSkeleton, { on: skeleton, fallback: PLACEHOLDER, children: [
+    item.title !== void 0 && /* @__PURE__ */ jsx(Title, { className: cn(opposite && "sm:hidden"), children: item.title }),
+    /* @__PURE__ */ jsx("div", { className: cn("leading-5", item.loading ? "text-mari-muted" : "text-mari-foreground"), children: item.content })
+  ] });
+  let grid;
+  let dotCol;
+  let bodyCol;
+  let oppositeCol = "";
+  if (three) {
+    grid = cn("grid-cols-[1.25rem_minmax(0,1fr)]", threeColumnClass(mode));
+    dotCol = "col-start-1 sm:col-start-2";
+    bodyCol = cn("col-start-2", before ? "sm:col-start-1 sm:text-right" : "sm:col-start-3");
+    oppositeCol = cn("hidden sm:block", before ? "sm:col-start-3" : "sm:col-start-1 sm:text-right");
+  } else if (before) {
+    grid = "grid-cols-[minmax(0,1fr)_1.25rem]";
+    dotCol = "col-start-2";
+    bodyCol = "col-start-1 text-right";
+  } else {
+    grid = "grid-cols-[1.25rem_minmax(0,1fr)]";
+    dotCol = "col-start-1";
+    bodyCol = "col-start-2";
+  }
+  return /* @__PURE__ */ jsxs("li", { className: cn("grid gap-x-4", grid), children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("row-start-1 flex flex-col items-center", dotCol), children: [
+      /* @__PURE__ */ jsx(Dot, { item, filled: variant === "filled", skeleton }),
+      !last && /* @__PURE__ */ jsx(Rail, { dashed: nextLoading })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: cn("row-start-1 min-w-0 break-words", !last && "pb-6", bodyCol), children: body }),
+    opposite && /* @__PURE__ */ jsx("div", { className: cn("row-start-1 min-w-0", oppositeCol), children: /* @__PURE__ */ jsx(ContentSkeleton, { on: skeleton, fallback: PLACEHOLDER, children: /* @__PURE__ */ jsx(Title, { children: item.title }) }) })
+  ] });
+}
+function HorizontalRow({ item, last, nextLoading, props }) {
+  const { variant, skeleton } = props;
+  return /* @__PURE__ */ jsxs("li", { className: "flex min-w-36 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx(Dot, { item, filled: variant === "filled", skeleton }),
+      !last && /* @__PURE__ */ jsx(Rail, { dashed: nextLoading, horizontal: true })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "min-w-0 pt-2 pr-4 break-words", children: /* @__PURE__ */ jsxs(ContentSkeleton, { on: skeleton, fallback: PLACEHOLDER, children: [
+      item.title !== void 0 && /* @__PURE__ */ jsx(Title, { children: item.title }),
+      /* @__PURE__ */ jsx("div", { className: cn("leading-5", item.loading ? "text-mari-muted" : "text-mari-foreground"), children: item.content })
+    ] }) })
+  ] });
+}
+function Timeline({
+  items,
+  mode = "start",
+  orientation = "vertical",
+  variant = "outlined",
+  titlePlacement = "inline",
+  reverse = false,
+  pending,
+  className,
+  skeleton = false,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
+}) {
+  const all = buildItems(items, pending, reverse);
+  const horizontal = orientation === "horizontal";
+  const scrollRef = useRef(null);
+  const scrollable = useScrollable(scrollRef, "x", [all.length, horizontal]);
+  const Row = horizontal ? HorizontalRow : VerticalRow;
+  const rowProps = { mode, variant, titlePlacement, skeleton };
+  const list = /* @__PURE__ */ jsx(
+    "ol",
+    {
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-busy": skeleton || void 0,
+      className: cn("text-sm", horizontal ? "flex" : "flex flex-col", !horizontal && className),
+      children: all.map((item, i) => /* @__PURE__ */ jsx(
+        Row,
+        {
+          item,
+          index: i,
+          last: i === all.length - 1,
+          nextLoading: Boolean(item.loading || all[i + 1]?.loading),
+          props: rowProps
+        },
+        item.key ?? i
+      ))
+    }
+  );
+  if (!horizontal) return list;
+  return (
+    // Taşarken klavyeyle kaydırılabilsin (axe scrollable-region-focusable).
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    /* @__PURE__ */ jsx("div", { ref: scrollRef, tabIndex: scrollable ? 0 : void 0, className: cn("overflow-x-auto pb-1 focus-visible:outline-2 focus-visible:outline-mari-ring", className), children: list })
+  );
+}
+export {
+  Timeline
+};
+//# sourceMappingURL=timeline.js.map

package/dist/timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/timeline/Timeline.tsx","../src/timeline/utils.ts"],"sourcesContent":["\"use client\";\n\nimport React, { useRef } from \"react\";\nimport { Loader2Icon } from \"lucide-react\";\nimport { cn, type ColorRole } from \"@mari-ui/core\";\nimport { textClass } from \"../lib/colorClasses\";\nimport { ContentSkeleton } from \"../lib/ContentSkeleton\";\nimport { skeletonBoxProps } from \"../lib/skeleton\";\nimport { useScrollable } from \"../lib/useScrollable\";\nimport { SkeletonBlock } from \"../skeleton\";\nimport type { TimelineItem, TimelineProps } from \"./types\";\nimport { buildItems, isThreeColumn, resolveSide } from \"./utils\";\n\nexport type { TimelineProps, TimelineItem };\n\nconst PLACEHOLDER = <SkeletonBlock active width=\"60%\" height=\"0.75rem\" radius=\"sm\" className=\"my-1\" />;\n\n/** Nokta kutusu = ilk metin satırının yüksekliği (20px) → nokta ilk satırla hizalı. */\nfunction Dot({ item, filled, skeleton }: Readonly<{ item: TimelineItem; filled: boolean; skeleton: boolean }>) {\n  const color: ColorRole = item.color ?? \"primary\";\n  let node: React.ReactNode;\n  if (skeleton) node = <span {...skeletonBoxProps(\"size-2.5 rounded-full\")} />;\n  else if (item.loading) node = <Loader2Icon size={14} aria-hidden className=\"animate-spin text-mari-muted motion-reduce:animate-none\" />;\n  else if (item.icon) node = <span className={cn(\"flex size-5 items-center justify-center [&_svg]:size-4\", textClass[color])}>{item.icon}</span>;\n  else node = <span className={cn(\"size-2.5 rounded-full border-2 border-current\", textClass[color], filled ? \"bg-current\" : \"bg-mari-surface\")} />;\n  return (\n    <span aria-hidden className=\"flex h-5 w-5 shrink-0 items-center justify-center\">\n      {node}\n    </span>\n  );\n}\n\nfunction Rail({ dashed, horizontal }: Readonly<{ dashed: boolean; horizontal?: boolean }>) {\n  return (\n    <span\n      aria-hidden\n      className={cn(\n        \"border-mari-border\",\n        horizontal ? \"mx-1 h-0 flex-1 border-t-2\" : \"mt-1 w-0 flex-1 border-l-2\",\n        dashed && \"border-dashed\"\n      )}\n    />\n  );\n}\n\nfunction Title({ children, className }: Readonly<{ children: React.ReactNode; className?: string }>) {\n  return <div className={cn(\"text-xs leading-5 text-mari-muted\", className)}>{children}</div>;\n}\n\ninterface RowProps {\n  item: TimelineItem;\n  index: number;\n  last: boolean;\n  nextLoading: boolean;\n  props: Required<Pick<TimelineProps, \"mode\" | \"variant\" | \"titlePlacement\" | \"skeleton\">>;\n}\n\n/** Üç sütun (sm+) oranları: alternate eşit; opposite'te başlık sütunu dar. */\nfunction threeColumnClass(mode: TimelineProps[\"mode\"]): string {\n  if (mode === \"alternate\") return \"sm:grid-cols-[minmax(0,1fr)_1.25rem_minmax(0,1fr)]\";\n  if (mode === \"end\") return \"sm:grid-cols-[minmax(0,3fr)_1.25rem_minmax(0,1fr)]\";\n  return \"sm:grid-cols-[minmax(0,1fr)_1.25rem_minmax(0,3fr)]\";\n}\n\nfunction VerticalRow({ item, index, last, nextLoading, props }: Readonly<RowProps>) {\n  const { mode, variant, titlePlacement, skeleton } = props;\n  const side = resolveSide(mode, index, item.placement);\n  const three = isThreeColumn(mode, titlePlacement);\n  const opposite = titlePlacement === \"opposite\" && item.title !== undefined;\n  const before = side === \"before\";\n\n  // Dar ekranda üç sütunlu düzen iki sütuna (nokta | içerik) düşer; karşı taraftaki başlık içeriğin üstüne gelir.\n  const body = (\n    <ContentSkeleton on={skeleton} fallback={PLACEHOLDER}>\n      {item.title !== undefined && <Title className={cn(opposite && \"sm:hidden\")}>{item.title}</Title>}\n      <div className={cn(\"leading-5\", item.loading ? \"text-mari-muted\" : \"text-mari-foreground\")}>{item.content}</div>\n    </ContentSkeleton>\n  );\n\n  let grid: string;\n  let dotCol: string;\n  let bodyCol: string;\n  let oppositeCol = \"\";\n  if (three) {\n    grid = cn(\"grid-cols-[1.25rem_minmax(0,1fr)]\", threeColumnClass(mode));\n    dotCol = \"col-start-1 sm:col-start-2\";\n    bodyCol = cn(\"col-start-2\", before ? \"sm:col-start-1 sm:text-right\" : \"sm:col-start-3\");\n    oppositeCol = cn(\"hidden sm:block\", before ? \"sm:col-start-3\" : \"sm:col-start-1 sm:text-right\");\n  } else if (before) {\n    grid = \"grid-cols-[minmax(0,1fr)_1.25rem]\";\n    dotCol = \"col-start-2\";\n    bodyCol = \"col-start-1 text-right\";\n  } else {\n    grid = \"grid-cols-[1.25rem_minmax(0,1fr)]\";\n    dotCol = \"col-start-1\";\n    bodyCol = \"col-start-2\";\n  }\n\n  return (\n    <li className={cn(\"grid gap-x-4\", grid)}>\n      <div className={cn(\"row-start-1 flex flex-col items-center\", dotCol)}>\n        <Dot item={item} filled={variant === \"filled\"} skeleton={skeleton} />\n        {!last && <Rail dashed={nextLoading} />}\n      </div>\n      <div className={cn(\"row-start-1 min-w-0 break-words\", !last && \"pb-6\", bodyCol)}>{body}</div>\n      {opposite && (\n        <div className={cn(\"row-start-1 min-w-0\", oppositeCol)}>\n          <ContentSkeleton on={skeleton} fallback={PLACEHOLDER}>\n            <Title>{item.title}</Title>\n          </ContentSkeleton>\n        </div>\n      )}\n    </li>\n  );\n}\n\nfunction HorizontalRow({ item, last, nextLoading, props }: Readonly<RowProps>) {\n  const { variant, skeleton } = props;\n  return (\n    <li className=\"flex min-w-36 flex-1 flex-col\">\n      <div className=\"flex items-center\">\n        <Dot item={item} filled={variant === \"filled\"} skeleton={skeleton} />\n        {!last && <Rail dashed={nextLoading} horizontal />}\n      </div>\n      <div className=\"min-w-0 pt-2 pr-4 break-words\">\n        <ContentSkeleton on={skeleton} fallback={PLACEHOLDER}>\n          {item.title !== undefined && <Title>{item.title}</Title>}\n          <div className={cn(\"leading-5\", item.loading ? \"text-mari-muted\" : \"text-mari-foreground\")}>{item.content}</div>\n        </ContentSkeleton>\n      </div>\n    </li>\n  );\n}\n\n/**\n * Faz 16.3 — yapı ant.design Timeline'dan (başlık + içerik, renkli ya da ikonlu\n * nokta, start/end/alternate, karşı tarafta başlık, yatay yön, bekleyen öğe,\n * ters sıra), görünüm kendi token'larımızdan. Ray noktanın sütununda büyüyen\n * bir çizgi — içerik uzadıkça kendiliğinden uzar, ölçüm yok.\n *\n * Semantik: kronolojik sıra anlamlı → `<ol>`. Noktalar/ikonlar görsel\n * (`aria-hidden`); durum (\"iptal edildi\") metinde söylenmeli. Yatay yön taşarsa\n * kaydırılabilir bölge klavyeyle odaklanabilir olur.\n */\nexport function Timeline({\n  items,\n  mode = \"start\",\n  orientation = \"vertical\",\n  variant = \"outlined\",\n  titlePlacement = \"inline\",\n  reverse = false,\n  pending,\n  className,\n  skeleton = false,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n}: Readonly<TimelineProps>) {\n  const all = buildItems(items, pending, reverse);\n  const horizontal = orientation === \"horizontal\";\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const scrollable = useScrollable(scrollRef, \"x\", [all.length, horizontal]);\n  const Row = horizontal ? HorizontalRow : VerticalRow;\n  const rowProps = { mode, variant, titlePlacement, skeleton };\n\n  const list = (\n    <ol\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-busy={skeleton || undefined}\n      className={cn(\"text-sm\", horizontal ? \"flex\" : \"flex flex-col\", !horizontal && className)}\n    >\n      {all.map((item, i) => (\n        <Row\n          key={item.key ?? i}\n          item={item}\n          index={i}\n          last={i === all.length - 1}\n          // Bekleyen öğeye bağlanan ray (iki ucundan biri bekliyorsa) kesikli.\n          nextLoading={Boolean(item.loading || all[i + 1]?.loading)}\n          props={rowProps}\n        />\n      ))}\n    </ol>\n  );\n\n  if (!horizontal) return list;\n  return (\n    // Taşarken klavyeyle kaydırılabilsin (axe scrollable-region-focusable).\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n    <div ref={scrollRef} tabIndex={scrollable ? 0 : undefined} className={cn(\"overflow-x-auto pb-1 focus-visible:outline-2 focus-visible:outline-mari-ring\", className)}>\n      {list}\n    </div>\n  );\n}\n","import type React from \"react\";\nimport type { TimelineItem, TimelineProps } from \"./types\";\n\nexport const PENDING_KEY = \"__mari-timeline-pending__\";\n\n/** `pending` öğesini ekler ve `reverse`i uygular (bekleyen öğe hep \"en yeni\" uçta). */\nexport function buildItems(items: TimelineItem[], pending: React.ReactNode, reverse: boolean): TimelineItem[] {\n  const all = [...items];\n  if (pending !== undefined && pending !== null && pending !== false) {\n    all.push({ key: PENDING_KEY, content: pending === true ? \"Devam ediyor…\" : pending, loading: true, color: \"neutral\" });\n  }\n  return reverse ? all.reverse() : all;\n}\n\n/**\n * İçerik noktanın hangi tarafında: `after` (sağ) ya da `before` (sol).\n * `alternate`de çift sıradakiler sağda başlar; öğenin `placement`ı önceliklidir.\n */\nexport function resolveSide(mode: NonNullable<TimelineProps[\"mode\"]>, index: number, placement: TimelineItem[\"placement\"]): \"after\" | \"before\" {\n  if (mode === \"start\") return \"after\";\n  if (mode === \"end\") return \"before\";\n  if (placement) return placement === \"start\" ? \"after\" : \"before\";\n  return index % 2 === 0 ? \"after\" : \"before\";\n}\n\n/** Üç sütunlu (başlık/boş | nokta | içerik) yerleşim gerekir mi. */\nexport function isThreeColumn(mode: NonNullable<TimelineProps[\"mode\"]>, titlePlacement: NonNullable<TimelineProps[\"titlePlacement\"]>): boolean {\n  return mode === \"alternate\" || titlePlacement === \"opposite\";\n}\n"],"mappings":"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","names":[]}

package/dist/toast.d.ts

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

package/dist/toast.js

@@ -0,0 +1,17 @@
+import {
+  Toast,
+  ToastProvider,
+  useToast
+} from "./chunk-ELHESRRH.js";
+import "./chunk-V7KDUUV6.js";
+import "./chunk-NPM7IDYV.js";
+import "./chunk-XUKVQO6M.js";
+import "./chunk-FFXRFQSU.js";
+import "./chunk-IP2J3BWY.js";
+import "./chunk-54HHEXXD.js";
+export {
+  Toast,
+  ToastProvider,
+  useToast
+};
+//# sourceMappingURL=toast.js.map

package/dist/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/tooltip.d.ts

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

package/dist/tooltip.js

@@ -0,0 +1,10 @@
+import {
+  Tooltip
+} from "./chunk-ZMA7BT2L.js";
+import "./chunk-NS7FKOFI.js";
+import "./chunk-IP2J3BWY.js";
+import "./chunk-54HHEXXD.js";
+export {
+  Tooltip
+};
+//# sourceMappingURL=tooltip.js.map

package/dist/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/tour.d.ts

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