@mari-ui/components 0.0.0-stage → 0.1.1

package/dist/modal.js

@@ -0,0 +1,280 @@
+"use client";
+
+import {
+  useScrollable
+} from "./chunk-KG6A32KX.js";
+import {
+  findAutofocus,
+  firstFocusable,
+  reachable,
+  useModalBehavior,
+  usePresence,
+  useRefocusAfterSkeleton
+} from "./chunk-JNZODUXP.js";
+import {
+  ContentSkeleton
+} from "./chunk-V7KDUUV6.js";
+import {
+  Skeleton,
+  SkeletonBlock
+} from "./chunk-NPM7IDYV.js";
+import "./chunk-XUKVQO6M.js";
+import {
+  Button
+} from "./chunk-2IEXY3OZ.js";
+import {
+  touchTargetSquareClass
+} from "./chunk-FFXRFQSU.js";
+import {
+  bgSubtleClass,
+  textClass
+} from "./chunk-IP2J3BWY.js";
+import "./chunk-54HHEXXD.js";
+
+// src/modal/Modal.tsx
+import { useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { XIcon } from "lucide-react";
+import { cn } from "@mari-ui/core";
+
+// src/modal/utils.tsx
+import { AlertTriangleIcon, CheckCircle2Icon, InfoIcon, XCircleIcon, SparklesIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+var ICON_BY_COLOR = {
+  success: CheckCircle2Icon,
+  warning: AlertTriangleIcon,
+  error: XCircleIcon,
+  info: InfoIcon,
+  primary: InfoIcon,
+  accent: SparklesIcon,
+  neutral: InfoIcon
+};
+function renderModalIcon(color, icon) {
+  if (!color && !icon) return null;
+  const role = color ?? "neutral";
+  const Icon = ICON_BY_COLOR[role];
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: `flex size-10 shrink-0 items-center justify-center rounded-full ${bgSubtleClass[role]} ${textClass[role]}`, children: icon ?? /* @__PURE__ */ jsx(Icon, { size: 20 }) });
+}
+var sizeMap = {
+  sm: "sm:max-w-[25rem]",
+  md: "sm:max-w-[32.5rem]",
+  lg: "sm:max-w-[45rem]"
+};
+
+// src/modal/Modal.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var EXIT_MS = 200;
+var CLOSE_SELECTOR = "[data-modal-close]";
+function getModalInitialFocus(panel, isAlert, preferred) {
+  const cancel = reachable(panel.querySelector("[data-modal-cancel]"));
+  const confirm = reachable(panel.querySelector("[data-modal-confirm]"));
+  const body = panel.querySelector("[data-modal-body]");
+  const explicit = preferred ? { confirm, cancel }[preferred] : null;
+  return explicit ?? findAutofocus(panel) ?? (isAlert ? cancel : null) ?? (body && firstFocusable(body)) ?? cancel ?? panel.querySelector(CLOSE_SELECTOR);
+}
+var HEADER_PLACEHOLDER = /* @__PURE__ */ jsx2("div", { className: "flex flex-col gap-2.5 py-1.5", children: /* @__PURE__ */ jsx2(SkeletonBlock, { active: true, width: "50%", height: "1.125rem", radius: "sm" }) });
+var FOOTER_PLACEHOLDER = /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+  /* @__PURE__ */ jsx2(SkeletonBlock, { active: true, width: "5rem", height: "2.25rem" }),
+  /* @__PURE__ */ jsx2(SkeletonBlock, { active: true, width: "5rem", height: "2.25rem" })
+] });
+function useConfirm(onConfirm) {
+  const [pending, setPending] = useState(false);
+  const handleConfirm = async () => {
+    const result = onConfirm?.();
+    if (!(result instanceof Promise)) return;
+    setPending(true);
+    try {
+      await result;
+    } finally {
+      setPending(false);
+    }
+  };
+  return { pending, handleConfirm };
+}
+function ModalHeader({
+  icon,
+  title,
+  titleId,
+  description,
+  descriptionId,
+  closeInset,
+  skeleton
+}) {
+  return /* @__PURE__ */ jsx2("div", { className: cn("shrink-0 px-6 pt-6", closeInset === "left" && "pl-14", closeInset === "right" && "pr-14"), children: /* @__PURE__ */ jsx2(ContentSkeleton, { on: skeleton, fallback: HEADER_PLACEHOLDER, children: /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+    icon,
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 self-center", children: [
+      title && /* @__PURE__ */ jsx2("h2", { id: titleId, className: "text-lg font-semibold leading-7 text-mari-foreground", children: title }),
+      description && /* @__PURE__ */ jsx2("p", { id: descriptionId, className: "mt-1 text-sm text-mari-muted", children: description })
+    ] })
+  ] }) }) });
+}
+function ModalBody({
+  indented,
+  hasFooter,
+  skeleton,
+  className,
+  children
+}) {
+  const ref = useRef(null);
+  const scrollable = useScrollable(ref, "y", [children, skeleton]);
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref,
+      "data-modal-body": true,
+      tabIndex: scrollable && !skeleton ? 0 : void 0,
+      className: cn(
+        "min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 pt-4 text-sm text-mari-foreground",
+        "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-mari-ring",
+        // Durum ikonu varsa gövde başlıkla hizalı (ikon + boşluk kadar içeride).
+        indented && "sm:pl-20",
+        // Footer varken de küçük bir alt pay: satır içi dolgu ya da kenardaki
+        // alanın odak halkası 1-2px taşıp gereksiz kaydırma çubuğu açmasın.
+        hasFooter ? "pb-1" : "pb-6",
+        className
+      ),
+      children: /* @__PURE__ */ jsx2(ContentSkeleton, { on: skeleton, fallback: /* @__PURE__ */ jsx2(Skeleton, { active: true, title: false, paragraph: { rows: 3 } }), children })
+    }
+  );
+}
+function CloseButton({ onClose, position }) {
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      onClick: onClose,
+      "aria-label": "Kapat",
+      "data-modal-close": true,
+      className: cn(
+        "absolute top-3 z-10 inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-mari-muted transition-colors",
+        "hover:bg-mari-surface-alt hover:text-mari-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring",
+        touchTargetSquareClass.md,
+        position === "left" ? "left-3" : "right-3"
+      ),
+      children: /* @__PURE__ */ jsx2(XIcon, { size: 18, "aria-hidden": true })
+    }
+  );
+}
+function resolveFooter({ footer, ...buttons }) {
+  if (footer !== void 0) return footer;
+  if (!buttons.cancelText && !buttons.confirmText) return null;
+  return /* @__PURE__ */ jsx2(FooterButtons, { ...buttons });
+}
+function FooterButtons({ position, cancelText, confirmText, onCancel, onConfirm, color, loading, disabled }) {
+  return (
+    // Mobilde düğmeler tam genişlik ve alt alta (birincil altta, başparmak erişiminde).
+    /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col-reverse gap-2 sm:flex-row", position === "left" ? "sm:justify-start" : "sm:justify-end"), children: [
+      cancelText && /* @__PURE__ */ jsx2(Button, { variant: "outline", color: "neutral", onClick: onCancel, "data-modal-cancel": true, className: "w-full sm:w-auto", children: cancelText }),
+      confirmText && /* @__PURE__ */ jsx2(Button, { color: color === "neutral" || !color ? "primary" : color, onClick: onConfirm, loading, disabled, "data-modal-confirm": true, className: "w-full sm:w-auto", children: confirmText })
+    ] })
+  );
+}
+function Modal({
+  open,
+  onClose,
+  title,
+  description,
+  icon,
+  color,
+  children,
+  showCloseButton = true,
+  closeButtonPosition = "right",
+  footer,
+  footerButtonPosition = "right",
+  confirmButtonText,
+  cancelButtonText,
+  onConfirm,
+  onCancel,
+  confirmLoading,
+  confirmDisabled = false,
+  initialFocus,
+  size = "md",
+  width,
+  maskClosable = true,
+  keyboard = true,
+  skeleton = false,
+  "aria-label": ariaLabel,
+  className,
+  bodyClassName
+}) {
+  const panelRef = useRef(null);
+  const titleId = useId();
+  const descriptionId = useId();
+  const { pending, handleConfirm } = useConfirm(onConfirm);
+  const present = usePresence(open, EXIT_MS);
+  const isAlert = (color === "error" || color === "warning") && Boolean(confirmButtonText);
+  const getInitialFocus = (panel) => getModalInitialFocus(panel, isAlert, initialFocus);
+  useModalBehavior(open, panelRef, onClose, { closeOnEscape: keyboard, getInitialFocus });
+  useRefocusAfterSkeleton(open, skeleton, panelRef, getInitialFocus, CLOSE_SELECTOR);
+  if (!present || typeof document === "undefined") return null;
+  const iconNode = renderModalIcon(color, icon);
+  const footerNode = resolveFooter({
+    footer,
+    position: footerButtonPosition,
+    cancelText: cancelButtonText,
+    confirmText: confirmButtonText,
+    onCancel: onCancel ?? onClose,
+    onConfirm: handleConfirm,
+    color,
+    loading: confirmLoading ?? pending,
+    disabled: confirmDisabled
+  });
+  return createPortal(
+    /* @__PURE__ */ jsxs("div", { className: cn("fixed inset-0 z-mari-modal", !open && "pointer-events-none"), children: [
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          "aria-hidden": true,
+          onClick: maskClosable ? onClose : void 0,
+          className: cn(
+            "absolute inset-0 bg-mari-scrim transition-opacity duration-200 motion-reduce:transition-none starting:opacity-0",
+            open ? "opacity-100" : "opacity-0"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx2("div", { className: "pointer-events-none absolute inset-0 flex items-end justify-center p-3 sm:items-center sm:p-6", children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: panelRef,
+          role: isAlert ? "alertdialog" : "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": title ? titleId : void 0,
+          "aria-label": title ? void 0 : ariaLabel,
+          "aria-describedby": description ? descriptionId : void 0,
+          "aria-busy": skeleton || void 0,
+          tabIndex: -1,
+          style: width !== void 0 ? { maxWidth: width } : void 0,
+          className: cn(
+            "pointer-events-auto relative flex max-h-[calc(100dvh-1.5rem)] w-full flex-col rounded-xl border border-mari-border bg-mari-surface text-mari-foreground shadow-mari-xl outline-none sm:max-h-[calc(100dvh-3rem)]",
+            "transition-[opacity,translate,scale] duration-200 ease-out motion-reduce:transition-none starting:translate-y-2 starting:scale-[0.98] starting:opacity-0",
+            open ? "translate-y-0 scale-100 opacity-100" : "translate-y-2 scale-[0.98] opacity-0",
+            width === void 0 && sizeMap[size],
+            className
+          ),
+          children: [
+            showCloseButton && /* @__PURE__ */ jsx2(CloseButton, { onClose, position: closeButtonPosition }),
+            (title || description || iconNode) && /* @__PURE__ */ jsx2(
+              ModalHeader,
+              {
+                icon: iconNode,
+                title,
+                titleId,
+                description,
+                descriptionId,
+                closeInset: showCloseButton ? closeButtonPosition : void 0,
+                skeleton
+              }
+            ),
+            children !== void 0 && children !== null && /* @__PURE__ */ jsx2(ModalBody, { indented: Boolean(iconNode), hasFooter: Boolean(footerNode), skeleton, className: bodyClassName, children }),
+            footerNode && /* @__PURE__ */ jsx2("div", { className: "shrink-0 px-6 pb-6 pt-5", children: /* @__PURE__ */ jsx2(ContentSkeleton, { on: skeleton, fallback: FOOTER_PLACEHOLDER, children: footerNode }) })
+          ]
+        }
+      ) })
+    ] }),
+    document.body
+  );
+}
+export {
+  Modal
+};
+//# sourceMappingURL=modal.js.map

package/dist/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/modal/Modal.tsx","../src/modal/utils.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useId, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { XIcon } from \"lucide-react\";\nimport { cn } from \"@mari-ui/core\";\nimport { Button } from \"../button\";\nimport { Skeleton, SkeletonBlock } from \"../skeleton\";\nimport { ContentSkeleton } from \"../lib/ContentSkeleton\";\nimport { touchTargetSquareClass } from \"../lib/sizeClasses\";\nimport { useScrollable } from \"../lib/useScrollable\";\nimport { findAutofocus, firstFocusable, reachable, useModalBehavior, usePresence, useRefocusAfterSkeleton } from \"../lib/overlay\";\nimport type { ModalProps } from \"./types\";\nimport { renderModalIcon, sizeMap } from \"./utils\";\n\nexport type { ModalProps };\n\nconst EXIT_MS = 200;\nconst CLOSE_SELECTOR = \"[data-modal-close]\";\n\n/**\n * İlk odak: `initialFocus` → data-autofocus → (yıkıcı onayda) Vazgeç →\n * gövdedeki ilk alan → Vazgeç → Kapat → panel. İskelette düğmeler/alanlar\n * görünmez kopyadadır (`reachable` eler) → odak Kapat'a düşer.\n */\nfunction getModalInitialFocus(panel: HTMLElement, isAlert: boolean, preferred?: \"cancel\" | \"confirm\"): HTMLElement | null {\n  const cancel = reachable(panel.querySelector<HTMLElement>(\"[data-modal-cancel]\"));\n  const confirm = reachable(panel.querySelector<HTMLElement>(\"[data-modal-confirm]\"));\n  const body = panel.querySelector<HTMLElement>(\"[data-modal-body]\");\n  const explicit = preferred ? { confirm, cancel }[preferred] : null;\n  return (\n    explicit ??\n    findAutofocus(panel) ??\n    (isAlert ? cancel : null) ??\n    (body && firstFocusable(body)) ??\n    cancel ??\n    panel.querySelector<HTMLElement>(CLOSE_SELECTOR)\n  );\n}\n\n/** Ölçülecek içerik yoksa (başlık da veriden geliyor ya da yerleşimsiz ortam). */\nconst HEADER_PLACEHOLDER = (\n  <div className=\"flex flex-col gap-2.5 py-1.5\">\n    <SkeletonBlock active width=\"50%\" height=\"1.125rem\" radius=\"sm\" />\n  </div>\n);\nconst FOOTER_PLACEHOLDER = (\n  <div className=\"flex justify-end gap-2\">\n    <SkeletonBlock active width=\"5rem\" height=\"2.25rem\" />\n    <SkeletonBlock active width=\"5rem\" height=\"2.25rem\" />\n  </div>\n);\n\n/** `onConfirm` Promise dönerse çözülene kadar onay düğmesi \"yükleniyor\". */\nfunction useConfirm(onConfirm: ModalProps[\"onConfirm\"]) {\n  const [pending, setPending] = useState(false);\n  const handleConfirm = async () => {\n    const result = onConfirm?.();\n    if (!(result instanceof Promise)) return;\n    setPending(true);\n    try {\n      await result;\n    } finally {\n      setPending(false);\n    }\n  };\n  return { pending, handleConfirm };\n}\n\nfunction ModalHeader({\n  icon,\n  title,\n  titleId,\n  description,\n  descriptionId,\n  closeInset,\n  skeleton,\n}: Readonly<{\n  icon: React.ReactNode;\n  title: React.ReactNode;\n  titleId: string;\n  description: React.ReactNode;\n  descriptionId: string;\n  /** Kapat düğmesinin olduğu kenar — başlık onun altına girmesin. */\n  closeInset?: Exclude<ModalProps[\"closeButtonPosition\"], undefined>;\n  skeleton: boolean;\n}>) {\n  return (\n    <div className={cn(\"shrink-0 px-6 pt-6\", closeInset === \"left\" && \"pl-14\", closeInset === \"right\" && \"pr-14\")}>\n      <ContentSkeleton on={skeleton} fallback={HEADER_PLACEHOLDER}>\n        <div className=\"flex gap-4\">\n          {icon}\n          <div className=\"min-w-0 flex-1 self-center\">\n            {title && (\n              <h2 id={titleId} className=\"text-lg font-semibold leading-7 text-mari-foreground\">\n                {title}\n              </h2>\n            )}\n            {description && (\n              <p id={descriptionId} className=\"mt-1 text-sm text-mari-muted\">\n                {description}\n              </p>\n            )}\n          </div>\n        </div>\n      </ContentSkeleton>\n    </div>\n  );\n}\n\nfunction ModalBody({\n  indented,\n  hasFooter,\n  skeleton,\n  className,\n  children,\n}: Readonly<{\n  indented: boolean;\n  hasFooter: boolean;\n  skeleton: boolean;\n  className?: string;\n  children: React.ReactNode;\n}>) {\n  const ref = useRef<HTMLDivElement>(null);\n  // Uzun metin (kullanım koşulları) kayar ama içinde odaklanabilir öğe yok →\n  // klavyeyle kaydırılabilsin diye taşarken gövde Tab durağı olur.\n  const scrollable = useScrollable(ref, \"y\", [children, skeleton]);\n  return (\n    <div\n      ref={ref}\n      data-modal-body\n      tabIndex={scrollable && !skeleton ? 0 : undefined}\n      className={cn(\n        \"min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 pt-4 text-sm text-mari-foreground\",\n        \"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-mari-ring\",\n        // Durum ikonu varsa gövde başlıkla hizalı (ikon + boşluk kadar içeride).\n        indented && \"sm:pl-20\",\n        // Footer varken de küçük bir alt pay: satır içi dolgu ya da kenardaki\n        // alanın odak halkası 1-2px taşıp gereksiz kaydırma çubuğu açmasın.\n        hasFooter ? \"pb-1\" : \"pb-6\",\n        className\n      )}\n    >\n      <ContentSkeleton on={skeleton} fallback={<Skeleton active title={false} paragraph={{ rows: 3 }} />}>\n        {children}\n      </ContentSkeleton>\n    </div>\n  );\n}\n\nfunction CloseButton({ onClose, position }: Readonly<{ onClose: () => void; position: ModalProps[\"closeButtonPosition\"] }>) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClose}\n      aria-label=\"Kapat\"\n      data-modal-close\n      className={cn(\n        \"absolute top-3 z-10 inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-mari-muted transition-colors\",\n        \"hover:bg-mari-surface-alt hover:text-mari-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring\",\n        touchTargetSquareClass.md,\n        position === \"left\" ? \"left-3\" : \"right-3\"\n      )}\n    >\n      <XIcon size={18} aria-hidden />\n    </button>\n  );\n}\n\ninterface FooterButtonsProps {\n  position: ModalProps[\"footerButtonPosition\"];\n  cancelText?: string;\n  confirmText?: string;\n  onCancel: () => void;\n  onConfirm: () => void;\n  color: ModalProps[\"color\"];\n  loading: boolean;\n  disabled: boolean;\n}\n\n/** `footer` verilmişse o (`null` = alt çubuk yok), yoksa metni verilen düğmeler. */\nfunction resolveFooter({ footer, ...buttons }: FooterButtonsProps & { footer: React.ReactNode }): React.ReactNode {\n  if (footer !== undefined) return footer;\n  if (!buttons.cancelText && !buttons.confirmText) return null;\n  return <FooterButtons {...buttons} />;\n}\n\nfunction FooterButtons({ position, cancelText, confirmText, onCancel, onConfirm, color, loading, disabled }: Readonly<FooterButtonsProps>) {\n  return (\n    // Mobilde düğmeler tam genişlik ve alt alta (birincil altta, başparmak erişiminde).\n    <div className={cn(\"flex flex-col-reverse gap-2 sm:flex-row\", position === \"left\" ? \"sm:justify-start\" : \"sm:justify-end\")}>\n      {cancelText && (\n        <Button variant=\"outline\" color=\"neutral\" onClick={onCancel} data-modal-cancel className=\"w-full sm:w-auto\">\n          {cancelText}\n        </Button>\n      )}\n      {confirmText && (\n        <Button color={color === \"neutral\" || !color ? \"primary\" : color} onClick={onConfirm} loading={loading} disabled={disabled} data-modal-confirm className=\"w-full sm:w-auto\">\n          {confirmText}\n        </Button>\n      )}\n    </div>\n  );\n}\n\n/**\n * Faz 9 temel ARIA'yı düzeltmişti (role=dialog, Escape, odağı geri verme).\n * Faz 13.6 — yapı ant.design Modal'dan, overlay davranışı Drawer ile ortak\n * (`lib/overlay.ts`). Eski sürümde kalanlar:\n * - Odak tuzağı YOKTU (belgede \"focus-trap\" yazmasına rağmen Tab dışarı\n *   kaçıyordu); sayfa kaydırması kilitlenmiyordu; portal yoktu.\n * - Uzun içerik ekrandan taşıyordu — artık gövde kendi içinde kayar.\n * - `title` zorunlu string'di; açıklama, özel footer, genişlik yoktu.\n * - Async onay için yükleniyor durumu, yıkıcı onay için `alertdialog` yoktu.\n * - Kapalıyken `inert` ile DOM'da kalıyordu; artık kapanış animasyonundan\n *   sonra unmount.\n *\n * Faz 15.6 — `skeleton`: başlık (ikon dahil), gövde ve alt çubuk\n * `ContentSkeleton` ile içeriğin kendi şeklinde iskelete döner; Kapat ve\n * Escape çalışır, `aria-busy`. Veri gelince odak (hâlâ Kapat'taysa) normal\n * ilk odağa taşınır. Kapat düğmesi 44px dokunma hedefi.\n */\nexport function Modal({\n  open,\n  onClose,\n  title,\n  description,\n  icon,\n  color,\n  children,\n  showCloseButton = true,\n  closeButtonPosition = \"right\",\n  footer,\n  footerButtonPosition = \"right\",\n  confirmButtonText,\n  cancelButtonText,\n  onConfirm,\n  onCancel,\n  confirmLoading,\n  confirmDisabled = false,\n  initialFocus,\n  size = \"md\",\n  width,\n  maskClosable = true,\n  keyboard = true,\n  skeleton = false,\n  \"aria-label\": ariaLabel,\n  className,\n  bodyClassName,\n}: ModalProps) {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const descriptionId = useId();\n  const { pending, handleConfirm } = useConfirm(onConfirm);\n  const present = usePresence(open, EXIT_MS);\n\n  const isAlert = (color === \"error\" || color === \"warning\") && Boolean(confirmButtonText);\n  const getInitialFocus = (panel: HTMLElement) => getModalInitialFocus(panel, isAlert, initialFocus);\n\n  useModalBehavior(open, panelRef, onClose, { closeOnEscape: keyboard, getInitialFocus });\n  useRefocusAfterSkeleton(open, skeleton, panelRef, getInitialFocus, CLOSE_SELECTOR);\n\n  if (!present || typeof document === \"undefined\") return null;\n\n  const iconNode = renderModalIcon(color, icon);\n  const footerNode = resolveFooter({\n    footer,\n    position: footerButtonPosition,\n    cancelText: cancelButtonText,\n    confirmText: confirmButtonText,\n    onCancel: onCancel ?? onClose,\n    onConfirm: handleConfirm,\n    color,\n    loading: confirmLoading ?? pending,\n    disabled: confirmDisabled,\n  });\n\n  return createPortal(\n    <div className={cn(\"fixed inset-0 z-mari-modal\", !open && \"pointer-events-none\")}>\n      <div\n        aria-hidden\n        onClick={maskClosable ? onClose : undefined}\n        className={cn(\n          \"absolute inset-0 bg-mari-scrim transition-opacity duration-200 motion-reduce:transition-none starting:opacity-0\",\n          open ? \"opacity-100\" : \"opacity-0\"\n        )}\n      />\n      {/* Kaydırılabilir yerleşim katmanı: çok uzun modal ekranı aşarsa gövde kayar. */}\n      <div className=\"pointer-events-none absolute inset-0 flex items-end justify-center p-3 sm:items-center sm:p-6\">\n        <div\n          ref={panelRef}\n          role={isAlert ? \"alertdialog\" : \"dialog\"}\n          aria-modal=\"true\"\n          aria-labelledby={title ? titleId : undefined}\n          aria-label={title ? undefined : ariaLabel}\n          aria-describedby={description ? descriptionId : undefined}\n          aria-busy={skeleton || undefined}\n          tabIndex={-1}\n          style={width !== undefined ? { maxWidth: width } : undefined}\n          // Tailwind v4'te translate-*/scale-* ayrı `translate`/`scale` CSS\n          // özelliklerini yazar, `transform`u değil — geçiş listesinde onlar\n          // olmalı. Eskiden `transition-[opacity,transform]` vardı: kapanışta\n          // panel ilk karede aniden kayıp küçülüyor, sadece opaklık yumuşak\n          // soluyordu (\"kapatırken tekliyor\" kullanıcı bulgusu). Aynı hata\n          // Card hover, MegaMenu ve MobileNavLevel'da da düzeltildi.\n          className={cn(\n            \"pointer-events-auto relative flex max-h-[calc(100dvh-1.5rem)] w-full flex-col rounded-xl border border-mari-border bg-mari-surface text-mari-foreground shadow-mari-xl outline-none sm:max-h-[calc(100dvh-3rem)]\",\n            \"transition-[opacity,translate,scale] duration-200 ease-out motion-reduce:transition-none starting:translate-y-2 starting:scale-[0.98] starting:opacity-0\",\n            open ? \"translate-y-0 scale-100 opacity-100\" : \"translate-y-2 scale-[0.98] opacity-0\",\n            width === undefined && sizeMap[size],\n            className\n          )}\n        >\n          {showCloseButton && <CloseButton onClose={onClose} position={closeButtonPosition} />}\n\n          {(title || description || iconNode) && (\n            <ModalHeader\n              icon={iconNode}\n              title={title}\n              titleId={titleId}\n              description={description}\n              descriptionId={descriptionId}\n              closeInset={showCloseButton ? closeButtonPosition : undefined}\n              skeleton={skeleton}\n            />\n          )}\n\n          {children !== undefined && children !== null && (\n            <ModalBody indented={Boolean(iconNode)} hasFooter={Boolean(footerNode)} skeleton={skeleton} className={bodyClassName}>\n              {children}\n            </ModalBody>\n          )}\n\n          {footerNode && (\n            <div className=\"shrink-0 px-6 pb-6 pt-5\">\n              <ContentSkeleton on={skeleton} fallback={FOOTER_PLACEHOLDER}>\n                {footerNode}\n              </ContentSkeleton>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>,\n    document.body\n  );\n}\n","import React from \"react\";\nimport { AlertTriangleIcon, CheckCircle2Icon, InfoIcon, XCircleIcon, SparklesIcon } from \"lucide-react\";\nimport type { ColorRole, Size } from \"@mari-ui/core\";\nimport { bgSubtleClass, textClass } from \"../lib/colorClasses\";\n\nconst ICON_BY_COLOR: Record<ColorRole, React.ComponentType<{ className?: string; size?: number }>> = {\n  success: CheckCircle2Icon,\n  warning: AlertTriangleIcon,\n  error: XCircleIcon,\n  info: InfoIcon,\n  primary: InfoIcon,\n  accent: SparklesIcon,\n  neutral: InfoIcon,\n};\n\n/**\n * Durum ikonu tonlu bir dairenin içinde (ant.design confirm düzeninin\n * yapısı). `color` yoksa ve özel `icon` da yoksa hiç ikon gösterilmez.\n */\nexport function renderModalIcon(color: ColorRole | undefined, icon: React.ReactNode): React.ReactNode {\n  if (!color && !icon) return null;\n  const role = color ?? \"neutral\";\n  const Icon = ICON_BY_COLOR[role];\n  return (\n    <span aria-hidden className={`flex size-10 shrink-0 items-center justify-center rounded-full ${bgSubtleClass[role]} ${textClass[role]}`}>\n      {icon ?? <Icon size={20} />}\n    </span>\n  );\n}\n\n/** ant.design: varsayılan 520px. */\nexport const sizeMap: Record<Size, string> = {\n  sm: \"sm:max-w-[25rem]\",\n  md: \"sm:max-w-[32.5rem]\",\n  lg: \"sm:max-w-[45rem]\",\n};\n"],"mappings":"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","names":["jsx"]}

package/dist/pagination.d.ts

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

package/dist/pagination.js

@@ -0,0 +1,11 @@
+import {
+  Pagination
+} from "./chunk-TXRQCHOR.js";
+import "./chunk-DKENCYHA.js";
+import "./chunk-FFXRFQSU.js";
+import "./chunk-IP2J3BWY.js";
+import "./chunk-54HHEXXD.js";
+export {
+  Pagination
+};
+//# sourceMappingURL=pagination.js.map

package/dist/pagination.js.map

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

package/dist/popconfirm.d.ts

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

package/dist/popconfirm.js

@@ -0,0 +1,110 @@
+"use client";
+
+import {
+  Popover
+} from "./chunk-QDFDMWXD.js";
+import "./chunk-JNZODUXP.js";
+import "./chunk-V7KDUUV6.js";
+import "./chunk-NPM7IDYV.js";
+import "./chunk-XUKVQO6M.js";
+import "./chunk-S66GKX2W.js";
+import "./chunk-3ABWBQCS.js";
+import "./chunk-NS7FKOFI.js";
+import "./chunk-TCYDVNSU.js";
+import {
+  Button
+} from "./chunk-2IEXY3OZ.js";
+import "./chunk-FFXRFQSU.js";
+import {
+  textClass
+} from "./chunk-IP2J3BWY.js";
+import "./chunk-54HHEXXD.js";
+
+// src/popconfirm/Popconfirm.tsx
+import { useId, useState } from "react";
+import { CircleAlertIcon, CircleXIcon, InfoIcon } from "lucide-react";
+import { cn, useControllableState } from "@mari-ui/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var isDestructive = (color) => color === "error" || color === "warning";
+function StatusIcon({ icon, color }) {
+  if (icon === false) return null;
+  if (icon !== true && icon !== void 0) return /* @__PURE__ */ jsx("span", { className: cn("flex shrink-0 pt-0.5", textClass[color]), children: icon });
+  let Icon = InfoIcon;
+  if (color === "error") Icon = CircleXIcon;
+  else if (color === "warning") Icon = CircleAlertIcon;
+  return /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, size: 16, className: cn("mt-0.5 shrink-0", textClass[color]) });
+}
+function Popconfirm({
+  title,
+  description,
+  children,
+  onConfirm,
+  onCancel,
+  okText = "Evet",
+  cancelText = "Vazge\xE7",
+  color = "warning",
+  icon = true,
+  placement = "top",
+  disabled = false,
+  open: openProp,
+  onOpenChange,
+  className,
+  skeleton = false
+}) {
+  const [open, setOpen] = useControllableState({ value: openProp, defaultValue: false, onChange: onOpenChange });
+  const [pending, setPending] = useState(false);
+  const titleId = useId();
+  const descriptionId = useId();
+  const destructive = isDestructive(color);
+  const confirm = async () => {
+    const result = onConfirm?.();
+    if (!(result instanceof Promise)) {
+      setOpen(false);
+      return;
+    }
+    setPending(true);
+    try {
+      await result;
+      setOpen(false);
+    } catch {
+    } finally {
+      setPending(false);
+    }
+  };
+  const cancel = () => {
+    onCancel?.();
+    setOpen(false);
+  };
+  if (disabled) return children;
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      open,
+      onOpenChange: (next) => !pending && setOpen(next),
+      placement,
+      role: "alertdialog",
+      "aria-labelledby": titleId,
+      "aria-describedby": description ? descriptionId : void 0,
+      skeleton,
+      className: cn("max-w-[min(20rem,calc(100vw-1rem))]", className),
+      content: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(StatusIcon, { icon, color }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { id: titleId, className: "font-semibold text-mari-foreground", children: title }),
+            description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "mt-0.5 text-mari-muted", children: description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", color: "neutral", onClick: cancel, "data-autofocus": destructive || void 0, children: cancelText }),
+          /* @__PURE__ */ jsx(Button, { size: "sm", color: destructive ? color : "primary", onClick: confirm, loading: pending, "data-autofocus": destructive ? void 0 : true, children: okText })
+        ] })
+      ] }),
+      children
+    }
+  );
+}
+export {
+  Popconfirm
+};
+//# sourceMappingURL=popconfirm.js.map

package/dist/popconfirm.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/popconfirm/Popconfirm.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useId, useState } from \"react\";\nimport { CircleAlertIcon, CircleXIcon, InfoIcon } from \"lucide-react\";\nimport { cn, useControllableState, type ColorRole } from \"@mari-ui/core\";\nimport { Button } from \"../button\";\nimport { textClass } from \"../lib/colorClasses\";\nimport { Popover } from \"../popover\";\nimport type { PopconfirmProps } from \"./types\";\n\nexport type { PopconfirmProps };\n\nconst isDestructive = (color: ColorRole) => color === \"error\" || color === \"warning\";\n\nfunction StatusIcon({ icon, color }: Readonly<{ icon: PopconfirmProps[\"icon\"]; color: ColorRole }>) {\n  if (icon === false) return null;\n  if (icon !== true && icon !== undefined) return <span className={cn(\"flex shrink-0 pt-0.5\", textClass[color])}>{icon}</span>;\n  let Icon = InfoIcon;\n  if (color === \"error\") Icon = CircleXIcon;\n  else if (color === \"warning\") Icon = CircleAlertIcon;\n  return <Icon aria-hidden size={16} className={cn(\"mt-0.5 shrink-0\", textClass[color])} />;\n}\n\n/**\n * Faz 16.2 — yapı ant.design Popconfirm'den: bir eylemin hemen yanında,\n * sayfayı karartmadan \"emin misiniz?\" sorusu. Popover'ın üstüne kurulu\n * (konum, ok, odak, kapatma yolları ortak).\n *\n * Erişilebilirlik: panel `role=\"alertdialog\"`, soru adı, açıklama\n * `aria-describedby`. Yıkıcı onayda (`error`/`warning`) ilk odak \"Vazgeç\"te —\n * Enter'a basan kullanıcı yanlışlıkla silmesin; diğerlerinde onay düğmesinde.\n * `onConfirm` Promise dönerse düğme yükleniyor, panel açık; bitince kapanır\n * ve odak tetikleyiciye döner.\n */\nexport function Popconfirm({\n  title,\n  description,\n  children,\n  onConfirm,\n  onCancel,\n  okText = \"Evet\",\n  cancelText = \"Vazgeç\",\n  color = \"warning\",\n  icon = true,\n  placement = \"top\",\n  disabled = false,\n  open: openProp,\n  onOpenChange,\n  className,\n  skeleton = false,\n}: Readonly<PopconfirmProps>) {\n  const [open, setOpen] = useControllableState<boolean>({ value: openProp, defaultValue: false, onChange: onOpenChange });\n  const [pending, setPending] = useState(false);\n  const titleId = useId();\n  const descriptionId = useId();\n  const destructive = isDestructive(color);\n\n  const confirm = async () => {\n    const result = onConfirm?.();\n    if (!(result instanceof Promise)) {\n      setOpen(false);\n      return;\n    }\n    setPending(true);\n    try {\n      await result;\n      setOpen(false);\n    } catch {\n      // Reddedildi: panel açık kalır, kullanıcı tekrar deneyebilir ya da vazgeçebilir.\n    } finally {\n      setPending(false);\n    }\n  };\n\n  const cancel = () => {\n    onCancel?.();\n    setOpen(false);\n  };\n\n  if (disabled) return children;\n\n  return (\n    <Popover\n      open={open}\n      onOpenChange={(next) => !pending && setOpen(next)}\n      placement={placement}\n      role=\"alertdialog\"\n      aria-labelledby={titleId}\n      aria-describedby={description ? descriptionId : undefined}\n      skeleton={skeleton}\n      className={cn(\"max-w-[min(20rem,calc(100vw-1rem))]\", className)}\n      content={\n        <div className=\"flex flex-col gap-3\">\n          <div className=\"flex gap-2\">\n            <StatusIcon icon={icon} color={color} />\n            <div className=\"min-w-0\">\n              <p id={titleId} className=\"font-semibold text-mari-foreground\">\n                {title}\n              </p>\n              {description && (\n                <p id={descriptionId} className=\"mt-0.5 text-mari-muted\">\n                  {description}\n                </p>\n              )}\n            </div>\n          </div>\n          <div className=\"flex justify-end gap-2\">\n            <Button size=\"sm\" variant=\"outline\" color=\"neutral\" onClick={cancel} data-autofocus={destructive || undefined}>\n              {cancelText}\n            </Button>\n            <Button size=\"sm\" color={destructive ? color : \"primary\"} onClick={confirm} loading={pending} data-autofocus={destructive ? undefined : true}>\n              {okText}\n            </Button>\n          </div>\n        </div>\n      }\n    >\n      {children}\n    </Popover>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAEA,SAAgB,OAAO,gBAAgB;AACvC,SAAS,iBAAiB,aAAa,gBAAgB;AACvD,SAAS,IAAI,4BAA4C;AAYP,cA+EtC,YA/EsC;AAJlD,IAAM,gBAAgB,CAAC,UAAqB,UAAU,WAAW,UAAU;AAE3E,SAAS,WAAW,EAAE,MAAM,MAAM,GAAkE;AAClG,MAAI,SAAS,MAAO,QAAO;AAC3B,MAAI,SAAS,QAAQ,SAAS,OAAW,QAAO,oBAAC,UAAK,WAAW,GAAG,wBAAwB,UAAU,KAAK,CAAC,GAAI,gBAAK;AACrH,MAAI,OAAO;AACX,MAAI,UAAU,QAAS,QAAO;AAAA,WACrB,UAAU,UAAW,QAAO;AACrC,SAAO,oBAAC,QAAK,eAAW,MAAC,MAAM,IAAI,WAAW,GAAG,mBAAmB,UAAU,KAAK,CAAC,GAAG;AACzF;AAaO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAA8B;AAC5B,QAAM,CAAC,MAAM,OAAO,IAAI,qBAA8B,EAAE,OAAO,UAAU,cAAc,OAAO,UAAU,aAAa,CAAC;AACtH,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,UAAU,MAAM;AACtB,QAAM,gBAAgB,MAAM;AAC5B,QAAM,cAAc,cAAc,KAAK;AAEvC,QAAM,UAAU,YAAY;AAC1B,UAAM,SAAS,YAAY;AAC3B,QAAI,EAAE,kBAAkB,UAAU;AAChC,cAAQ,KAAK;AACb;AAAA,IACF;AACA,eAAW,IAAI;AACf,QAAI;AACF,YAAM;AACN,cAAQ,KAAK;AAAA,IACf,QAAQ;AAAA,IAER,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF;AAEA,QAAM,SAAS,MAAM;AACnB,eAAW;AACX,YAAQ,KAAK;AAAA,EACf;AAEA,MAAI,SAAU,QAAO;AAErB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAc,CAAC,SAAS,CAAC,WAAW,QAAQ,IAAI;AAAA,MAChD;AAAA,MACA,MAAK;AAAA,MACL,mBAAiB;AAAA,MACjB,oBAAkB,cAAc,gBAAgB;AAAA,MAChD;AAAA,MACA,WAAW,GAAG,uCAAuC,SAAS;AAAA,MAC9D,SACE,qBAAC,SAAI,WAAU,uBACb;AAAA,6BAAC,SAAI,WAAU,cACb;AAAA,8BAAC,cAAW,MAAY,OAAc;AAAA,UACtC,qBAAC,SAAI,WAAU,WACb;AAAA,gCAAC,OAAE,IAAI,SAAS,WAAU,sCACvB,iBACH;AAAA,YACC,eACC,oBAAC,OAAE,IAAI,eAAe,WAAU,0BAC7B,uBACH;AAAA,aAEJ;AAAA,WACF;AAAA,QACA,qBAAC,SAAI,WAAU,0BACb;AAAA,8BAAC,UAAO,MAAK,MAAK,SAAQ,WAAU,OAAM,WAAU,SAAS,QAAQ,kBAAgB,eAAe,QACjG,sBACH;AAAA,UACA,oBAAC,UAAO,MAAK,MAAK,OAAO,cAAc,QAAQ,WAAW,SAAS,SAAS,SAAS,SAAS,kBAAgB,cAAc,SAAY,MACrI,kBACH;AAAA,WACF;AAAA,SACF;AAAA,MAGD;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/popover.d.ts

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

package/dist/popover.js

@@ -0,0 +1,16 @@
+import {
+  Popover
+} from "./chunk-QDFDMWXD.js";
+import "./chunk-JNZODUXP.js";
+import "./chunk-V7KDUUV6.js";
+import "./chunk-NPM7IDYV.js";
+import "./chunk-XUKVQO6M.js";
+import "./chunk-S66GKX2W.js";
+import "./chunk-3ABWBQCS.js";
+import "./chunk-NS7FKOFI.js";
+import "./chunk-TCYDVNSU.js";
+import "./chunk-54HHEXXD.js";
+export {
+  Popover
+};
+//# sourceMappingURL=popover.js.map

package/dist/popover.js.map

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

package/dist/progress.d.ts

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

package/dist/progress.js

@@ -0,0 +1,135 @@
+import {
+  bgSolidClass,
+  strokeSolidClass,
+  textClass
+} from "./chunk-IP2J3BWY.js";
+import {
+  skeletonFill
+} from "./chunk-54HHEXXD.js";
+
+// src/progress/Progress.tsx
+import { CheckIcon, CircleCheckIcon, CircleXIcon, XIcon } from "lucide-react";
+import { cn } from "@mari-ui/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var clamp = (n) => Math.min(100, Math.max(0, n ?? 0));
+var LINE_HEIGHT = { sm: "h-1", md: "h-2", lg: "h-3" };
+var LINE_TEXT = { sm: "text-xs", md: "text-sm", lg: "text-sm" };
+var CIRCLE_SIZE = { sm: "3rem", md: "5rem", lg: "7.5rem" };
+var CIRCLE_STROKE = { sm: 10, md: 8, lg: 6 };
+var CIRCLE_TEXT = { sm: "text-xs", md: "text-base", lg: "text-2xl" };
+var CIRCLE_ICON = { sm: 16, md: 28, lg: 40 };
+function resolveStatus(status, percent) {
+  if (status) return status;
+  return percent >= 100 ? "success" : "normal";
+}
+function resolveColor(status, color) {
+  if (status === "success") return "success";
+  if (status === "exception") return "error";
+  return color ?? "primary";
+}
+var defaultFormat = (p) => `%${Math.round(p)}`;
+function valueText(format, percent, status) {
+  const custom = format?.(percent);
+  const base = typeof custom === "string" || typeof custom === "number" ? String(custom) : defaultFormat(percent);
+  if (status === "exception") return `${base}, hata`;
+  if (status === "success") return `${base}, tamamland\u0131`;
+  return base;
+}
+function Info({ status, percent, format, circle, size, color }) {
+  if (!format && (status === "success" || status === "exception")) {
+    const icons = circle ? { success: CheckIcon, exception: XIcon } : { success: CircleCheckIcon, exception: CircleXIcon };
+    const Icon = icons[status];
+    return /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, size: circle ? CIRCLE_ICON[size] : 16, className: textClass[color] });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: (format ?? defaultFormat)(percent) });
+}
+function Progress({
+  percent: rawPercent,
+  type = "line",
+  status: statusProp,
+  color: colorProp,
+  success,
+  steps,
+  showInfo = true,
+  format,
+  size = "md",
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  className,
+  skeleton = false
+}) {
+  const percent = clamp(rawPercent);
+  const status = resolveStatus(statusProp, percent);
+  const color = resolveColor(status, colorProp);
+  const successPercent = success ? Math.min(clamp(success.percent), percent) : 0;
+  const a11y = skeleton ? { "aria-hidden": true } : {
+    role: "progressbar",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-valuenow": Math.round(percent),
+    "aria-valuetext": valueText(format, percent, status)
+  };
+  if (type === "circle") {
+    return /* @__PURE__ */ jsxs("div", { ...a11y, className: cn("relative inline-flex shrink-0 items-center justify-center", className), style: { width: CIRCLE_SIZE[size], height: CIRCLE_SIZE[size] }, children: [
+      /* @__PURE__ */ jsx(CircleTrack, { percent, successPercent, stroke: CIRCLE_STROKE[size], color, skeleton }),
+      showInfo && !skeleton && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("absolute inset-0 flex items-center justify-center font-semibold tabular-nums text-mari-foreground", CIRCLE_TEXT[size]), children: /* @__PURE__ */ jsx(Info, { status, percent, format, circle: true, size, color }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { ...a11y, className: cn("flex w-full items-center gap-3", className), children: [
+    steps ? /* @__PURE__ */ jsx(StepsTrack, { steps, percent, color, size, skeleton }) : /* @__PURE__ */ jsx("div", { className: cn("relative min-w-0 flex-1 overflow-hidden rounded-full", LINE_HEIGHT[size], skeleton ? skeletonFill(true) : "bg-mari-surface-alt"), children: !skeleton && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "absolute inset-y-0 left-0 rounded-full transition-[width] duration-300 ease-out motion-reduce:transition-none",
+            bgSolidClass[color],
+            status === "active" && "overflow-hidden"
+          ),
+          style: { width: `${percent}%` },
+          children: status === "active" && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 animate-[mari-progress-active_1.6s_ease-out_infinite] bg-linear-to-r from-transparent via-white/40 to-transparent motion-reduce:hidden" })
+        }
+      ),
+      successPercent > 0 && /* @__PURE__ */ jsx("span", { className: cn("absolute inset-y-0 left-0 rounded-full transition-[width] duration-300 motion-reduce:transition-none", bgSolidClass.success), style: { width: `${successPercent}%` } })
+    ] }) }),
+    showInfo && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("flex min-w-9 shrink-0 items-center justify-end tabular-nums text-mari-muted", LINE_TEXT[size], skeleton && "invisible"), children: /* @__PURE__ */ jsx(Info, { status, percent, format, circle: false, size, color }) })
+  ] });
+}
+function StepsTrack({ steps, percent, color, size, skeleton }) {
+  const filled = Math.round(percent / 100 * steps);
+  const segmentFill = (i) => {
+    if (skeleton) return skeletonFill(true);
+    return i < filled ? bgSolidClass[color] : "bg-mari-surface-alt";
+  };
+  return /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 gap-1", children: Array.from({ length: steps }, (_, i) => /* @__PURE__ */ jsx("span", { className: cn("flex-1 rounded-full transition-colors duration-200 motion-reduce:transition-none", LINE_HEIGHT[size], segmentFill(i)) }, i)) });
+}
+function CircleTrack({ percent, successPercent, stroke, color, skeleton }) {
+  const box = 100;
+  const r = (box - stroke) / 2;
+  const c = 2 * Math.PI * r;
+  const arc = (p) => `${p / 100 * c} ${c}`;
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": true, viewBox: `0 0 ${box} ${box}`, className: "size-full -rotate-90", children: [
+    /* @__PURE__ */ jsx("circle", { cx: box / 2, cy: box / 2, r, fill: "none", strokeWidth: stroke, className: skeleton ? "stroke-mari-border/70" : "stroke-mari-surface-alt" }),
+    !skeleton && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: box / 2,
+          cy: box / 2,
+          r,
+          fill: "none",
+          strokeWidth: stroke,
+          strokeLinecap: "round",
+          strokeDasharray: arc(percent),
+          className: cn(strokeSolidClass[color], "transition-[stroke-dasharray] duration-300 motion-reduce:transition-none", percent === 0 && "opacity-0")
+        }
+      ),
+      successPercent > 0 && /* @__PURE__ */ jsx("circle", { cx: box / 2, cy: box / 2, r, fill: "none", strokeWidth: stroke, strokeLinecap: "round", strokeDasharray: arc(successPercent), className: strokeSolidClass.success })
+    ] })
+  ] });
+}
+export {
+  Progress
+};
+//# sourceMappingURL=progress.js.map