@mari-ui/components 0.0.0-stage → 0.1.0

package/dist/tabs.js

@@ -0,0 +1,446 @@
+"use client";
+
+import {
+  bgSolidClass,
+  bgSubtleClass,
+  textClass,
+  textSubtleContrastClass
+} from "./chunk-IP2J3BWY.js";
+import {
+  skeletonFill
+} from "./chunk-54HHEXXD.js";
+
+// src/tabs/Tabs.tsx
+import { useEffect, useRef, useState as useState2 } from "react";
+import { cn } from "@mari-ui/core";
+
+// src/tabs/useTabs.tsx
+import { createContext, useCallback, useContext, useId, useMemo, useState } from "react";
+import { useControllableState } from "@mari-ui/core";
+import { jsx } from "react/jsx-runtime";
+var TabsContext = createContext(null);
+function TabsProvider({
+  defaultActiveTab = "",
+  activeTab,
+  onChange,
+  color = "primary",
+  variant = "line",
+  size = "md",
+  orientation = "horizontal",
+  fill = false,
+  align = "start",
+  keepMounted = false,
+  activationMode = "automatic",
+  skeleton = false,
+  children
+}) {
+  const [resolvedActiveTab, setActiveTab] = useControllableState({
+    value: activeTab,
+    defaultValue: defaultActiveTab,
+    onChange
+  });
+  const baseId = useId();
+  const isControlled = activeTab !== void 0;
+  const [mountedPanels, setMountedPanels] = useState(() => /* @__PURE__ */ new Set());
+  const registerPanel = useCallback((panel) => {
+    setMountedPanels((prev) => prev.has(panel) ? prev : new Set(prev).add(panel));
+    return () => setMountedPanels((prev) => {
+      const next = new Set(prev);
+      next.delete(panel);
+      return next;
+    });
+  }, []);
+  const value = useMemo(
+    () => ({
+      activeTab: resolvedActiveTab,
+      setActiveTab,
+      isControlled,
+      baseId,
+      color,
+      variant,
+      size,
+      orientation,
+      fill,
+      align,
+      keepMounted,
+      activationMode,
+      skeleton,
+      mountedPanels,
+      registerPanel
+    }),
+    [resolvedActiveTab, setActiveTab, isControlled, baseId, color, variant, size, orientation, fill, align, keepMounted, activationMode, skeleton, mountedPanels, registerPanel]
+  );
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value, children });
+}
+function useTabs() {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error("useTabs, <Tabs> i\xE7inde kullan\u0131lmal\u0131.");
+  }
+  return context;
+}
+function getTabId(baseId, value, kind) {
+  return `${baseId}-${kind}-${value.replace(/\s+/g, "-")}`;
+}
+
+// src/tabs/Tabs.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function useContainerWidth(enabled) {
+  const ref = useRef(null);
+  const [width, setWidth] = useState2();
+  useEffect(() => {
+    const el = ref.current;
+    if (!enabled || !el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(([entry]) => entry && setWidth(entry.contentRect.width));
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [enabled]);
+  return [ref, width];
+}
+function Tabs({ className, children, orientation = "horizontal", responsive = 640, ...providerProps }) {
+  const watch = orientation === "vertical" && responsive !== false;
+  const [rootRef, width] = useContainerWidth(watch);
+  const narrow = watch && width !== void 0 && width < responsive;
+  const effective = narrow ? "horizontal" : orientation;
+  const vertical = effective === "vertical";
+  return /* @__PURE__ */ jsx2(TabsProvider, { ...providerProps, orientation: effective, children: /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref: rootRef,
+      "aria-busy": providerProps.skeleton || void 0,
+      "data-orientation": effective,
+      className: cn("flex min-w-0", vertical ? "flex-row gap-6" : "flex-col", className),
+      children
+    }
+  ) });
+}
+
+// src/tabs/_components/TabsList.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useLayoutEffect, useRef as useRef2, useState as useState3 } from "react";
+import { cn as cn3 } from "@mari-ui/core";
+
+// src/tabs/utils.ts
+import { cn as cn2 } from "@mari-ui/core";
+var lineSize = {
+  sm: "py-2 text-sm",
+  md: "py-3 text-sm",
+  lg: "py-4 text-base"
+};
+var lineVerticalSize = {
+  sm: "px-4 py-1.5 text-sm",
+  md: "px-5 py-2 text-sm",
+  lg: "px-6 py-2.5 text-base"
+};
+var cardSize = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-sm",
+  lg: "px-5 py-2.5 text-base"
+};
+var pillsSize = {
+  sm: "px-2.5 py-1 text-xs",
+  md: "px-3 py-1.5 text-sm",
+  lg: "px-4 py-2 text-base"
+};
+var lineGap = { sm: "gap-6", md: "gap-8", lg: "gap-8" };
+function getListClass(variant, orientation, size, fill) {
+  const vertical = orientation === "vertical";
+  return cn2(
+    "relative flex",
+    vertical ? "flex-col items-stretch" : "items-center",
+    fill && !vertical && "w-full",
+    variant === "line" && (vertical ? "gap-1" : lineGap[size]),
+    variant === "card" && "gap-0.5",
+    variant === "pills" && "gap-1 rounded-lg bg-mari-surface-alt p-1"
+  );
+}
+function getBarClass(variant, orientation) {
+  if (variant === "pills") return "";
+  return orientation === "vertical" ? "shadow-[inset_-1px_0_0_var(--color-mari-border)]" : "shadow-[inset_0_-1px_0_var(--color-mari-border)]";
+}
+function triggerJustify(vertical, fill) {
+  if (vertical) return "justify-start";
+  return fill ? "flex-1 justify-center" : "justify-center";
+}
+function getTriggerClass(opts) {
+  const { active, variant, orientation, size, color, fill } = opts;
+  const vertical = orientation === "vertical";
+  const base = cn2(
+    "relative inline-flex shrink-0 select-none items-center gap-2 whitespace-nowrap font-medium",
+    "transition-colors duration-150 motion-reduce:transition-none",
+    "disabled:cursor-not-allowed disabled:opacity-40",
+    "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-mari-ring",
+    triggerJustify(vertical, fill)
+  );
+  if (variant === "card") {
+    return cn2(
+      base,
+      cardSize[size],
+      "border border-mari-border",
+      vertical ? "rounded-l-lg border-r-0" : "rounded-t-lg border-b-0",
+      active ? cn2("bg-mari-surface", textClass[color], vertical && "-mr-px") : "bg-mari-surface-alt text-mari-muted enabled:hover:text-mari-foreground"
+    );
+  }
+  if (variant === "pills") {
+    return cn2(
+      base,
+      pillsSize[size],
+      "z-10 rounded-md",
+      active ? "text-mari-foreground" : "text-mari-muted enabled:hover:text-mari-foreground"
+    );
+  }
+  return cn2(
+    base,
+    vertical ? lineVerticalSize[size] : lineSize[size],
+    vertical && "rounded-l-md",
+    active ? textClass[color] : "text-mari-muted enabled:hover:text-mari-foreground"
+  );
+}
+function getIndicatorClass(variant, orientation, color) {
+  if (variant === "pills") return "rounded-md bg-mari-surface shadow-mari-sm ring-1 ring-mari-border/60";
+  if (variant === "card") return "hidden";
+  return cn2(bgSolidClass[color], orientation === "vertical" ? "right-0 w-0.5" : "bottom-0 h-0.5", "rounded-full");
+}
+function getCountClass(active, color) {
+  return cn2(
+    "inline-flex min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-medium tabular-nums leading-5",
+    active ? cn2(bgSubtleClass[color], textSubtleContrastClass[color]) : "bg-mari-neutral-subtle text-mari-muted"
+  );
+}
+
+// src/tabs/_components/TabsList.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect2 : useLayoutEffect;
+var FADE = 24;
+function getEnabledTabs(list) {
+  return Array.from(list.querySelectorAll('[role="tab"]:not(:disabled)'));
+}
+function getActiveTab(list) {
+  return list.querySelector('[role="tab"][aria-selected="true"]');
+}
+function measureTab(tab, vertical) {
+  if (vertical) return { offset: tab.offsetTop, length: tab.offsetHeight, crossOffset: tab.offsetLeft, cross: tab.offsetWidth };
+  return { offset: tab.offsetLeft, length: tab.offsetWidth, crossOffset: tab.offsetTop, cross: tab.offsetHeight };
+}
+function getIndicatorStyle(rect, vertical, pills) {
+  if (!rect) return void 0;
+  const main = vertical ? { top: rect.offset, height: rect.length } : { left: rect.offset, width: rect.length };
+  if (!pills) return main;
+  const cross = vertical ? { left: rect.crossOffset, width: rect.cross } : { top: rect.crossOffset, height: rect.cross };
+  return { ...main, ...cross };
+}
+function getMaskImage(fade) {
+  if (!fade.start && !fade.end) return void 0;
+  const from = fade.start ? "transparent" : "#000";
+  const to = fade.end ? "transparent" : "#000";
+  return `linear-gradient(to right, ${from}, #000 ${FADE}px, #000 calc(100% - ${FADE}px), ${to})`;
+}
+function scrollIntoStrip(scroller, tab) {
+  const start = tab.offsetLeft - FADE;
+  const end = tab.offsetLeft + tab.offsetWidth + FADE;
+  if (start < scroller.scrollLeft) scroller.scrollLeft = start;
+  else if (end > scroller.scrollLeft + scroller.clientWidth) scroller.scrollLeft = end - scroller.clientWidth;
+}
+var navKeys = {
+  horizontal: { prev: "ArrowLeft", next: "ArrowRight" },
+  vertical: { prev: "ArrowUp", next: "ArrowDown" }
+};
+function getKeyTarget(key, tabs, index, vertical) {
+  const keys = navKeys[vertical ? "vertical" : "horizontal"];
+  switch (key) {
+    case keys.prev:
+      return tabs[(index - 1 + tabs.length) % tabs.length];
+    case keys.next:
+      return tabs[(index + 1) % tabs.length];
+    case "Home":
+      return tabs[0];
+    case "End":
+      return tabs[tabs.length - 1];
+    default:
+      return void 0;
+  }
+}
+function TabsList({ children, extra, className, "aria-label": ariaLabel }) {
+  const { activeTab, setActiveTab, isControlled, variant, orientation, size, fill, align, color, activationMode, skeleton } = useTabs();
+  const vertical = orientation === "vertical";
+  const scrollerRef = useRef2(null);
+  const listRef = useRef2(null);
+  const [indicator, setIndicator] = useState3(null);
+  const [animate, setAnimate] = useState3(false);
+  const [fade, setFade] = useState3({ start: false, end: false });
+  const measure = useCallback2(() => {
+    const list = listRef.current;
+    const scroller = scrollerRef.current;
+    if (!list || !scroller) return;
+    const active = getActiveTab(list);
+    setIndicator(active ? measureTab(active, vertical) : null);
+    if (!vertical) {
+      const { scrollLeft, scrollWidth, clientWidth } = scroller;
+      setFade({ start: scrollLeft > 1, end: scrollLeft + clientWidth < scrollWidth - 1 });
+    }
+  }, [vertical]);
+  useIsomorphicLayoutEffect(() => {
+    measure();
+    const active = listRef.current && getActiveTab(listRef.current);
+    if (!vertical && scrollerRef.current && active) scrollIntoStrip(scrollerRef.current, active);
+  }, [activeTab, measure, variant, size, children]);
+  const layoutKey = `${orientation}:${variant}`;
+  const prevLayoutKey = useRef2(layoutKey);
+  useIsomorphicLayoutEffect(() => {
+    if (prevLayoutKey.current !== layoutKey) {
+      prevLayoutKey.current = layoutKey;
+      setAnimate(false);
+    }
+  }, [layoutKey]);
+  useEffect2(() => {
+    if (indicator && !animate) {
+      const id = requestAnimationFrame(() => setAnimate(true));
+      return () => cancelAnimationFrame(id);
+    }
+  }, [indicator, animate]);
+  useEffect2(() => {
+    const list = listRef.current;
+    const scroller = scrollerRef.current;
+    if (!list || !scroller || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => measure());
+    observer.observe(list);
+    observer.observe(scroller);
+    return () => observer.disconnect();
+  }, [measure]);
+  useIsomorphicLayoutEffect(() => {
+    const list = listRef.current;
+    if (!list || isControlled || getActiveTab(list)) return;
+    const first = getEnabledTabs(list)[0];
+    if (first?.dataset.value) setActiveTab(first.dataset.value);
+  }, [activeTab, isControlled]);
+  const handleKeyDown = (event) => {
+    const list = listRef.current;
+    if (!list) return;
+    const tabs = getEnabledTabs(list);
+    const index = tabs.indexOf(document.activeElement);
+    if (index === -1) return;
+    const target = getKeyTarget(event.key, tabs, index, vertical);
+    if (!target) return;
+    event.preventDefault();
+    target.focus();
+    if (activationMode === "automatic" && target.dataset.value) setActiveTab(target.dataset.value);
+  };
+  const maskImage = getMaskImage(fade);
+  const indicatorStyle = getIndicatorStyle(indicator, vertical, variant === "pills");
+  return /* @__PURE__ */ jsxs("div", { "aria-hidden": skeleton || void 0, className: cn3("flex min-w-0", vertical ? "shrink-0 flex-col" : "items-end", getBarClass(variant, orientation), className), children: [
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        ref: scrollerRef,
+        onScroll: measure,
+        className: cn3(
+          "flex min-w-0",
+          vertical ? "flex-col" : "flex-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+          variant === "pills" && !vertical && "py-0.5"
+        ),
+        style: maskImage ? { maskImage, WebkitMaskImage: maskImage } : void 0,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: listRef,
+            role: "tablist",
+            "aria-label": ariaLabel,
+            "aria-orientation": orientation,
+            onKeyDown: handleKeyDown,
+            className: cn3(getListClass(variant, orientation, size, fill), align === "center" && !vertical && "mx-auto"),
+            children: [
+              children,
+              /* @__PURE__ */ jsx3(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: cn3(
+                    "pointer-events-none absolute",
+                    getIndicatorClass(variant, orientation, color),
+                    animate && "transition-[left,top,width,height] duration-300 ease-out motion-reduce:transition-none",
+                    // İskelette aktif sekme henüz anlamlı değil — gösterge gizli.
+                    (!indicator || skeleton) && "opacity-0"
+                  ),
+                  style: indicatorStyle
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    extra && /* @__PURE__ */ jsx3("div", { className: cn3("shrink-0", vertical ? "mt-4" : "ml-4 self-center"), children: extra })
+  ] });
+}
+
+// src/tabs/_components/TabsTrigger.tsx
+import { forwardRef } from "react";
+import { cn as cn4 } from "@mari-ui/core";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var skeletonTextClass = cn4("rounded-sm text-transparent", skeletonFill(true));
+var TabsTrigger = forwardRef(({ children, value, icon, count, disabled, className }, ref) => {
+  const { activeTab, setActiveTab, baseId, color, variant, orientation, size, fill, skeleton, mountedPanels } = useTabs();
+  const active = activeTab === value;
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "tab",
+      id: getTabId(baseId, value, "tab"),
+      "aria-selected": active,
+      "aria-controls": mountedPanels.has(value) ? getTabId(baseId, value, "panel") : void 0,
+      tabIndex: active && !skeleton ? 0 : -1,
+      disabled,
+      "data-value": value,
+      "data-state": active ? "active" : "inactive",
+      onClick: () => !skeleton && setActiveTab(value),
+      className: cn4(getTriggerClass({ active, variant, orientation, size, color, fill }), skeleton && "pointer-events-none", className),
+      children: [
+        icon && /* @__PURE__ */ jsx4("span", { "aria-hidden": true, className: cn4("inline-flex shrink-0 [&>svg]:size-4", skeleton && cn4("rounded-sm [&>svg]:invisible", skeletonFill(true))), children: icon }),
+        /* @__PURE__ */ jsx4("span", { className: cn4(skeleton && skeletonTextClass), children }),
+        count !== void 0 && /* @__PURE__ */ jsx4("span", { className: cn4(getCountClass(active, color), skeleton && skeletonTextClass), children: count })
+      ]
+    }
+  );
+});
+TabsTrigger.displayName = "TabsTrigger";
+
+// src/tabs/_components/TabsContent.tsx
+import { useEffect as useEffect3 } from "react";
+import { cn as cn5 } from "@mari-ui/core";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function TabsContent({ children, value, forceMount = false, className }) {
+  const { activeTab, baseId, keepMounted, orientation, skeleton, registerPanel } = useTabs();
+  const active = activeTab === value;
+  const mounted = active || keepMounted || forceMount;
+  useEffect3(() => mounted ? registerPanel(value) : void 0, [mounted, value, registerPanel]);
+  if (!mounted) return null;
+  const body = skeleton ? /* @__PURE__ */ jsxs3("div", { "aria-hidden": true, className: "relative min-h-5", children: [
+    /* @__PURE__ */ jsx5("div", { className: "invisible", children }),
+    /* @__PURE__ */ jsx5("span", { className: "absolute inset-0 flex flex-col gap-2.5 overflow-hidden pt-1", children: ["w-full", "w-11/12", "w-3/5"].map((width) => /* @__PURE__ */ jsx5("span", { className: cn5("block h-3 shrink-0 rounded-sm", width, skeletonFill(true)) }, width)) })
+  ] }) : children;
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      role: "tabpanel",
+      id: getTabId(baseId, value, "panel"),
+      "aria-labelledby": getTabId(baseId, value, "tab"),
+      tabIndex: skeleton ? -1 : 0,
+      hidden: !active,
+      "data-value": value,
+      className: cn5(
+        "rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring",
+        orientation === "vertical" ? "min-w-0 flex-1" : "pt-4",
+        className
+      ),
+      children: body
+    }
+  );
+}
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+};
+//# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tabs/Tabs.tsx","../src/tabs/useTabs.tsx","../src/tabs/_components/TabsList.tsx","../src/tabs/utils.ts","../src/tabs/_components/TabsTrigger.tsx","../src/tabs/_components/TabsContent.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { cn } from \"@mari-ui/core\";\nimport type { TabsProps } from \"./types\";\nimport { TabsProvider } from \"./useTabs\";\n\nexport type { TabsProps };\n\n/** Kapsayıcı genişliği — dikey Tabs'ın dar ekranda yataya dönmesi için. SSR'da `undefined`. */\nfunction useContainerWidth(enabled: boolean) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState<number>();\n  useEffect(() => {\n    const el = ref.current;\n    if (!enabled || !el || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(([entry]) => entry && setWidth(entry.contentRect.width));\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [enabled]);\n  return [ref, width] as const;\n}\n\n/**\n * Compound API: `<Tabs><TabsList><TabsTrigger/></TabsList><TabsContent/></Tabs>`.\n *\n * Faz 13.6 — yapı ant.design Tabs'tan, görünüm kendi token'larımızdan:\n * `line` / `card` / `pills`, üç boyut, dikey yön (dar kapsayıcıda yataya\n * döner), `fill`, `align`, `keepMounted`, WAI-ARIA ok tuşu gezinmesi, taşan\n * sekmelerde yatay kaydırma. Bkz. `_components/TabsList.tsx`.\n */\nexport function Tabs({ className, children, orientation = \"horizontal\", responsive = 640, ...providerProps }: Readonly<TabsProps>) {\n  const watch = orientation === \"vertical\" && responsive !== false;\n  const [rootRef, width] = useContainerWidth(watch);\n  const narrow = watch && width !== undefined && width < (responsive as number);\n  const effective = narrow ? \"horizontal\" : orientation;\n  const vertical = effective === \"vertical\";\n\n  return (\n    <TabsProvider {...providerProps} orientation={effective}>\n      <div\n        ref={rootRef}\n        aria-busy={providerProps.skeleton || undefined}\n        data-orientation={effective}\n        className={cn(\"flex min-w-0\", vertical ? \"flex-row gap-6\" : \"flex-col\", className)}\n      >\n        {children}\n      </div>\n    </TabsProvider>\n  );\n}\n","\"use client\";\n\nimport React, { createContext, useCallback, useContext, useId, useMemo, useState } from \"react\";\nimport { useControllableState } from \"@mari-ui/core\";\nimport type { TabsContextType, TabsProps } from \"./types\";\n\nexport const TabsContext = createContext<TabsContextType | null>(null);\n\ntype TabsProviderProps = Omit<TabsProps, \"className\" | \"responsive\">;\n\nexport function TabsProvider({\n  defaultActiveTab = \"\",\n  activeTab,\n  onChange,\n  color = \"primary\",\n  variant = \"line\",\n  size = \"md\",\n  orientation = \"horizontal\",\n  fill = false,\n  align = \"start\",\n  keepMounted = false,\n  activationMode = \"automatic\",\n  skeleton = false,\n  children,\n}: Readonly<TabsProviderProps>) {\n  const [resolvedActiveTab, setActiveTab] = useControllableState<string>({\n    value: activeTab,\n    defaultValue: defaultActiveTab,\n    onChange,\n  });\n  const baseId = useId();\n  const isControlled = activeTab !== undefined;\n\n  // `aria-controls` var olmayan bir id'yi gösteremez (axe aria-valid-attr-value):\n  // Tabs yalnız filtre çubuğu olarak (paneli olmadan) kullanılabilir, pasif\n  // paneller de `keepMounted` yoksa DOM'da değildir.\n  const [mountedPanels, setMountedPanels] = useState<ReadonlySet<string>>(() => new Set());\n  const registerPanel = useCallback((panel: string) => {\n    setMountedPanels((prev) => (prev.has(panel) ? prev : new Set(prev).add(panel)));\n    return () =>\n      setMountedPanels((prev) => {\n        const next = new Set(prev);\n        next.delete(panel);\n        return next;\n      });\n  }, []);\n\n  const value = useMemo<TabsContextType>(\n    () => ({\n      activeTab: resolvedActiveTab,\n      setActiveTab,\n      isControlled,\n      baseId,\n      color,\n      variant,\n      size,\n      orientation,\n      fill,\n      align,\n      keepMounted,\n      activationMode,\n      skeleton,\n      mountedPanels,\n      registerPanel,\n    }),\n    [resolvedActiveTab, setActiveTab, isControlled, baseId, color, variant, size, orientation, fill, align, keepMounted, activationMode, skeleton, mountedPanels, registerPanel]\n  );\n\n  return <TabsContext.Provider value={value}>{children}</TabsContext.Provider>;\n}\n\nexport function useTabs(): TabsContextType {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error(\"useTabs, <Tabs> içinde kullanılmalı.\");\n  }\n  return context;\n}\n\n/** `value` → DOM id. Değerdeki boşluk vb. id'yi bozmasın. */\nexport function getTabId(baseId: string, value: string, kind: \"tab\" | \"panel\"): string {\n  return `${baseId}-${kind}-${value.replace(/\\s+/g, \"-\")}`;\n}\n","\"use client\";\n\nimport React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { cn } from \"@mari-ui/core\";\nimport { useTabs } from \"../useTabs\";\nimport { getBarClass, getIndicatorClass, getListClass } from \"../utils\";\nimport type { TabsListProps } from \"../types\";\n\n// SSR'da useLayoutEffect uyarı verir; tarayıcıda ölçümü boyamadan önce yap.\nconst useIsomorphicLayoutEffect = typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\nconst FADE = 24;\n\nfunction getEnabledTabs(list: HTMLElement): HTMLButtonElement[] {\n  return Array.from(list.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]:not(:disabled)'));\n}\n\nfunction getActiveTab(list: HTMLElement): HTMLElement | null {\n  return list.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]');\n}\n\n/** Ana eksen (offset/length) + çapraz eksen (pills zemini için). */\ninterface IndicatorRect {\n  offset: number;\n  length: number;\n  crossOffset: number;\n  cross: number;\n}\n\nfunction measureTab(tab: HTMLElement, vertical: boolean): IndicatorRect {\n  if (vertical) return { offset: tab.offsetTop, length: tab.offsetHeight, crossOffset: tab.offsetLeft, cross: tab.offsetWidth };\n  return { offset: tab.offsetLeft, length: tab.offsetWidth, crossOffset: tab.offsetTop, cross: tab.offsetHeight };\n}\n\nfunction getIndicatorStyle(rect: IndicatorRect | null, vertical: boolean, pills: boolean): React.CSSProperties | undefined {\n  if (!rect) return undefined;\n  const main = vertical ? { top: rect.offset, height: rect.length } : { left: rect.offset, width: rect.length };\n  if (!pills) return main;\n  const cross = vertical ? { left: rect.crossOffset, width: rect.cross } : { top: rect.crossOffset, height: rect.cross };\n  return { ...main, ...cross };\n}\n\n/** Kaydırılabilir yönlerde kenarı soldurur. */\nfunction getMaskImage(fade: { start: boolean; end: boolean }): string | undefined {\n  if (!fade.start && !fade.end) return undefined;\n  const from = fade.start ? \"transparent\" : \"#000\";\n  const to = fade.end ? \"transparent\" : \"#000\";\n  return `linear-gradient(to right, ${from}, #000 ${FADE}px, #000 calc(100% - ${FADE}px), ${to})`;\n}\n\n/** Şeridi (sayfayı değil) aktif sekme görünecek kadar kaydırır. */\nfunction scrollIntoStrip(scroller: HTMLElement, tab: HTMLElement) {\n  const start = tab.offsetLeft - FADE;\n  const end = tab.offsetLeft + tab.offsetWidth + FADE;\n  if (start < scroller.scrollLeft) scroller.scrollLeft = start;\n  else if (end > scroller.scrollLeft + scroller.clientWidth) scroller.scrollLeft = end - scroller.clientWidth;\n}\n\nconst navKeys = {\n  horizontal: { prev: \"ArrowLeft\", next: \"ArrowRight\" },\n  vertical: { prev: \"ArrowUp\", next: \"ArrowDown\" },\n} as const;\n\n/** Klavye tuşuna göre odaklanacak sekme (döngüsel). */\nfunction getKeyTarget(key: string, tabs: HTMLButtonElement[], index: number, vertical: boolean): HTMLButtonElement | undefined {\n  const keys = navKeys[vertical ? \"vertical\" : \"horizontal\"];\n  switch (key) {\n    case keys.prev:\n      return tabs[(index - 1 + tabs.length) % tabs.length];\n    case keys.next:\n      return tabs[(index + 1) % tabs.length];\n    case \"Home\":\n      return tabs[0];\n    case \"End\":\n      return tabs[tabs.length - 1];\n    default:\n      return undefined;\n  }\n}\n\n/**\n * Eski sürümdeki sorunlar (Faz 13.6'da giderildi):\n * - Gösterge sadece `activeTab` değişince ölçülüyordu — pencere/yazı tipi\n *   yüklenince yanlış yerde kalıyordu. Artık ResizeObserver ile.\n * - Taşan sekmeler sayfayı yatayda taşırıyordu (mobilde son sekme kartın\n *   dışına çıkıyordu). Artık kaydırılabilir şerit + kenar solması, aktif\n *   sekme görünür alana kaydırılıyor.\n * - Ok tuşu gezinmesi yoktu; her sekme ayrı bir Tab durağıydı. Artık\n *   WAI-ARIA Tabs deseni: roving tabindex, ←/→ (dikeyde ↑/↓), Home/End.\n * - `cloneElement` + ref dizisi ile sekme bulunuyordu (sarmalanmış bir\n *   TabsTrigger'ı kaçırıyordu). Artık DOM'dan `[aria-selected=true]`.\n */\nexport function TabsList({ children, extra, className, \"aria-label\": ariaLabel }: Readonly<TabsListProps>) {\n  const { activeTab, setActiveTab, isControlled, variant, orientation, size, fill, align, color, activationMode, skeleton } = useTabs();\n  const vertical = orientation === \"vertical\";\n\n  const scrollerRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const [indicator, setIndicator] = useState<IndicatorRect | null>(null);\n  const [animate, setAnimate] = useState(false);\n  const [fade, setFade] = useState({ start: false, end: false });\n\n  const measure = useCallback(() => {\n    const list = listRef.current;\n    const scroller = scrollerRef.current;\n    if (!list || !scroller) return;\n\n    const active = getActiveTab(list);\n    setIndicator(active ? measureTab(active, vertical) : null);\n\n    if (!vertical) {\n      const { scrollLeft, scrollWidth, clientWidth } = scroller;\n      setFade({ start: scrollLeft > 1, end: scrollLeft + clientWidth < scrollWidth - 1 });\n    }\n  }, [vertical]);\n\n  // Aktif sekme değişince: ölç + görünür alana kaydır (sayfayı değil, sadece şeridi).\n  useIsomorphicLayoutEffect(() => {\n    measure();\n    const active = listRef.current && getActiveTab(listRef.current);\n    if (!vertical && scrollerRef.current && active) scrollIntoStrip(scrollerRef.current, active);\n  }, [activeTab, measure, variant, size, children]);\n\n  // Yön/varyant değişince (ör. dikey Tabs dar ekranda yataya döndü) geçişi\n  // kapat: gösterge dikey çubuktan yatay çizgiye 300ms boyunca MORFLANIYOR,\n  // ekranda bir leke gibi görünüyordu. Yeni yerine anında otursun.\n  const layoutKey = `${orientation}:${variant}`;\n  const prevLayoutKey = useRef(layoutKey);\n  useIsomorphicLayoutEffect(() => {\n    if (prevLayoutKey.current !== layoutKey) {\n      prevLayoutKey.current = layoutKey;\n      setAnimate(false);\n    }\n  }, [layoutKey]);\n\n  // İlk ölçümden SONRA geçişi aç — gösterge 0'dan kayarak gelmesin.\n  useEffect(() => {\n    if (indicator && !animate) {\n      const id = requestAnimationFrame(() => setAnimate(true));\n      return () => cancelAnimationFrame(id);\n    }\n  }, [indicator, animate]);\n\n  // Kapsayıcı/sekme boyutu değişince (pencere, yazı tipi yüklemesi) yeniden ölç.\n  useEffect(() => {\n    const list = listRef.current;\n    const scroller = scrollerRef.current;\n    if (!list || !scroller || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => measure());\n    observer.observe(list);\n    observer.observe(scroller);\n    return () => observer.disconnect();\n  }, [measure]);\n\n  // Uncontrolled ve hiçbir sekme aktif değilse (ör. defaultActiveTab\n  // verilmemiş) ilk etkin sekmeyi seç — ant.design ile aynı. Controlled\n  // modda tüketicinin değerine dokunmuyoruz.\n  useIsomorphicLayoutEffect(() => {\n    const list = listRef.current;\n    if (!list || isControlled || getActiveTab(list)) return;\n    const first = getEnabledTabs(list)[0];\n    if (first?.dataset.value) setActiveTab(first.dataset.value);\n  }, [activeTab, isControlled]);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const list = listRef.current;\n    if (!list) return;\n    const tabs = getEnabledTabs(list);\n    const index = tabs.indexOf(document.activeElement as HTMLButtonElement);\n    if (index === -1) return;\n\n    const target = getKeyTarget(event.key, tabs, index, vertical);\n    if (!target) return;\n\n    event.preventDefault();\n    target.focus();\n    if (activationMode === \"automatic\" && target.dataset.value) setActiveTab(target.dataset.value);\n  };\n\n  const maskImage = getMaskImage(fade);\n  const indicatorStyle = getIndicatorStyle(indicator, vertical, variant === \"pills\");\n\n  return (\n    <div aria-hidden={skeleton || undefined} className={cn(\"flex min-w-0\", vertical ? \"shrink-0 flex-col\" : \"items-end\", getBarClass(variant, orientation), className)}>\n      <div\n        ref={scrollerRef}\n        onScroll={measure}\n        className={cn(\n          \"flex min-w-0\",\n          vertical ? \"flex-col\" : \"flex-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\",\n          variant === \"pills\" && !vertical && \"py-0.5\"\n        )}\n        style={maskImage ? { maskImage, WebkitMaskImage: maskImage } : undefined}\n      >\n        {/* Odak tablist'te değil, içindeki role=\"tab\" düğmelerinde (roving\n            tabindex); ok tuşu olayları buraya kabarcıklanır. */}\n        {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus */}\n        <div\n          ref={listRef}\n          role=\"tablist\"\n          aria-label={ariaLabel}\n          aria-orientation={orientation}\n          onKeyDown={handleKeyDown}\n          className={cn(getListClass(variant, orientation, size, fill), align === \"center\" && !vertical && \"mx-auto\")}\n        >\n          {children}\n          <span\n            aria-hidden\n            className={cn(\n              \"pointer-events-none absolute\",\n              getIndicatorClass(variant, orientation, color),\n              animate && \"transition-[left,top,width,height] duration-300 ease-out motion-reduce:transition-none\",\n              // İskelette aktif sekme henüz anlamlı değil — gösterge gizli.\n              (!indicator || skeleton) && \"opacity-0\"\n            )}\n            style={indicatorStyle}\n          />\n        </div>\n      </div>\n      {extra && <div className={cn(\"shrink-0\", vertical ? \"mt-4\" : \"ml-4 self-center\")}>{extra}</div>}\n    </div>\n  );\n}\n","import { cn, type ColorRole, type Size } from \"@mari-ui/core\";\nimport { bgSolidClass, bgSubtleClass, textClass, textSubtleContrastClass } from \"../lib/colorClasses\";\nimport type { TabsOrientation, TabsVariant } from \"./types\";\n\n/**\n * Yapı ant.design Tabs'tan (çizgili: 12px dikey dolgu, 32px aralık, 2px\n * gösterge, 1px taban; kart: 8/16px dolgu, 2px aralık, üst köşeler 8px),\n * görünüm kendi token'larımızdan. Tüm class'lar literal — Tailwind tarayıcısı\n * için (bkz. lib/colorClasses).\n */\n\nconst lineSize: Record<Size, string> = {\n  sm: \"py-2 text-sm\",\n  md: \"py-3 text-sm\",\n  lg: \"py-4 text-base\",\n};\nconst lineVerticalSize: Record<Size, string> = {\n  sm: \"px-4 py-1.5 text-sm\",\n  md: \"px-5 py-2 text-sm\",\n  lg: \"px-6 py-2.5 text-base\",\n};\nconst cardSize: Record<Size, string> = {\n  sm: \"px-3 py-1.5 text-sm\",\n  md: \"px-4 py-2 text-sm\",\n  lg: \"px-5 py-2.5 text-base\",\n};\nconst pillsSize: Record<Size, string> = {\n  sm: \"px-2.5 py-1 text-xs\",\n  md: \"px-3 py-1.5 text-sm\",\n  lg: \"px-4 py-2 text-base\",\n};\n\nconst lineGap: Record<Size, string> = { sm: \"gap-6\", md: \"gap-8\", lg: \"gap-8\" };\n\nexport function getListClass(variant: TabsVariant, orientation: TabsOrientation, size: Size, fill: boolean): string {\n  const vertical = orientation === \"vertical\";\n  return cn(\n    \"relative flex\",\n    vertical ? \"flex-col items-stretch\" : \"items-center\",\n    fill && !vertical && \"w-full\",\n    variant === \"line\" && (vertical ? \"gap-1\" : lineGap[size]),\n    variant === \"card\" && \"gap-0.5\",\n    variant === \"pills\" && \"gap-1 rounded-lg bg-mari-surface-alt p-1\"\n  );\n}\n\n/**\n * Taban çizgisi dış kapsayıcıda `inset` gölge olarak çiziliyor (border değil):\n * inset gölge çocukların ALTINDA boyanır, böylece gösterge (line) ve aktif\n * kartın alt kenarı (card) çizginin ÜSTÜNE biner — ant.design ile aynı.\n */\nexport function getBarClass(variant: TabsVariant, orientation: TabsOrientation): string {\n  if (variant === \"pills\") return \"\";\n  return orientation === \"vertical\"\n    ? \"shadow-[inset_-1px_0_0_var(--color-mari-border)]\"\n    : \"shadow-[inset_0_-1px_0_var(--color-mari-border)]\";\n}\n\nfunction triggerJustify(vertical: boolean, fill: boolean): string {\n  if (vertical) return \"justify-start\";\n  return fill ? \"flex-1 justify-center\" : \"justify-center\";\n}\n\nexport function getTriggerClass(opts: {\n  active: boolean;\n  variant: TabsVariant;\n  orientation: TabsOrientation;\n  size: Size;\n  color: ColorRole;\n  fill: boolean;\n}): string {\n  const { active, variant, orientation, size, color, fill } = opts;\n  const vertical = orientation === \"vertical\";\n  const base = cn(\n    \"relative inline-flex shrink-0 select-none items-center gap-2 whitespace-nowrap font-medium\",\n    \"transition-colors duration-150 motion-reduce:transition-none\",\n    \"disabled:cursor-not-allowed disabled:opacity-40\",\n    \"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-mari-ring\",\n    triggerJustify(vertical, fill)\n  );\n\n  if (variant === \"card\") {\n    return cn(\n      base,\n      cardSize[size],\n      \"border border-mari-border\",\n      vertical ? \"rounded-l-lg border-r-0\" : \"rounded-t-lg border-b-0\",\n      active\n        ? cn(\"bg-mari-surface\", textClass[color], vertical && \"-mr-px\")\n        : \"bg-mari-surface-alt text-mari-muted enabled:hover:text-mari-foreground\"\n    );\n  }\n\n  if (variant === \"pills\") {\n    return cn(\n      base,\n      pillsSize[size],\n      \"z-10 rounded-md\",\n      active ? \"text-mari-foreground\" : \"text-mari-muted enabled:hover:text-mari-foreground\"\n    );\n  }\n\n  return cn(\n    base,\n    vertical ? lineVerticalSize[size] : lineSize[size],\n    vertical && \"rounded-l-md\",\n    active ? textClass[color] : \"text-mari-muted enabled:hover:text-mari-foreground\"\n  );\n}\n\nexport function getIndicatorClass(variant: TabsVariant, orientation: TabsOrientation, color: ColorRole): string {\n  if (variant === \"pills\") return \"rounded-md bg-mari-surface shadow-mari-sm ring-1 ring-mari-border/60\";\n  if (variant === \"card\") return \"hidden\";\n  return cn(bgSolidClass[color], orientation === \"vertical\" ? \"right-0 w-0.5\" : \"bottom-0 h-0.5\", \"rounded-full\");\n}\n\nexport function getCountClass(active: boolean, color: ColorRole): string {\n  return cn(\n    \"inline-flex min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-medium tabular-nums leading-5\",\n    active ? cn(bgSubtleClass[color], textSubtleContrastClass[color]) : \"bg-mari-neutral-subtle text-mari-muted\"\n  );\n}\n","\"use client\";\n\nimport React, { forwardRef } from \"react\";\nimport { cn } from \"@mari-ui/core\";\nimport { getTabId, useTabs } from \"../useTabs\";\nimport { getCountClass, getTriggerClass } from \"../utils\";\nimport type { TabsTriggerProps } from \"../types\";\nimport { skeletonFill } from \"../../lib/skeleton\";\n\n/** İskelette etiket: kendi metin kutusunda dolgu, harfler görünmez (genişlik korunur). */\nconst skeletonTextClass = cn(\"rounded-sm text-transparent\", skeletonFill(true));\n\n/**\n * Faz 13.6: artık `Button`'ı sarmalamıyor — Button'ın `h-8` sabit yüksekliği\n * ve kendi `px-*` dolgusu sekme ölçüleriyle çakışıyor, ikonla etiket ALT\n * ALTA düşüyordu. Yerel `<button role=\"tab\">`:\n * - roving tabindex (yalnız aktif sekme Tab durağı; diğerlerine ok tuşları),\n * - `useId` tabanlı id'ler (iki Tabs aynı `value`'yu kullanınca çakışıyordu),\n * - `icon` / `count` / `disabled`.\n */\nexport const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(({ children, value, icon, count, disabled, className }, ref) => {\n  const { activeTab, setActiveTab, baseId, color, variant, orientation, size, fill, skeleton, mountedPanels } = useTabs();\n  const active = activeTab === value;\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      role=\"tab\"\n      id={getTabId(baseId, value, \"tab\")}\n      aria-selected={active}\n      aria-controls={mountedPanels.has(value) ? getTabId(baseId, value, \"panel\") : undefined}\n      tabIndex={active && !skeleton ? 0 : -1}\n      disabled={disabled}\n      data-value={value}\n      data-state={active ? \"active\" : \"inactive\"}\n      onClick={() => !skeleton && setActiveTab(value)}\n      // İskelette sekme kutusu (dolgu, kenarlık, kart zemini) aynı kalır; yalnız içerik yer tutucu olur.\n      className={cn(getTriggerClass({ active, variant, orientation, size, color, fill }), skeleton && \"pointer-events-none\", className)}\n    >\n      {icon && (\n        <span aria-hidden className={cn(\"inline-flex shrink-0 [&>svg]:size-4\", skeleton && cn(\"rounded-sm [&>svg]:invisible\", skeletonFill(true)))}>\n          {icon}\n        </span>\n      )}\n      <span className={cn(skeleton && skeletonTextClass)}>{children}</span>\n      {count !== undefined && <span className={cn(getCountClass(active, color), skeleton && skeletonTextClass)}>{count}</span>}\n    </button>\n  );\n});\n\nTabsTrigger.displayName = \"TabsTrigger\";\n","\"use client\";\n\nimport React, { useEffect } from \"react\";\nimport { cn } from \"@mari-ui/core\";\nimport { getTabId, useTabs } from \"../useTabs\";\nimport type { TabsContentProps } from \"../types\";\nimport { skeletonFill } from \"../../lib/skeleton\";\n\n/**\n * Panel `tabIndex=0` taşır (WAI-ARIA: içinde odaklanabilir öğe olmayan bir\n * panel de klavyeyle erişilebilsin). Eskiden sabit `p-2` dolgu dayatıyordu —\n * artık sadece sekme çubuğundan ayıran üst boşluk (ant.design: 16px).\n */\nexport function TabsContent({ children, value, forceMount = false, className }: Readonly<TabsContentProps>) {\n  const { activeTab, baseId, keepMounted, orientation, skeleton, registerPanel } = useTabs();\n  const active = activeTab === value;\n  const mounted = active || keepMounted || forceMount;\n  useEffect(() => (mounted ? registerPanel(value) : undefined), [mounted, value, registerPanel]);\n  if (!mounted) return null;\n\n  // İskelet: gerçek içerik görünmez olarak akışta kalır ve paneli O boyar (yüklenince zıplamaz);\n  // satır çubukları üstüne biner, sığmayanlar kırpılır. İçerik boşsa en az bir satırlık yer.\n  const body = skeleton ? (\n    <div aria-hidden className=\"relative min-h-5\">\n      <div className=\"invisible\">{children}</div>\n      <span className=\"absolute inset-0 flex flex-col gap-2.5 overflow-hidden pt-1\">\n        {[\"w-full\", \"w-11/12\", \"w-3/5\"].map((width) => (\n          <span key={width} className={cn(\"block h-3 shrink-0 rounded-sm\", width, skeletonFill(true))} />\n        ))}\n      </span>\n    </div>\n  ) : (\n    children\n  );\n\n  return (\n    <div\n      role=\"tabpanel\"\n      id={getTabId(baseId, value, \"panel\")}\n      aria-labelledby={getTabId(baseId, value, \"tab\")}\n      tabIndex={skeleton ? -1 : 0}\n      hidden={!active}\n      data-value={value}\n      className={cn(\n        \"rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring\",\n        orientation === \"vertical\" ? \"min-w-0 flex-1\" : \"pt-4\",\n        className\n      )}\n    >\n      {body}\n    </div>\n  );\n}\n"],"mappings":"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","names":["useState","jsx","useState","useCallback","useEffect","useRef","useState","cn","cn","cn","jsx","useEffect","useRef","useState","useCallback","cn","cn","jsx","jsxs","cn","useEffect","cn","jsx","jsxs","useEffect","cn"]}

package/dist/tag.d.ts

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

package/dist/tag.js

@@ -0,0 +1,9 @@
+import {
+  Tag
+} from "./chunk-ZLPAXPDI.js";
+import "./chunk-IP2J3BWY.js";
+import "./chunk-54HHEXXD.js";
+export {
+  Tag
+};
+//# sourceMappingURL=tag.js.map

package/dist/tag.js.map

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

package/dist/tailwind.css

@@ -0,0 +1,13 @@
+/**
+ * Tailwind v4'lü HOST'un girişi — `dist/tailwind.css` olarak yayınlanır.
+ *
+ *   @import "tailwindcss";
+ *   @import "@mari-ui/components/tailwind.css";
+ *
+ * Host'un tek Tailwind derlemesi mari-ui sınıflarını da üretir: tek preflight,
+ * tek `--spacing`, aynı sınıf iki kez tanımlanmaz. `dist/styles.css`i ayrıca
+ * import ETMEYİN. Tarama yalnız derlenmiş `.js` dosyalarında (kaynak yorumlarındaki
+ * örnek sınıflar host'a sızmasın).
+ */
+@import "./mari.css";
+@source "./**/*.js";

package/dist/theme-customizer.d.ts

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