@mari-ui/components 0.0.0-stage → 0.1.0

package/dist/chunk-IP2J3BWY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/colorClasses.ts"],"sourcesContent":["import { cn, type ColorRole, type ColorVariantStyle } from \"@mari-ui/core\";\n\n/**\n * `@mari-ui/tokens`'ın ürettiği `--color-mari-*` CSS değişkenlerine karşılık\n * gelen Tailwind utility class'ları.\n *\n * ÖNEMLİ: Her class ismi burada HARFİ HARFİNE, literal string olarak\n * yazılıdır — `` `bg-mari-${role}-solid` `` gibi bir template literal\n * KULLANILMAZ. Sebebi: Tailwind'in derleme-zamanı tarayıcısı kaynak\n * dosyanın METNİNİ okur, kodu çalıştırmaz. `${role}` içeren bir satır\n * çalışma zamanında \"bg-mari-primary-solid\" olur ama tarayıcı bunu asla\n * göremez — kaynak metinde hâlâ kesik bir template literal olarak durur.\n * Bu repoda `Skeleton`/`Tag`/`Loading`'i sessizce bozan hata tam olarak\n * buydu (bkz. plan Faz 3); burada aynı hatayı tekrarlamamak için tabloyu\n * elle, tam string'lerle yazıyoruz.\n */\nexport const bgSolidClass: Record<ColorRole, string> = {\n  primary: \"bg-mari-primary-solid\",\n  accent: \"bg-mari-accent-solid\",\n  success: \"bg-mari-success-solid\",\n  error: \"bg-mari-error-solid\",\n  warning: \"bg-mari-warning-solid\",\n  info: \"bg-mari-info-solid\",\n  neutral: \"bg-mari-neutral-solid\",\n};\n\nexport const bgSolidHoverClass: Record<ColorRole, string> = {\n  primary: \"hover:bg-mari-primary-solid-hover\",\n  accent: \"hover:bg-mari-accent-solid-hover\",\n  success: \"hover:bg-mari-success-solid-hover\",\n  error: \"hover:bg-mari-error-solid-hover\",\n  warning: \"hover:bg-mari-warning-solid-hover\",\n  info: \"hover:bg-mari-info-solid-hover\",\n  neutral: \"hover:bg-mari-neutral-solid-hover\",\n};\n\n/** Dolgu üzerindeki ikon/anahtar topu, solidContrast ile aynı kontrastı korur. */\nexport const bgSolidContrastClass: Record<ColorRole, string> = {\n  primary: \"bg-mari-primary-solid-contrast\",\n  accent: \"bg-mari-accent-solid-contrast\",\n  success: \"bg-mari-success-solid-contrast\",\n  error: \"bg-mari-error-solid-contrast\",\n  warning: \"bg-mari-warning-solid-contrast\",\n  info: \"bg-mari-info-solid-contrast\",\n  neutral: \"bg-mari-neutral-solid-contrast\",\n};\n\nexport const textSolidContrastClass: Record<ColorRole, string> = {\n  primary: \"text-mari-primary-solid-contrast\",\n  accent: \"text-mari-accent-solid-contrast\",\n  success: \"text-mari-success-solid-contrast\",\n  error: \"text-mari-error-solid-contrast\",\n  warning: \"text-mari-warning-solid-contrast\",\n  info: \"text-mari-info-solid-contrast\",\n  neutral: \"text-mari-neutral-solid-contrast\",\n};\n\nexport const bgSubtleClass: Record<ColorRole, string> = {\n  primary: \"bg-mari-primary-subtle\",\n  accent: \"bg-mari-accent-subtle\",\n  success: \"bg-mari-success-subtle\",\n  error: \"bg-mari-error-subtle\",\n  warning: \"bg-mari-warning-subtle\",\n  info: \"bg-mari-info-subtle\",\n  neutral: \"bg-mari-neutral-subtle\",\n};\n\nexport const textSubtleContrastClass: Record<ColorRole, string> = {\n  primary: \"text-mari-primary-subtle-contrast\",\n  accent: \"text-mari-accent-subtle-contrast\",\n  success: \"text-mari-success-subtle-contrast\",\n  error: \"text-mari-error-subtle-contrast\",\n  warning: \"text-mari-warning-subtle-contrast\",\n  info: \"text-mari-info-subtle-contrast\",\n  neutral: \"text-mari-neutral-subtle-contrast\",\n};\n\nexport const textClass: Record<ColorRole, string> = {\n  primary: \"text-mari-primary\",\n  accent: \"text-mari-accent\",\n  success: \"text-mari-success\",\n  error: \"text-mari-error\",\n  warning: \"text-mari-warning\",\n  info: \"text-mari-info\",\n  neutral: \"text-mari-neutral\",\n};\n\n/** `textClass`in `hover:` varyantı — örn. Menu öğelerinde primary rengi SADECE hover metin rengi olarak uygulamak için. */\nexport const textHoverClass: Record<ColorRole, string> = {\n  primary: \"hover:text-mari-primary\",\n  accent: \"hover:text-mari-accent\",\n  success: \"hover:text-mari-success\",\n  error: \"hover:text-mari-error\",\n  warning: \"hover:text-mari-warning\",\n  info: \"hover:text-mari-info\",\n  neutral: \"hover:text-mari-neutral\",\n};\n\nexport const borderColorClass: Record<ColorRole, string> = {\n  primary: \"border-mari-primary-border\",\n  accent: \"border-mari-accent-border\",\n  success: \"border-mari-success-border\",\n  error: \"border-mari-error-border\",\n  warning: \"border-mari-warning-border\",\n  info: \"border-mari-info-border\",\n  neutral: \"border-mari-neutral-border\",\n};\n\n/** Rolün KENDİ rengiyle (açık `-border` tonuyla değil) çizilen kenarlık — `outline` varyantı bunu kullanır. */\nexport const borderStrongColorClass: Record<ColorRole, string> = {\n  primary: \"border-mari-primary\",\n  accent: \"border-mari-accent\",\n  success: \"border-mari-success\",\n  error: \"border-mari-error\",\n  warning: \"border-mari-warning\",\n  info: \"border-mari-info\",\n  neutral: \"border-mari-neutral\",\n};\n\n/** `bgSubtleClass`in `hover:` varyantı — outline/ghost butonların hover dolgusu. */\nexport const bgSubtleHoverClass: Record<ColorRole, string> = {\n  primary: \"hover:bg-mari-primary-subtle\",\n  accent: \"hover:bg-mari-accent-subtle\",\n  success: \"hover:bg-mari-success-subtle\",\n  error: \"hover:bg-mari-error-subtle\",\n  warning: \"hover:bg-mari-warning-subtle\",\n  info: \"hover:bg-mari-info-subtle\",\n  neutral: \"hover:bg-mari-neutral-subtle\",\n};\n\n/** `borderColorClass`in `hover:` varyantı. */\nexport const borderColorHoverClass: Record<ColorRole, string> = {\n  primary: \"hover:border-mari-primary-border\",\n  accent: \"hover:border-mari-accent-border\",\n  success: \"hover:border-mari-success-border\",\n  error: \"hover:border-mari-error-border\",\n  warning: \"hover:border-mari-warning-border\",\n  info: \"hover:border-mari-info-border\",\n  neutral: \"hover:border-mari-neutral-border\",\n};\n\n/** SVG `fill`/`stroke` için — örn. Tooltip'in ok işareti. */\nexport const fillSolidClass: Record<ColorRole, string> = {\n  primary: \"fill-mari-primary-solid\",\n  accent: \"fill-mari-accent-solid\",\n  success: \"fill-mari-success-solid\",\n  error: \"fill-mari-error-solid\",\n  warning: \"fill-mari-warning-solid\",\n  info: \"fill-mari-info-solid\",\n  neutral: \"fill-mari-neutral-solid\",\n};\n\nexport const strokeSolidClass: Record<ColorRole, string> = {\n  primary: \"stroke-mari-primary-solid\",\n  accent: \"stroke-mari-accent-solid\",\n  success: \"stroke-mari-success-solid\",\n  error: \"stroke-mari-error-solid\",\n  warning: \"stroke-mari-warning-solid\",\n  info: \"stroke-mari-info-solid\",\n  neutral: \"stroke-mari-neutral-solid\",\n};\n\n/** `soft` varyantlı yüzeyler (örn. Tooltip'in soft rengi) için — arka planla eşleşsin diye SVG `fill`. */\nexport const fillSubtleClass: Record<ColorRole, string> = {\n  primary: \"fill-mari-primary-subtle\",\n  accent: \"fill-mari-accent-subtle\",\n  success: \"fill-mari-success-subtle\",\n  error: \"fill-mari-error-subtle\",\n  warning: \"fill-mari-warning-subtle\",\n  info: \"fill-mari-info-subtle\",\n  neutral: \"fill-mari-neutral-subtle\",\n};\n\nexport const strokeSubtleClass: Record<ColorRole, string> = {\n  primary: \"stroke-mari-primary-subtle\",\n  accent: \"stroke-mari-accent-subtle\",\n  success: \"stroke-mari-success-subtle\",\n  error: \"stroke-mari-error-subtle\",\n  warning: \"stroke-mari-warning-subtle\",\n  info: \"stroke-mari-info-subtle\",\n  neutral: \"stroke-mari-neutral-subtle\",\n};\n\n/**\n * `resolveColorVariant()`'ın döndürdüğü soyut token referanslarını gerçek\n * Tailwind class'larına çevirir. Web renderer'ının (bu paketin) tek görevi\n * budur — aynı soyut çıktı, `@mari-ui/native`'de `StyleSheet` objesine\n * çevrilir.\n */\nexport function colorVariantToClassName(style: ColorVariantStyle): string {\n  const slotTable = {\n    text: textClass,\n    solid: bgSolidClass,\n    solidContrast: textSolidContrastClass,\n    solidHover: bgSolidHoverClass,\n    subtle: bgSubtleClass,\n    subtleContrast: textSubtleContrastClass,\n    border: borderColorClass,\n  } as const;\n\n  // `background`/`foreground` slot adını doğrudan kullanır; `border` ve\n  // `hoverBackground` ise AYNI slot'u kendi CSS özelliğine çevirmek zorunda\n  // (örn. `text` slot'u bir kenarlıkta `border-mari-primary`, bir metinde\n  // `text-mari-primary` demektir — native tarafında ikisi de aynı ham renge\n  // çözüldüğü için `slot` seti değişmeden kalıyor).\n  const borderSlotTable = { text: borderStrongColorClass, border: borderColorClass } as const;\n  const hoverBgSlotTable = { solidHover: bgSolidHoverClass, subtle: bgSubtleHoverClass } as const;\n\n  const bg = style.background ? slotTable[style.background.slot][style.background.role] : undefined;\n  const hoverBg = style.hoverBackground\n    ? hoverBgSlotTable[style.hoverBackground.slot as keyof typeof hoverBgSlotTable]?.[style.hoverBackground.role]\n    : undefined;\n  const text = style.foreground ? slotTable[style.foreground.slot][style.foreground.role] : undefined;\n  const border = style.border ? borderSlotTable[style.border.slot as keyof typeof borderSlotTable]?.[style.border.role] : undefined;\n\n  return cn(bg, hoverBg, text, border, border && \"border\");\n}\n\n/**\n * Faz 15 — işaretlenebilir kontroller (Checkbox/Radio) için `checked:` önekli\n * literal tablolar. Önek runtime'da birleştirilmez (Tailwind taraması).\n * Kenarlık dolguyla AYNI (`-solid`): eskiden açık `-border` tonuydu, dolu\n * kutunun etrafında soluk bir hare gibi duruyordu ve 3:1'i geçmiyordu.\n */\nexport const checkedBgSolidClass: Record<ColorRole, string> = {\n  primary: \"checked:bg-mari-primary-solid\",\n  accent: \"checked:bg-mari-accent-solid\",\n  success: \"checked:bg-mari-success-solid\",\n  error: \"checked:bg-mari-error-solid\",\n  warning: \"checked:bg-mari-warning-solid\",\n  info: \"checked:bg-mari-info-solid\",\n  neutral: \"checked:bg-mari-neutral-solid\",\n};\n\nexport const checkedBgSolidHoverClass: Record<ColorRole, string> = {\n  primary: \"checked:hover:bg-mari-primary-solid-hover\",\n  accent: \"checked:hover:bg-mari-accent-solid-hover\",\n  success: \"checked:hover:bg-mari-success-solid-hover\",\n  error: \"checked:hover:bg-mari-error-solid-hover\",\n  warning: \"checked:hover:bg-mari-warning-solid-hover\",\n  info: \"checked:hover:bg-mari-info-solid-hover\",\n  neutral: \"checked:hover:bg-mari-neutral-solid-hover\",\n};\n\nexport const checkedBorderSolidClass: Record<ColorRole, string> = {\n  primary: \"checked:border-mari-primary-solid\",\n  accent: \"checked:border-mari-accent-solid\",\n  success: \"checked:border-mari-success-solid\",\n  error: \"checked:border-mari-error-solid\",\n  warning: \"checked:border-mari-warning-solid\",\n  info: \"checked:border-mari-info-solid\",\n  neutral: \"checked:border-mari-neutral-solid\",\n};\n\n/** Radio'nun dış halkası seçiliyken rol rengi (outline varyantı — içi boş, nokta ayrı). */\nexport const checkedBorderStrongClass: Record<ColorRole, string> = {\n  primary: \"checked:border-mari-primary\",\n  accent: \"checked:border-mari-accent\",\n  success: \"checked:border-mari-success\",\n  error: \"checked:border-mari-error\",\n  warning: \"checked:border-mari-warning\",\n  info: \"checked:border-mari-info\",\n  neutral: \"checked:border-mari-neutral\",\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-JNZODUXP.js

@@ -0,0 +1,116 @@
+"use client";
+
+// src/lib/overlay.ts
+import { useEffect, useRef, useState } from "react";
+var FOCUSABLE_SELECTOR = 'button:not([disabled]), a[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function getFocusables(root) {
+  return Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
+    (el) => !el.closest('[aria-hidden="true"], [inert]')
+  );
+}
+function firstFocusable(root) {
+  return getFocusables(root)[0] ?? null;
+}
+function reachable(el) {
+  return el && !el.closest('[aria-hidden="true"], [inert]') ? el : null;
+}
+function useRefocusAfterSkeleton(open, skeleton, panelRef, getInitialFocus, closeSelector) {
+  const wasSkeleton = useRef(skeleton);
+  const getInitialFocusRef = useRef(getInitialFocus);
+  getInitialFocusRef.current = getInitialFocus;
+  useEffect(() => {
+    const panel = panelRef.current;
+    if (open && wasSkeleton.current && !skeleton && panel) {
+      const active = document.activeElement;
+      if (active === panel || active instanceof HTMLElement && active.matches(closeSelector)) {
+        const target = getInitialFocusRef.current(panel);
+        if (target && target !== active) target.focus();
+      }
+    }
+    wasSkeleton.current = skeleton;
+  }, [skeleton, open, panelRef, closeSelector]);
+}
+function usePresence(open, exitMs) {
+  const [mounted, setMounted] = useState(open);
+  useEffect(() => {
+    if (open) {
+      setMounted(true);
+      return;
+    }
+    const timer = setTimeout(() => setMounted(false), exitMs);
+    return () => clearTimeout(timer);
+  }, [open, exitMs]);
+  return open || mounted;
+}
+function findAutofocus(root) {
+  const auto = root.querySelector("[data-autofocus]");
+  if (!auto || auto.closest('[aria-hidden="true"], [inert]')) return null;
+  return auto.matches(FOCUSABLE_SELECTOR) ? auto : firstFocusable(auto);
+}
+function useModalBehavior(open, panelRef, onClose, { closeOnEscape = true, lockScroll = true, getInitialFocus } = {}) {
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const getInitialFocusRef = useRef(getInitialFocus);
+  getInitialFocusRef.current = getInitialFocus;
+  useEffect(() => {
+    if (!open) return;
+    const panel = panelRef.current;
+    const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const { body, documentElement } = document;
+    const previousOverflow = body.style.overflow;
+    const previousPaddingRight = body.style.paddingRight;
+    if (lockScroll) {
+      const scrollbar = window.innerWidth - documentElement.clientWidth;
+      body.style.overflow = "hidden";
+      if (scrollbar > 0) body.style.paddingRight = `${scrollbar}px`;
+    }
+    if (panel) {
+      const target = getInitialFocusRef.current ? getInitialFocusRef.current(panel) : findAutofocus(panel) ?? firstFocusable(panel);
+      (target ?? panel).focus();
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape" && closeOnEscape) {
+        if (event.defaultPrevented) return;
+        event.preventDefault();
+        onCloseRef.current();
+        return;
+      }
+      if (event.key !== "Tab" || !panel) return;
+      const focusables = getFocusables(panel);
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      if (!first || !last) {
+        event.preventDefault();
+        return;
+      }
+      const active = document.activeElement;
+      if (event.shiftKey && (active === first || !panel.contains(active))) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && (active === last || !panel.contains(active))) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      if (lockScroll) {
+        body.style.overflow = previousOverflow;
+        body.style.paddingRight = previousPaddingRight;
+      }
+      previouslyFocused?.focus();
+    };
+  }, [open, panelRef, closeOnEscape, lockScroll]);
+}
+
+export {
+  getFocusables,
+  firstFocusable,
+  reachable,
+  useRefocusAfterSkeleton,
+  usePresence,
+  findAutofocus,
+  useModalBehavior
+};
+//# sourceMappingURL=chunk-JNZODUXP.js.map

package/dist/chunk-JNZODUXP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/overlay.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState, type RefObject } from \"react\";\n\n/**\n * Kenardan açılan modal katmanların (Drawer, NavDrawer) ortak davranışı.\n * Faz 13.6'dan önce bu mantık yalnız `menu/_shared/NavDrawer.tsx`'te vardı;\n * `Drawer`da HİÇBİRİ yoktu (odak tuzağı, Escape, kaydırma kilidi, portal) —\n * kapalı Drawer DOM'da kalıyor, içindeki düğmeler Tab ile odaklanabiliyordu.\n * Artık tek yerde.\n */\n\nexport const FOCUSABLE_SELECTOR =\n  'button:not([disabled]), a[href], input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Gerçekten odaklanabilen öğeler. `aria-hidden`/`inert` bir atanın içindekiler\n * elenir: iskelette gerçek içerik `SkeletonSlot` ile görünmez kopya olarak\n * DOM'da kalır (`visibility: hidden` → `focus()` sessizce başarısız olur);\n * bunlar sayılırsa odak tuzağının ilk/son öğesi görünmez bir düğme olur ve\n * Tab takılır.\n */\nexport function getFocusables(root: ParentNode): HTMLElement[] {\n  return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(\n    (el) => !el.closest('[aria-hidden=\"true\"], [inert]')\n  );\n}\n\nexport function firstFocusable(root: ParentNode): HTMLElement | null {\n  return getFocusables(root)[0] ?? null;\n}\n\n/** Öğe var ve iskeletin görünmez kopyasında (aria-hidden/inert) değilse kendisi. */\nexport function reachable(el: HTMLElement | null | undefined): HTMLElement | null {\n  return el && !el.closest('[aria-hidden=\"true\"], [inert]') ? el : null;\n}\n\n/**\n * İskelet → içerik geldi: iskelette odak \"Kapat\"a (ya da panele) düşer;\n * içerik gelince odak hâlâ orada ise normal ilk odağa taşınır. Kullanıcı\n * bu arada odağı başka yere taşıdıysa dokunulmaz.\n */\nexport function useRefocusAfterSkeleton(\n  open: boolean,\n  skeleton: boolean,\n  panelRef: RefObject<HTMLElement | null>,\n  getInitialFocus: (panel: HTMLElement) => HTMLElement | null | undefined,\n  closeSelector: string\n) {\n  const wasSkeleton = useRef(skeleton);\n  const getInitialFocusRef = useRef(getInitialFocus);\n  getInitialFocusRef.current = getInitialFocus;\n  useEffect(() => {\n    const panel = panelRef.current;\n    if (open && wasSkeleton.current && !skeleton && panel) {\n      const active = document.activeElement;\n      if (active === panel || (active instanceof HTMLElement && active.matches(closeSelector))) {\n        const target = getInitialFocusRef.current(panel);\n        if (target && target !== active) target.focus();\n      }\n    }\n    wasSkeleton.current = skeleton;\n  }, [skeleton, open, panelRef, closeSelector]);\n}\n\n/**\n * Açılışta hemen mount; kapanışta `exitMs` (çıkış animasyonu) bitince\n * unmount. `mounted` false iken hiç render etmeyin.\n */\nexport function usePresence(open: boolean, exitMs: number): boolean {\n  const [mounted, setMounted] = useState(open);\n  useEffect(() => {\n    if (open) {\n      setMounted(true);\n      return;\n    }\n    const timer = setTimeout(() => setMounted(false), exitMs);\n    return () => clearTimeout(timer);\n  }, [open, exitMs]);\n  return open || mounted;\n}\n\nexport interface ModalBehaviorOptions {\n  /** Escape kapatsın mı. Varsayılan: `true`. */\n  closeOnEscape?: boolean;\n  /** Sayfa kaydırmasını kilitle. Varsayılan: `true`. */\n  lockScroll?: boolean;\n  /**\n   * Açılışta odaklanacak öğeyi seçer. Verilmezse: `[data-autofocus]` → ilk\n   * odaklanabilir → panelin kendisi.\n   */\n  getInitialFocus?: (panel: HTMLElement) => HTMLElement | null | undefined;\n}\n\n/** `[data-autofocus]` — kendisi odaklanabilir değilse (bileşen data-* iletmiyorsa) içindeki ilk odaklanabilir. */\nexport function findAutofocus(root: ParentNode): HTMLElement | null {\n  const auto = root.querySelector<HTMLElement>(\"[data-autofocus]\");\n  if (!auto || auto.closest('[aria-hidden=\"true\"], [inert]')) return null;\n  return auto.matches(FOCUSABLE_SELECTOR) ? auto : firstFocusable(auto);\n}\n\n/**\n * Açıkken:\n * - sayfa kaydırması kilitlenir (kaydırma çubuğu genişliği kadar sağ dolgu\n *   eklenir — kilitlenince içerik yana kaymasın),\n * - odak panelin ilk odaklanabilir öğesine (yoksa panelin kendisine) taşınır\n *   ve Tab/Shift+Tab ile panel içinde döner,\n * - Escape `onClose` çağırır,\n * - kapanınca odak açılıştan önceki öğeye (genelde tetikleyici) döner.\n */\nexport function useModalBehavior(\n  open: boolean,\n  panelRef: RefObject<HTMLElement | null>,\n  onClose: () => void,\n  { closeOnEscape = true, lockScroll = true, getInitialFocus }: ModalBehaviorOptions = {}\n) {\n  const onCloseRef = useRef(onClose);\n  onCloseRef.current = onClose;\n  const getInitialFocusRef = useRef(getInitialFocus);\n  getInitialFocusRef.current = getInitialFocus;\n\n  useEffect(() => {\n    if (!open) return;\n    const panel = panelRef.current;\n    const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;\n\n    const { body, documentElement } = document;\n    const previousOverflow = body.style.overflow;\n    const previousPaddingRight = body.style.paddingRight;\n    if (lockScroll) {\n      const scrollbar = window.innerWidth - documentElement.clientWidth;\n      body.style.overflow = \"hidden\";\n      if (scrollbar > 0) body.style.paddingRight = `${scrollbar}px`;\n    }\n\n    if (panel) {\n      const target = getInitialFocusRef.current\n        ? getInitialFocusRef.current(panel)\n        : (findAutofocus(panel) ?? firstFocusable(panel));\n      (target ?? panel).focus();\n    }\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\" && closeOnEscape) {\n        // İçteki açılır bir parça (Select listesi, DatePicker/Popover paneli) Escape'i zaten işlediyse\n        // yalnız o kapanır — pencere değil.\n        if (event.defaultPrevented) return;\n        event.preventDefault();\n        onCloseRef.current();\n        return;\n      }\n      if (event.key !== \"Tab\" || !panel) return;\n      const focusables = getFocusables(panel);\n      const first = focusables[0];\n      const last = focusables[focusables.length - 1];\n      if (!first || !last) {\n        event.preventDefault();\n        return;\n      }\n      const active = document.activeElement;\n      if (event.shiftKey && (active === first || !panel.contains(active))) {\n        event.preventDefault();\n        last.focus();\n      } else if (!event.shiftKey && (active === last || !panel.contains(active))) {\n        event.preventDefault();\n        first.focus();\n      }\n    };\n    document.addEventListener(\"keydown\", handleKeyDown);\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown);\n      if (lockScroll) {\n        body.style.overflow = previousOverflow;\n        body.style.paddingRight = previousPaddingRight;\n      }\n      previouslyFocused?.focus();\n    };\n  }, [open, panelRef, closeOnEscape, lockScroll]);\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-KCYM2JXP.js

@@ -0,0 +1,202 @@
+"use client";
+
+import {
+  useScrollable
+} from "./chunk-KG6A32KX.js";
+import {
+  findAutofocus,
+  firstFocusable,
+  useModalBehavior,
+  usePresence,
+  useRefocusAfterSkeleton
+} from "./chunk-JNZODUXP.js";
+import {
+  ContentSkeleton
+} from "./chunk-V7KDUUV6.js";
+import {
+  Skeleton,
+  SkeletonBlock
+} from "./chunk-NPM7IDYV.js";
+import {
+  touchTargetSquareClass
+} from "./chunk-FFXRFQSU.js";
+
+// src/drawer/Drawer.tsx
+import { useId, useRef } from "react";
+import { createPortal } from "react-dom";
+import { XIcon } from "lucide-react";
+import { cn as cn2 } from "@mari-ui/core";
+
+// src/drawer/utils.ts
+import { cn } from "@mari-ui/core";
+var SIDE_WIDTH = {
+  sm: "w-[min(20rem,calc(100vw-3rem))]",
+  md: "w-[min(25rem,calc(100vw-3rem))]",
+  lg: "w-[min(40rem,calc(100vw-3rem))]"
+};
+var EDGE_HEIGHT = {
+  sm: "h-[min(16rem,85dvh)]",
+  md: "h-[min(28rem,85dvh)]",
+  lg: "h-[min(40rem,90dvh)]"
+};
+var isSide = (position) => position === "left" || position === "right";
+function getPanelClass(position, size, custom) {
+  const side = isSide(position);
+  return cn(
+    "absolute flex flex-col bg-mari-surface text-mari-foreground shadow-mari-xl outline-none",
+    "transition-transform duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
+    position === "right" && "inset-y-0 right-0 border-l border-mari-border",
+    position === "left" && "inset-y-0 left-0 border-r border-mari-border",
+    position === "top" && "inset-x-0 top-0 rounded-b-xl border-b border-mari-border",
+    // Alt çekmece = mobil "bottom sheet": yuvarlak üst köşeler + tutamaç.
+    position === "bottom" && "inset-x-0 bottom-0 rounded-t-xl border-t border-mari-border pb-[env(safe-area-inset-bottom)]",
+    !custom && (side ? SIDE_WIDTH[size] : EDGE_HEIGHT[size])
+  );
+}
+var OPEN = {
+  right: "translate-x-0 starting:translate-x-full",
+  left: "translate-x-0 starting:-translate-x-full",
+  top: "translate-y-0 starting:-translate-y-full",
+  bottom: "translate-y-0 starting:translate-y-full"
+};
+var CLOSED = {
+  right: "translate-x-full",
+  left: "-translate-x-full",
+  top: "-translate-y-full",
+  bottom: "translate-y-full"
+};
+function getTranslateClass(position, open) {
+  return open ? OPEN[position] : CLOSED[position];
+}
+
+// src/drawer/Drawer.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var EXIT_MS = 300;
+function getDrawerInitialFocus(panel) {
+  const body = panel.querySelector("[data-drawer-body]");
+  return findAutofocus(panel) ?? (body && firstFocusable(body)) ?? panel.querySelector("[data-drawer-close]");
+}
+var TITLE_PLACEHOLDER = /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 py-1", children: /* @__PURE__ */ jsx(SkeletonBlock, { active: true, width: "45%", height: "1rem", radius: "sm" }) });
+var FOOTER_PLACEHOLDER = /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center justify-end gap-2", children: [
+  /* @__PURE__ */ jsx(SkeletonBlock, { active: true, width: "4.5rem", height: "2rem" }),
+  /* @__PURE__ */ jsx(SkeletonBlock, { active: true, width: "4.5rem", height: "2rem" })
+] });
+function getCustomSizeStyle(side, custom, width, height) {
+  if (!custom) return void 0;
+  return side ? { width, maxWidth: "calc(100vw - 3rem)" } : { height, maxHeight: "90dvh" };
+}
+function Drawer({
+  open,
+  onClose,
+  position = "right",
+  size = "md",
+  width,
+  height,
+  title,
+  description,
+  extra,
+  footer,
+  children,
+  showCloseButton = true,
+  closeButtonPosition = "right",
+  skeleton = false,
+  mask = true,
+  maskClosable = true,
+  keyboard = true,
+  "aria-label": ariaLabel,
+  className,
+  bodyClassName
+}) {
+  const panelRef = useRef(null);
+  const titleId = useId();
+  const descriptionId = useId();
+  const present = usePresence(open, EXIT_MS);
+  const bodyRef = useRef(null);
+  const bodyScrollable = useScrollable(bodyRef, "y", [children, skeleton, present]);
+  useModalBehavior(open, panelRef, onClose, { closeOnEscape: keyboard, getInitialFocus: getDrawerInitialFocus });
+  useRefocusAfterSkeleton(open, skeleton, panelRef, getDrawerInitialFocus, "[data-drawer-close]");
+  if (!present || typeof document === "undefined") return null;
+  const side = isSide(position);
+  const customSize = side ? width !== void 0 : height !== void 0;
+  const sizeStyle = getCustomSizeStyle(side, customSize, width, height);
+  const hasHeader = Boolean(title || extra || showCloseButton);
+  const closeButton = showCloseButton && /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onClose,
+      "aria-label": "Kapat",
+      "data-drawer-close": true,
+      className: cn2(
+        "relative inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-mari-muted transition-colors",
+        "hover:bg-mari-surface-alt hover:text-mari-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring",
+        touchTargetSquareClass.md,
+        closeButtonPosition === "left" ? "-ml-1.5" : "-mr-1.5"
+      ),
+      children: /* @__PURE__ */ jsx(XIcon, { size: 18, "aria-hidden": true })
+    }
+  );
+  return createPortal(
+    /* @__PURE__ */ jsxs("div", { className: cn2("fixed inset-0 z-mari-drawer", !open && "pointer-events-none"), children: [
+      mask && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          onClick: maskClosable ? onClose : void 0,
+          className: cn2(
+            "absolute inset-0 bg-mari-scrim transition-opacity duration-300 motion-reduce:transition-none starting:opacity-0",
+            open ? "opacity-100" : "opacity-0"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: panelRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": title ? titleId : void 0,
+          "aria-label": title ? void 0 : ariaLabel,
+          "aria-describedby": description ? descriptionId : void 0,
+          "aria-busy": skeleton || void 0,
+          tabIndex: -1,
+          style: sizeStyle,
+          className: cn2(getPanelClass(position, size, customSize), getTranslateClass(position, open), className),
+          children: [
+            position === "bottom" && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "flex justify-center pt-2.5", children: /* @__PURE__ */ jsx("span", { className: "h-1 w-10 rounded-full bg-mari-border" }) }),
+            hasHeader && /* @__PURE__ */ jsxs("div", { className: cn2("flex shrink-0 items-start gap-3 border-b border-mari-border px-4 py-4 sm:px-6", position === "bottom" && "pt-2"), children: [
+              closeButtonPosition === "left" && closeButton,
+              /* @__PURE__ */ jsx(ContentSkeleton, { on: skeleton, fallback: TITLE_PLACEHOLDER, className: "min-w-0 flex-1 self-center", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 self-center", children: [
+                title && /* @__PURE__ */ jsx("h2", { id: titleId, className: "truncate text-base font-semibold leading-6 text-mari-foreground", children: title }),
+                description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "mt-0.5 text-sm text-mari-muted", children: description })
+              ] }) }),
+              extra && /* @__PURE__ */ jsx(ContentSkeleton, { on: skeleton, fallback: null, className: "shrink-0 self-center", children: /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2 self-center", children: extra }) }),
+              closeButtonPosition === "right" && closeButton
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: bodyRef,
+                "data-drawer-body": true,
+                tabIndex: bodyScrollable && !skeleton ? 0 : void 0,
+                className: cn2(
+                  "min-h-0 flex-1 overflow-y-auto overscroll-contain p-4 sm:p-6",
+                  "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-mari-ring",
+                  bodyClassName
+                ),
+                children: /* @__PURE__ */ jsx(ContentSkeleton, { on: skeleton, fallback: /* @__PURE__ */ jsx(Skeleton, { active: true, paragraph: { rows: 6 } }), children })
+              }
+            ),
+            footer && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-mari-border px-4 py-3 sm:px-6", children: /* @__PURE__ */ jsx(ContentSkeleton, { on: skeleton, fallback: FOOTER_PLACEHOLDER, children: footer }) })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+
+export {
+  Drawer
+};
+//# sourceMappingURL=chunk-KCYM2JXP.js.map

package/dist/chunk-KCYM2JXP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/drawer/Drawer.tsx","../src/drawer/utils.ts"],"sourcesContent":["\"use client\";\n\nimport React, { useId, useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { XIcon } from \"lucide-react\";\nimport { cn } from \"@mari-ui/core\";\nimport { Skeleton, SkeletonBlock } from \"../skeleton\";\nimport { ContentSkeleton } from \"../lib/ContentSkeleton\";\nimport { useScrollable } from \"../lib/useScrollable\";\nimport { touchTargetSquareClass } from \"../lib/sizeClasses\";\nimport { findAutofocus, firstFocusable, useModalBehavior, usePresence, useRefocusAfterSkeleton } from \"../lib/overlay\";\nimport type { DrawerProps } from \"./types\";\nimport { getPanelClass, getTranslateClass, isSide } from \"./utils\";\n\nexport type { DrawerProps };\n\nconst EXIT_MS = 300;\n\n/**\n * Açılışta odak sırası: `[data-autofocus]` → gövdedeki ilk alan → Kapat →\n * panel. Başlıktaki `extra` aksiyonlarına ASLA ilk odak verilmez — Faz 13.6\n * incelemesinde yükleniyor durumunda açılan düzenleme çekmecesinde ilk odak\n * \"Sil\" düğmesine gidiyordu (Enter'a basan kullanıcı kaydı silebilirdi).\n */\nfunction getDrawerInitialFocus(panel: HTMLElement): HTMLElement | null {\n  const body = panel.querySelector<HTMLElement>(\"[data-drawer-body]\");\n  return findAutofocus(panel) ?? (body && firstFocusable(body)) ?? panel.querySelector<HTMLElement>(\"[data-drawer-close]\");\n}\n\n/*\n * Ölçülecek içerik yoksa (başlık/alt çubuk da veriden geliyor ya da\n * yerleşimsiz ortam) gösterilen genel yer tutucular.\n */\nconst TITLE_PLACEHOLDER = (\n  <div className=\"flex flex-col gap-2 py-1\">\n    <SkeletonBlock active width=\"45%\" height=\"1rem\" radius=\"sm\" />\n  </div>\n);\n\n/** Alt çubuğun genel iskeleti: en yaygın düzen sağa yaslı İptal / Kaydet. */\nconst FOOTER_PLACEHOLDER = (\n  <div className=\"flex h-full items-center justify-end gap-2\">\n    <SkeletonBlock active width=\"4.5rem\" height=\"2rem\" />\n    <SkeletonBlock active width=\"4.5rem\" height=\"2rem\" />\n  </div>\n);\n\n/** Özel `width`/`height` — yine de ekranı taşmasın. */\nfunction getCustomSizeStyle(side: boolean, custom: boolean, width?: number | string, height?: number | string): React.CSSProperties | undefined {\n  if (!custom) return undefined;\n  return side ? { width, maxWidth: \"calc(100vw - 3rem)\" } : { height, maxHeight: \"90dvh\" };\n}\n\n/**\n * Faz 13.6 — yapı ant.design Drawer'ından (başlık 16/24px dolgu + 16px/600,\n * gövde 24px, alt çubuk), görünüm kendi token'larımızdan; overlay davranışı\n * `lib/overlay.ts`'te NavDrawer ile ortak.\n *\n * Eski sürümdeki sorunlar:\n * - `role=\"dialog\"`/`aria-modal`/erişilebilir ad yoktu; odak içeri\n *   taşınmıyor, Tab sayfaya kaçıyor, Escape kapatmıyordu.\n * - Kapalıyken DOM'da kalıyordu (sadece opacity) — içindeki düğmeler Tab ile\n *   odaklanabiliyordu. Artık kapanış animasyonundan sonra unmount.\n * - Sayfa kaydırması kilitlenmiyordu; portal yoktu (overflow/transform'lu bir\n *   atanın içinde kırpılabiliyordu).\n * - Başlık ortalıydı; yan çekmece mobilde ekranı taşıyordu (`w-96` sabit).\n * - `loading` düz \"Yükleniyor...\" metniydi.\n *\n * Faz 15.6 — `skeleton` artık yalnız gövdeyi değil\n * başlık/açıklama/extra/alt çubuğu da iskelete çevirir; Kapat düğmesi canlı\n * kalır. Her bölge `ContentSkeleton` ile içeriğin kendi şeklinde (satır satır\n * metin, alan alan form, düğme düğme alt çubuk) iskelete döner; gerçek içerik\n * görünmez olarak yerinde kalır → yükseklik zıplamaz.\n * Görünmez kopyalar `aria-hidden` bölgede — odak tuzağı onları atlar.\n */\nexport function Drawer({\n  open,\n  onClose,\n  position = \"right\",\n  size = \"md\",\n  width,\n  height,\n  title,\n  description,\n  extra,\n  footer,\n  children,\n  showCloseButton = true,\n  closeButtonPosition = \"right\",\n  skeleton = false,\n  mask = true,\n  maskClosable = true,\n  keyboard = true,\n  \"aria-label\": ariaLabel,\n  className,\n  bodyClassName,\n}: DrawerProps) {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const descriptionId = useId();\n  const present = usePresence(open, EXIT_MS);\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const bodyScrollable = useScrollable(bodyRef, \"y\", [children, skeleton, present]);\n  useModalBehavior(open, panelRef, onClose, { closeOnEscape: keyboard, getInitialFocus: getDrawerInitialFocus });\n\n  // İskelet → içerik geldi: odak hâlâ Kapat'ta/panelde ise forma taşı.\n  useRefocusAfterSkeleton(open, skeleton, panelRef, getDrawerInitialFocus, \"[data-drawer-close]\");\n\n  if (!present || typeof document === \"undefined\") return null;\n\n  const side = isSide(position);\n  const customSize = side ? width !== undefined : height !== undefined;\n  const sizeStyle = getCustomSizeStyle(side, customSize, width, height);\n  const hasHeader = Boolean(title || extra || showCloseButton);\n\n  const closeButton = showCloseButton && (\n    <button\n      type=\"button\"\n      onClick={onClose}\n      aria-label=\"Kapat\"\n      data-drawer-close\n      className={cn(\n        \"relative inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-mari-muted transition-colors\",\n        \"hover:bg-mari-surface-alt hover:text-mari-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring\",\n        touchTargetSquareClass.md,\n        closeButtonPosition === \"left\" ? \"-ml-1.5\" : \"-mr-1.5\"\n      )}\n    >\n      <XIcon size={18} aria-hidden />\n    </button>\n  );\n\n  return createPortal(\n    <div className={cn(\"fixed inset-0 z-mari-drawer\", !open && \"pointer-events-none\")}>\n      {mask && (\n        <div\n          aria-hidden\n          onClick={maskClosable ? onClose : undefined}\n          className={cn(\n            \"absolute inset-0 bg-mari-scrim transition-opacity duration-300 motion-reduce:transition-none starting:opacity-0\",\n            open ? \"opacity-100\" : \"opacity-0\"\n          )}\n        />\n      )}\n      <div\n        ref={panelRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        aria-label={title ? undefined : ariaLabel}\n        aria-describedby={description ? descriptionId : undefined}\n        aria-busy={skeleton || undefined}\n        tabIndex={-1}\n        style={sizeStyle}\n        className={cn(getPanelClass(position, size, customSize), getTranslateClass(position, open), className)}\n      >\n        {position === \"bottom\" && (\n          <div aria-hidden className=\"flex justify-center pt-2.5\">\n            <span className=\"h-1 w-10 rounded-full bg-mari-border\" />\n          </div>\n        )}\n\n        {hasHeader && (\n          <div className={cn(\"flex shrink-0 items-start gap-3 border-b border-mari-border px-4 py-4 sm:px-6\", position === \"bottom\" && \"pt-2\")}>\n            {closeButtonPosition === \"left\" && closeButton}\n            <ContentSkeleton on={skeleton} fallback={TITLE_PLACEHOLDER} className=\"min-w-0 flex-1 self-center\">\n              <div className=\"min-w-0 flex-1 self-center\">\n                {title && (\n                  <h2 id={titleId} className=\"truncate text-base font-semibold leading-6 text-mari-foreground\">\n                    {title}\n                  </h2>\n                )}\n                {description && (\n                  <p id={descriptionId} className=\"mt-0.5 text-sm text-mari-muted\">\n                    {description}\n                  </p>\n                )}\n              </div>\n            </ContentSkeleton>\n            {extra && (\n              <ContentSkeleton on={skeleton} fallback={null} className=\"shrink-0 self-center\">\n                <div className=\"flex shrink-0 items-center gap-2 self-center\">{extra}</div>\n              </ContentSkeleton>\n            )}\n            {closeButtonPosition === \"right\" && closeButton}\n          </div>\n        )}\n\n        <div\n          ref={bodyRef}\n          data-drawer-body\n          // Taşan ve içinde odaklanabilir öğe olmayan gövde de klavyeyle kaydırılabilsin (axe scrollable-region-focusable).\n          tabIndex={bodyScrollable && !skeleton ? 0 : undefined}\n          className={cn(\n            \"min-h-0 flex-1 overflow-y-auto overscroll-contain p-4 sm:p-6\",\n            \"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-mari-ring\",\n            bodyClassName\n          )}\n        >\n          <ContentSkeleton on={skeleton} fallback={<Skeleton active paragraph={{ rows: 6 }} />}>\n            {children}\n          </ContentSkeleton>\n        </div>\n\n        {footer && (\n          <div className=\"shrink-0 border-t border-mari-border px-4 py-3 sm:px-6\">\n            <ContentSkeleton on={skeleton} fallback={FOOTER_PLACEHOLDER}>\n              {footer}\n            </ContentSkeleton>\n          </div>\n        )}\n      </div>\n    </div>,\n    document.body\n  );\n}\n","import { cn } from \"@mari-ui/core\";\nimport type { DrawerPosition, DrawerSize } from \"./types\";\n\n/**\n * Yan çekmece genişliği / üst-alt yüksekliği. Yan çekmece dar ekranda\n * `100vw - 3rem`i aşmaz — solda örtüden bir şerit kalır, dokunarak\n * kapatılabilir ve kullanıcı hâlâ sayfada olduğunu görür.\n */\nconst SIDE_WIDTH: Record<DrawerSize, string> = {\n  sm: \"w-[min(20rem,calc(100vw-3rem))]\",\n  md: \"w-[min(25rem,calc(100vw-3rem))]\",\n  lg: \"w-[min(40rem,calc(100vw-3rem))]\",\n};\nconst EDGE_HEIGHT: Record<DrawerSize, string> = {\n  sm: \"h-[min(16rem,85dvh)]\",\n  md: \"h-[min(28rem,85dvh)]\",\n  lg: \"h-[min(40rem,90dvh)]\",\n};\n\nexport const isSide = (position: DrawerPosition) => position === \"left\" || position === \"right\";\n\nexport function getPanelClass(position: DrawerPosition, size: DrawerSize, custom: boolean): string {\n  const side = isSide(position);\n  return cn(\n    \"absolute flex flex-col bg-mari-surface text-mari-foreground shadow-mari-xl outline-none\",\n    \"transition-transform duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none\",\n    position === \"right\" && \"inset-y-0 right-0 border-l border-mari-border\",\n    position === \"left\" && \"inset-y-0 left-0 border-r border-mari-border\",\n    position === \"top\" && \"inset-x-0 top-0 rounded-b-xl border-b border-mari-border\",\n    // Alt çekmece = mobil \"bottom sheet\": yuvarlak üst köşeler + tutamaç.\n    position === \"bottom\" && \"inset-x-0 bottom-0 rounded-t-xl border-t border-mari-border pb-[env(safe-area-inset-bottom)]\",\n    !custom && (side ? SIDE_WIDTH[size] : EDGE_HEIGHT[size])\n  );\n}\n\n/**\n * Açıkken yerinde; `starting:` (@starting-style) ilk boyamada kapalı\n * konumdan başlatır → mount anında kayarak girer. Kapanışta panel\n * `usePresence` süresi boyunca DOM'da kalıp dışarı kayar.\n */\nconst OPEN: Record<DrawerPosition, string> = {\n  right: \"translate-x-0 starting:translate-x-full\",\n  left: \"translate-x-0 starting:-translate-x-full\",\n  top: \"translate-y-0 starting:-translate-y-full\",\n  bottom: \"translate-y-0 starting:translate-y-full\",\n};\nconst CLOSED: Record<DrawerPosition, string> = {\n  right: \"translate-x-full\",\n  left: \"-translate-x-full\",\n  top: \"-translate-y-full\",\n  bottom: \"translate-y-full\",\n};\n\nexport function getTranslateClass(position: DrawerPosition, open: boolean): string {\n  return open ? OPEN[position] : CLOSED[position];\n}\n"],"mappings":"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","names":["cn","cn"]}

package/dist/chunk-KG6A32KX.js

@@ -0,0 +1,23 @@
+"use client";
+
+// src/lib/useScrollable.ts
+import { useEffect, useState } from "react";
+function useScrollable(ref, axis, deps = []) {
+  const [scrollable, setScrollable] = useState(false);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const check = () => setScrollable(axis === "x" ? el.scrollWidth > el.clientWidth + 1 : el.scrollHeight > el.clientHeight + 1);
+    check();
+    const observer = new ResizeObserver(check);
+    observer.observe(el);
+    for (const child of Array.from(el.children)) observer.observe(child);
+    return () => observer.disconnect();
+  }, [ref, axis, ...deps]);
+  return scrollable;
+}
+
+export {
+  useScrollable
+};
+//# sourceMappingURL=chunk-KG6A32KX.js.map

package/dist/chunk-KG6A32KX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/useScrollable.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState, type RefObject } from \"react\";\n\n/**\n * Bölge gerçekten taşıyor mu (kaydırılabilir mi)? Kaydırılan bir bölge\n * klavyeyle de kaydırılabilmeli (axe `scrollable-region-focusable`): içinde\n * odaklanabilir öğe yoksa bölgenin kendisi Tab durağı olmalı — ama SADECE\n * taşarken; sığan içeriğe boşuna bir durak eklenmesin.\n *\n * Sabit boyutlu bir kutuda içerik büyüyünce kutunun kendisi yeniden\n * boyutlanmaz → çocuklar da gözlenir. `deps` değişince (ör. içerik/iskelet)\n * yeniden bağlanır.\n */\nexport function useScrollable(ref: RefObject<HTMLElement | null>, axis: \"x\" | \"y\", deps: readonly unknown[] = []): boolean {\n  const [scrollable, setScrollable] = useState(false);\n  useEffect(() => {\n    const el = ref.current;\n    if (!el || typeof ResizeObserver === \"undefined\") return;\n    const check = () =>\n      setScrollable(axis === \"x\" ? el.scrollWidth > el.clientWidth + 1 : el.scrollHeight > el.clientHeight + 1);\n    check();\n    const observer = new ResizeObserver(check);\n    observer.observe(el);\n    for (const child of Array.from(el.children)) observer.observe(child);\n    return () => observer.disconnect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- çağıranın verdiği deps\n  }, [ref, axis, ...deps]);\n  return scrollable;\n}\n"],"mappings":";AAEA,SAAS,WAAW,gBAAgC;AAY7C,SAAS,cAAc,KAAoC,MAAiB,OAA2B,CAAC,GAAY;AACzH,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,YAAU,MAAM;AACd,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,MAAM,OAAO,mBAAmB,YAAa;AAClD,UAAM,QAAQ,MACZ,cAAc,SAAS,MAAM,GAAG,cAAc,GAAG,cAAc,IAAI,GAAG,eAAe,GAAG,eAAe,CAAC;AAC1G,UAAM;AACN,UAAM,WAAW,IAAI,eAAe,KAAK;AACzC,aAAS,QAAQ,EAAE;AACnB,eAAW,SAAS,MAAM,KAAK,GAAG,QAAQ,EAAG,UAAS,QAAQ,KAAK;AACnE,WAAO,MAAM,SAAS,WAAW;AAAA,EAEnC,GAAG,CAAC,KAAK,MAAM,GAAG,IAAI,CAAC;AACvB,SAAO;AACT;","names":[]}

package/dist/chunk-KSPM2Z3T.js

@@ -0,0 +1,43 @@
+// src/input/_components/FieldAdornments.tsx
+import { EyeIcon, EyeOffIcon, XIcon } from "lucide-react";
+import { cn } from "@mari-ui/core";
+import { jsx } from "react/jsx-runtime";
+var ICON_BUTTON_CLASS = "flex shrink-0 cursor-pointer items-center justify-center rounded-sm text-mari-muted hover:text-mari-foreground focus-visible:outline-2 focus-visible:outline-mari-ring";
+function ClearButton({ visible, label, icon, onClear, className }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onClear,
+      "aria-label": label,
+      className: cn(ICON_BUTTON_CLASS, "invisible size-5 hover:bg-mari-surface-alt", visible && "visible", className),
+      children: icon ?? /* @__PURE__ */ jsx(XIcon, { size: 14, "aria-hidden": true })
+    }
+  );
+}
+function PasswordToggle({ visible, disabled, onToggle, iconRender }) {
+  const defaultIcon = visible ? /* @__PURE__ */ jsx(EyeIcon, { size: 16, "aria-hidden": true }) : /* @__PURE__ */ jsx(EyeOffIcon, { size: 16, "aria-hidden": true });
+  const icon = iconRender ? iconRender(visible) : defaultIcon;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onToggle,
+      "aria-label": visible ? "\u015Eifreyi gizle" : "\u015Eifreyi g\xF6ster",
+      "aria-pressed": visible,
+      disabled,
+      className: cn(ICON_BUTTON_CLASS, "size-6"),
+      children: icon
+    }
+  );
+}
+function clearIconOf(allowClear) {
+  return typeof allowClear === "object" ? allowClear.clearIcon : void 0;
+}
+
+export {
+  ClearButton,
+  PasswordToggle,
+  clearIconOf
+};
+//# sourceMappingURL=chunk-KSPM2Z3T.js.map

package/dist/chunk-KSPM2Z3T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/input/_components/FieldAdornments.tsx"],"sourcesContent":["import React from \"react\";\nimport { EyeIcon, EyeOffIcon, XIcon } from \"lucide-react\";\nimport { cn } from \"@mari-ui/core\";\n\nconst ICON_BUTTON_CLASS =\n  \"flex shrink-0 cursor-pointer items-center justify-center rounded-sm text-mari-muted hover:text-mari-foreground focus-visible:outline-2 focus-visible:outline-mari-ring\";\n\ninterface ClearButtonProps {\n  visible: boolean;\n  label: string;\n  icon?: React.ReactNode;\n  onClear: () => void;\n  className?: string;\n}\n\n/** Input/Textarea ortak temizle butonu. `invisible` yer ayırır (yazınca metin kaymaz) ve sekme sırasından çıkarır. */\nexport function ClearButton({ visible, label, icon, onClear, className }: Readonly<ClearButtonProps>) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClear}\n      aria-label={label}\n      className={cn(ICON_BUTTON_CLASS, \"invisible size-5 hover:bg-mari-surface-alt\", visible && \"visible\", className)}\n    >\n      {icon ?? <XIcon size={14} aria-hidden />}\n    </button>\n  );\n}\n\ninterface PasswordToggleProps {\n  visible: boolean;\n  disabled: boolean;\n  onToggle: () => void;\n  iconRender?: (visible: boolean) => React.ReactNode;\n}\n\nexport function PasswordToggle({ visible, disabled, onToggle, iconRender }: Readonly<PasswordToggleProps>) {\n  const defaultIcon = visible ? <EyeIcon size={16} aria-hidden /> : <EyeOffIcon size={16} aria-hidden />;\n  const icon = iconRender ? iconRender(visible) : defaultIcon;\n  return (\n    <button\n      type=\"button\"\n      onClick={onToggle}\n      aria-label={visible ? \"Şifreyi gizle\" : \"Şifreyi göster\"}\n      aria-pressed={visible}\n      disabled={disabled}\n      className={cn(ICON_BUTTON_CLASS, \"size-6\")}\n    >\n      {icon}\n    </button>\n  );\n}\n\nexport function clearIconOf(allowClear: boolean | { clearIcon?: React.ReactNode }): React.ReactNode | undefined {\n  return typeof allowClear === \"object\" ? allowClear.clearIcon : undefined;\n}\n"],"mappings":";AACA,SAAS,SAAS,YAAY,aAAa;AAC3C,SAAS,UAAU;AAsBJ;AApBf,IAAM,oBACJ;AAWK,SAAS,YAAY,EAAE,SAAS,OAAO,MAAM,SAAS,UAAU,GAA+B;AACpG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,cAAY;AAAA,MACZ,WAAW,GAAG,mBAAmB,8CAA8C,WAAW,WAAW,SAAS;AAAA,MAE7G,kBAAQ,oBAAC,SAAM,MAAM,IAAI,eAAW,MAAC;AAAA;AAAA,EACxC;AAEJ;AASO,SAAS,eAAe,EAAE,SAAS,UAAU,UAAU,WAAW,GAAkC;AACzG,QAAM,cAAc,UAAU,oBAAC,WAAQ,MAAM,IAAI,eAAW,MAAC,IAAK,oBAAC,cAAW,MAAM,IAAI,eAAW,MAAC;AACpG,QAAM,OAAO,aAAa,WAAW,OAAO,IAAI;AAChD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,cAAY,UAAU,uBAAkB;AAAA,MACxC,gBAAc;AAAA,MACd;AAAA,MACA,WAAW,GAAG,mBAAmB,QAAQ;AAAA,MAExC;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,YAAY,YAAoF;AAC9G,SAAO,OAAO,eAAe,WAAW,WAAW,YAAY;AACjE;","names":[]}

package/dist/chunk-LBQMEHK6.js

@@ -0,0 +1,54 @@
+"use client";
+
+// src/lib/fieldContext.ts
+import { createContext, useContext, useEffect } from "react";
+var FieldContext = createContext(null);
+var joinIds = (...ids) => ids.filter(Boolean).join(" ") || void 0;
+function useFieldControl(props) {
+  const field = useContext(FieldContext);
+  const setControlId = field?.setControlId;
+  const ownId = props.id;
+  useEffect(() => {
+    if (!setControlId || ownId === void 0) return;
+    setControlId(ownId);
+    return () => setControlId(void 0);
+  }, [setControlId, ownId]);
+  if (!field) return props;
+  return {
+    ...props,
+    id: props.id ?? field.controlId,
+    "aria-describedby": joinIds(props["aria-describedby"], field.describedBy),
+    "aria-invalid": props["aria-invalid"] ?? (field.invalid || void 0),
+    required: props.required ?? (field.required || void 0),
+    disabled: props.disabled ?? (field.disabled || void 0),
+    color: props.color ?? (field.invalid ? "error" : void 0),
+    skeleton: props.skeleton ?? (field.skeleton || void 0)
+  };
+}
+function useFieldSkeleton(own) {
+  const field = useContext(FieldContext);
+  return own ?? field?.skeleton ?? false;
+}
+function useFieldGroup(props, enabled = true) {
+  const field = useContext(FieldContext);
+  const markGroup = enabled ? field?.markGroup : void 0;
+  useEffect(() => markGroup?.(), [markGroup]);
+  if (!field || !enabled) return props;
+  const named = props["aria-labelledby"] !== void 0 || props["aria-label"] !== void 0;
+  return {
+    ...props,
+    "aria-labelledby": named ? props["aria-labelledby"] : field.labelId,
+    "aria-describedby": joinIds(props["aria-describedby"], field.describedBy),
+    disabled: props.disabled ?? (field.disabled || void 0),
+    "aria-invalid": field.invalid ? true : void 0,
+    "aria-required": field.required ? true : void 0
+  };
+}
+
+export {
+  FieldContext,
+  useFieldControl,
+  useFieldSkeleton,
+  useFieldGroup
+};
+//# sourceMappingURL=chunk-LBQMEHK6.js.map

package/dist/chunk-LBQMEHK6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/fieldContext.ts"],"sourcesContent":["\"use client\";\n\nimport type React from \"react\";\nimport { createContext, useContext, useEffect } from \"react\";\nimport type { ColorRole } from \"@mari-ui/core\";\n\n/**\n * Faz 16.1 — `Field`in içindeki kontrole geçirdiği bağlantılar. `lib`te\n * duruyor (field/ klasöründe değil) çünkü her kontrol bunu import eder;\n * tsup ortak parçaya (chunk) koyar, tek bir context örneği olur.\n */\nexport interface FieldContextValue {\n  /** Kontrolün id'si — `<label htmlFor>` buna bağlı. */\n  controlId: string;\n  labelId: string;\n  /** İpucu ve/veya hata metninin id'leri (boşlukla ayrılmış); yoksa `undefined`. */\n  describedBy: string | undefined;\n  invalid: boolean;\n  required: boolean;\n  disabled: boolean;\n  /** Grup kontrolleri (RadioGroup, Segmented, OtpInput) çağırır: etiket `<label for>` değil grubun adı olur. */\n  markGroup: () => void;\n  /** Kontrol kendi `id`sini verdiyse etiketin `htmlFor`u ona dönsün. */\n  setControlId: (id: string | undefined) => void;\n  /** Field iskelette: içindeki kontrol de iskelet çizer (tek prop kuralı). */\n  skeleton: boolean;\n}\n\nexport const FieldContext = createContext<FieldContextValue | null>(null);\n\nconst joinIds = (...ids: Array<string | undefined>) => ids.filter(Boolean).join(\" \") || undefined;\n\nexport interface FieldControlProps {\n  id?: string;\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: Exclude<React.AriaAttributes[\"aria-invalid\"], undefined>;\n  required?: boolean;\n  disabled?: boolean;\n  color?: ColorRole;\n  skeleton?: boolean;\n}\n\n/**\n * Tek bir alanı olan kontroller (Input, Select, InputNumber…) için. Field\n * içinde değilse verilen prop'ları olduğu gibi döner. İçindeyse eksikleri\n * Field'dan tamamlar — kontrole AÇIKÇA verilen prop her zaman kazanır;\n * `aria-describedby` ise birleştirilir (ikisi de okunsun).\n */\nexport function useFieldControl<P extends FieldControlProps>(props: P): P & FieldControlProps {\n  const field = useContext(FieldContext);\n  const setControlId = field?.setControlId;\n  const ownId = props.id;\n  useEffect(() => {\n    if (!setControlId || ownId === undefined) return;\n    setControlId(ownId);\n    return () => setControlId(undefined);\n  }, [setControlId, ownId]);\n  if (!field) return props;\n  return {\n    ...props,\n    id: props.id ?? field.controlId,\n    \"aria-describedby\": joinIds(props[\"aria-describedby\"], field.describedBy),\n    \"aria-invalid\": props[\"aria-invalid\"] ?? (field.invalid || undefined),\n    required: props.required ?? (field.required || undefined),\n    disabled: props.disabled ?? (field.disabled || undefined),\n    color: props.color ?? (field.invalid ? \"error\" : undefined),\n    skeleton: props.skeleton ?? (field.skeleton || undefined),\n  };\n}\n\n/**\n * Grup kontrolleri (RadioGroup, Segmented, OtpInput, Transfer) için: kontrolün\n * kendi `skeleton`u verilmediyse Field'ınki geçerli.\n */\nexport function useFieldSkeleton(own: boolean | undefined): boolean {\n  const field = useContext(FieldContext);\n  return own ?? field?.skeleton ?? false;\n}\n\nexport interface FieldGroupProps {\n  \"aria-labelledby\"?: string;\n  \"aria-label\"?: string;\n  \"aria-describedby\"?: string;\n  disabled?: boolean;\n}\n\n/**\n * Grup kontrolleri için: Field'ın etiketi grubun adı olur (`aria-labelledby`)\n * — grup tek bir odaklanabilir alan olmadığından `<label htmlFor>` bağlanamaz.\n * Kontrol kendi `aria-label`/`aria-labelledby`sini verdiyse o kazanır.\n */\nexport function useFieldGroup<P extends FieldGroupProps>(props: P, enabled = true): P & FieldGroupProps & { \"aria-invalid\"?: true; \"aria-required\"?: true } {\n  const field = useContext(FieldContext);\n  const markGroup = enabled ? field?.markGroup : undefined;\n  useEffect(() => markGroup?.(), [markGroup]);\n  if (!field || !enabled) return props;\n  const named = props[\"aria-labelledby\"] !== undefined || props[\"aria-label\"] !== undefined;\n  return {\n    ...props,\n    \"aria-labelledby\": named ? props[\"aria-labelledby\"] : field.labelId,\n    \"aria-describedby\": joinIds(props[\"aria-describedby\"], field.describedBy),\n    disabled: props.disabled ?? (field.disabled || undefined),\n    \"aria-invalid\": field.invalid ? true : undefined,\n    \"aria-required\": field.required ? true : undefined,\n  };\n}\n"],"mappings":";AAGA,SAAS,eAAe,YAAY,iBAAiB;AAyB9C,IAAM,eAAe,cAAwC,IAAI;AAExE,IAAM,UAAU,IAAI,QAAmC,IAAI,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAkBjF,SAAS,gBAA6C,OAAiC;AAC5F,QAAM,QAAQ,WAAW,YAAY;AACrC,QAAM,eAAe,OAAO;AAC5B,QAAM,QAAQ,MAAM;AACpB,YAAU,MAAM;AACd,QAAI,CAAC,gBAAgB,UAAU,OAAW;AAC1C,iBAAa,KAAK;AAClB,WAAO,MAAM,aAAa,MAAS;AAAA,EACrC,GAAG,CAAC,cAAc,KAAK,CAAC;AACxB,MAAI,CAAC,MAAO,QAAO;AACnB,SAAO;AAAA,IACL,GAAG;AAAA,IACH,IAAI,MAAM,MAAM,MAAM;AAAA,IACtB,oBAAoB,QAAQ,MAAM,kBAAkB,GAAG,MAAM,WAAW;AAAA,IACxE,gBAAgB,MAAM,cAAc,MAAM,MAAM,WAAW;AAAA,IAC3D,UAAU,MAAM,aAAa,MAAM,YAAY;AAAA,IAC/C,UAAU,MAAM,aAAa,MAAM,YAAY;AAAA,IAC/C,OAAO,MAAM,UAAU,MAAM,UAAU,UAAU;AAAA,IACjD,UAAU,MAAM,aAAa,MAAM,YAAY;AAAA,EACjD;AACF;AAMO,SAAS,iBAAiB,KAAmC;AAClE,QAAM,QAAQ,WAAW,YAAY;AACrC,SAAO,OAAO,OAAO,YAAY;AACnC;AAcO,SAAS,cAAyC,OAAU,UAAU,MAA+E;AAC1J,QAAM,QAAQ,WAAW,YAAY;AACrC,QAAM,YAAY,UAAU,OAAO,YAAY;AAC/C,YAAU,MAAM,YAAY,GAAG,CAAC,SAAS,CAAC;AAC1C,MAAI,CAAC,SAAS,CAAC,QAAS,QAAO;AAC/B,QAAM,QAAQ,MAAM,iBAAiB,MAAM,UAAa,MAAM,YAAY,MAAM;AAChF,SAAO;AAAA,IACL,GAAG;AAAA,IACH,mBAAmB,QAAQ,MAAM,iBAAiB,IAAI,MAAM;AAAA,IAC5D,oBAAoB,QAAQ,MAAM,kBAAkB,GAAG,MAAM,WAAW;AAAA,IACxE,UAAU,MAAM,aAAa,MAAM,YAAY;AAAA,IAC/C,gBAAgB,MAAM,UAAU,OAAO;AAAA,IACvC,iBAAiB,MAAM,WAAW,OAAO;AAAA,EAC3C;AACF;","names":[]}

package/dist/chunk-LBXIPDAB.js

@@ -0,0 +1,50 @@
+import {
+  Button
+} from "./chunk-2IEXY3OZ.js";
+import {
+  skeletonBoxProps
+} from "./chunk-54HHEXXD.js";
+
+// src/empty/Empty.tsx
+import { InboxIcon } from "lucide-react";
+import { cn } from "@mari-ui/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SIZE = {
+  sm: { root: "py-8 px-4 gap-1.5", icon: "size-10 [&_svg]:size-5", title: "text-sm", description: "text-xs", actionGap: "mt-3" },
+  md: { root: "py-16 px-4 gap-2", icon: "size-14 [&_svg]:size-7", title: "text-lg", description: "text-sm", actionGap: "mt-4" }
+};
+function Empty({
+  title,
+  description,
+  buttonText,
+  onClick,
+  href,
+  icon,
+  buttonIcon,
+  actions,
+  size = "md",
+  titleAs: TitleTag = "p",
+  className,
+  skeleton = false
+}) {
+  const s = SIZE[size];
+  if (skeleton) {
+    return /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: cn("flex flex-col items-center justify-center text-center", s.root, className), children: [
+      /* @__PURE__ */ jsx("span", { ...skeletonBoxProps(cn("rounded-full", s.icon)) }),
+      /* @__PURE__ */ jsx("span", { ...skeletonBoxProps(cn("mt-1 h-4 w-40 rounded-sm")) }),
+      description && /* @__PURE__ */ jsx("span", { ...skeletonBoxProps("h-3 w-56 max-w-full rounded-sm") })
+    ] });
+  }
+  const hasButton = Boolean(buttonText && (onClick || href));
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center text-center", s.root, className), children: [
+    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: cn("mb-1 flex items-center justify-center rounded-full bg-mari-surface-alt text-mari-muted", s.icon), children: icon ?? /* @__PURE__ */ jsx(InboxIcon, {}) }),
+    /* @__PURE__ */ jsx(TitleTag, { className: cn("font-semibold text-balance text-mari-foreground", s.title), children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: cn("max-w-md text-pretty text-mari-muted", s.description), children: description }),
+    actions ? /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-2", s.actionGap), children: actions }) : hasButton && /* @__PURE__ */ jsx("div", { className: s.actionGap, children: /* @__PURE__ */ jsx(Button, { color: "primary", size: size === "sm" ? "sm" : "md", onClick, href, icon: buttonIcon, children: buttonText }) })
+  ] });
+}
+
+export {
+  Empty
+};
+//# sourceMappingURL=chunk-LBXIPDAB.js.map

package/dist/chunk-LBXIPDAB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/empty/Empty.tsx"],"sourcesContent":["import React from \"react\";\nimport { InboxIcon } from \"lucide-react\";\nimport { cn } from \"@mari-ui/core\";\nimport { Button } from \"../button\";\nimport { skeletonBoxProps, type SkeletonableProps } from \"../lib/skeleton\";\n\nexport interface EmptyProps extends SkeletonableProps {\n  title: string;\n  description?: React.ReactNode;\n  /** Tek birincil eylem. `onClick` (ya da `href`) olmadan buton çizilmez. */\n  buttonText?: string;\n  onClick?: () => void;\n  /** Butonu bağlantı olarak çizer (başka sayfaya götüren eylem). */\n  href?: string;\n  icon?: React.ReactNode;\n  buttonIcon?: React.ReactNode;\n  /** Birden çok ya da özel eylem (ör. birincil + ikincil buton). Verilirse `buttonText` yok sayılır. */\n  actions?: React.ReactNode;\n  /** `md` (varsayılan): sayfa/bölüm. `sm`: kart, tablo, liste içi — daha az boşluk, küçük ikon. */\n  size?: \"sm\" | \"md\";\n  /**\n   * Başlığın etiketi. Varsayılan `p`: boş durum bir belge BÖLÜMÜ değildir —\n   * eskiden sabit `<h2>`'ydi, kart/tablo içinde başlık hiyerarşisini bozuyordu.\n   * Sayfanın ana içeriği boşsa uygun bir başlık seviyesi verin.\n   */\n  titleAs?: \"p\" | \"h2\" | \"h3\" | \"h4\";\n  className?: string;\n}\n\nconst SIZE = {\n  sm: { root: \"py-8 px-4 gap-1.5\", icon: \"size-10 [&_svg]:size-5\", title: \"text-sm\", description: \"text-xs\", actionGap: \"mt-3\" },\n  md: { root: \"py-16 px-4 gap-2\", icon: \"size-14 [&_svg]:size-7\", title: \"text-lg\", description: \"text-sm\", actionGap: \"mt-4\" },\n} as const;\n\n/**\n * Faz 15: varsayılan ikon `FileWarning` idi — boş durum bir HATA değil\n * (`InboxIcon`). İkon yumuşak bir daire içinde; başlık `h2` yerine `p`\n * (`titleAs`); `onClick` olmadan `buttonText` verilince işe yaramaz, devre dışı\n * bir buton çiziliyordu — artık buton yalnızca bir eylem varsa çıkar.\n */\n// Hook yok, browser API yok — saf sunum, \"use client\" gerekmiyor.\nexport function Empty({\n  title,\n  description,\n  buttonText,\n  onClick,\n  href,\n  icon,\n  buttonIcon,\n  actions,\n  size = \"md\",\n  titleAs: TitleTag = \"p\",\n  className,\n  skeleton = false,\n}: Readonly<EmptyProps>) {\n  const s = SIZE[size];\n\n  if (skeleton) {\n    return (\n      <div aria-hidden className={cn(\"flex flex-col items-center justify-center text-center\", s.root, className)}>\n        <span {...skeletonBoxProps(cn(\"rounded-full\", s.icon))} />\n        <span {...skeletonBoxProps(cn(\"mt-1 h-4 w-40 rounded-sm\"))} />\n        {description && <span {...skeletonBoxProps(\"h-3 w-56 max-w-full rounded-sm\")} />}\n      </div>\n    );\n  }\n\n  const hasButton = Boolean(buttonText && (onClick || href));\n\n  return (\n    <div className={cn(\"flex flex-col items-center justify-center text-center\", s.root, className)}>\n      <div aria-hidden className={cn(\"mb-1 flex items-center justify-center rounded-full bg-mari-surface-alt text-mari-muted\", s.icon)}>\n        {icon ?? <InboxIcon />}\n      </div>\n      <TitleTag className={cn(\"font-semibold text-balance text-mari-foreground\", s.title)}>{title}</TitleTag>\n      {description && <p className={cn(\"max-w-md text-pretty text-mari-muted\", s.description)}>{description}</p>}\n      {actions ? (\n        <div className={cn(\"flex flex-wrap items-center justify-center gap-2\", s.actionGap)}>{actions}</div>\n      ) : (\n        hasButton && (\n          <div className={s.actionGap}>\n            <Button color=\"primary\" size={size === \"sm\" ? \"sm\" : \"md\"} onClick={onClick} href={href} icon={buttonIcon}>\n              {buttonText}\n            </Button>\n          </div>\n        )\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AACA,SAAS,iBAAiB;AAC1B,SAAS,UAAU;AAyDb,SACE,KADF;AA9BN,IAAM,OAAO;AAAA,EACX,IAAI,EAAE,MAAM,qBAAqB,MAAM,0BAA0B,OAAO,WAAW,aAAa,WAAW,WAAW,OAAO;AAAA,EAC7H,IAAI,EAAE,MAAM,oBAAoB,MAAM,0BAA0B,OAAO,WAAW,aAAa,WAAW,WAAW,OAAO;AAC9H;AASO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS,WAAW;AAAA,EACpB;AAAA,EACA,WAAW;AACb,GAAyB;AACvB,QAAM,IAAI,KAAK,IAAI;AAEnB,MAAI,UAAU;AACZ,WACE,qBAAC,SAAI,eAAW,MAAC,WAAW,GAAG,yDAAyD,EAAE,MAAM,SAAS,GACvG;AAAA,0BAAC,UAAM,GAAG,iBAAiB,GAAG,gBAAgB,EAAE,IAAI,CAAC,GAAG;AAAA,MACxD,oBAAC,UAAM,GAAG,iBAAiB,GAAG,0BAA0B,CAAC,GAAG;AAAA,MAC3D,eAAe,oBAAC,UAAM,GAAG,iBAAiB,gCAAgC,GAAG;AAAA,OAChF;AAAA,EAEJ;AAEA,QAAM,YAAY,QAAQ,eAAe,WAAW,KAAK;AAEzD,SACE,qBAAC,SAAI,WAAW,GAAG,yDAAyD,EAAE,MAAM,SAAS,GAC3F;AAAA,wBAAC,SAAI,eAAW,MAAC,WAAW,GAAG,0FAA0F,EAAE,IAAI,GAC5H,kBAAQ,oBAAC,aAAU,GACtB;AAAA,IACA,oBAAC,YAAS,WAAW,GAAG,mDAAmD,EAAE,KAAK,GAAI,iBAAM;AAAA,IAC3F,eAAe,oBAAC,OAAE,WAAW,GAAG,wCAAwC,EAAE,WAAW,GAAI,uBAAY;AAAA,IACrG,UACC,oBAAC,SAAI,WAAW,GAAG,oDAAoD,EAAE,SAAS,GAAI,mBAAQ,IAE9F,aACE,oBAAC,SAAI,WAAW,EAAE,WAChB,8BAAC,UAAO,OAAM,WAAU,MAAM,SAAS,OAAO,OAAO,MAAM,SAAkB,MAAY,MAAM,YAC5F,sBACH,GACF;AAAA,KAGN;AAEJ;","names":[]}