@mari-ui/components 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Aykut Yılmaz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,26 @@
-# Temporary Holding Version
+# @mari-ui/components
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+mari-ui'ın web component'leri: 70+ component (form, gezinme, veri gösterimi, grafikler, geri bildirim). Her biri ayrı bir alt yoldan (`@mari-ui/components/button`) içe aktarılır, RSC uyumludur ve `skeleton`, erişilebilirlik ve açık/koyu tema taşır.
+
+```bash
+pnpm add @mari-ui/components @mari-ui/core @mari-ui/tokens
+```
+
+```css
+/* Tailwind v4 kullanan proje: */
+@import "tailwindcss";
+@import "@mari-ui/components/tailwind.css";
+
+/* Tailwind kullanmayan proje (hazır CSS): */
+/* @import "@mari-ui/components/styles.css"; */
+```
+
+```tsx
+import { Button } from "@mari-ui/components/button";
+
+<Button color="primary">Kaydet</Button>;
+```
+
+`npx @mari-ui/cli init` projenize uygun CSS girişini söyler, tema dosyalarını ve AI ajan kurallarını kurar.
+
+Kurulum, tema ve component dokümanları: [mari-ui deposu](https://github.com/aykutyilmaz37/mari-ui#readme). Lisans: MIT.

package/dist/accordion.d.ts

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

package/dist/accordion.js

@@ -0,0 +1,245 @@
+"use client";
+
+import {
+  ContentSkeleton
+} from "./chunk-V7KDUUV6.js";
+import {
+  SkeletonBlock
+} from "./chunk-NPM7IDYV.js";
+import "./chunk-XUKVQO6M.js";
+import {
+  skeletonBoxProps
+} from "./chunk-54HHEXXD.js";
+
+// src/accordion/Accordion.tsx
+import { useEffect, useId, useRef, useState } from "react";
+import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
+import { cn, useControllableState } from "@mari-ui/core";
+
+// src/accordion/utils.ts
+function toKeys(value) {
+  if (value === void 0) return void 0;
+  return Array.isArray(value) ? value : [value];
+}
+function toggleKey(active, key, single) {
+  if (active.includes(key)) return active.filter((k) => k !== key);
+  return single ? [key] : [...active, key];
+}
+function getHeaderTarget(headers, current, key) {
+  if (headers.length === 0) return null;
+  const index = current ? headers.indexOf(current) : -1;
+  switch (key) {
+    case "ArrowDown":
+      return headers[(index + 1) % headers.length] ?? null;
+    case "ArrowUp":
+      return headers[index <= 0 ? headers.length - 1 : index - 1] ?? null;
+    case "Home":
+      return headers[0] ?? null;
+    case "End":
+      return headers[headers.length - 1] ?? null;
+    default:
+      return null;
+  }
+}
+
+// src/accordion/Accordion.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var EXIT_MS = 200;
+var HEADER_PAD = { sm: "px-3 py-2", md: "px-4 py-3", lg: "px-6 py-4 text-base" };
+var BODY_PAD = { sm: "px-3 py-2", md: "p-4", lg: "px-6 py-4" };
+var BODY_PAD_FLUSH = { sm: "px-3 pb-2", md: "px-4 pb-4", lg: "px-6 pb-4" };
+var ICON_BOX = { sm: "h-5", md: "h-5", lg: "h-6" };
+var ROOT = {
+  bordered: "overflow-hidden rounded-lg border border-mari-border bg-mari-surface-alt",
+  borderless: "overflow-hidden rounded-lg bg-mari-surface-alt",
+  ghost: "",
+  separated: "flex flex-col gap-2"
+};
+var ITEM = {
+  bordered: "border-b border-mari-border last:border-b-0",
+  borderless: "border-b border-mari-border last:border-b-0",
+  ghost: "",
+  separated: "overflow-hidden rounded-lg border border-mari-border bg-mari-surface"
+};
+function useRenderedContent(open, forceRender, destroyOnHidden) {
+  const [rendered, setRendered] = useState(open || forceRender);
+  useEffect(() => {
+    if (open) {
+      setRendered(true);
+      return;
+    }
+    if (!destroyOnHidden || forceRender) return;
+    const timer = setTimeout(() => setRendered(false), EXIT_MS);
+    return () => clearTimeout(timer);
+  }, [open, forceRender, destroyOnHidden]);
+  return open || rendered;
+}
+function ExpandIcon({ open, size, placement, disabled, skeleton, custom }) {
+  const Chevron = placement === "end" ? ChevronDownIcon : ChevronRightIcon;
+  let content;
+  if (skeleton) content = /* @__PURE__ */ jsx("span", { ...skeletonBoxProps("size-3.5 rounded-sm") });
+  else
+    content = custom?.(open) ?? /* @__PURE__ */ jsx(
+      Chevron,
+      {
+        size: size === "lg" ? 18 : 16,
+        className: cn("transition-transform duration-200 motion-reduce:transition-none", open && (placement === "end" ? "rotate-180" : "rotate-90"))
+      }
+    );
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("flex shrink-0 items-center", ICON_BOX[size], disabled ? "text-mari-muted/60" : "text-mari-muted", placement === "end" && "order-last"), children: content });
+}
+function HeaderRow({ item, open, onToggle, variant, size, iconPlacement, expandIcon, skeleton, Heading, headerId, panelId }) {
+  const disabled = item.disabled || skeleton;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": skeleton || void 0,
+      className: cn(
+        "relative flex items-start gap-3",
+        HEADER_PAD[size],
+        !disabled && "cursor-pointer",
+        !disabled && variant !== "bordered" && "hover:bg-mari-surface-alt/60",
+        "has-[[data-accordion-trigger]:focus-visible]:outline-2 has-[[data-accordion-trigger]:focus-visible]:-outline-offset-2 has-[[data-accordion-trigger]:focus-visible]:outline-mari-ring",
+        variant === "ghost" && "rounded-md"
+      ),
+      children: [
+        item.showArrow !== false && /* @__PURE__ */ jsx(ExpandIcon, { open, size, placement: iconPlacement, disabled: item.disabled, skeleton, custom: expandIcon }),
+        /* @__PURE__ */ jsx(Heading, { className: "m-0 min-w-0 flex-1 text-inherit font-medium", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            id: headerId,
+            "data-accordion-trigger": "",
+            "aria-expanded": open,
+            "aria-controls": panelId,
+            disabled,
+            onClick: onToggle,
+            className: cn(
+              "w-full cursor-[inherit] text-left outline-none after:absolute after:inset-0",
+              size === "lg" ? "leading-6" : "leading-5",
+              item.disabled ? "text-mari-muted" : "text-mari-foreground",
+              disabled && "cursor-not-allowed"
+            ),
+            children: skeleton ? /* @__PURE__ */ jsx("span", { ...skeletonBoxProps("rounded-sm"), children: item.label }) : item.label
+          }
+        ) }),
+        item.extra && /* @__PURE__ */ jsx("div", { className: cn("relative z-10 flex shrink-0 items-center", ICON_BOX[size], skeleton && "invisible"), children: item.extra })
+      ]
+    }
+  );
+}
+function Panel({ item, open, onToggle, variant, size, iconPlacement, expandIcon, headingLevel, destroyOnHidden, region, skeleton }) {
+  const id = useId();
+  const headerId = `${id}-header`;
+  const panelId = `${id}-panel`;
+  const rendered = useRenderedContent(open, Boolean(item.forceRender), destroyOnHidden);
+  const Heading = `h${headingLevel}`;
+  const tinted = variant === "bordered";
+  return /* @__PURE__ */ jsxs("div", { className: ITEM[variant], children: [
+    /* @__PURE__ */ jsx(
+      HeaderRow,
+      {
+        item,
+        open,
+        onToggle,
+        variant,
+        size,
+        iconPlacement,
+        expandIcon,
+        Heading,
+        headerId,
+        panelId,
+        skeleton
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
+          open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+        ),
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: panelId,
+            role: region ? "region" : void 0,
+            "aria-labelledby": region ? headerId : void 0,
+            inert: !open || void 0,
+            className: "min-h-0 overflow-hidden",
+            children: rendered && /* @__PURE__ */ jsx("div", { className: cn(tinted ? cn("border-t border-mari-border bg-mari-surface", BODY_PAD[size]) : BODY_PAD_FLUSH[size], "text-mari-foreground"), children: /* @__PURE__ */ jsx(ContentSkeleton, { on: skeleton, fallback: /* @__PURE__ */ jsx(SkeletonBlock, { active: true, width: "80%", height: "0.75rem", radius: "sm" }), children: item.children }) })
+          }
+        )
+      }
+    )
+  ] });
+}
+function Accordion({
+  items,
+  activeKey,
+  defaultActiveKey,
+  onChange,
+  single = false,
+  variant = "bordered",
+  size = "md",
+  iconPlacement = "start",
+  expandIcon,
+  headingLevel = 3,
+  destroyOnHidden = false,
+  className,
+  skeleton = false
+}) {
+  const [active, setActive] = useControllableState({
+    value: toKeys(activeKey),
+    defaultValue: toKeys(defaultActiveKey) ?? [],
+    onChange
+  });
+  const rootRef = useRef(null);
+  const onKeyDown = (event) => {
+    const target = event.target;
+    if (!target.matches("[data-accordion-trigger]")) return;
+    const headers = Array.from(rootRef.current?.querySelectorAll("[data-accordion-trigger]:not(:disabled)") ?? []).filter(
+      // İç içe Accordion'un başlıkları bu listeye girmez.
+      (el) => el.closest("[data-accordion-root]") === rootRef.current
+    );
+    const next = getHeaderTarget(headers, target, event.key);
+    if (!next) return;
+    event.preventDefault();
+    next.focus();
+  };
+  return (
+    // Tuşlar başlık düğmelerinden kabarcıklanır; kök etkileşimli değil.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: rootRef,
+        "data-accordion-root": "",
+        "aria-busy": skeleton || void 0,
+        onKeyDown,
+        className: cn("text-sm text-mari-foreground", ROOT[variant], className),
+        children: items.map((item) => /* @__PURE__ */ jsx(
+          Panel,
+          {
+            item,
+            open: active.includes(item.key),
+            onToggle: () => setActive(toggleKey(active, item.key, single)),
+            variant,
+            size,
+            iconPlacement,
+            expandIcon,
+            headingLevel,
+            destroyOnHidden,
+            region: items.length <= 6,
+            skeleton
+          },
+          item.key
+        ))
+      }
+    )
+  );
+}
+export {
+  Accordion
+};
+//# sourceMappingURL=accordion.js.map

package/dist/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/accordion/Accordion.tsx","../src/accordion/utils.ts"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useId, useRef, useState } from \"react\";\nimport { ChevronDownIcon, ChevronRightIcon } from \"lucide-react\";\nimport { cn, useControllableState, type Size } from \"@mari-ui/core\";\nimport { ContentSkeleton } from \"../lib/ContentSkeleton\";\nimport { skeletonBoxProps } from \"../lib/skeleton\";\nimport { SkeletonBlock } from \"../skeleton\";\nimport type { AccordionItem, AccordionProps, AccordionVariant } from \"./types\";\nimport { getHeaderTarget, toggleKey, toKeys } from \"./utils\";\n\nexport type { AccordionProps, AccordionItem, AccordionVariant };\n\nconst EXIT_MS = 200;\n\n/** ant.design: sm 8·12, md 12·16, lg 16·24px; lg'de başlık 16px. */\nconst HEADER_PAD: Record<Size, string> = { sm: \"px-3 py-2\", md: \"px-4 py-3\", lg: \"px-6 py-4 text-base\" };\nconst BODY_PAD: Record<Size, string> = { sm: \"px-3 py-2\", md: \"p-4\", lg: \"px-6 py-4\" };\n/** Tonsuz varyantlarda gövde başlığın devamı — üst dolgu küçülür. */\nconst BODY_PAD_FLUSH: Record<Size, string> = { sm: \"px-3 pb-2\", md: \"px-4 pb-4\", lg: \"px-6 pb-4\" };\n/** İkon kutusu = başlığın satır yüksekliği → ok ilk satırla hizalı kalır. */\nconst ICON_BOX: Record<Size, string> = { sm: \"h-5\", md: \"h-5\", lg: \"h-6\" };\n\nconst ROOT: Record<AccordionVariant, string> = {\n  bordered: \"overflow-hidden rounded-lg border border-mari-border bg-mari-surface-alt\",\n  borderless: \"overflow-hidden rounded-lg bg-mari-surface-alt\",\n  ghost: \"\",\n  separated: \"flex flex-col gap-2\",\n};\n\nconst ITEM: Record<AccordionVariant, string> = {\n  bordered: \"border-b border-mari-border last:border-b-0\",\n  borderless: \"border-b border-mari-border last:border-b-0\",\n  ghost: \"\",\n  separated: \"overflow-hidden rounded-lg border border-mari-border bg-mari-surface\",\n};\n\ninterface PanelProps {\n  item: AccordionItem;\n  open: boolean;\n  onToggle: () => void;\n  variant: AccordionVariant;\n  size: Size;\n  iconPlacement: \"start\" | \"end\";\n  expandIcon?: (open: boolean) => React.ReactNode;\n  headingLevel: 2 | 3 | 4 | 5 | 6;\n  destroyOnHidden: boolean;\n  region: boolean;\n  skeleton: boolean;\n}\n\n/** İçerik ilk açılışta mount edilir; `destroyOnHidden`da kapanış animasyonundan sonra kaldırılır. */\nfunction useRenderedContent(open: boolean, forceRender: boolean, destroyOnHidden: boolean): boolean {\n  const [rendered, setRendered] = useState(open || forceRender);\n  useEffect(() => {\n    if (open) {\n      setRendered(true);\n      return;\n    }\n    if (!destroyOnHidden || forceRender) return;\n    const timer = setTimeout(() => setRendered(false), EXIT_MS);\n    return () => clearTimeout(timer);\n  }, [open, forceRender, destroyOnHidden]);\n  return open || rendered;\n}\n\nfunction ExpandIcon({ open, size, placement, disabled, skeleton, custom }: Readonly<{ open: boolean; size: Size; placement: \"start\" | \"end\"; disabled?: boolean; skeleton: boolean; custom?: (open: boolean) => React.ReactNode }>) {\n  const Chevron = placement === \"end\" ? ChevronDownIcon : ChevronRightIcon;\n  let content: React.ReactNode;\n  if (skeleton) content = <span {...skeletonBoxProps(\"size-3.5 rounded-sm\")} />;\n  else\n    content = custom?.(open) ?? (\n      <Chevron\n        size={size === \"lg\" ? 18 : 16}\n        className={cn(\"transition-transform duration-200 motion-reduce:transition-none\", open && (placement === \"end\" ? \"rotate-180\" : \"rotate-90\"))}\n      />\n    );\n  return (\n    <span aria-hidden className={cn(\"flex shrink-0 items-center\", ICON_BOX[size], disabled ? \"text-mari-muted/60\" : \"text-mari-muted\", placement === \"end\" && \"order-last\")}>\n      {content}\n    </span>\n  );\n}\n\ntype HeaderRowProps = Pick<PanelProps, \"item\" | \"open\" | \"onToggle\" | \"variant\" | \"size\" | \"iconPlacement\" | \"expandIcon\" | \"skeleton\"> & {\n  Heading: \"h3\";\n  headerId: string;\n  panelId: string;\n};\n\n/**\n * Başlık satırı: düğme `after:inset-0` ile tüm satırı tıklanabilir yapar (ant:\n * başlığın her yeri açar), `extra` üstte (`z-10`) ve düğmenin DIŞINDA — içindeki\n * bağlantı/düğme iç içe etkileşimli öğe olmaz. İskelette satır erişilebilirlik\n * ağacından çıkar (etiket yer tutucuya döndüğü için düğme adsız kalırdı).\n */\nfunction HeaderRow({ item, open, onToggle, variant, size, iconPlacement, expandIcon, skeleton, Heading, headerId, panelId }: HeaderRowProps) {\n  const disabled = item.disabled || skeleton;\n  return (\n    <div\n      aria-hidden={skeleton || undefined}\n      className={cn(\n        \"relative flex items-start gap-3\",\n        HEADER_PAD[size],\n        !disabled && \"cursor-pointer\",\n        !disabled && variant !== \"bordered\" && \"hover:bg-mari-surface-alt/60\",\n        \"has-[[data-accordion-trigger]:focus-visible]:outline-2 has-[[data-accordion-trigger]:focus-visible]:-outline-offset-2 has-[[data-accordion-trigger]:focus-visible]:outline-mari-ring\",\n        variant === \"ghost\" && \"rounded-md\"\n      )}\n    >\n      {item.showArrow !== false && <ExpandIcon open={open} size={size} placement={iconPlacement} disabled={item.disabled} skeleton={skeleton} custom={expandIcon} />}\n      <Heading className=\"m-0 min-w-0 flex-1 text-inherit font-medium\">\n        <button\n          type=\"button\"\n          id={headerId}\n          data-accordion-trigger=\"\"\n          aria-expanded={open}\n          aria-controls={panelId}\n          disabled={disabled}\n          onClick={onToggle}\n          className={cn(\n            \"w-full cursor-[inherit] text-left outline-none after:absolute after:inset-0\",\n            size === \"lg\" ? \"leading-6\" : \"leading-5\",\n            item.disabled ? \"text-mari-muted\" : \"text-mari-foreground\",\n            disabled && \"cursor-not-allowed\"\n          )}\n        >\n          {skeleton ? <span {...skeletonBoxProps(\"rounded-sm\")}>{item.label}</span> : item.label}\n        </button>\n      </Heading>\n      {item.extra && <div className={cn(\"relative z-10 flex shrink-0 items-center\", ICON_BOX[size], skeleton && \"invisible\")}>{item.extra}</div>}\n    </div>\n  );\n}\n\nfunction Panel({ item, open, onToggle, variant, size, iconPlacement, expandIcon, headingLevel, destroyOnHidden, region, skeleton }: Readonly<PanelProps>) {\n  const id = useId();\n  const headerId = `${id}-header`;\n  const panelId = `${id}-panel`;\n  const rendered = useRenderedContent(open, Boolean(item.forceRender), destroyOnHidden);\n  const Heading = `h${headingLevel}` as \"h3\";\n  const tinted = variant === \"bordered\";\n\n  return (\n    <div className={ITEM[variant]}>\n      <HeaderRow\n        item={item}\n        open={open}\n        onToggle={onToggle}\n        variant={variant}\n        size={size}\n        iconPlacement={iconPlacement}\n        expandIcon={expandIcon}\n        Heading={Heading}\n        headerId={headerId}\n        panelId={panelId}\n        skeleton={skeleton}\n      />\n      <div\n        className={cn(\n          \"grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none\",\n          open ? \"grid-rows-[1fr]\" : \"grid-rows-[0fr]\"\n        )}\n      >\n        <div\n          id={panelId}\n          role={region ? \"region\" : undefined}\n          aria-labelledby={region ? headerId : undefined}\n          // Kapalıyken odaklanamaz ve erişilebilirlik ağacında yok (görsel olarak da 0 yükseklik).\n          inert={!open || undefined}\n          className=\"min-h-0 overflow-hidden\"\n        >\n          {rendered && (\n            <div className={cn(tinted ? cn(\"border-t border-mari-border bg-mari-surface\", BODY_PAD[size]) : BODY_PAD_FLUSH[size], \"text-mari-foreground\")}>\n              <ContentSkeleton on={skeleton} fallback={<SkeletonBlock active width=\"80%\" height=\"0.75rem\" radius=\"sm\" />}>\n                {item.children}\n              </ContentSkeleton>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n\n/**\n * Faz 16.3 — yapı ant.design Collapse'tan (tüm başlık açar, ok başta ya da\n * sonda, `extra`, tekli mod, dört görünüm, üç boyut, ilk açılışta mount +\n * `destroyOnHidden`), görünüm kendi token'larımızdan. Aç/kapa yüksekliği\n * `grid-template-rows` 0fr↔1fr ile canlandırılır (sabit `max-height` yok).\n *\n * Erişilebilirlik (WAI-ARIA APG Accordion): her başlık `<hN><button\n * aria-expanded aria-controls>`; gövde `role=\"region\"` + `aria-labelledby`\n * (6'dan fazla bölümde landmark kalabalığı olmasın diye region verilmez).\n * Kapalı gövde `inert`. ↑/↓ başlıklar arası (döngülü), Home/End ilk/son.\n */\nexport function Accordion({\n  items,\n  activeKey,\n  defaultActiveKey,\n  onChange,\n  single = false,\n  variant = \"bordered\",\n  size = \"md\",\n  iconPlacement = \"start\",\n  expandIcon,\n  headingLevel = 3,\n  destroyOnHidden = false,\n  className,\n  skeleton = false,\n}: Readonly<AccordionProps>) {\n  const [active, setActive] = useControllableState<string[]>({\n    value: toKeys(activeKey),\n    defaultValue: toKeys(defaultActiveKey) ?? [],\n    onChange,\n  });\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const onKeyDown = (event: React.KeyboardEvent) => {\n    const target = event.target as HTMLElement;\n    if (!target.matches(\"[data-accordion-trigger]\")) return;\n    const headers = Array.from(rootRef.current?.querySelectorAll<HTMLElement>(\"[data-accordion-trigger]:not(:disabled)\") ?? []).filter(\n      // İç içe Accordion'un başlıkları bu listeye girmez.\n      (el) => el.closest(\"[data-accordion-root]\") === rootRef.current\n    );\n    const next = getHeaderTarget(headers, target, event.key);\n    if (!next) return;\n    event.preventDefault();\n    next.focus();\n  };\n\n  return (\n    // Tuşlar başlık düğmelerinden kabarcıklanır; kök etkileşimli değil.\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div\n      ref={rootRef}\n      data-accordion-root=\"\"\n      aria-busy={skeleton || undefined}\n      onKeyDown={onKeyDown}\n      className={cn(\"text-sm text-mari-foreground\", ROOT[variant], className)}\n    >\n      {items.map((item) => (\n        <Panel\n          key={item.key}\n          item={item}\n          open={active.includes(item.key)}\n          onToggle={() => setActive(toggleKey(active, item.key, single))}\n          variant={variant}\n          size={size}\n          iconPlacement={iconPlacement}\n          expandIcon={expandIcon}\n          headingLevel={headingLevel}\n          destroyOnHidden={destroyOnHidden}\n          region={items.length <= 6}\n          skeleton={skeleton}\n        />\n      ))}\n    </div>\n  );\n}\n","/** `activeKey` tek anahtar ya da dizi olabilir → her zaman dizi. */\nexport function toKeys(value: string | string[] | undefined): string[] | undefined {\n  if (value === undefined) return undefined;\n  return Array.isArray(value) ? value : [value];\n}\n\n/** Bir bölümü aç/kapat. Tekli modda açılan bölüm diğerlerini kapatır. */\nexport function toggleKey(active: string[], key: string, single: boolean): string[] {\n  if (active.includes(key)) return active.filter((k) => k !== key);\n  return single ? [key] : [...active, key];\n}\n\n/**\n * APG accordion klavyesi: başlıklar arasında ↑/↓ (döngülü), Home/End.\n * Devre dışı başlıklar listeye verilmez. Diğer tuşlarda `null`.\n */\nexport function getHeaderTarget(headers: HTMLElement[], current: Element | null, key: string): HTMLElement | null {\n  if (headers.length === 0) return null;\n  const index = current ? headers.indexOf(current as HTMLElement) : -1;\n  switch (key) {\n    case \"ArrowDown\":\n      return headers[(index + 1) % headers.length] ?? null;\n    case \"ArrowUp\":\n      return headers[index <= 0 ? headers.length - 1 : index - 1] ?? null;\n    case \"Home\":\n      return headers[0] ?? null;\n    case \"End\":\n      return headers[headers.length - 1] ?? null;\n    default:\n      return null;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/alert.d.ts

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

package/dist/alert.js

@@ -0,0 +1,114 @@
+"use client";
+
+import {
+  ContentSkeleton
+} from "./chunk-V7KDUUV6.js";
+import {
+  SkeletonBlock
+} from "./chunk-NPM7IDYV.js";
+import "./chunk-XUKVQO6M.js";
+import {
+  bgSubtleClass,
+  borderColorClass,
+  textClass
+} from "./chunk-IP2J3BWY.js";
+import "./chunk-54HHEXXD.js";
+
+// src/alert/Alert.tsx
+import { useState } from "react";
+import { CircleAlertIcon, CircleCheckIcon, CircleXIcon, InfoIcon, SparklesIcon, XIcon } from "lucide-react";
+import { cn } from "@mari-ui/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EXIT_MS = 200;
+var ICON = {
+  success: CircleCheckIcon,
+  info: InfoIcon,
+  warning: CircleAlertIcon,
+  error: CircleXIcon,
+  primary: InfoIcon,
+  accent: SparklesIcon,
+  neutral: InfoIcon
+};
+var PLACEHOLDER = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 py-0.5", children: [
+  /* @__PURE__ */ jsx(SkeletonBlock, { active: true, width: "40%", height: "0.875rem", radius: "sm" }),
+  /* @__PURE__ */ jsx(SkeletonBlock, { active: true, width: "75%", height: "0.75rem", radius: "sm" })
+] });
+function resolveRole(role, color) {
+  if (role === "none") return void 0;
+  if (role) return role;
+  return color === "error" || color === "warning" ? "alert" : "status";
+}
+function renderIcon(icon, color) {
+  if (icon === false) return null;
+  if (icon !== true && icon !== void 0) return icon;
+  const Icon = ICON[color];
+  return /* @__PURE__ */ jsx(Icon, { size: 18, "aria-hidden": true });
+}
+function Alert({
+  title,
+  description,
+  color = "info",
+  icon = true,
+  action,
+  closable = false,
+  onClose,
+  closeLabel = "Uyar\u0131y\u0131 kapat",
+  banner = false,
+  role,
+  className,
+  skeleton = false
+}) {
+  const [closing, setClosing] = useState(false);
+  const [closed, setClosed] = useState(false);
+  if (closed) return null;
+  const close = () => {
+    setClosing(true);
+    onClose?.();
+    setTimeout(() => setClosed(true), EXIT_MS);
+  };
+  const iconNode = renderIcon(icon, color);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: skeleton ? void 0 : resolveRole(role, color),
+      "aria-busy": skeleton || void 0,
+      className: cn(
+        "flex items-start gap-3 text-sm text-mari-foreground transition-opacity duration-200 motion-reduce:transition-none",
+        bgSubtleClass[color],
+        banner ? "border-b px-4 py-2.5" : "rounded-lg border p-3.5",
+        borderColorClass[color],
+        closing && "opacity-0",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(ContentSkeleton, { on: skeleton, fallback: PLACEHOLDER, className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-start gap-x-3 gap-y-2", children: [
+          iconNode && /* @__PURE__ */ jsx("span", { className: cn("flex shrink-0 items-center pt-px", textClass[color]), children: iconNode }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 basis-48", children: [
+            title && /* @__PURE__ */ jsx("p", { className: "font-semibold leading-5", children: title }),
+            description && /* @__PURE__ */ jsx("div", { className: cn("leading-5", title && "mt-0.5 text-mari-muted"), children: description })
+          ] }),
+          action && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: action })
+        ] }) }),
+        closable && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: close,
+            "aria-label": closeLabel,
+            className: cn(
+              "relative -m-1 inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-mari-muted transition-colors",
+              "hover:bg-mari-foreground/5 hover:text-mari-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring",
+              // 28px → 44px (her yönde 8px).
+              "pointer-coarse:before:absolute pointer-coarse:before:-inset-2"
+            ),
+            children: /* @__PURE__ */ jsx(XIcon, { size: 16, "aria-hidden": true })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Alert
+};
+//# sourceMappingURL=alert.js.map

package/dist/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/alert/Alert.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState } from \"react\";\nimport { CircleAlertIcon, CircleCheckIcon, CircleXIcon, InfoIcon, SparklesIcon, XIcon } from \"lucide-react\";\nimport { cn, type ColorRole } from \"@mari-ui/core\";\nimport { bgSubtleClass, borderColorClass, textClass } from \"../lib/colorClasses\";\nimport { ContentSkeleton } from \"../lib/ContentSkeleton\";\nimport { SkeletonBlock } from \"../skeleton\";\nimport type { AlertProps } from \"./types\";\n\nexport type { AlertProps };\n\nconst EXIT_MS = 200;\n\nconst ICON: Record<ColorRole, React.ComponentType<{ size?: number; className?: string; \"aria-hidden\"?: boolean }>> = {\n  success: CircleCheckIcon,\n  info: InfoIcon,\n  warning: CircleAlertIcon,\n  error: CircleXIcon,\n  primary: InfoIcon,\n  accent: SparklesIcon,\n  neutral: InfoIcon,\n};\n\nconst PLACEHOLDER = (\n  <div className=\"flex flex-col gap-2 py-0.5\">\n    <SkeletonBlock active width=\"40%\" height=\"0.875rem\" radius=\"sm\" />\n    <SkeletonBlock active width=\"75%\" height=\"0.75rem\" radius=\"sm\" />\n  </div>\n);\n\nfunction resolveRole(role: AlertProps[\"role\"], color: ColorRole): \"alert\" | \"status\" | undefined {\n  if (role === \"none\") return undefined;\n  if (role) return role;\n  return color === \"error\" || color === \"warning\" ? \"alert\" : \"status\";\n}\n\nfunction renderIcon(icon: AlertProps[\"icon\"], color: ColorRole): React.ReactNode {\n  if (icon === false) return null;\n  if (icon !== true && icon !== undefined) return icon;\n  const Icon = ICON[color];\n  return <Icon size={18} aria-hidden />;\n}\n\n/**\n * Faz 16.2 — yapı ant.design Alert'ten, görünüm kendi token'larımızdan\n * (tonlu zemin + rol renginde ince kenarlık ve ikon; metin gövde renginde —\n * renkli uzun metin okunmaz). Eylem sağda, dar ekranda metnin altına iner.\n *\n * Erişilebilirlik: `error`/`warning` `role=\"alert\"` (hemen duyurulur), diğerleri\n * `role=\"status\"`. İkon görsel — anlam başlık/metinde. Kapat düğmesi\n * adlandırılmış, 44px dokunma hedefi; kapanınca kısa bir solma ile kalkar.\n */\nexport function Alert({\n  title,\n  description,\n  color = \"info\",\n  icon = true,\n  action,\n  closable = false,\n  onClose,\n  closeLabel = \"Uyarıyı kapat\",\n  banner = false,\n  role,\n  className,\n  skeleton = false,\n}: Readonly<AlertProps>) {\n  const [closing, setClosing] = useState(false);\n  const [closed, setClosed] = useState(false);\n  if (closed) return null;\n\n  const close = () => {\n    setClosing(true);\n    onClose?.();\n    setTimeout(() => setClosed(true), EXIT_MS);\n  };\n\n  const iconNode = renderIcon(icon, color);\n\n  return (\n    <div\n      role={skeleton ? undefined : resolveRole(role, color)}\n      aria-busy={skeleton || undefined}\n      className={cn(\n        \"flex items-start gap-3 text-sm text-mari-foreground transition-opacity duration-200 motion-reduce:transition-none\",\n        bgSubtleClass[color],\n        banner ? \"border-b px-4 py-2.5\" : \"rounded-lg border p-3.5\",\n        borderColorClass[color],\n        closing && \"opacity-0\",\n        className\n      )}\n    >\n      <ContentSkeleton on={skeleton} fallback={PLACEHOLDER} className=\"min-w-0 flex-1\">\n        <div className=\"flex min-w-0 flex-1 flex-wrap items-start gap-x-3 gap-y-2\">\n          {iconNode && <span className={cn(\"flex shrink-0 items-center pt-px\", textClass[color])}>{iconNode}</span>}\n          <div className=\"min-w-0 flex-1 basis-48\">\n            {title && <p className=\"font-semibold leading-5\">{title}</p>}\n            {description && <div className={cn(\"leading-5\", title && \"mt-0.5 text-mari-muted\")}>{description}</div>}\n          </div>\n          {action && <div className=\"flex shrink-0 items-center gap-2\">{action}</div>}\n        </div>\n      </ContentSkeleton>\n      {closable && (\n        <button\n          type=\"button\"\n          onClick={close}\n          aria-label={closeLabel}\n          className={cn(\n            \"relative -m-1 inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-mari-muted transition-colors\",\n            \"hover:bg-mari-foreground/5 hover:text-mari-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring\",\n            // 28px → 44px (her yönde 8px).\n            \"pointer-coarse:before:absolute pointer-coarse:before:-inset-2\"\n          )}\n        >\n          <XIcon size={16} aria-hidden />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAEA,SAAgB,gBAAgB;AAChC,SAAS,iBAAiB,iBAAiB,aAAa,UAAU,cAAc,aAAa;AAC7F,SAAS,UAA0B;AAqBjC,SACE,KADF;AAbF,IAAM,UAAU;AAEhB,IAAM,OAA+G;AAAA,EACnH,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AACX;AAEA,IAAM,cACJ,qBAAC,SAAI,WAAU,8BACb;AAAA,sBAAC,iBAAc,QAAM,MAAC,OAAM,OAAM,QAAO,YAAW,QAAO,MAAK;AAAA,EAChE,oBAAC,iBAAc,QAAM,MAAC,OAAM,OAAM,QAAO,WAAU,QAAO,MAAK;AAAA,GACjE;AAGF,SAAS,YAAY,MAA0B,OAAkD;AAC/F,MAAI,SAAS,OAAQ,QAAO;AAC5B,MAAI,KAAM,QAAO;AACjB,SAAO,UAAU,WAAW,UAAU,YAAY,UAAU;AAC9D;AAEA,SAAS,WAAW,MAA0B,OAAmC;AAC/E,MAAI,SAAS,MAAO,QAAO;AAC3B,MAAI,SAAS,QAAQ,SAAS,OAAW,QAAO;AAChD,QAAM,OAAO,KAAK,KAAK;AACvB,SAAO,oBAAC,QAAK,MAAM,IAAI,eAAW,MAAC;AACrC;AAWO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,aAAa;AAAA,EACb,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAAyB;AACvB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,MAAI,OAAQ,QAAO;AAEnB,QAAM,QAAQ,MAAM;AAClB,eAAW,IAAI;AACf,cAAU;AACV,eAAW,MAAM,UAAU,IAAI,GAAG,OAAO;AAAA,EAC3C;AAEA,QAAM,WAAW,WAAW,MAAM,KAAK;AAEvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,WAAW,SAAY,YAAY,MAAM,KAAK;AAAA,MACpD,aAAW,YAAY;AAAA,MACvB,WAAW;AAAA,QACT;AAAA,QACA,cAAc,KAAK;AAAA,QACnB,SAAS,yBAAyB;AAAA,QAClC,iBAAiB,KAAK;AAAA,QACtB,WAAW;AAAA,QACX;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,mBAAgB,IAAI,UAAU,UAAU,aAAa,WAAU,kBAC9D,+BAAC,SAAI,WAAU,6DACZ;AAAA,sBAAY,oBAAC,UAAK,WAAW,GAAG,oCAAoC,UAAU,KAAK,CAAC,GAAI,oBAAS;AAAA,UAClG,qBAAC,SAAI,WAAU,2BACZ;AAAA,qBAAS,oBAAC,OAAE,WAAU,2BAA2B,iBAAM;AAAA,YACvD,eAAe,oBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,wBAAwB,GAAI,uBAAY;AAAA,aACnG;AAAA,UACC,UAAU,oBAAC,SAAI,WAAU,oCAAoC,kBAAO;AAAA,WACvE,GACF;AAAA,QACC,YACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,cAAY;AAAA,YACZ,WAAW;AAAA,cACT;AAAA,cACA;AAAA;AAAA,cAEA;AAAA,YACF;AAAA,YAEA,8BAAC,SAAM,MAAM,IAAI,eAAW,MAAC;AAAA;AAAA,QAC/B;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/autocomplete.d.ts

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

package/dist/autocomplete.js

@@ -0,0 +1,158 @@
+"use client";
+
+import {
+  Input
+} from "./chunk-P7Z5BREP.js";
+import {
+  getFilteredOption,
+  splitMatch
+} from "./chunk-YZ7MDC6B.js";
+import "./chunk-KSPM2Z3T.js";
+import "./chunk-DUCIAQGR.js";
+import "./chunk-LBQMEHK6.js";
+import {
+  elevationClass
+} from "./chunk-TCYDVNSU.js";
+import "./chunk-FFXRFQSU.js";
+import "./chunk-IP2J3BWY.js";
+import "./chunk-54HHEXXD.js";
+
+// src/autocomplete/AutoComplete.tsx
+import { useEffect, useId, useRef, useState } from "react";
+import { cn, useControllableState } from "@mari-ui/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function HighlightedValue({ value, searchText }) {
+  const parts = splitMatch(value, searchText);
+  if (!parts) return /* @__PURE__ */ jsx(Fragment, { children: value });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    parts[0],
+    /* @__PURE__ */ jsx("mark", { className: "bg-transparent font-semibold text-mari-foreground", children: parts[1] }),
+    parts[2]
+  ] });
+}
+function AutoComplete({
+  options,
+  value,
+  defaultValue = "",
+  onSearch,
+  onSelect,
+  placeholder = "Ara",
+  closeOnBlur = true,
+  notFoundContent,
+  size,
+  color,
+  disabled,
+  id,
+  name,
+  "aria-label": ariaLabel,
+  className,
+  skeleton = false
+}) {
+  const [searchText, setSearchText] = useControllableState({ value, defaultValue, onChange: onSearch });
+  const [isFocused, setIsFocused] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const listboxId = useId();
+  const listRef = useRef(null);
+  const filteredOptions = getFilteredOption(options, searchText);
+  const showNotFound = filteredOptions.length === 0 && notFoundContent !== void 0 && searchText.trim() !== "";
+  const isOpen = isFocused && (filteredOptions.length > 0 || showNotFound);
+  const activeOption = activeIndex >= 0 ? filteredOptions[activeIndex] : void 0;
+  const optionId = (optId) => `${listboxId}-option-${optId}`;
+  useEffect(() => {
+    if (!activeOption) return;
+    document.getElementById(optionId(activeOption.id))?.scrollIntoView?.({ block: "nearest" });
+  }, [activeOption?.id]);
+  if (skeleton) return /* @__PURE__ */ jsx(Input, { skeleton: true, size, className });
+  const handleSelect = (optionValue) => {
+    setSearchText(optionValue);
+    onSelect?.(optionValue);
+    setIsFocused(false);
+    setActiveIndex(-1);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setIsFocused(true);
+      setActiveIndex((i) => Math.min(i + 1, filteredOptions.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter" && activeOption) {
+      e.preventDefault();
+      handleSelect(activeOption.value);
+    } else if (e.key === "Escape") {
+      setIsFocused(false);
+      setActiveIndex(-1);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id,
+        name,
+        value: searchText,
+        placeholder,
+        size,
+        color,
+        disabled,
+        allowClear: true,
+        onClear: () => {
+          setSearchText("");
+          setActiveIndex(-1);
+        },
+        onChange: (e) => {
+          setSearchText(e.target.value);
+          setActiveIndex(-1);
+        },
+        onKeyDown: handleKeyDown,
+        onFocus: () => setIsFocused(true),
+        onBlur: closeOnBlur ? () => setIsFocused(false) : void 0,
+        role: "combobox",
+        "aria-label": ariaLabel ?? placeholder,
+        "aria-autocomplete": "list",
+        "aria-expanded": isOpen,
+        "aria-controls": listboxId,
+        "aria-activedescendant": activeOption ? optionId(activeOption.id) : void 0,
+        autoComplete: "off"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "ul",
+      {
+        ref: listRef,
+        id: listboxId,
+        role: "listbox",
+        className: cn(
+          "absolute left-0 top-full z-mari-dropdown mt-1 max-h-64 w-full overflow-y-auto overscroll-contain rounded-lg bg-mari-surface p-1 text-sm transition-[opacity,translate] duration-150",
+          elevationClass.md,
+          isOpen ? "pointer-events-auto translate-y-0 opacity-100" : "pointer-events-none -translate-y-1 opacity-0"
+        ),
+        children: [
+          filteredOptions.map((option, i) => /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              id: optionId(option.id),
+              role: "option",
+              "aria-selected": i === activeIndex,
+              type: "button",
+              tabIndex: -1,
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => handleSelect(option.value),
+              className: cn(
+                "flex min-h-8 w-full cursor-pointer items-center rounded-md px-2.5 py-1.5 text-left text-mari-muted hover:bg-mari-surface-alt pointer-coarse:min-h-11",
+                i === activeIndex && "bg-mari-surface-alt text-mari-foreground"
+              ),
+              children: /* @__PURE__ */ jsx("span", { className: "truncate", children: /* @__PURE__ */ jsx(HighlightedValue, { value: option.value, searchText }) })
+            }
+          ) }, option.id)),
+          showNotFound && /* @__PURE__ */ jsx("li", { role: "presentation", className: "px-2.5 py-2 text-mari-muted", children: notFoundContent })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  AutoComplete
+};
+//# sourceMappingURL=autocomplete.js.map

package/dist/autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/autocomplete/AutoComplete.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useId, useRef, useState } from \"react\";\nimport { cn, useControllableState } from \"@mari-ui/core\";\nimport { Input } from \"../input\";\nimport { elevationClass } from \"../lib/elevationClass\";\nimport type { AutoCompleteProps } from \"./types\";\nimport { getFilteredOption, splitMatch } from \"./utils\";\n\nexport type { AutoCompleteProps };\n\nfunction HighlightedValue({ value, searchText }: Readonly<{ value: string; searchText: string }>) {\n  const parts = splitMatch(value, searchText);\n  if (!parts) return <>{value}</>;\n  return (\n    <>\n      {parts[0]}\n      <mark className=\"bg-transparent font-semibold text-mari-foreground\">{parts[1]}</mark>\n      {parts[2]}\n    </>\n  );\n}\n\n/**\n * ARIA \"combobox\" deseni (Faz 13): `role=\"combobox\"`/`listbox`/`option` +\n * Ok tuşları/Enter/Escape.\n *\n * Faz 15: temizleme bir `<svg onClick>` idi — buton değildi, klavyeyle\n * erişilemiyordu ve alan boşken de görünüyordu → Input'un etiketli\n * `allowClear`'ı. Liste yükseklik sınırı yoktu (100 seçenek sayfayı uzatırdı);\n * klavyeyle gezinirken aktif seçenek görünür alana kaydırılır. Eşleşen kısım\n * kalın. Türkçe/aksansız arama (`foldForSearch`). `size`/`color`/`disabled`\n * artık geçirilebilir.\n */\nexport function AutoComplete({\n  options,\n  value,\n  defaultValue = \"\",\n  onSearch,\n  onSelect,\n  placeholder = \"Ara\",\n  closeOnBlur = true,\n  notFoundContent,\n  size,\n  color,\n  disabled,\n  id,\n  name,\n  \"aria-label\": ariaLabel,\n  className,\n  skeleton = false,\n}: Readonly<AutoCompleteProps>) {\n  const [searchText, setSearchText] = useControllableState<string>({ value, defaultValue, onChange: onSearch });\n  const [isFocused, setIsFocused] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const listboxId = useId();\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const filteredOptions = getFilteredOption(options, searchText);\n  const showNotFound = filteredOptions.length === 0 && notFoundContent !== undefined && searchText.trim() !== \"\";\n  const isOpen = isFocused && (filteredOptions.length > 0 || showNotFound);\n  const activeOption = activeIndex >= 0 ? filteredOptions[activeIndex] : undefined;\n  const optionId = (optId: number) => `${listboxId}-option-${optId}`;\n\n  useEffect(() => {\n    if (!activeOption) return;\n    document.getElementById(optionId(activeOption.id))?.scrollIntoView?.({ block: \"nearest\" });\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- yalnızca aktif seçenek değişince\n  }, [activeOption?.id]);\n\n  if (skeleton) return <Input skeleton size={size} className={className} />;\n\n  const handleSelect = (optionValue: string) => {\n    setSearchText(optionValue);\n    onSelect?.(optionValue);\n    setIsFocused(false);\n    setActiveIndex(-1);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setIsFocused(true);\n      setActiveIndex((i) => Math.min(i + 1, filteredOptions.length - 1));\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      setActiveIndex((i) => Math.max(i - 1, 0));\n    } else if (e.key === \"Enter\" && activeOption) {\n      e.preventDefault();\n      handleSelect(activeOption.value);\n    } else if (e.key === \"Escape\") {\n      setIsFocused(false);\n      setActiveIndex(-1);\n    }\n  };\n\n  return (\n    <div className={cn(\"relative\", className)}>\n      <Input\n        id={id}\n        name={name}\n        value={searchText}\n        placeholder={placeholder}\n        size={size}\n        color={color}\n        disabled={disabled}\n        allowClear\n        onClear={() => {\n          setSearchText(\"\");\n          setActiveIndex(-1);\n        }}\n        onChange={(e) => {\n          setSearchText(e.target.value);\n          setActiveIndex(-1);\n        }}\n        onKeyDown={handleKeyDown}\n        onFocus={() => setIsFocused(true)}\n        onBlur={closeOnBlur ? () => setIsFocused(false) : undefined}\n        role=\"combobox\"\n        // `placeholder` bir accessible name SAYILMAZ — tüketici `aria-label`\n        // vermediyse placeholder'dan türetilir.\n        aria-label={ariaLabel ?? placeholder}\n        aria-autocomplete=\"list\"\n        aria-expanded={isOpen}\n        aria-controls={listboxId}\n        aria-activedescendant={activeOption ? optionId(activeOption.id) : undefined}\n        autoComplete=\"off\"\n      />\n      <ul\n        ref={listRef}\n        id={listboxId}\n        role=\"listbox\"\n        className={cn(\n          \"absolute left-0 top-full z-mari-dropdown mt-1 max-h-64 w-full overflow-y-auto overscroll-contain rounded-lg bg-mari-surface p-1 text-sm transition-[opacity,translate] duration-150\",\n          elevationClass.md,\n          isOpen ? \"pointer-events-auto translate-y-0 opacity-100\" : \"pointer-events-none -translate-y-1 opacity-0\"\n        )}\n      >\n        {filteredOptions.map((option, i) => (\n          <li key={option.id} role=\"presentation\">\n            <button\n              id={optionId(option.id)}\n              role=\"option\"\n              aria-selected={i === activeIndex}\n              type=\"button\"\n              tabIndex={-1}\n              // onMouseDown (blur'dan ÖNCE) — aksi halde Input'un onBlur'u\n              // listeyi gizleyip tıklamayı iptal ederdi.\n              onMouseDown={(e) => e.preventDefault()}\n              onClick={() => handleSelect(option.value)}\n              className={cn(\n                \"flex min-h-8 w-full cursor-pointer items-center rounded-md px-2.5 py-1.5 text-left text-mari-muted hover:bg-mari-surface-alt pointer-coarse:min-h-11\",\n                i === activeIndex && \"bg-mari-surface-alt text-mari-foreground\"\n              )}\n            >\n              <span className=\"truncate\">\n                <HighlightedValue value={option.value} searchText={searchText} />\n              </span>\n            </button>\n          </li>\n        ))}\n        {showNotFound && (\n          <li role=\"presentation\" className=\"px-2.5 py-2 text-mari-muted\">\n            {notFoundContent}\n          </li>\n        )}\n      </ul>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}