@mari-ui/components 0.0.0-stage → 0.1.1

package/dist/chunk-YZ7MDC6B.js

@@ -0,0 +1,189 @@
+"use client";
+
+import {
+  elevationClass
+} from "./chunk-TCYDVNSU.js";
+
+// src/autocomplete/utils.ts
+function foldForSearch(text) {
+  return text.toLocaleLowerCase("tr").normalize("NFD").replace(/\p{M}/gu, "").replace(/ı/g, "i");
+}
+function getFilteredOption(options, searchText) {
+  const query = foldForSearch(searchText.trim());
+  if (!query) return options;
+  return options.filter((option) => foldForSearch(option.value).includes(query));
+}
+function splitMatch(value, searchText) {
+  const query = foldForSearch(searchText.trim());
+  const folded = foldForSearch(value);
+  if (!query || folded.length !== value.length) return null;
+  const start = folded.indexOf(query);
+  if (start < 0) return null;
+  const end = start + query.length;
+  return [value.slice(0, start), value.slice(start, end), value.slice(end)];
+}
+
+// src/select/_components/SelectPanel.tsx
+import React, { forwardRef, useId } from "react";
+import { createPortal } from "react-dom";
+import { CheckIcon, Loader2Icon } from "lucide-react";
+import { cn } from "@mari-ui/core";
+
+// src/select/utils.ts
+var isGroup = (item) => "options" in item;
+function flattenOptions(items) {
+  return items.flatMap((item) => isGroup(item) ? item.options : [item]);
+}
+function optionText(option) {
+  if (option.searchText !== void 0) return option.searchText;
+  if (typeof option.label === "string" || typeof option.label === "number") return String(option.label);
+  return String(option.value);
+}
+var valueKey = (value) => `${typeof value}:${value}`;
+function buildSections(items, search) {
+  const query = foldForSearch(search.trim());
+  const matches = (option) => !query || foldForSearch(optionText(option)).includes(query);
+  const sections = [];
+  items.forEach((item, index) => {
+    if (isGroup(item)) {
+      const visible = item.options.filter(matches);
+      if (visible.length > 0) sections.push({ key: `group-${index}`, label: item.label, options: visible });
+      return;
+    }
+    if (!matches(item)) return;
+    const last = sections.at(-1);
+    if (last && last.label === void 0) last.options.push(item);
+    else sections.push({ key: `plain-${index}`, options: [item] });
+  });
+  return sections;
+}
+function nextEnabled(options, from, step) {
+  for (let i = from + step; i >= 0 && i < options.length; i += step) {
+    if (!options[i].disabled) return i;
+  }
+  return from;
+}
+function firstEnabled(options) {
+  return nextEnabledOrNone(options, -1, 1);
+}
+function lastEnabled(options) {
+  return nextEnabledOrNone(options, options.length, -1);
+}
+function nextEnabledOrNone(options, from, step) {
+  const next = nextEnabled(options, from, step);
+  return next === from ? -1 : next;
+}
+function typeAheadMatch(options, current, buffer) {
+  const query = foldForSearch(buffer);
+  if (!query) return -1;
+  const repeated = query.length > 1 && [...query].every((ch) => ch === query[0]);
+  const needle = repeated ? query[0] : query;
+  const start = repeated || query.length === 1 ? current + 1 : current;
+  for (let step = 0; step < options.length; step++) {
+    const i = (Math.max(start, 0) + step) % options.length;
+    const option = options[i];
+    if (!option.disabled && foldForSearch(optionText(option)).startsWith(needle)) return i;
+  }
+  return -1;
+}
+
+// src/select/_components/SelectPanel.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var optionDomId = (listboxId, option) => `${listboxId}-${valueKey(option.value).replace(/[^\w-]/g, "_")}`;
+function OptionContent({ option, selected, multiple }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    option.icon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center text-mari-muted [&>svg]:size-4", children: option.icon }),
+    /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "block truncate", children: option.label ?? option.value }),
+      option.description && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-mari-muted", children: option.description })
+    ] }),
+    multiple && /* @__PURE__ */ jsx(CheckIcon, { size: 16, "aria-hidden": true, className: cn("shrink-0 text-mari-primary", !selected && "invisible") })
+  ] });
+}
+var SelectPanel = forwardRef(function SelectPanel2({ listboxId, coords, sections, flatOptions, activeIndex, isSelected, multiple, loading, notFoundContent, listHeight, optionRender, labelledBy, label, onPick, onHover }, ref) {
+  const groupIdBase = useId();
+  if (typeof document === "undefined") return null;
+  const empty = flatOptions.length === 0;
+  const renderOption = (option) => {
+    const index = flatOptions.indexOf(option);
+    const selected = isSelected(option);
+    const active = index === activeIndex;
+    return (
+      // Klavye tetikleyicide (combobox) işlenir; seçenek odak almaz, `aria-activedescendant` ile gösterilir (APG).
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: optionDomId(listboxId, option),
+          role: "option",
+          tabIndex: -1,
+          "aria-selected": selected,
+          "aria-disabled": option.disabled || void 0,
+          onMouseDown: (e) => e.preventDefault(),
+          onMouseMove: () => !active && !option.disabled && onHover(index),
+          onClick: () => !option.disabled && onPick(option),
+          className: cn(
+            "flex min-h-8 cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-mari-foreground pointer-coarse:min-h-11",
+            active && "bg-mari-surface-alt",
+            selected && !multiple && "bg-mari-primary-subtle font-medium",
+            option.disabled && "cursor-not-allowed opacity-50"
+          ),
+          children: optionRender ? optionRender(option, { selected, active }) : /* @__PURE__ */ jsx(OptionContent, { option, selected, multiple })
+        },
+        valueKey(option.value)
+      )
+    );
+  };
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("fixed z-mari-dropdown max-w-[calc(100vw-1rem)] rounded-lg bg-mari-surface p-1 text-sm", elevationClass.md, !coords && "invisible"),
+        style: { top: coords?.top ?? 0, left: coords?.left ?? 0, width: coords?.anchorWidth },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: listboxId,
+              role: "listbox",
+              "aria-multiselectable": multiple || void 0,
+              "aria-labelledby": labelledBy,
+              "aria-label": labelledBy ? void 0 : label,
+              "aria-busy": loading || void 0,
+              className: "overflow-y-auto overscroll-contain",
+              style: { maxHeight: listHeight },
+              children: sections.map(
+                (section) => section.label === void 0 ? /* @__PURE__ */ jsx(React.Fragment, { children: section.options.map(renderOption) }, section.key) : /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": `${groupIdBase}-${section.key}`, children: [
+                  /* @__PURE__ */ jsx("div", { id: `${groupIdBase}-${section.key}`, role: "presentation", className: "px-2.5 pb-1 pt-2 text-xs font-medium text-mari-muted", children: section.label }),
+                  section.options.map(renderOption)
+                ] }, section.key)
+              )
+            }
+          ),
+          loading && /* @__PURE__ */ jsxs("div", { role: "status", className: "flex items-center gap-2 px-2.5 py-2 text-mari-muted", children: [
+            /* @__PURE__ */ jsx(Loader2Icon, { size: 16, "aria-hidden": true, className: "animate-spin motion-reduce:animate-[spin_2s_linear_infinite]" }),
+            "Y\xFCkleniyor"
+          ] }),
+          !loading && empty && /* @__PURE__ */ jsx("div", { role: "status", className: "px-2.5 py-2 text-mari-muted", children: notFoundContent })
+        ]
+      }
+    ),
+    document.body
+  );
+});
+
+export {
+  foldForSearch,
+  getFilteredOption,
+  splitMatch,
+  flattenOptions,
+  buildSections,
+  nextEnabled,
+  firstEnabled,
+  lastEnabled,
+  typeAheadMatch,
+  optionDomId,
+  SelectPanel
+};
+//# sourceMappingURL=chunk-YZ7MDC6B.js.map

package/dist/chunk-YZ7MDC6B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/autocomplete/utils.ts","../src/select/_components/SelectPanel.tsx","../src/select/utils.ts"],"sourcesContent":["import type { Option } from \"./types\";\n\n/**\n * Arama için katlama: Türkçe küçük harf + aksanları at + ı→i. Böylece\n * \"istanbul\" → \"İstanbul\", \"sehir\" → \"Şehir\", \"IĞDIR\" → \"Iğdır\" bulunur.\n * Eskiden düz `toLowerCase()` vardı: \"İstanbul\".toLowerCase() JS'te\n * \"i̇stanbul\" (i + birleşik nokta) verir ve \"istanbul\" ile HİÇ eşleşmezdi.\n * Karakter sayısını korur (NFC girişte her harf tek karaktere iner) — vurgu\n * aralıkları özgün metne aynı indekslerle uygulanabilir.\n */\nexport function foldForSearch(text: string): string {\n  return text.toLocaleLowerCase(\"tr\").normalize(\"NFD\").replace(/\\p{M}/gu, \"\").replace(/ı/g, \"i\");\n}\n\nexport function getFilteredOption(options: Option[], searchText: string): Option[] {\n  const query = foldForSearch(searchText.trim());\n  if (!query) return options;\n  return options.filter((option) => foldForSearch(option.value).includes(query));\n}\n\n/** Seçenek metnini [önce, eşleşen, sonra] olarak böler; eşleşme yoksa `null`. */\nexport function splitMatch(value: string, searchText: string): [string, string, string] | null {\n  const query = foldForSearch(searchText.trim());\n  const folded = foldForSearch(value);\n  if (!query || folded.length !== value.length) return null;\n  const start = folded.indexOf(query);\n  if (start < 0) return null;\n  const end = start + query.length;\n  return [value.slice(0, start), value.slice(start, end), value.slice(end)];\n}\n","\"use client\";\n\nimport React, { forwardRef, useId } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { CheckIcon, Loader2Icon } from \"lucide-react\";\nimport { cn } from \"@mari-ui/core\";\nimport { elevationClass } from \"../../lib/elevationClass\";\nimport type { FloatingCoords } from \"../../lib/useFloatingPosition\";\nimport type { SelectOption, SelectProps } from \"../types\";\nimport { type SelectSection, valueKey } from \"../utils\";\n\ninterface SelectPanelProps {\n  listboxId: string;\n  coords: FloatingCoords | null;\n  sections: SelectSection[];\n  /** `sections`taki seçeneklerin düz sırası — aktif indeks buna göre. */\n  flatOptions: SelectOption[];\n  activeIndex: number;\n  isSelected: (option: SelectOption) => boolean;\n  multiple: boolean;\n  loading: boolean;\n  notFoundContent: React.ReactNode;\n  listHeight: string;\n  optionRender?: Exclude<SelectProps[\"optionRender\"], undefined>;\n  labelledBy?: string;\n  label?: string;\n  onPick: (option: SelectOption) => void;\n  onHover: (index: number) => void;\n}\n\nexport const optionDomId = (listboxId: string, option: SelectOption) => `${listboxId}-${valueKey(option.value).replace(/[^\\w-]/g, \"_\")}`;\n\nfunction OptionContent({ option, selected, multiple }: Readonly<{ option: SelectOption; selected: boolean; multiple: boolean }>) {\n  return (\n    <>\n      {option.icon && <span className=\"flex shrink-0 items-center text-mari-muted [&>svg]:size-4\">{option.icon}</span>}\n      <span className=\"min-w-0 flex-1\">\n        <span className=\"block truncate\">{option.label ?? option.value}</span>\n        {option.description && <span className=\"block truncate text-xs text-mari-muted\">{option.description}</span>}\n      </span>\n      {/* Tekli seçimde seçili satır zeminle belli; çokluda onay işareti durumu taşır. */}\n      {multiple && <CheckIcon size={16} aria-hidden className={cn(\"shrink-0 text-mari-primary\", !selected && \"invisible\")} />}\n    </>\n  );\n}\n\n/**\n * Faz 16.1 — Select'in listesi. `document.body`'ye portal edilir, konum\n * `useFloatingPosition`dan (Dropdown ile ortak); genişlik tetikleyicininki\n * (ant.design `popupMatchSelectWidth`). Odak listede DEĞİL tetikleyicide\n * kalır; aktif seçenek `aria-activedescendant` ile bildirilir (APG combobox).\n * Seçenekler `onMouseDown` ile `preventDefault` — tıklamak tetikleyicinin\n * odağını (dolayısıyla açık listeyi) kaybettirmesin.\n */\nexport const SelectPanel = forwardRef<HTMLDivElement, SelectPanelProps>(function SelectPanel(\n  { listboxId, coords, sections, flatOptions, activeIndex, isSelected, multiple, loading, notFoundContent, listHeight, optionRender, labelledBy, label, onPick, onHover },\n  ref\n) {\n  const groupIdBase = useId();\n  if (typeof document === \"undefined\") return null;\n  const empty = flatOptions.length === 0;\n\n  const renderOption = (option: SelectOption) => {\n    const index = flatOptions.indexOf(option);\n    const selected = isSelected(option);\n    const active = index === activeIndex;\n    return (\n      // Klavye tetikleyicide (combobox) işlenir; seçenek odak almaz, `aria-activedescendant` ile gösterilir (APG).\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n      <div\n        key={valueKey(option.value)}\n        id={optionDomId(listboxId, option)}\n        role=\"option\"\n        tabIndex={-1}\n        aria-selected={selected}\n        aria-disabled={option.disabled || undefined}\n        onMouseDown={(e) => e.preventDefault()}\n        onMouseMove={() => !active && !option.disabled && onHover(index)}\n        onClick={() => !option.disabled && onPick(option)}\n        className={cn(\n          \"flex min-h-8 cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-mari-foreground pointer-coarse:min-h-11\",\n          active && \"bg-mari-surface-alt\",\n          selected && !multiple && \"bg-mari-primary-subtle font-medium\",\n          option.disabled && \"cursor-not-allowed opacity-50\"\n        )}\n      >\n        {optionRender ? optionRender(option, { selected, active }) : <OptionContent option={option} selected={selected} multiple={multiple} />}\n      </div>\n    );\n  };\n\n  return createPortal(\n    <div\n      ref={ref}\n      className={cn(\"fixed z-mari-dropdown max-w-[calc(100vw-1rem)] rounded-lg bg-mari-surface p-1 text-sm\", elevationClass.md, !coords && \"invisible\")}\n      style={{ top: coords?.top ?? 0, left: coords?.left ?? 0, width: coords?.anchorWidth }}\n    >\n      <div\n        id={listboxId}\n        role=\"listbox\"\n        aria-multiselectable={multiple || undefined}\n        aria-labelledby={labelledBy}\n        aria-label={labelledBy ? undefined : label}\n        aria-busy={loading || undefined}\n        className=\"overflow-y-auto overscroll-contain\"\n        style={{ maxHeight: listHeight }}\n      >\n        {sections.map((section) =>\n          section.label === undefined ? (\n            <React.Fragment key={section.key}>{section.options.map(renderOption)}</React.Fragment>\n          ) : (\n            <div key={section.key} role=\"group\" aria-labelledby={`${groupIdBase}-${section.key}`}>\n              <div id={`${groupIdBase}-${section.key}`} role=\"presentation\" className=\"px-2.5 pb-1 pt-2 text-xs font-medium text-mari-muted\">\n                {section.label}\n              </div>\n              {section.options.map(renderOption)}\n            </div>\n          )\n        )}\n      </div>\n      {loading && (\n        <div role=\"status\" className=\"flex items-center gap-2 px-2.5 py-2 text-mari-muted\">\n          <Loader2Icon size={16} aria-hidden className=\"animate-spin motion-reduce:animate-[spin_2s_linear_infinite]\" />\n          Yükleniyor\n        </div>\n      )}\n      {!loading && empty && (\n        <div role=\"status\" className=\"px-2.5 py-2 text-mari-muted\">\n          {notFoundContent}\n        </div>\n      )}\n    </div>,\n    document.body\n  );\n});\n","import type React from \"react\";\nimport { foldForSearch } from \"../autocomplete/utils\";\nimport type { SelectOption, SelectOptionGroup, SelectValue } from \"./types\";\n\n/**\n * Listede sırayla çizilen bölüm: başlıklı grup (`role=\"group\"`) ya da\n * başlıksız ardışık seçenekler. Gruplar DOM'da da iç içe olmalı — ekran\n * okuyucu seçeneği \"Meyveler grubu, Elma\" diye okusun.\n */\nexport interface SelectSection {\n  key: string;\n  label?: React.ReactNode;\n  options: SelectOption[];\n}\n\nexport const isGroup = (item: SelectOption | SelectOptionGroup): item is SelectOptionGroup => \"options\" in item;\n\n/** Gruplar açılmış, düz seçenek listesi (değer arama, klavye gezinmesi için). */\nexport function flattenOptions(items: Array<SelectOption | SelectOptionGroup>): SelectOption[] {\n  return items.flatMap((item) => (isGroup(item) ? item.options : [item]));\n}\n\n/** Aramada/harfle atlamada kullanılan düz metin: `searchText` → düz `label` → `value`. */\nexport function optionText(option: SelectOption): string {\n  if (option.searchText !== undefined) return option.searchText;\n  if (typeof option.label === \"string\" || typeof option.label === \"number\") return String(option.label);\n  return String(option.value);\n}\n\n/** DOM id'si için değer anahtarı (sayı ile aynı yazılı string çakışmasın). */\nexport const valueKey = (value: SelectValue) => `${typeof value}:${value}`;\n\n/**\n * Aramaya göre süzülmüş bölümler; eşleşmesi kalmayan grup tamamen düşer.\n * Türkçe/aksansız eşleşme AutoComplete'le aynı (`foldForSearch`).\n */\nexport function buildSections(items: Array<SelectOption | SelectOptionGroup>, search: string): SelectSection[] {\n  const query = foldForSearch(search.trim());\n  const matches = (option: SelectOption) => !query || foldForSearch(optionText(option)).includes(query);\n  const sections: SelectSection[] = [];\n  items.forEach((item, index) => {\n    if (isGroup(item)) {\n      const visible = item.options.filter(matches);\n      if (visible.length > 0) sections.push({ key: `group-${index}`, label: item.label, options: visible });\n      return;\n    }\n    if (!matches(item)) return;\n    const last = sections.at(-1);\n    if (last && last.label === undefined) last.options.push(item);\n    else sections.push({ key: `plain-${index}`, options: [item] });\n  });\n  return sections;\n}\n\n/**\n * Klavye gezinmesi: seçilebilir (disabled olmayan) seçenekler arasında\n * `from`dan `step` yönünde bir sonraki; kenarda durur (APG listbox — sarmaz).\n */\nexport function nextEnabled(options: SelectOption[], from: number, step: 1 | -1): number {\n  for (let i = from + step; i >= 0 && i < options.length; i += step) {\n    if (!options[i]!.disabled) return i;\n  }\n  return from;\n}\n\n/** İlk seçilebilir seçenek; yoksa -1. */\nexport function firstEnabled(options: SelectOption[]): number {\n  return nextEnabledOrNone(options, -1, 1);\n}\n\n/** Son seçilebilir seçenek; yoksa -1. */\nexport function lastEnabled(options: SelectOption[]): number {\n  return nextEnabledOrNone(options, options.length, -1);\n}\n\nfunction nextEnabledOrNone(options: SelectOption[], from: number, step: 1 | -1): number {\n  const next = nextEnabled(options, from, step);\n  return next === from ? -1 : next;\n}\n\n/**\n * Harfle atlama (type-ahead): art arda yazılan harfler birikir (\"is\" →\n * \"İstanbul\"); tek harf tekrarlanırsa o harfle başlayan sonrakine geçer.\n */\nexport function typeAheadMatch(options: SelectOption[], current: number, buffer: string): number {\n  const query = foldForSearch(buffer);\n  if (!query) return -1;\n  const repeated = query.length > 1 && [...query].every((ch) => ch === query[0]);\n  const needle = repeated ? query[0]! : query;\n  const start = repeated || query.length === 1 ? current + 1 : current;\n  for (let step = 0; step < options.length; step++) {\n    const i = (Math.max(start, 0) + step) % options.length;\n    const option = options[i]!;\n    if (!option.disabled && foldForSearch(optionText(option)).startsWith(needle)) return i;\n  }\n  return -1;\n}\n"],"mappings":"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","names":["SelectPanel"]}

package/dist/chunk-ZLPAXPDI.js

@@ -0,0 +1,69 @@
+import {
+  colorVariantToClassName
+} from "./chunk-IP2J3BWY.js";
+import {
+  skeletonBoxProps
+} from "./chunk-54HHEXXD.js";
+
+// src/tag/Tag.tsx
+import { X } from "lucide-react";
+import { cn as cn2 } from "@mari-ui/core";
+
+// src/tag/utils.ts
+import { cn, resolveColorVariant } from "@mari-ui/core";
+var TAG_GEOMETRY_CLASS = "inline-flex max-w-full items-center gap-1 whitespace-nowrap rounded-sm px-[0.4375rem] leading-5 text-xs font-medium";
+function getTagClass(color, variant, bordered, className) {
+  const colorClasses = colorVariantToClassName(resolveColorVariant(color, variant));
+  return cn(
+    TAG_GEOMETRY_CLASS,
+    colorClasses,
+    bordered && variant !== "outline" && "border",
+    className
+  );
+}
+
+// src/tag/Tag.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Tag({
+  children,
+  color = "neutral",
+  variant = "soft",
+  icon,
+  closeIcon,
+  bordered = false,
+  onClose,
+  closeLabel,
+  skeleton = false,
+  className
+}) {
+  if (skeleton) {
+    return /* @__PURE__ */ jsxs("span", { ...skeletonBoxProps(cn2(TAG_GEOMETRY_CLASS, (variant === "outline" || bordered) && "border border-transparent", className)), children: [
+      icon && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center", children: icon }),
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children }),
+      (onClose || closeIcon) && /* @__PURE__ */ jsx("span", { className: "-mr-1 size-4 shrink-0" })
+    ] });
+  }
+  const tagClass = getTagClass(color, variant, bordered, className);
+  const showCloseButton = closeIcon !== false && (closeIcon !== void 0 || Boolean(onClose));
+  const closeIconEl = closeIcon === true || closeIcon === void 0 || closeIcon === false ? /* @__PURE__ */ jsx(X, { size: 12, "aria-hidden": true }) : closeIcon;
+  const resolvedCloseLabel = closeLabel ?? (typeof children === "string" ? `${children} etiketini kald\u0131r` : "Kald\u0131r");
+  return /* @__PURE__ */ jsxs("span", { className: tagClass, children: [
+    icon && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center", children: icon }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children }),
+    showCloseButton && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onClose,
+        "aria-label": resolvedCloseLabel,
+        className: "relative -mr-1 inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm opacity-70 transition-[opacity,background-color] duration-150 before:absolute before:-inset-1 hover:bg-current/15 hover:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-mari-ring",
+        children: closeIconEl
+      }
+    )
+  ] });
+}
+
+export {
+  Tag
+};
+//# sourceMappingURL=chunk-ZLPAXPDI.js.map

package/dist/chunk-ZLPAXPDI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tag/Tag.tsx","../src/tag/utils.ts"],"sourcesContent":["import React from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"@mari-ui/core\";\nimport type { TagProps } from \"./types\";\nimport { skeletonBoxProps } from \"../lib/skeleton\";\nimport { getTagClass, TAG_GEOMETRY_CLASS } from \"./utils\";\n\nexport type { TagProps };\n\n// Hook yok, browser API yok — saf sunum, \"use client\" gerekmiyor.\nexport function Tag({\n  children,\n  color = \"neutral\",\n  variant = \"soft\",\n  icon,\n  closeIcon,\n  bordered = false,\n  onClose,\n  closeLabel,\n  skeleton = false,\n  className,\n}: Readonly<TagProps>) {\n  if (skeleton) {\n    return (\n      <span {...skeletonBoxProps(cn(TAG_GEOMETRY_CLASS, (variant === \"outline\" || bordered) && \"border border-transparent\", className))}>\n        {icon && <span className=\"inline-flex items-center\">{icon}</span>}\n        <span className=\"min-w-0 truncate\">{children}</span>\n        {(onClose || closeIcon) && <span className=\"-mr-1 size-4 shrink-0\" />}\n      </span>\n    );\n  }\n\n  const tagClass = getTagClass(color, variant, bordered, className);\n\n  // Eski davranış her Tag'de varsayılan olarak bir X gösteriyordu — `onClose`\n  // verilmese bile. Artık kapatılabilirlik `onClose` VEYA açık `closeIcon`\n  // varlığına bağlı; aksi halde işlevsiz bir buton render edilmez.\n  const showCloseButton = closeIcon !== false && (closeIcon !== undefined || Boolean(onClose));\n  const closeIconEl = closeIcon === true || closeIcon === undefined || closeIcon === false ? <X size={12} aria-hidden /> : closeIcon;\n  const resolvedCloseLabel = closeLabel ?? (typeof children === \"string\" ? `${children} etiketini kaldır` : \"Kaldır\");\n\n  return (\n    <span className={tagClass}>\n      {icon && <span className=\"inline-flex items-center\">{icon}</span>}\n      <span className=\"min-w-0 truncate\">{children}</span>\n      {showCloseButton && (\n        <button\n          type=\"button\"\n          onClick={onClose}\n          aria-label={resolvedCloseLabel}\n          // 16px görünür kutu + `before` ile 24px'e genişleyen tıklama alanı\n          // (eskiden 10px'lik ikonun kendisi hedefti — dokunmatikte ıskalanıyordu).\n          className=\"relative -mr-1 inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm opacity-70 transition-[opacity,background-color] duration-150 before:absolute before:-inset-1 hover:bg-current/15 hover:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-mari-ring\"\n        >\n          {closeIconEl}\n        </button>\n      )}\n    </span>\n  );\n}\n","import { cn, resolveColorVariant, type ColorRole, type Variant } from \"@mari-ui/core\";\nimport { colorVariantToClassName } from \"../lib/colorClasses\";\n\n/**\n * ant.design'ın gerçek Tag'i (`getComputedStyle`, ant.design/components/tag)\n * bir hap (pill) DEĞİL, 4px yuvarlatılmış küçük bir dikdörtgen: `border-radius:\n * 4px`, `padding: 0 7px`, `font-size: 12px`, `line-height: 20px`. Eskiden\n * `rounded-full px-3 py-0.5 text-sm` kullanılıyordu — bu, Badge/Chip'e daha\n * yakın tamamen farklı bir şekildi. `px` yasak kuralı (Faz 13.0c) gereği 7px\n * hardcoded değil `rem` karşılığıyla yazılır.\n */\n/** Geometri — iskeletle ortak (yüklenince kutu zıplamasın). Uzun metin tek satırda kalır, sığmazsa kısalır. */\nexport const TAG_GEOMETRY_CLASS = \"inline-flex max-w-full items-center gap-1 whitespace-nowrap rounded-sm px-[0.4375rem] leading-5 text-xs font-medium\";\n\nexport function getTagClass(\n  color: ColorRole,\n  variant: Extract<Variant, \"solid\" | \"soft\" | \"outline\">,\n  bordered: boolean | undefined,\n  className: string | undefined\n): string {\n  const colorClasses = colorVariantToClassName(resolveColorVariant(color, variant));\n  return cn(\n    TAG_GEOMETRY_CLASS,\n    colorClasses,\n    bordered && variant !== \"outline\" && \"border\",\n    className\n  );\n}\n"],"mappings":";;;;;;;;AACA,SAAS,SAAS;AAClB,SAAS,MAAAA,WAAU;;;ACFnB,SAAS,IAAI,2BAAyD;AAY/D,IAAM,qBAAqB;AAE3B,SAAS,YACd,OACA,SACA,UACA,WACQ;AACR,QAAM,eAAe,wBAAwB,oBAAoB,OAAO,OAAO,CAAC;AAChF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,YAAY,YAAY,aAAa;AAAA,IACrC;AAAA,EACF;AACF;;;ADHM,SACW,KADX;AAdC,SAAS,IAAI;AAAA,EAClB;AAAA,EACA,QAAQ;AAAA,EACR,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,GAAuB;AACrB,MAAI,UAAU;AACZ,WACE,qBAAC,UAAM,GAAG,iBAAiBC,IAAG,qBAAqB,YAAY,aAAa,aAAa,6BAA6B,SAAS,CAAC,GAC7H;AAAA,cAAQ,oBAAC,UAAK,WAAU,4BAA4B,gBAAK;AAAA,MAC1D,oBAAC,UAAK,WAAU,oBAAoB,UAAS;AAAA,OAC3C,WAAW,cAAc,oBAAC,UAAK,WAAU,yBAAwB;AAAA,OACrE;AAAA,EAEJ;AAEA,QAAM,WAAW,YAAY,OAAO,SAAS,UAAU,SAAS;AAKhE,QAAM,kBAAkB,cAAc,UAAU,cAAc,UAAa,QAAQ,OAAO;AAC1F,QAAM,cAAc,cAAc,QAAQ,cAAc,UAAa,cAAc,QAAQ,oBAAC,KAAE,MAAM,IAAI,eAAW,MAAC,IAAK;AACzH,QAAM,qBAAqB,eAAe,OAAO,aAAa,WAAW,GAAG,QAAQ,2BAAsB;AAE1G,SACE,qBAAC,UAAK,WAAW,UACd;AAAA,YAAQ,oBAAC,UAAK,WAAU,4BAA4B,gBAAK;AAAA,IAC1D,oBAAC,UAAK,WAAU,oBAAoB,UAAS;AAAA,IAC5C,mBACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,cAAY;AAAA,QAGZ,WAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;","names":["cn","cn"]}

package/dist/chunk-ZMA7BT2L.js

@@ -0,0 +1,223 @@
+"use client";
+
+import {
+  computePanelPosition
+} from "./chunk-NS7FKOFI.js";
+import {
+  bgSolidClass,
+  bgSubtleClass,
+  textSolidContrastClass,
+  textSubtleContrastClass
+} from "./chunk-IP2J3BWY.js";
+import {
+  skeletonFill
+} from "./chunk-54HHEXXD.js";
+
+// src/tooltip/Tooltip.tsx
+import React, { isValidElement, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { cn as cn2 } from "@mari-ui/core";
+
+// src/tooltip/utils.ts
+import { cn } from "@mari-ui/core";
+function getVariantClasses(color, variant) {
+  return variant === "soft" ? cn(bgSubtleClass[color], textSubtleContrastClass[color]) : cn(bgSolidClass[color], textSolidContrastClass[color]);
+}
+function getArrowClasses(color, variant) {
+  return variant === "soft" ? bgSubtleClass[color] : bgSolidClass[color];
+}
+
+// src/tooltip/Tooltip.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var GAP_PX = 8;
+var EDGE_PX = 8;
+var CLOSE_DELAY_MS = 120;
+var ARROW_INSET_PX = 12;
+var ARROW_SIDE_CLASS = {
+  top: "top-full -translate-x-1/2 -translate-y-1/2",
+  bottom: "bottom-full -translate-x-1/2 translate-y-1/2",
+  left: "left-full -translate-x-1/2 -translate-y-1/2",
+  right: "right-full translate-x-1/2 -translate-y-1/2"
+};
+function useVisibility(alwaysVisible, openOn, wrapperRef, bubbleRef) {
+  const timerRef = useRef(void 0);
+  const [visible, setVisible] = useState(alwaysVisible ?? false);
+  const clearTimer = () => clearTimeout(timerRef.current);
+  const open = useCallback((delay) => {
+    clearTimeout(timerRef.current);
+    if (delay <= 0) setVisible(true);
+    else timerRef.current = setTimeout(() => setVisible(true), delay);
+  }, []);
+  const close = useCallback(() => {
+    clearTimeout(timerRef.current);
+    if (!alwaysVisible) timerRef.current = setTimeout(() => setVisible(false), CLOSE_DELAY_MS);
+  }, [alwaysVisible]);
+  const closeNow = () => {
+    clearTimer();
+    if (!alwaysVisible) setVisible(false);
+  };
+  useEffect(() => () => clearTimeout(timerRef.current), []);
+  useEffect(() => {
+    if (openOn !== "click" || !visible) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (wrapperRef.current?.contains(target) || bubbleRef.current?.contains(target)) return;
+      setVisible(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [openOn, visible, wrapperRef, bubbleRef]);
+  return { visible, setVisible, open, close, closeNow, clearTimer };
+}
+function useTrackedPosition(showTooltip, wrapperRef, bubbleRef, placement) {
+  const [position, setPosition] = useState(null);
+  const updatePosition = useCallback(() => {
+    const anchor = wrapperRef.current?.getBoundingClientRect();
+    const bubble = bubbleRef.current;
+    if (!anchor || !bubble) return;
+    const offscreen = anchor.bottom < 0 || anchor.top > window.innerHeight || anchor.right < 0 || anchor.left > window.innerWidth;
+    if (offscreen) {
+      setPosition(null);
+      return;
+    }
+    const next = computePanelPosition(
+      { top: anchor.top, left: anchor.left, width: anchor.width, height: anchor.height },
+      { width: bubble.offsetWidth, height: bubble.offsetHeight },
+      placement,
+      { width: window.innerWidth, height: window.innerHeight },
+      GAP_PX,
+      EDGE_PX,
+      { inset: ARROW_INSET_PX, pointAtCenter: true }
+    );
+    const pageTop = next.top + window.scrollY;
+    const pageLeft = next.left + window.scrollX;
+    setPosition(
+      (prev) => prev && prev.top === pageTop && prev.left === pageLeft && prev.side === next.side && prev.arrowOffset === next.arrowOffset ? prev : { ...next, top: pageTop, left: pageLeft }
+    );
+  }, [placement, wrapperRef, bubbleRef]);
+  useLayoutEffect(() => {
+    if (!showTooltip) {
+      setPosition(null);
+      return;
+    }
+    let frame = 0;
+    const tick = () => {
+      updatePosition();
+      frame = requestAnimationFrame(tick);
+    };
+    tick();
+    return () => cancelAnimationFrame(frame);
+  }, [showTooltip, updatePosition]);
+  return position;
+}
+function decorateTrigger(trigger, showTooltip, tooltipId, isClick) {
+  if (!isValidElement(trigger)) return trigger;
+  const extra = {};
+  if (showTooltip) extra["aria-describedby"] = [trigger.props["aria-describedby"], tooltipId].filter(Boolean).join(" ");
+  if (isClick) extra["aria-expanded"] = showTooltip;
+  return React.cloneElement(trigger, extra);
+}
+function TooltipBubble({ bubbleRef, id, position, skeleton, content, color, variant, className, style, onMouseEnter, onMouseLeave }) {
+  const side = position?.side ?? "top";
+  const vertical = side === "top" || side === "bottom";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: bubbleRef,
+      role: "tooltip",
+      id,
+      "aria-busy": skeleton || void 0,
+      onMouseEnter,
+      onMouseLeave,
+      className: cn2(
+        // Boyutlar ant.design'ın gerçek Tooltip'inden: padding 6px 8px,
+        // radius 6px, line-height 22px. Genişlik en çok 20rem ve HİÇBİR ZAMAN
+        // ekran genişliği − 2×kenar payından fazla değil (mobilde taşmaz).
+        "absolute z-mari-tooltip w-max max-w-[min(20rem,calc(100vw-1rem))] rounded-md px-2 py-1.5 text-sm leading-[1.375rem] text-wrap",
+        // Yalnızca solma: ölçek animasyonu oku da kaydırıyordu (kullanıcı bulgusu).
+        "transition-opacity duration-150 starting:opacity-0 motion-reduce:transition-none",
+        getVariantClasses(color, variant),
+        className
+      ),
+      style: { top: position?.top ?? 0, left: position?.left ?? 0, visibility: position ? void 0 : "hidden", ...style },
+      children: [
+        skeleton ? /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-1.5 py-1", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx("span", { className: cn2("block h-2.5 w-32 rounded-sm opacity-60", skeletonFill(true)) }),
+          /* @__PURE__ */ jsx("span", { className: cn2("block h-2.5 w-20 rounded-sm opacity-60", skeletonFill(true)) })
+        ] }) : content,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn2("absolute size-2 rotate-45", ARROW_SIDE_CLASS[side], getArrowClasses(color, variant)),
+            style: vertical ? { left: position?.arrowOffset } : { top: position?.arrowOffset }
+          }
+        )
+      ]
+    }
+  );
+}
+function Tooltip({
+  content,
+  trigger,
+  placement = "top",
+  color = "neutral",
+  variant = "solid",
+  className,
+  style,
+  alwaysVisible,
+  disabled = false,
+  triggerClassName,
+  openDelay = 100,
+  openOn = "hover",
+  skeleton = false
+}) {
+  const wrapperRef = useRef(null);
+  const bubbleRef = useRef(null);
+  const { visible, setVisible, open, close, closeNow, clearTimer } = useVisibility(alwaysVisible, openOn, wrapperRef, bubbleRef);
+  const tooltipId = useId();
+  const showTooltip = (visible || Boolean(alwaysVisible)) && !disabled;
+  const position = useTrackedPosition(showTooltip, wrapperRef, bubbleRef, placement);
+  const isClick = openOn === "click";
+  const decoratedTrigger = decorateTrigger(trigger, showTooltip, tooltipId, isClick);
+  const hoverHandlers = isClick ? { onClick: () => setVisible((v) => !v) } : { onMouseEnter: () => open(openDelay), onMouseLeave: close, onFocus: () => open(0), onBlur: closeNow };
+  const bubble = showTooltip ? /* @__PURE__ */ jsx(
+    TooltipBubble,
+    {
+      bubbleRef,
+      id: tooltipId,
+      position,
+      skeleton,
+      content,
+      color,
+      variant,
+      className,
+      style,
+      onMouseEnter: isClick ? void 0 : clearTimer,
+      onMouseLeave: isClick ? void 0 : close
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: wrapperRef,
+        className: cn2("inline-block self-start", triggerClassName),
+        ...hoverHandlers,
+        onKeyDown: (event) => {
+          if (event.key === "Escape") {
+            clearTimer();
+            if (!alwaysVisible) setVisible(false);
+          }
+        },
+        children: decoratedTrigger
+      }
+    ),
+    bubble && typeof document !== "undefined" && createPortal(bubble, document.body)
+  ] });
+}
+
+export {
+  Tooltip
+};
+//# sourceMappingURL=chunk-ZMA7BT2L.js.map

package/dist/chunk-ZMA7BT2L.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tooltip/Tooltip.tsx","../src/tooltip/utils.ts"],"sourcesContent":["\"use client\";\n\nimport React, { isValidElement, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@mari-ui/core\";\nimport { computePanelPosition, type Side } from \"../lib/floating\";\nimport { skeletonFill } from \"../lib/skeleton\";\nimport type { TooltipProps } from \"./types\";\nimport { getArrowClasses, getVariantClasses } from \"./utils\";\n\nexport type { TooltipProps };\n\n/** Tetikleyiciyle balon arası (px) ve balonun ekran kenarından en az uzaklığı. */\nconst GAP_PX = 8;\nconst EDGE_PX = 8;\n/** Balondan/tetikleyiciden çıkınca kapanma gecikmesi — fare aradaki boşluğu geçebilsin. */\nconst CLOSE_DELAY_MS = 120;\n/** Ok, balonun hizalandığı kenardan bu kadar içeride durur (radius'a binmesin). */\nconst ARROW_INSET_PX = 12;\n\nconst ARROW_SIDE_CLASS: Record<Side, string> = {\n  top: \"top-full -translate-x-1/2 -translate-y-1/2\",\n  bottom: \"bottom-full -translate-x-1/2 translate-y-1/2\",\n  left: \"left-full -translate-x-1/2 -translate-y-1/2\",\n  right: \"right-full translate-x-1/2 -translate-y-1/2\",\n};\n\ninterface Position {\n  top: number;\n  left: number;\n  side: Side;\n  arrowOffset: number;\n}\n\n/**\n * Faz 15 (yeniden yazım):\n * - Konum `lib/floating`'deki `computePanelPosition` ile (Dropdown'la ORTAK):\n *   12 yerleşim, yer yoksa karşı yöne döner, ekran içinde kıstırılır. Eskiden\n *   4 sabit yön + kıstırma yoktu: mobilde 672px'e kadar genişleyen balon\n *   ekrandan taşıyor, üstteki bir tetikleyicide ekranın dışına çıkıyordu.\n * - Balonun ÜZERİNE gelinebilir (WCAG 1.4.13): fare tetikleyiciden balona\n *   geçerken kapanmaz; kısa bir kapanma gecikmesi aradaki boşluğu köprüler.\n * - Fareyle açılış `openDelay` kadar gecikir (üzerinden geçerken titremesin);\n *   odakla açılış anlık.\n *\n * Önceki kararlar korunur: `document.body`'e portal + `fixed` (kaydırılabilir\n * kapsayıcıda kırpılmaz), `role=\"tooltip\"` + tetikleyiciye `aria-describedby`,\n * Escape kapatır, sarmalayıcı `self-start` (flex'te gerilmesin).\n */\ntype ElRef = React.RefObject<HTMLSpanElement | null>;\n\n/** Açık/kapalı durumu: fare gecikmeleri (hover) ya da dışarı tıklama (click). */\nfunction useVisibility(alwaysVisible: boolean | undefined, openOn: \"hover\" | \"click\", wrapperRef: ElRef, bubbleRef: ElRef) {\n  const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const [visible, setVisible] = useState(alwaysVisible ?? false);\n\n  const clearTimer = () => clearTimeout(timerRef.current);\n  const open = useCallback((delay: number) => {\n    clearTimeout(timerRef.current);\n    if (delay <= 0) setVisible(true);\n    else timerRef.current = setTimeout(() => setVisible(true), delay);\n  }, []);\n  const close = useCallback(() => {\n    clearTimeout(timerRef.current);\n    if (!alwaysVisible) timerRef.current = setTimeout(() => setVisible(false), CLOSE_DELAY_MS);\n  }, [alwaysVisible]);\n  const closeNow = () => {\n    clearTimer();\n    if (!alwaysVisible) setVisible(false);\n  };\n\n  useEffect(() => () => clearTimeout(timerRef.current), []);\n\n  // `openOn=\"click\"`: dışarı tıklamak kapatır (tetikleyici ve balon hariç).\n  useEffect(() => {\n    if (openOn !== \"click\" || !visible) return;\n    const onPointerDown = (event: PointerEvent) => {\n      const target = event.target as Node;\n      if (wrapperRef.current?.contains(target) || bubbleRef.current?.contains(target)) return;\n      setVisible(false);\n    };\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    return () => document.removeEventListener(\"pointerdown\", onPointerDown);\n  }, [openOn, visible, wrapperRef, bubbleRef]);\n\n  return { visible, setVisible, open, close, closeNow, clearTimer };\n}\n\n/** Görünürken balonun sayfa konumunu her karede takip eder. */\nfunction useTrackedPosition(showTooltip: boolean, wrapperRef: ElRef, bubbleRef: ElRef, placement: TooltipProps[\"placement\"] & string) {\n  const [position, setPosition] = useState<Position | null>(null);\n  // Konum: balon önce görünmez çizilir, boyutu ölçülür, sonra yerleştirilir.\n  const updatePosition = useCallback(() => {\n    const anchor = wrapperRef.current?.getBoundingClientRect();\n    const bubble = bubbleRef.current;\n    if (!anchor || !bubble) return;\n    // Tetikleyici görünür alanın DIŞINDAYSA balon gizlenir. Aksi halde kıstırma\n    // onu ekran kenarına yapıştırıyor, tetikleyiciden kopuk havada asılı\n    // kalıyordu (Storybook docs'ta aşağıdaki `alwaysVisible` story'ler).\n    const offscreen = anchor.bottom < 0 || anchor.top > window.innerHeight || anchor.right < 0 || anchor.left > window.innerWidth;\n    if (offscreen) {\n      setPosition(null);\n      return;\n    }\n    const next = computePanelPosition(\n      { top: anchor.top, left: anchor.left, width: anchor.width, height: anchor.height },\n      { width: bubble.offsetWidth, height: bubble.offsetHeight },\n      placement,\n      { width: window.innerWidth, height: window.innerHeight },\n      GAP_PX,\n      EDGE_PX,\n      { inset: ARROW_INSET_PX, pointAtCenter: true }\n    );\n    // SAYFA koordinatı (`absolute`): pencere kaydırılınca balonu tarayıcı\n    // kendisi taşır. Eskiden `fixed` + her karede JS ile yeniden konum vardı —\n    // bir kare geriden geldiği için kaydırırken balonlar titriyor, komşu\n    // satırlara biniyordu (kullanıcı bulgusu, docs sayfası).\n    const pageTop = next.top + window.scrollY;\n    const pageLeft = next.left + window.scrollX;\n    setPosition((prev) =>\n      prev && prev.top === pageTop && prev.left === pageLeft && prev.side === next.side && prev.arrowOffset === next.arrowOffset\n        ? prev\n        : { ...next, top: pageTop, left: pageLeft }\n    );\n  }, [placement, wrapperRef, bubbleRef]);\n\n  useLayoutEffect(() => {\n    if (!showTooltip) {\n      setPosition(null);\n      return;\n    }\n    // Görünür olduğu sürece HER KAREDE takip: yalnızca scroll/resize dinlemek\n    // yetmiyordu — sayfa düzeni sonradan değişince (ör. Storybook docs'ta\n    // story'ler geç yerleşince) `alwaysVisible` balonlar eski koordinatta\n    // asılı kalıyordu. Konum değişmediyse state güncellenmez (render yok).\n    let frame = 0;\n    const tick = () => {\n      updatePosition();\n      frame = requestAnimationFrame(tick);\n    };\n    tick();\n    return () => cancelAnimationFrame(frame);\n  }, [showTooltip, updatePosition]);\n\n  return position;\n}\n\n/** Tetikleyiciye `aria-describedby` (açıkken) ve tıklamalı modda `aria-expanded` ekler. */\nfunction decorateTrigger(trigger: React.ReactNode, showTooltip: boolean, tooltipId: string, isClick: boolean): React.ReactNode {\n  if (!isValidElement<{ \"aria-describedby\"?: string; \"aria-expanded\"?: boolean }>(trigger)) return trigger;\n  const extra: Record<string, unknown> = {};\n  if (showTooltip) extra[\"aria-describedby\"] = [trigger.props[\"aria-describedby\"], tooltipId].filter(Boolean).join(\" \");\n  // Tıklamalı modda tetikleyici bir aç/kapa düğmesidir — durumunu duyurur.\n  if (isClick) extra[\"aria-expanded\"] = showTooltip;\n  return React.cloneElement(trigger, extra);\n}\n\ninterface TooltipBubbleProps {\n  bubbleRef: ElRef;\n  id: string;\n  position: Position | null;\n  skeleton: boolean;\n  content: React.ReactNode;\n  color: NonNullable<TooltipProps[\"color\"]>;\n  variant: NonNullable<TooltipProps[\"variant\"]>;\n  className?: string;\n  style?: React.CSSProperties;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n}\n\nfunction TooltipBubble({ bubbleRef, id, position, skeleton, content, color, variant, className, style, onMouseEnter, onMouseLeave }: Readonly<TooltipBubbleProps>) {\n  const side = position?.side ?? \"top\";\n  const vertical = side === \"top\" || side === \"bottom\";\n  return (\n    <span\n      ref={bubbleRef}\n      role=\"tooltip\"\n      id={id}\n      aria-busy={skeleton || undefined}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      className={cn(\n        // Boyutlar ant.design'ın gerçek Tooltip'inden: padding 6px 8px,\n        // radius 6px, line-height 22px. Genişlik en çok 20rem ve HİÇBİR ZAMAN\n        // ekran genişliği − 2×kenar payından fazla değil (mobilde taşmaz).\n        \"absolute z-mari-tooltip w-max max-w-[min(20rem,calc(100vw-1rem))] rounded-md px-2 py-1.5 text-sm leading-[1.375rem] text-wrap\",\n        // Yalnızca solma: ölçek animasyonu oku da kaydırıyordu (kullanıcı bulgusu).\n        \"transition-opacity duration-150 starting:opacity-0 motion-reduce:transition-none\",\n        getVariantClasses(color, variant),\n        className\n      )}\n      // Ölçülene kadar görünmez (yanlış yerde bir kare parlamasın).\n      style={{ top: position?.top ?? 0, left: position?.left ?? 0, visibility: position ? undefined : \"hidden\", ...style }}\n    >\n      {skeleton ? (\n        <span className=\"flex flex-col gap-1.5 py-1\" aria-hidden>\n          <span className={cn(\"block h-2.5 w-32 rounded-sm opacity-60\", skeletonFill(true))} />\n          <span className={cn(\"block h-2.5 w-20 rounded-sm opacity-60\", skeletonFill(true))} />\n        </span>\n      ) : (\n        content\n      )}\n      {/* Ok: balonla aynı renkte döndürülmüş kare; tetikleyicinin ortasını gösterir. */}\n      <span\n        aria-hidden\n        className={cn(\"absolute size-2 rotate-45\", ARROW_SIDE_CLASS[side], getArrowClasses(color, variant))}\n        style={vertical ? { left: position?.arrowOffset } : { top: position?.arrowOffset }}\n      />\n    </span>\n  );\n}\n\nexport function Tooltip({\n  content,\n  trigger,\n  placement = \"top\",\n  color = \"neutral\",\n  variant = \"solid\",\n  className,\n  style,\n  alwaysVisible,\n  disabled = false,\n  triggerClassName,\n  openDelay = 100,\n  openOn = \"hover\",\n  skeleton = false,\n}: Readonly<TooltipProps>) {\n  const wrapperRef = useRef<HTMLSpanElement>(null);\n  const bubbleRef = useRef<HTMLSpanElement>(null);\n  const { visible, setVisible, open, close, closeNow, clearTimer } = useVisibility(alwaysVisible, openOn, wrapperRef, bubbleRef);\n  const tooltipId = useId();\n  const showTooltip = (visible || Boolean(alwaysVisible)) && !disabled;\n  const position = useTrackedPosition(showTooltip, wrapperRef, bubbleRef, placement);\n\n  const isClick = openOn === \"click\";\n  const decoratedTrigger = decorateTrigger(trigger, showTooltip, tooltipId, isClick);\n  const hoverHandlers = isClick\n    ? { onClick: () => setVisible((v) => !v) }\n    : { onMouseEnter: () => open(openDelay), onMouseLeave: close, onFocus: () => open(0), onBlur: closeNow };\n\n  const bubble = showTooltip ? (\n    <TooltipBubble\n      bubbleRef={bubbleRef}\n      id={tooltipId}\n      position={position}\n      skeleton={skeleton}\n      content={content}\n      color={color}\n      variant={variant}\n      className={className}\n      style={style}\n      // Fare takibi yalnızca \"üzerine gelinebilirlik\" (WCAG 1.4.13) için; tıklamalı modda yok.\n      onMouseEnter={isClick ? undefined : clearTimer}\n      onMouseLeave={isClick ? undefined : close}\n    />\n  ) : null;\n\n  return (\n    <>\n      {/* Sarmalayıcı KENDİSİ interaktif değil — hover/focus bölgesi. Gerçek\n          etkileşim `trigger`da; `onKeyDown` yalnızca Escape için (odak\n          trigger'da, olay buraya bubble eder). */}\n      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n      <span\n        ref={wrapperRef}\n        className={cn(\"inline-block self-start\", triggerClassName)}\n        {...hoverHandlers}\n        onKeyDown={(event) => {\n          if (event.key === \"Escape\") {\n            clearTimer();\n            if (!alwaysVisible) setVisible(false);\n          }\n        }}\n      >\n        {decoratedTrigger}\n      </span>\n      {bubble && typeof document !== \"undefined\" && createPortal(bubble, document.body)}\n    </>\n  );\n}\n","import { cn, type ColorRole } from \"@mari-ui/core\";\nimport { bgSolidClass, bgSubtleClass, textSolidContrastClass, textSubtleContrastClass } from \"../lib/colorClasses\";\nimport type { TooltipVariant } from \"./types\";\n\n/**\n * Balon STATİK: dolgu + üzerindeki kontrast metin, hover durumu YOK. Eskiden\n * butonlar için olan renk varyantı (`resolveColorVariant`) kullanılıyordu —\n * `hover:` arka planı taşıyordu; fare balonun üzerine gelince balon koyulaşıyor,\n * ayrı bir öğe olan ok ise eski renkte kalıyordu (kullanıcı bulgusu).\n */\nexport function getVariantClasses(color: ColorRole, variant: TooltipVariant): string {\n  return variant === \"soft\" ? cn(bgSubtleClass[color], textSubtleContrastClass[color]) : cn(bgSolidClass[color], textSolidContrastClass[color]);\n}\n\n/** Ok balonun dolgusuyla birebir aynı sınıf. */\nexport function getArrowClasses(color: ColorRole, variant: TooltipVariant): string {\n  return variant === \"soft\" ? bgSubtleClass[color] : bgSolidClass[color];\n}\n"],"mappings":"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","names":["cn","cn"]}

package/dist/chunk-ZXYQ2ZPR.js

@@ -0,0 +1,79 @@
+import {
+  bgSolidClass,
+  textSolidContrastClass
+} from "./chunk-IP2J3BWY.js";
+import {
+  skeletonFill
+} from "./chunk-54HHEXXD.js";
+
+// src/badge/Badge.tsx
+import { cn } from "@mari-ui/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var BUBBLE_SIZE = { sm: "h-4 min-w-4 px-1 text-[0.625rem]", md: "h-5 min-w-5 px-1.5 text-xs" };
+var DOT_SIZE = { sm: "size-1.5", md: "size-2" };
+var toLength = (v) => typeof v === "number" ? `${v}px` : v;
+function displayCount(count, overflowCount) {
+  if (count == null || count === "") return null;
+  if (typeof count === "number") return count > overflowCount ? `${overflowCount}+` : String(count);
+  return count;
+}
+function Badge({
+  count,
+  overflowCount = 99,
+  showZero = false,
+  dot = false,
+  color = "error",
+  size = "md",
+  label,
+  offset,
+  children,
+  className,
+  skeleton = false
+}) {
+  const text = displayCount(count, overflowCount);
+  const hidden = !dot && (text === null || count === 0 && !showZero);
+  const standalone = children === void 0;
+  const bubble = hidden ? null : /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-badge": "",
+      className: cn(
+        "inline-flex shrink-0 items-center justify-center rounded-full font-semibold leading-none tabular-nums whitespace-nowrap",
+        dot ? DOT_SIZE[size] : BUBBLE_SIZE[size],
+        skeleton ? cn(skeletonFill(true), "text-transparent") : cn(bgSolidClass[color], textSolidContrastClass[color]),
+        !standalone && "absolute right-0 top-0 z-10 translate-x-1/2 -translate-y-1/2 ring-2 ring-mari-surface"
+      ),
+      style: offset ? { marginRight: `calc(${toLength(offset[0])} * -1)`, marginTop: toLength(offset[1]) } : void 0,
+      children: dot ? null : text
+    }
+  );
+  const srText = label && !hidden && !skeleton ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }) : null;
+  if (standalone) {
+    return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex", className), children: [
+      bubble,
+      srText
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex", className), children: [
+    children,
+    bubble,
+    srText
+  ] });
+}
+var STATUS_DOT = bgSolidClass;
+function StatusBadge({ color = "neutral", children, processing = false, className, skeleton = false }) {
+  return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex items-center gap-2 text-sm text-mari-foreground", className), "aria-hidden": skeleton || void 0, children: [
+    /* @__PURE__ */ jsxs("span", { className: "relative flex size-2 shrink-0", children: [
+      processing && !skeleton && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("absolute inset-0 animate-ping rounded-full opacity-60 motion-reduce:hidden", STATUS_DOT[color]) }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("relative size-2 rounded-full", skeleton ? skeletonFill(true) : STATUS_DOT[color]) })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: cn(skeleton && cn("rounded-sm text-transparent", skeletonFill(true))), children })
+  ] });
+}
+
+export {
+  Badge,
+  StatusBadge
+};
+//# sourceMappingURL=chunk-ZXYQ2ZPR.js.map