@trsys-tech/matrix-library 1.1.1 → 1.1.5

package/dist/switch.es.js

@@ -1,6 +1,6 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import * as i from "react";
-import * as t from "@radix-ui/react-switch";
+import * as a from "@radix-ui/react-switch";
 import { cn as m } from "./utils.es.js";
 import { tv as x } from "tailwind-variants";
 const o = x({
@@ -15,15 +15,15 @@ const o = x({
   defaultVariants: {
     size: "md"
   }
-}), c = i.forwardRef(({ className: s, size: e, ...r }, n) => /* @__PURE__ */ a(t.Root, { className: m(o({ size: e, className: s })), ...r, ref: n, children: /* @__PURE__ */ a(
-  t.Thumb,
+}), c = i.forwardRef(({ className: s, size: e, ...r }, n) => /* @__PURE__ */ t(a.Root, { className: m(o({ size: e, className: s })), ...r, ref: n, children: /* @__PURE__ */ t(
+  a.Thumb,
   {
     className: m(
       "mtx-pointer-events-none mtx-block mtx-rounded-full mtx-bg-background mtx-shadow-lg mtx-ring-0 mtx-transition-transform data-[state=unchecked]:mtx-translate-x-0"
     )
   }
 ) }));
-c.displayName = t.Root.displayName;
+c.displayName = "Switch";
 export {
   c as Switch
 };

package/dist/switch.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.es.js","sources":["../src/components/switch/Switch.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { tv, VariantProps } from \"tailwind-variants\";\r\n\r\nconst switchVariants = tv({\r\n  base: \"mtx-peer mtx-inline-flex mtx-h-4 mtx-w-7 mtx-shrink-0 mtx-cursor-pointer mtx-items-center mtx-rounded-full mtx-border-2 mtx-border-transparent mtx-shadow-sm mtx-transition-colors focus-visible:mtx-outline-none focus-visible:mtx-ring-2 focus-visible:mtx-ring-ring focus-visible:mtx-ring-offset-2 focus-visible:mtx-ring-offset-background disabled:mtx-cursor-not-allowed disabled:mtx-opacity-50 data-[state=checked]:mtx-bg-primary data-[state=unchecked]:mtx-bg-input\",\r\n  variants: {\r\n    size: {\r\n      sm: \"mtx-h-4 mtx-w-7 [&>span]:mtx-h-3 [&>span]:mtx-w-3 [&>span]:data-[state=checked]:mtx-translate-x-3\",\r\n      md: \"mtx-h-5 mtx-w-9 [&>span]:mtx-h-4 [&>span]:mtx-w-4 [&>span]:data-[state=checked]:mtx-translate-x-4\",\r\n      lg: \"mtx-h-6 mtx-w-11 [&>span]:mtx-h-5 [&>span]:mtx-w-5 [&>span]:data-[state=checked]:mtx-translate-x-5\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: \"md\",\r\n  },\r\n});\r\n\r\ninterface SwitchProps extends SwitchPrimitives.SwitchProps, VariantProps<typeof switchVariants> {}\r\n\r\nconst Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(({ className, size, ...props }, ref) => (\r\n  <SwitchPrimitives.Root className={cn(switchVariants({ size, className }))} {...props} ref={ref}>\r\n    <SwitchPrimitives.Thumb\r\n      className={cn(\r\n        \"mtx-pointer-events-none mtx-block mtx-rounded-full mtx-bg-background mtx-shadow-lg mtx-ring-0 mtx-transition-transform data-[state=unchecked]:mtx-translate-x-0\",\r\n      )}\r\n    />\r\n  </SwitchPrimitives.Root>\r\n));\r\nSwitch.displayName = SwitchPrimitives.Root.displayName;\r\n\r\nexport { Switch, type SwitchProps };\r\n"],"names":["switchVariants","tv","Switch","React","className","size","props","ref","jsx","SwitchPrimitives","cn"],"mappings":";;;;;AAQA,MAAMA,IAAiBC,EAAG;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC,GAIKC,IAASC,EAAM,WAAwE,CAAC,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,EAAA,GAASC,MAC3H,gBAAAC,EAACC,EAAiB,MAAjB,EAAsB,WAAWC,EAAGV,EAAe,EAAE,MAAAK,GAAM,WAAAD,GAAW,CAAC,GAAI,GAAGE,GAAO,KAAAC,GACpF,UAAA,gBAAAC;AAAA,EAACC,EAAiB;AAAA,EAAjB;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,IAAA;AAAA,EACF;AACF,GACF,CACD;AACDR,EAAO,cAAcO,EAAiB,KAAK;"}
+{"version":3,"file":"switch.es.js","sources":["../src/components/switch/Switch.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { tv, VariantProps } from \"tailwind-variants\";\r\n\r\nconst switchVariants = tv({\r\n  base: \"mtx-peer mtx-inline-flex mtx-h-4 mtx-w-7 mtx-shrink-0 mtx-cursor-pointer mtx-items-center mtx-rounded-full mtx-border-2 mtx-border-transparent mtx-shadow-sm mtx-transition-colors focus-visible:mtx-outline-none focus-visible:mtx-ring-2 focus-visible:mtx-ring-ring focus-visible:mtx-ring-offset-2 focus-visible:mtx-ring-offset-background disabled:mtx-cursor-not-allowed disabled:mtx-opacity-50 data-[state=checked]:mtx-bg-primary data-[state=unchecked]:mtx-bg-input\",\r\n  variants: {\r\n    size: {\r\n      sm: \"mtx-h-4 mtx-w-7 [&>span]:mtx-h-3 [&>span]:mtx-w-3 [&>span]:data-[state=checked]:mtx-translate-x-3\",\r\n      md: \"mtx-h-5 mtx-w-9 [&>span]:mtx-h-4 [&>span]:mtx-w-4 [&>span]:data-[state=checked]:mtx-translate-x-4\",\r\n      lg: \"mtx-h-6 mtx-w-11 [&>span]:mtx-h-5 [&>span]:mtx-w-5 [&>span]:data-[state=checked]:mtx-translate-x-5\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: \"md\",\r\n  },\r\n});\r\n\r\ninterface SwitchProps extends SwitchPrimitives.SwitchProps, VariantProps<typeof switchVariants> {}\r\n\r\nconst Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(({ className, size, ...props }, ref) => (\r\n  <SwitchPrimitives.Root className={cn(switchVariants({ size, className }))} {...props} ref={ref}>\r\n    <SwitchPrimitives.Thumb\r\n      className={cn(\r\n        \"mtx-pointer-events-none mtx-block mtx-rounded-full mtx-bg-background mtx-shadow-lg mtx-ring-0 mtx-transition-transform data-[state=unchecked]:mtx-translate-x-0\",\r\n      )}\r\n    />\r\n  </SwitchPrimitives.Root>\r\n));\r\nSwitch.displayName = \"Switch\";\r\n\r\nexport { Switch, type SwitchProps };\r\n"],"names":["switchVariants","tv","Switch","React","className","size","props","ref","jsx","SwitchPrimitives","cn"],"mappings":";;;;;AAQA,MAAMA,IAAiBC,EAAG;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC,GAIKC,IAASC,EAAM,WAAwE,CAAC,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,EAAA,GAASC,MAC3H,gBAAAC,EAACC,EAAiB,MAAjB,EAAsB,WAAWC,EAAGV,EAAe,EAAE,MAAAK,GAAM,WAAAD,GAAW,CAAC,GAAI,GAAGE,GAAO,KAAAC,GACpF,UAAA,gBAAAC;AAAA,EAACC,EAAiB;AAAA,EAAjB;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,IAAA;AAAA,EACF;AACF,GACF,CACD;AACDR,EAAO,cAAc;"}

package/dist/tabs.es.js

@@ -1,41 +1,40 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import * as o from "react";
-import { Root as n, Content as s, List as x, Trigger as i } from "@radix-ui/react-tabs";
+import { Root as f, Content as x, List as s, Trigger as i } from "@radix-ui/react-tabs";
 import { cn as r } from "./utils.es.js";
-const y = n, d = o.forwardRef(({ className: t, ...e }, a) => /* @__PURE__ */ m(
-  x,
+const u = f, d = o.forwardRef(({ className: t, ...e }, m) => /* @__PURE__ */ a(
+  s,
   {
-    ref: a,
+    ref: m,
     className: r(
-      "mtx-inline-flex mtx-h-12 mtx-w-full mtx-overflow-auto mtx-thin-scrollbar mtx-items-center mtx-justify-start mtx-bg-background mtx-p-0 mtx-text-muted-foreground md:mtx-[box-shadow:inset_0_-oklch(var(--gray-300))]",
+      "mtx-inline-flex mtx-h-8 mtx-w-full mtx-overflow-auto mtx-thin-scrollbar mtx-items-center mtx-justify-start mtx-bg-background mtx-p-0 mtx-text-muted-foreground md:mtx-[box-shadow:inset_0_-oklch(var(--gray-300))]",
       t
     ),
     ...e
   }
 ));
-d.displayName = x.displayName;
+d.displayName = s.displayName;
+const b = o.forwardRef(({ className: t, hasAlert: e, ...m }, n) => /* @__PURE__ */ a(
+  i,
+  {
+    ref: n,
+    className: r(
+      "mtx-inline-flex mtx-items-center mtx-justify-center mtx-whitespace-nowrap mtx-h-full mtx-px-3 mtx-py-1 mtx-text-sm mtx-font-medium disabled:mtx-pointer-events-none disabled:mtx-opacity-50 data-[state=active]:mtx-text-foreground data-[state=active]:mtx-font-bold data-[state=active]:mtx-border-b-2 data-[state=active]:mtx-border-primary",
+      t,
+      e && "mtx-relative before:mtx-content-[''] before:mtx-block before:mtx-absolute before:mtx-top-0 before:mtx-right-0 before:mtx-z-10 before:mtx-bg-danger before:mtx-w-2 before:mtx-h-2 before:mtx-rounded"
+    ),
+    ...m
+  }
+));
+b.displayName = i.displayName;
 const l = o.forwardRef(
-  ({ className: t, ...e }, a) => /* @__PURE__ */ m(
-    i,
-    {
-      ref: a,
-      className: r(
-        "mtx-inline-flex mtx-items-center mtx-justify-center mtx-whitespace-nowrap mtx-h-full mtx-px-3 mtx-py-1 mtx-text-sm mtx-font-medium disabled:mtx-pointer-events-none disabled:mtx-opacity-50 data-[state=active]:mtx-text-foreground data-[state=active]:mtx-font-bold data-[state=active]:mtx-border-b-2 data-[state=active]:mtx-border-primary",
-        t
-      ),
-      ...e
-    }
-  )
-);
-l.displayName = i.displayName;
-const c = o.forwardRef(
-  ({ className: t, ...e }, a) => /* @__PURE__ */ m(s, { ref: a, className: r("mtx-mt-2", t), ...e })
+  ({ className: t, ...e }, m) => /* @__PURE__ */ a(x, { ref: m, className: r("mtx-mt-2", t), ...e })
 );
-c.displayName = s.displayName;
+l.displayName = x.displayName;
 export {
-  y as Tabs,
-  c as TabsContent,
+  u as Tabs,
+  l as TabsContent,
   d as TabsList,
-  l as TabsTrigger
+  b as TabsTrigger
 };
 //# sourceMappingURL=tabs.es.js.map

package/dist/tabs.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.es.js","sources":["../src/components/tabs/Tabs.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { Content, List, Root, TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps, Trigger } from \"@radix-ui/react-tabs\";\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst Tabs = Root;\r\n\r\nconst TabsList = React.forwardRef<React.ElementRef<typeof List>, React.ComponentPropsWithoutRef<typeof List>>(({ className, ...props }, ref) => (\r\n  <List\r\n    ref={ref}\r\n    className={cn(\r\n      \"mtx-inline-flex mtx-h-12 mtx-w-full mtx-overflow-auto mtx-thin-scrollbar mtx-items-center mtx-justify-start mtx-bg-background mtx-p-0 mtx-text-muted-foreground md:mtx-[box-shadow:inset_0_-oklch(var(--gray-300))]\",\r\n      className,\r\n    )}\r\n    {...props}\r\n  />\r\n));\r\nTabsList.displayName = List.displayName;\r\n\r\nconst TabsTrigger = React.forwardRef<React.ElementRef<typeof Trigger>, React.ComponentPropsWithoutRef<typeof Trigger>>(\r\n  ({ className, ...props }, ref) => (\r\n    <Trigger\r\n      ref={ref}\r\n      className={cn(\r\n        \"mtx-inline-flex mtx-items-center mtx-justify-center mtx-whitespace-nowrap mtx-h-full mtx-px-3 mtx-py-1 mtx-text-sm mtx-font-medium disabled:mtx-pointer-events-none disabled:mtx-opacity-50 data-[state=active]:mtx-text-foreground data-[state=active]:mtx-font-bold data-[state=active]:mtx-border-b-2 data-[state=active]:mtx-border-primary\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\nTabsTrigger.displayName = Trigger.displayName;\r\n\r\nconst TabsContent = React.forwardRef<React.ElementRef<typeof Content>, React.ComponentPropsWithoutRef<typeof Content>>(\r\n  ({ className, ...props }, ref) => <Content ref={ref} className={cn(\"mtx-mt-2\", className)} {...props} />,\r\n);\r\nTabsContent.displayName = Content.displayName;\r\n\r\nexport { Tabs, TabsList, TabsTrigger, TabsContent, type TabsProps, type TabsListProps, type TabsTriggerProps, type TabsContentProps };\r\n"],"names":["Tabs","Root","TabsList","React","className","props","ref","jsx","List","cn","TabsTrigger","Trigger","TabsContent","Content"],"mappings":";;;;AAMA,MAAMA,IAAOC,GAEPC,IAAWC,EAAM,WAAuF,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACtI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG;AAAA,MACT;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAS,cAAcM,EAAK;AAE5B,MAAME,IAAcP,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACxB,gBAAAC;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAWG;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AACAK,EAAY,cAAcC,EAAQ;AAElC,MAAMC,IAAcT,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAAQ,gBAAAC,EAACM,GAAA,EAAQ,KAAAP,GAAU,WAAWG,EAAG,YAAYL,CAAS,GAAI,GAAGC,EAAA,CAAO;AACxG;AACAO,EAAY,cAAcC,EAAQ;"}
+{"version":3,"file":"tabs.es.js","sources":["../src/components/tabs/Tabs.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport {\r\n  Content,\r\n  List,\r\n  Root,\r\n  TabsContentProps,\r\n  TabsListProps,\r\n  TabsProps,\r\n  TabsTriggerProps as RadixTabsTriggerProps,\r\n  Trigger,\r\n} from \"@radix-ui/react-tabs\";\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst Tabs = Root;\r\n\r\nconst TabsList = React.forwardRef<React.ElementRef<typeof List>, React.ComponentPropsWithoutRef<typeof List>>(({ className, ...props }, ref) => (\r\n  <List\r\n    ref={ref}\r\n    className={cn(\r\n      \"mtx-inline-flex mtx-h-8 mtx-w-full mtx-overflow-auto mtx-thin-scrollbar mtx-items-center mtx-justify-start mtx-bg-background mtx-p-0 mtx-text-muted-foreground md:mtx-[box-shadow:inset_0_-oklch(var(--gray-300))]\",\r\n      className,\r\n    )}\r\n    {...props}\r\n  />\r\n));\r\nTabsList.displayName = List.displayName;\r\n\r\ntype TabsTriggerProps = RadixTabsTriggerProps & {\r\n  hasAlert?: boolean;\r\n};\r\n\r\nconst TabsTrigger = React.forwardRef<React.ElementRef<typeof Trigger>, TabsTriggerProps>(({ className, hasAlert, ...props }, ref) => (\r\n  <Trigger\r\n    ref={ref}\r\n    className={cn(\r\n      \"mtx-inline-flex mtx-items-center mtx-justify-center mtx-whitespace-nowrap mtx-h-full mtx-px-3 mtx-py-1 mtx-text-sm mtx-font-medium disabled:mtx-pointer-events-none disabled:mtx-opacity-50 data-[state=active]:mtx-text-foreground data-[state=active]:mtx-font-bold data-[state=active]:mtx-border-b-2 data-[state=active]:mtx-border-primary\",\r\n      className,\r\n      hasAlert &&\r\n        \"mtx-relative before:mtx-content-[''] before:mtx-block before:mtx-absolute before:mtx-top-0 before:mtx-right-0 before:mtx-z-10 before:mtx-bg-danger before:mtx-w-2 before:mtx-h-2 before:mtx-rounded\",\r\n    )}\r\n    {...props}\r\n  />\r\n));\r\nTabsTrigger.displayName = Trigger.displayName;\r\n\r\nconst TabsContent = React.forwardRef<React.ElementRef<typeof Content>, React.ComponentPropsWithoutRef<typeof Content>>(\r\n  ({ className, ...props }, ref) => <Content ref={ref} className={cn(\"mtx-mt-2\", className)} {...props} />,\r\n);\r\nTabsContent.displayName = Content.displayName;\r\n\r\nexport {\r\n  Tabs,\r\n  TabsList,\r\n  TabsTrigger,\r\n  TabsContent,\r\n  type TabsProps,\r\n  type TabsListProps,\r\n  type RadixTabsTriggerProps as TabsTriggerProps,\r\n  type TabsContentProps,\r\n};\r\n"],"names":["Tabs","Root","TabsList","React","className","props","ref","jsx","List","cn","TabsTrigger","hasAlert","Trigger","TabsContent","Content"],"mappings":";;;;AAeA,MAAMA,IAAOC,GAEPC,IAAWC,EAAM,WAAuF,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACtI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG;AAAA,MACT;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAS,cAAcM,EAAK;AAM5B,MAAME,IAAcP,EAAM,WAA+D,CAAC,EAAE,WAAAC,GAAW,UAAAO,GAAU,GAAGN,KAASC,MAC3H,gBAAAC;AAAA,EAACK;AAAA,EAAA;AAAA,IACC,KAAAN;AAAA,IACA,WAAWG;AAAA,MACT;AAAA,MACAL;AAAA,MACAO,KACE;AAAA,IAAA;AAAA,IAEH,GAAGN;AAAA,EAAA;AACN,CACD;AACDK,EAAY,cAAcE,EAAQ;AAElC,MAAMC,IAAcV,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAAQ,gBAAAC,EAACO,GAAA,EAAQ,KAAAR,GAAU,WAAWG,EAAG,YAAYL,CAAS,GAAI,GAAGC,EAAA,CAAO;AACxG;AACAQ,EAAY,cAAcC,EAAQ;"}

package/dist/textfield.es.js

@@ -23,38 +23,38 @@ const j = F({
     className: s,
     slotProps: e,
     suffix: t,
-    endAdornment: d,
+    endAdornment: l,
     startAdornment: m,
-    size: l,
-    value: f,
-    onChange: p,
+    size: d,
+    value: p,
+    onChange: f,
     defaultValue: u,
-    type: r,
-    disabled: x,
+    type: x,
+    disabled: r,
     onWheel: i,
-    id: b,
-    "aria-describedby": c,
+    id: c,
+    "aria-describedby": b,
     "aria-invalid": h,
     ...g
   }, y) => {
     const w = (a) => {
-      r === "number" && a.target.blur(), i && i(a);
+      x === "number" && a.target.blur(), i && i(a);
     };
-    return /* @__PURE__ */ v("div", { ...g, className: o(j({ size: l, className: s })), "aria-disabled": x, children: [
+    return /* @__PURE__ */ v("div", { ...g, className: o(j({ size: d, className: s })), "aria-disabled": r, children: [
       m,
       /* @__PURE__ */ n(
         "input",
         {
-          type: r,
+          type: x,
           onWheel: w,
           ref: y,
-          id: b,
-          "aria-describedby": c,
+          id: c,
+          "aria-describedby": b,
           "aria-invalid": h,
-          onChange: p,
-          value: f,
+          onChange: f,
+          value: p,
           defaultValue: u,
-          disabled: x,
+          disabled: r,
           ...e?.inputProps ?? {},
           className: o(
             "focus:mtx-outline-none mtx-w-full mtx-h-full mtx-py-1 mtx-rounded-sm file:mtx-border-0 mtx-bg-transparent file:mtx-text-sm file:mtx-font-medium file:mtx-text-foreground placeholder:mtx-text-text-300",
@@ -63,8 +63,8 @@ const j = F({
           )
         }
       ),
-      typeof t == "string" || typeof t == "number" ? /* @__PURE__ */ n("span", { className: "mtx-inline-flex mtx-items-center mtx-px-2 mtx-text-xs mtx-font-medium mtx-text-primary mtx-bg-primary-50 mtx-m-0.5 mtx-rounded-sm", children: t }) : t,
-      d
+      typeof t == "string" || typeof t == "number" ? /* @__PURE__ */ n("span", { className: "mtx-inline-flex mtx-items-center mtx-px-2 mtx-text-xs mtx-font-medium mtx-text-primary mtx-bg-primary-50 mtx-m-0.5 mtx-rounded-sm mtx-h-[calc(100%-4px)]", children: t }) : t,
+      l
     ] });
   }
 );

package/dist/textfield.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"textfield.es.js","sources":["../src/components/text-field/TextField.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, VariantProps } from \"tailwind-variants\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst textFieldVariants = tv({\r\n  base: [\r\n    \"mtx-flex mtx-items-center mtx-w-full mtx-rounded-sm mtx-border mtx-border-input mtx-text-text mtx-bg-transparent mtx-p-0 mtx-text-xs [&_input]:mtx-text-xs mtx-font-medium mtx-transition-colors file:mtx-border-0 file:mtx-bg-transparent file:mtx-text-sm file:mtx-font-medium file:mtx-text-foreground\",\r\n    \"placeholder:mtx-text-text-300 hover:mtx-border-primary-400 focus-within:mtx-border-primary-400 focus-within:mtx-outline-none focus-within:mtx-ring focus-within:mtx-ring-primary-100\",\r\n    \"aria-disabled:mtx-text-text-300 aria-disabled:mtx-bg-gray-100 aria-disabled:mtx-border-gray-100\",\r\n  ],\r\n  variants: {\r\n    size: {\r\n      sm: \"mtx-h-7\",\r\n      md: \"mtx-h-8\",\r\n      lg: \"mtx-h-11\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: \"md\",\r\n  },\r\n});\r\n\r\ninterface TextFieldProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof textFieldVariants> {\r\n  type?: React.HTMLInputTypeAttribute;\r\n  disabled?: boolean;\r\n  suffix?: React.ReactNode;\r\n  endAdornment?: React.ReactNode;\r\n  startAdornment?: React.ReactNode;\r\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\r\n  value?: string | number;\r\n  defaultValue?: string | number;\r\n  slotProps?: {\r\n    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\r\n  };\r\n}\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\r\n  (\r\n    {\r\n      className,\r\n      slotProps,\r\n      suffix,\r\n      endAdornment,\r\n      startAdornment,\r\n      size,\r\n      value,\r\n      onChange,\r\n      defaultValue,\r\n      type,\r\n      disabled,\r\n      onWheel,\r\n      id,\r\n      \"aria-describedby\": ariaDescribedby,\r\n      \"aria-invalid\": ariaInvalid,\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const handleWheel = (event: React.WheelEvent<HTMLInputElement>) => {\r\n      if (type === \"number\") {\r\n        // Prevents the number input from changing value when scrolling\r\n        (event.target as HTMLInputElement).blur();\r\n      }\r\n      if (onWheel) {\r\n        onWheel(event);\r\n      }\r\n    };\r\n\r\n    return (\r\n      <div {...props} className={cn(textFieldVariants({ size, className }))} aria-disabled={disabled}>\r\n        {startAdornment}\r\n        <input\r\n          type={type}\r\n          onWheel={handleWheel}\r\n          ref={ref}\r\n          id={id}\r\n          aria-describedby={ariaDescribedby}\r\n          aria-invalid={ariaInvalid}\r\n          onChange={onChange}\r\n          value={value}\r\n          defaultValue={defaultValue}\r\n          disabled={disabled}\r\n          {...(slotProps?.inputProps ?? {})}\r\n          className={cn(\r\n            \"focus:mtx-outline-none mtx-w-full mtx-h-full mtx-py-1 mtx-rounded-sm file:mtx-border-0 mtx-bg-transparent file:mtx-text-sm file:mtx-font-medium file:mtx-text-foreground placeholder:mtx-text-text-300\",\r\n            !startAdornment ? \"mtx-px-3\" : \"mtx-ps-1 mtx-pe-3\",\r\n            slotProps?.inputProps?.className,\r\n          )}\r\n        />\r\n        {typeof suffix === \"string\" || typeof suffix === \"number\" ? (\r\n          <span className=\"mtx-inline-flex mtx-items-center mtx-px-2 mtx-text-xs mtx-font-medium mtx-text-primary mtx-bg-primary-50 mtx-m-0.5 mtx-rounded-sm\">\r\n            {suffix}\r\n          </span>\r\n        ) : (\r\n          suffix\r\n        )}\r\n        {endAdornment}\r\n      </div>\r\n    );\r\n  },\r\n);\r\nTextField.displayName = \"TextField\";\r\n\r\nexport { TextField, type TextFieldProps };\r\n"],"names":["textFieldVariants","tv","TextField","React","className","slotProps","suffix","endAdornment","startAdornment","size","value","onChange","defaultValue","type","disabled","onWheel","id","ariaDescribedby","ariaInvalid","props","ref","handleWheel","event","jsxs","cn","jsx"],"mappings":";;;;AAOA,MAAMA,IAAoBC,EAAG;AAAA,EAC3B,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC,GAgBKC,IAAYC,EAAM;AAAA,EACtB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,IAAAC;AAAA,IACA,oBAAoBC;AAAA,IACpB,gBAAgBC;AAAA,IAChB,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAc,CAACC,MAA8C;AACjE,MAAIT,MAAS,YAEVS,EAAM,OAA4B,KAAA,GAEjCP,KACFA,EAAQO,CAAK;AAAA,IAEjB;AAEA,WACE,gBAAAC,EAAC,OAAA,EAAK,GAAGJ,GAAO,WAAWK,EAAGxB,EAAkB,EAAE,MAAAS,GAAM,WAAAL,EAAA,CAAW,CAAC,GAAG,iBAAeU,GACnF,UAAA;AAAA,MAAAN;AAAA,MACD,gBAAAiB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAAZ;AAAA,UACA,SAASQ;AAAA,UACT,KAAAD;AAAA,UACA,IAAAJ;AAAA,UACA,oBAAkBC;AAAA,UAClB,gBAAcC;AAAA,UACd,UAAAP;AAAA,UACA,OAAAD;AAAA,UACA,cAAAE;AAAA,UACA,UAAAE;AAAA,UACC,GAAIT,GAAW,cAAc,CAAA;AAAA,UAC9B,WAAWmB;AAAA,YACT;AAAA,YACChB,IAA8B,sBAAb;AAAA,YAClBH,GAAW,YAAY;AAAA,UAAA;AAAA,QACzB;AAAA,MAAA;AAAA,MAED,OAAOC,KAAW,YAAY,OAAOA,KAAW,WAC/C,gBAAAmB,EAAC,QAAA,EAAK,WAAU,qIACb,UAAAnB,EAAA,CACH,IAEAA;AAAA,MAEDC;AAAA,IAAA,GACH;AAAA,EAEJ;AACF;AACAL,EAAU,cAAc;"}
+{"version":3,"file":"textfield.es.js","sources":["../src/components/text-field/TextField.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, VariantProps } from \"tailwind-variants\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst textFieldVariants = tv({\r\n  base: [\r\n    \"mtx-flex mtx-items-center mtx-w-full mtx-rounded-sm mtx-border mtx-border-input mtx-text-text mtx-bg-transparent mtx-p-0 mtx-text-xs [&_input]:mtx-text-xs mtx-font-medium mtx-transition-colors file:mtx-border-0 file:mtx-bg-transparent file:mtx-text-sm file:mtx-font-medium file:mtx-text-foreground\",\r\n    \"placeholder:mtx-text-text-300 hover:mtx-border-primary-400 focus-within:mtx-border-primary-400 focus-within:mtx-outline-none focus-within:mtx-ring focus-within:mtx-ring-primary-100\",\r\n    \"aria-disabled:mtx-text-text-300 aria-disabled:mtx-bg-gray-100 aria-disabled:mtx-border-gray-100\",\r\n  ],\r\n  variants: {\r\n    size: {\r\n      sm: \"mtx-h-7\",\r\n      md: \"mtx-h-8\",\r\n      lg: \"mtx-h-11\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: \"md\",\r\n  },\r\n});\r\n\r\ninterface TextFieldProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof textFieldVariants> {\r\n  type?: React.HTMLInputTypeAttribute;\r\n  disabled?: boolean;\r\n  suffix?: React.ReactNode;\r\n  endAdornment?: React.ReactNode;\r\n  startAdornment?: React.ReactNode;\r\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\r\n  value?: string | number;\r\n  defaultValue?: string | number;\r\n  slotProps?: {\r\n    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\r\n  };\r\n}\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\r\n  (\r\n    {\r\n      className,\r\n      slotProps,\r\n      suffix,\r\n      endAdornment,\r\n      startAdornment,\r\n      size,\r\n      value,\r\n      onChange,\r\n      defaultValue,\r\n      type,\r\n      disabled,\r\n      onWheel,\r\n      id,\r\n      \"aria-describedby\": ariaDescribedby,\r\n      \"aria-invalid\": ariaInvalid,\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const handleWheel = (event: React.WheelEvent<HTMLInputElement>) => {\r\n      if (type === \"number\") {\r\n        // Prevents the number input from changing value when scrolling\r\n        (event.target as HTMLInputElement).blur();\r\n      }\r\n      if (onWheel) {\r\n        onWheel(event);\r\n      }\r\n    };\r\n\r\n    return (\r\n      <div {...props} className={cn(textFieldVariants({ size, className }))} aria-disabled={disabled}>\r\n        {startAdornment}\r\n        <input\r\n          type={type}\r\n          onWheel={handleWheel}\r\n          ref={ref}\r\n          id={id}\r\n          aria-describedby={ariaDescribedby}\r\n          aria-invalid={ariaInvalid}\r\n          onChange={onChange}\r\n          value={value}\r\n          defaultValue={defaultValue}\r\n          disabled={disabled}\r\n          {...(slotProps?.inputProps ?? {})}\r\n          className={cn(\r\n            \"focus:mtx-outline-none mtx-w-full mtx-h-full mtx-py-1 mtx-rounded-sm file:mtx-border-0 mtx-bg-transparent file:mtx-text-sm file:mtx-font-medium file:mtx-text-foreground placeholder:mtx-text-text-300\",\r\n            !startAdornment ? \"mtx-px-3\" : \"mtx-ps-1 mtx-pe-3\",\r\n            slotProps?.inputProps?.className,\r\n          )}\r\n        />\r\n        {typeof suffix === \"string\" || typeof suffix === \"number\" ? (\r\n          <span className=\"mtx-inline-flex mtx-items-center mtx-px-2 mtx-text-xs mtx-font-medium mtx-text-primary mtx-bg-primary-50 mtx-m-0.5 mtx-rounded-sm mtx-h-[calc(100%-4px)]\">\r\n            {suffix}\r\n          </span>\r\n        ) : (\r\n          suffix\r\n        )}\r\n        {endAdornment}\r\n      </div>\r\n    );\r\n  },\r\n);\r\nTextField.displayName = \"TextField\";\r\n\r\nexport { TextField, type TextFieldProps };\r\n"],"names":["textFieldVariants","tv","TextField","React","className","slotProps","suffix","endAdornment","startAdornment","size","value","onChange","defaultValue","type","disabled","onWheel","id","ariaDescribedby","ariaInvalid","props","ref","handleWheel","event","jsxs","cn","jsx"],"mappings":";;;;AAOA,MAAMA,IAAoBC,EAAG;AAAA,EAC3B,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC,GAgBKC,IAAYC,EAAM;AAAA,EACtB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,IAAAC;AAAA,IACA,oBAAoBC;AAAA,IACpB,gBAAgBC;AAAA,IAChB,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAc,CAACC,MAA8C;AACjE,MAAIT,MAAS,YAEVS,EAAM,OAA4B,KAAA,GAEjCP,KACFA,EAAQO,CAAK;AAAA,IAEjB;AAEA,WACE,gBAAAC,EAAC,OAAA,EAAK,GAAGJ,GAAO,WAAWK,EAAGxB,EAAkB,EAAE,MAAAS,GAAM,WAAAL,EAAA,CAAW,CAAC,GAAG,iBAAeU,GACnF,UAAA;AAAA,MAAAN;AAAA,MACD,gBAAAiB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAAZ;AAAA,UACA,SAASQ;AAAA,UACT,KAAAD;AAAA,UACA,IAAAJ;AAAA,UACA,oBAAkBC;AAAA,UAClB,gBAAcC;AAAA,UACd,UAAAP;AAAA,UACA,OAAAD;AAAA,UACA,cAAAE;AAAA,UACA,UAAAE;AAAA,UACC,GAAIT,GAAW,cAAc,CAAA;AAAA,UAC9B,WAAWmB;AAAA,YACT;AAAA,YACChB,IAA8B,sBAAb;AAAA,YAClBH,GAAW,YAAY;AAAA,UAAA;AAAA,QACzB;AAAA,MAAA;AAAA,MAED,OAAOC,KAAW,YAAY,OAAOA,KAAW,WAC/C,gBAAAmB,EAAC,QAAA,EAAK,WAAU,4JACb,UAAAnB,EAAA,CACH,IAEAA;AAAA,MAEDC;AAAA,IAAA,GACH;AAAA,EAEJ;AACF;AACAL,EAAU,cAAc;"}

package/dist/timeline.es.js

@@ -0,0 +1,328 @@
+import { jsxs as a, jsx as e, Fragment as B } from "react/jsx-runtime";
+import k, { useMemo as b } from "react";
+import { cn as f } from "./utils.es.js";
+import { Skeleton as r } from "./skeleton.es.js";
+const $ = ({ item: m, color: d, size: x }) => {
+  const s = m.status ?? "pending";
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      className: "mtx-block mtx-size-5 data-[size=sm]:mtx-size-4 data-[size=lg]:mtx-size-6",
+      "data-size": x,
+      "data-status": s,
+      style: { color: d },
+      children: [
+        /* @__PURE__ */ a(
+          "svg",
+          {
+            viewBox: "0 0 24 24",
+            "aria-hidden": "true",
+            focusable: "false",
+            className: "mtx-block mtx-size-full mtx-fill-none mtx-stroke-current mtx-stroke-[1.25] mtx-stroke-linecap-round mtx-stroke-linejoin-round",
+            children: [
+              /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10.5", className: "mtx-fill-background" }),
+              s === "completed" && /* @__PURE__ */ e("path", { d: "m7 12 3 3 7-7" }),
+              s === "error" && /* @__PURE__ */ e("path", { d: "m8 8 8 8m0-8-8 8" }),
+              s === "active" && /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "6", fill: "currentColor", stroke: "none" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: "mtx-sr-only", children: m.statusLabel ?? s })
+      ]
+    }
+  );
+}, D = ({ items: m, visibleBranches: d, superRow: x, markerRow: s, size: g }) => {
+  const z = b(() => g === "sm" ? "M1" : g === "lg" ? "M3" : "M2", [g]);
+  return /* @__PURE__ */ a(B, { children: [
+    m.map((n, i) => /* @__PURE__ */ a(
+      "li",
+      {
+        className: "mtx-relative mtx-grid mtx-min-w-0 mtx-row-span-full mtx-grid-rows-[subgrid]",
+        style: { gridColumn: i + 1 },
+        "aria-hidden": "true",
+        "data-slot": "timeline-skeleton-item",
+        children: [
+          /* @__PURE__ */ a("div", { className: "mtx-min-h-8 mtx-self-end mtx-pb-2 mtx-pt-1 mtx-pr-3", style: { gridRow: x }, children: [
+            /* @__PURE__ */ e(r, { "aria-hidden": "true", className: "mtx-h-3 mtx-w-14" }),
+            /* @__PURE__ */ e(r, { "aria-hidden": "true", className: "mtx-h-2 mtx-w-16 mtx-mt-1" })
+          ] }),
+          i > 0 && /* @__PURE__ */ e(
+            "span",
+            {
+              className: "mtx-absolute mtx-top-2.5 group-data-[size=sm]:mtx-top-2 group-data-[size=lg]:mtx-top-3 mtx-w-[calc(100%-20px)] mtx-left-[calc(-100%+20px)] group-data-[size=sm]:mtx-w-[calc(100%-16px)] group-data-[size=sm]:mtx-left-[calc(-100%+16px)] group-data-[size=lg]:mtx-w-[calc(100%-24px)] group-data-[size=lg]:mtx-left-[calc(-100%+24px)] mtx-z-10 mtx-h-0.5 mtx-bg-primary/10 mtx-animate-pulse",
+              style: { gridRow: s }
+            }
+          ),
+          /* @__PURE__ */ e(
+            r,
+            {
+              className: "mtx-z-20 mtx-rounded-full mtx-size-5 group-data-[size=sm]:mtx-size-4 group-data-[size=lg]:mtx-size-6",
+              style: { gridRow: s },
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ a("div", { className: "mtx-pt-1 mtx-pr-3", style: { gridRow: s + 1 }, children: [
+            /* @__PURE__ */ e(r, { "aria-hidden": "true", className: "mtx-h-2 mtx-w-16" }),
+            /* @__PURE__ */ e(r, { "aria-hidden": "true", className: "mtx-h-2 mtx-w-12 mtx-mt-1" })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "mtx-pr-3 mtx-pt-5", style: { gridRow: s + 2 }, children: /* @__PURE__ */ e(r, { "aria-hidden": "true", className: "mtx-h-2 mtx-w-16" }) })
+        ]
+      },
+      `skeleton-item-${n.id}`
+    )),
+    d.map(({ branch: n, index: i }, u) => /* @__PURE__ */ a(
+      "li",
+      {
+        className: "mtx-pointer-events-none mtx-grid mtx-min-w-0 mtx-row-span-full mtx-grid-cols-[subgrid] mtx-grid-rows-[subgrid]",
+        style: { gridColumn: `${i + 1} / -1` },
+        "aria-hidden": "true",
+        "data-slot": "timeline-skeleton-branch",
+        children: [
+          /* @__PURE__ */ a("div", { className: "mtx-col-[-2_/_-1] mtx-self-end mtx-pb-2", style: { gridRow: u * 2 + 1 }, children: [
+            /* @__PURE__ */ e(r, { "aria-hidden": "true", className: "mtx-h-3 mtx-w-14" }),
+            /* @__PURE__ */ e(r, { "aria-hidden": "true", className: "mtx-h-2 mtx-w-16 mtx-mt-1" }),
+            /* @__PURE__ */ e(r, { "aria-hidden": "true", className: "mtx-h-2 mtx-w-16 mtx-mt-1" })
+          ] }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "mtx-relative mtx-col-[1_/_-1] mtx-mb-[9px] group-data-[size=sm]:mtx-mb-[7px] group-data-[size=lg]:mtx-mb-[11px] mtx-ml-3 mtx-mt-2.5 group-data-[size=sm]:mtx-mt-2 group-data-[size=lg]:mtx-mt-3 mtx-overflow-visible mtx-fill-none mtx-stroke-2 mtx-stroke-current mtx-z-[-1]",
+              style: {
+                gridRow: `${u * 2 + 2} / ${s + 1}`,
+                width: `calc(100% - 100% / ${m.length - i})`,
+                color: "oklch(var(--mtx-primary) / 0.1)"
+              },
+              children: /* @__PURE__ */ e("svg", { focusable: "false", viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "mtx-absolute mtx-size-full mtx-overflow-visible", children: /* @__PURE__ */ e(
+                "path",
+                {
+                  d: `${z} 100 H${45 / (m.length - i - 1)} L${80 / (m.length - i - 1)} 0 H97`,
+                  vectorEffect: "non-scaling-stroke"
+                }
+              ) })
+            }
+          ),
+          /* @__PURE__ */ e(
+            r,
+            {
+              className: "mtx-col-[-2_/_-1] mtx-z-[2] mtx-rounded-full mtx-size-5 group-data-[size=sm]:mtx-size-4 group-data-[size=lg]:mtx-size-6",
+              style: { gridRow: u * 2 + 2 },
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      },
+      `skeleton-branch-${n.id}`
+    ))
+  ] });
+}, H = k.forwardRef(
+  ({
+    items: m,
+    branches: d = [],
+    title: x,
+    loading: s = !1,
+    activeColor: g,
+    completedColor: z,
+    errorColor: n,
+    inactiveColor: i,
+    minItemWidth: u = 112,
+    size: c = "md",
+    className: R,
+    style: _,
+    ...T
+  }, C) => {
+    const N = k.useId(), v = b(
+      () => d.flatMap((t) => {
+        const l = m.findIndex((o) => o.id === t.from);
+        return l >= 0 && l < m.length - 1 ? [{ branch: t, index: l }] : [];
+      }),
+      [d, m]
+    ), w = v.length * 2 + 1, p = w + 1, y = (t) => t.color ?? `var(--timeline-${t.status ?? "pending"})`, M = {
+      "--timeline-active": g ?? "oklch(var(--mtx-primary))",
+      "--timeline-completed": z ?? "oklch(var(--mtx-success))",
+      "--timeline-error": n ?? "oklch(var(--mtx-danger))",
+      "--timeline-pending": i ?? "oklch(var(--mtx-gray-400))",
+      ..._
+    }, S = b(() => {
+      const t = v.length;
+      switch (c) {
+        case "sm":
+          return `${"auto 16px ".repeat(t)}auto 16px auto auto`;
+        case "lg":
+          return `${"auto 24px ".repeat(t)}auto 24px auto auto`;
+        default:
+          return `${"auto 20px ".repeat(t)}auto 20px auto auto`;
+      }
+    }, [c, v.length]);
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ...T,
+        ref: C,
+        className: f("mtx-group mtx-text-foreground mtx-text-xs data-[size=sm]:mtx-text-ss data-[size=lg]:mtx-text-sm", R),
+        "data-size": c,
+        style: M,
+        "aria-busy": s || void 0,
+        children: [
+          x != null && /* @__PURE__ */ e("div", { id: N, className: "mtx-mb-4 mtx-text-sm group-data-[size=sm]:mtx-text-xs group-data-[size=lg]:mtx-text-lg mtx-font-bold", children: x }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "mtx-overflow-x-auto mtx-p-0.5 focus-visible:mtx-outline-2 focus-visible:mtx-outline-offset-2 focus-visible:mtx-outline-[var(--timeline-active)]",
+              role: "region",
+              "aria-label": "Timeline",
+              tabIndex: 0,
+              children: /* @__PURE__ */ a(
+                "ol",
+                {
+                  className: "mtx-m-0 mtx-grid mtx-list-none mtx-isolate mtx-p-0",
+                  "aria-labelledby": x != null ? N : void 0,
+                  "aria-label": x == null ? "Timeline steps" : void 0,
+                  "data-loading": s || void 0,
+                  style: {
+                    gridTemplateColumns: `repeat(${Math.max(1, m.length)}, minmax(0, 1fr))`,
+                    gridTemplateRows: S,
+                    minWidth: m.length * (Number.isFinite(u) ? Math.max(48, u) : 112)
+                  },
+                  children: [
+                    s && /* @__PURE__ */ e(D, { items: m, visibleBranches: v, superRow: w, markerRow: p, size: c }),
+                    !s && m.map((t, l) => {
+                      const o = m[l - 1], h = t.connectorColor === !1 ? void 0 : t.connectorColor ?? (o?.status === "completed" && t.status !== "pending" && t.status !== void 0 ? y(o) : void 0);
+                      return /* @__PURE__ */ a(
+                        "li",
+                        {
+                          className: "mtx-relative mtx-grid mtx-min-w-0 mtx-row-span-full mtx-grid-rows-[subgrid] ",
+                          style: { gridColumn: l + 1 },
+                          "aria-current": t.status === "active" ? "step" : void 0,
+                          children: [
+                            /* @__PURE__ */ a(
+                              "div",
+                              {
+                                className: "mtx-min-h-8 mtx-break-words mtx-self-end mtx-pb-2 mtx-mt-1 mtx-pr-3 mtx-text-ss group-data-[size=sm]:mtx-text-[0.5rem] group-data-[size=sm]:mtx-leading-3 group-data-[size=lg]:mtx-text-xs mtx-text-muted-foreground empty:mtx-p-0",
+                                style: { gridRow: w },
+                                children: [
+                                  t.superTitle != null && /* @__PURE__ */ e("div", { children: t.superTitle }),
+                                  t.superSubtitle != null && /* @__PURE__ */ e("div", { className: "mtx-font-semibold", children: t.superSubtitle })
+                                ]
+                              }
+                            ),
+                            l > 0 && /* @__PURE__ */ e(
+                              "span",
+                              {
+                                "aria-hidden": "true",
+                                className: "mtx-absolute mtx-top-2.5 group-data-[size=sm]:mtx-top-2 group-data-[size=lg]:mtx-top-3 mtx-left-[calc(-100%+12px)] mtx-z-10 mtx-h-0.5 mtx-w-full mtx-bg-[var(--timeline-pending)]",
+                                style: { gridRow: p, backgroundColor: h }
+                              }
+                            ),
+                            /* @__PURE__ */ e(
+                              "div",
+                              {
+                                className: "mtx-z-20 mtx-size-5 group-data-[size=sm]:mtx-size-4 group-data-[size=lg]:mtx-size-6",
+                                style: { gridRow: p },
+                                children: /* @__PURE__ */ e($, { item: t, color: y(t), size: c })
+                              }
+                            ),
+                            /* @__PURE__ */ a("div", { className: "mtx-break-words mtx-pt-1 mtx-pr-3 mtx-leading-[1.4]", style: { gridRow: p + 1 }, children: [
+                              /* @__PURE__ */ e("div", { className: f("mtx-font-medium", (t.status ?? "pending") === "pending" && "mtx-text-text-400"), children: t.label }),
+                              t.subData != null && /* @__PURE__ */ e("div", { className: "mtx-mt-0.5 mtx-text-ss group-data-[size=sm]:mtx-text-[0.5rem] group-data-[size=sm]:mtx-leading-3 group-data-[size=lg]:mtx-text-xs", children: t.subData })
+                            ] }),
+                            /* @__PURE__ */ e(
+                              "div",
+                              {
+                                className: "mtx-break-words mtx-pr-3 mtx-pt-5 mtx-text-ss group-data-[size=sm]:mtx-text-[0.5rem] group-data-[size=sm]:mtx-leading-3 group-data-[size=lg]:mtx-text-xs mtx-font-medium mtx-text-muted-foreground empty:mtx-p-0",
+                                style: { gridRow: p + 2 },
+                                children: t.footer
+                              }
+                            )
+                          ]
+                        },
+                        t.id
+                      );
+                    }),
+                    !s && v.map(({ branch: t, index: l }, o) => {
+                      const h = t.active ? t.activeColor ?? t.color ?? n ?? "var(--timeline-error)" : "var(--timeline-pending)";
+                      return /* @__PURE__ */ a(
+                        "li",
+                        {
+                          className: f(
+                            "mtx-pointer-events-none mtx-grid mtx-min-w-0 mtx-row-span-full mtx-grid-cols-[subgrid] mtx-grid-rows-[subgrid]",
+                            t.active && "mtx-z-10"
+                          ),
+                          "data-active": t.active || void 0,
+                          style: { gridColumn: `${l + 1} / -1` },
+                          "aria-current": t.status === "active" ? "step" : void 0,
+                          children: [
+                            /* @__PURE__ */ a("span", { className: "mtx-sr-only", children: [
+                              "Branch from ",
+                              m[l].label,
+                              ": "
+                            ] }),
+                            /* @__PURE__ */ a(
+                              "div",
+                              {
+                                className: "mtx-pointer-events-auto mtx-col-[-2_/_-1] mtx-self-end mtx-break-words mtx-pb-2",
+                                style: { gridRow: o * 2 + 1, color: t.active ? h : void 0 },
+                                children: [
+                                  t.superTitle != null && /* @__PURE__ */ e("div", { className: "mtx-break-words mtx-text-ss group-data-[size=sm]:mtx-text-[0.5rem] group-data-[size=sm]:mtx-leading-3 group-data-[size=lg]:mtx-text-xs mtx-text-muted-foreground", children: t.superTitle }),
+                                  t.superSubtitle != null && /* @__PURE__ */ e("div", { className: "mtx-break-words mtx-pb-2 mtx-pr-3 mtx-text-ss group-data-[size=sm]:mtx-text-[0.5rem] group-data-[size=sm]:mtx-leading-3 group-data-[size=lg]:mtx-text-xs mtx-font-semibold mtx-text-muted-foreground", children: t.superSubtitle }),
+                                  /* @__PURE__ */ e("div", { className: f("mtx-font-medium", (t.status ?? "pending") === "pending" && "mtx-text-text-400"), children: t.label }),
+                                  t.subData != null && /* @__PURE__ */ e("div", { className: "mtx-mt-0.5 mtx-text-ss group-data-[size=sm]:mtx-text-[0.5rem] group-data-[size=sm]:mtx-leading-3 group-data-[size=lg]:mtx-text-xs", children: t.subData }),
+                                  t.footer != null && /* @__PURE__ */ e("div", { className: "mtx-break-words mtx-pr-3 mtx-pt-1 mtx-text-ss group-data-[size=sm]:mtx-text-[0.5rem] group-data-[size=sm]:mtx-leading-3 group-data-[size=lg]:mtx-text-xs mtx-font-bold mtx-text-muted-foreground", children: t.footer })
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ e(
+                              "div",
+                              {
+                                className: "mtx-relative mtx-col-[1_/_-1] mtx-mb-[9px] group-data-[size=sm]:mtx-mb-[7px] group-data-[size=lg]:mtx-mb-[11px] mtx-ml-3 mtx-mt-2.5 group-data-[size=sm]:mtx-mt-2 group-data-[size=lg]:mtx-mt-3 mtx-overflow-visible mtx-fill-none mtx-stroke-2 mtx-stroke-current mtx-z-[-1]",
+                                "aria-hidden": "true",
+                                style: {
+                                  gridRow: `${o * 2 + 2} / ${p + 1}`,
+                                  width: `calc(100% - 100% / ${m.length - l})`,
+                                  color: h
+                                },
+                                children: /* @__PURE__ */ e(
+                                  "svg",
+                                  {
+                                    focusable: "false",
+                                    viewBox: "0 0 100 100",
+                                    preserveAspectRatio: "none",
+                                    className: "mtx-absolute mtx-size-full mtx-overflow-visible",
+                                    children: /* @__PURE__ */ e(
+                                      "path",
+                                      {
+                                        d: `M0 100 H${45 / (m.length - l - 1)} L${80 / (m.length - l - 1)} 0 H100`,
+                                        vectorEffect: "non-scaling-stroke"
+                                      }
+                                    )
+                                  }
+                                )
+                              }
+                            ),
+                            /* @__PURE__ */ e(
+                              "div",
+                              {
+                                className: "mtx-col-[-2_/_-1] mtx-z-[2] mtx-size-5 group-data-[size=sm]:mtx-size-4 group-data-[size=lg]:mtx-size-6",
+                                style: { gridRow: o * 2 + 2 },
+                                children: /* @__PURE__ */ e($, { item: t, color: h, size: c })
+                              }
+                            )
+                          ]
+                        },
+                        `branch-${t.id}`
+                      );
+                    })
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+H.displayName = "Timeline";
+export {
+  H as Timeline
+};
+//# sourceMappingURL=timeline.es.js.map

package/dist/timeline.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.es.js","sources":["../src/components/timeline/Timeline.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useMemo } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Skeleton } from \"../skeleton/Skeleton\";\n\nexport type TimelineStatus = \"pending\" | \"active\" | \"completed\" | \"error\";\n\n/** Describes one step in the timeline's primary path. */\nexport type TimelineItem = {\n  /** Stable identifier for the step; branch origins reference this value. */\n  id: string;\n  /** Primary content displayed beside the step marker. */\n  label: React.ReactNode;\n  /** Optional content displayed above the step marker. */\n  superTitle?: React.ReactNode;\n  /** Optional secondary content displayed below the super title. */\n  superSubtitle?: React.ReactNode;\n  /** Optional supporting content displayed below the label. */\n  subData?: React.ReactNode;\n  /** Arbitrary content shown on the bottom row. */\n  footer?: React.ReactNode;\n  /** Lifecycle state used to determine the marker and connector appearance. */\n  status?: TimelineStatus;\n  /** Override the marker color (any CSS color). */\n  color?: string;\n  /** Override the incoming connector; false leaves it inactive. */\n  connectorColor?: string | false;\n  /** Localized status announcement, independent of the visible label. */\n  statusLabel?: string;\n};\n\n/** Describes a secondary path that diverges from a primary timeline step. */\nexport type TimelineBranch = TimelineItem & {\n  /** ID of the main step from which this branch diverges. */\n  from: string;\n  /** Branch paths are explicitly controlled, independently of main steps. */\n  active?: boolean;\n  /** Used for the activated branch path and endpoint. */\n  activeColor?: string;\n};\n\n/** Configuration and content props for the Timeline component. */\nexport type TimelineProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"children\" | \"title\"> & {\n  /** Ordered steps in the timeline's primary path. */\n  items: readonly TimelineItem[];\n  /** Optional secondary paths that diverge from the primary path. */\n  branches?: readonly TimelineBranch[];\n  /** Optional heading rendered above the timeline. */\n  title?: React.ReactNode;\n  /** Shows a structure-preserving skeleton while timeline data is loading. */\n  loading?: boolean;\n  /** Visual scale of the timeline. */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Color used for active markers and connectors. */\n  activeColor?: string;\n  /** Color used for completed markers and connectors. */\n  completedColor?: string;\n  /** Color used for error markers and active branches by default. */\n  errorColor?: string;\n  /** Color used for pending markers and inactive connectors. */\n  inactiveColor?: string;\n  /** Minimum column width in pixels; narrower containers scroll horizontally. */\n  minItemWidth?: number;\n};\n\ntype TimelineSize = NonNullable<TimelineProps[\"size\"]>;\n\nconst Marker: React.FC<{ item: TimelineItem; color?: string; size: TimelineSize }> = ({ item, color, size }) => {\n  const status = item.status ?? \"pending\";\n  return (\n    <span\n      className=\"mtx-block mtx-size-5 data-[size=sm]:mtx-size-4 data-[size=lg]:mtx-size-6\"\n      data-size={size}\n      data-status={status}\n      style={{ color }}\n    >\n      <svg\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n        className=\"mtx-block mtx-size-full mtx-fill-none mtx-stroke-current mtx-stroke-[1.25] mtx-stroke-linecap-round mtx-stroke-linejoin-round\"\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"10.5\" className=\"mtx-fill-background\" />\n        {status === \"completed\" && <path d=\"m7 12 3 3 7-7\" />}\n        {status === \"error\" && <path d=\"m8 8 8 8m0-8-8 8\" />}\n        {status === \"active\" && <circle cx=\"12\" cy=\"12\" r=\"6\" fill=\"currentColor\" stroke=\"none\" />}\n      </svg>\n      <span className=\"mtx-sr-only\">{item.statusLabel ?? status}</span>\n    </span>\n  );\n};\n\ntype VisibleTimelineBranch = { branch: TimelineBranch; index: number };\n\nconst TimelineSkeleton: React.FC<{\n  items: readonly TimelineItem[];\n  visibleBranches: readonly VisibleTimelineBranch[];\n  superRow: number;\n  markerRow: number;\n  size: TimelineSize;\n}> = ({ items, visibleBranches, superRow, markerRow, size }) => {\n  const pathStart = useMemo(() => {\n    if (size === \"sm\") return \"M1\";\n    if (size === \"lg\") return \"M3\";\n    return \"M2\";\n  }, [size]);\n\n  return (\n    <>\n      {items.map((item, index) => (\n        <li\n          key={`skeleton-item-${item.id}`}\n          className=\"mtx-relative mtx-grid mtx-min-w-0 mtx-row-span-full mtx-grid-rows-[subgrid]\"\n          style={{ gridColumn: index + 1 }}\n          aria-hidden=\"true\"\n          data-slot=\"timeline-skeleton-item\"\n        >\n          <div className=\"mtx-min-h-8 mtx-self-end mtx-pb-2 mtx-pt-1 mtx-pr-3\" style={{ gridRow: superRow }}>\n            <Skeleton aria-hidden=\"true\" className=\"mtx-h-3 mtx-w-14\" />\n            <Skeleton aria-hidden=\"true\" className=\"mtx-h-2 mtx-w-16 mtx-mt-1\" />\n          </div>\n          {index > 0 && (\n            <span\n              className=\"mtx-absolute mtx-top-2.5 group-data-[size=sm]:mtx-top-2 group-data-[size=lg]:mtx-top-3 mtx-w-[calc(100%-20px)] mtx-left-[calc(-100%+20px)] group-data-[size=sm]:mtx-w-[calc(100%-16px)] group-data-[size=sm]:mtx-left-[calc(-100%+16px)] group-data-[size=lg]:mtx-w-[calc(100%-24px)] group-data-[size=lg]:mtx-left-[calc(-100%+24px)] mtx-z-10 mtx-h-0.5 mtx-bg-primary/10 mtx-animate-pulse\"\n              style={{ gridRow: markerRow }}\n            />\n          )}\n          <Skeleton\n            className=\"mtx-z-20 mtx-rounded-full mtx-size-5 group-data-[size=sm]:mtx-size-4 group-data-[size=lg]:mtx-size-6\"\n            style={{ gridRow: markerRow }}\n            aria-hidden=\"true\"\n          />\n          <div className=\"mtx-pt-1 mtx-pr-3\" style={{ gridRow: markerRow + 1 }}>\n            <Skeleton aria-hidden=\"true\" className=\"mtx-h-2 mtx-w-16\" />\n            <Skeleton aria-hidden=\"true\" className=\"mtx-h-2 mtx-w-12 mtx-mt-1\" />\n          </div>\n          <div className=\"mtx-pr-3 mtx-pt-5\" style={{ gridRow: markerRow + 2 }}>\n            <Skeleton aria-hidden=\"true\" className=\"mtx-h-2 mtx-w-16\" />\n          </div>\n        </li>\n      ))}\n      {visibleBranches.map(({ branch, index }, lane) => (\n        <li\n          key={`skeleton-branch-${branch.id}`}\n          className=\"mtx-pointer-events-none mtx-grid mtx-min-w-0 mtx-row-span-full mtx-grid-cols-[subgrid] mtx-grid-rows-[subgrid]\"\n          style={{ gridColumn: `${index + 1} / -1` }}\n          aria-hidden=\"true\"\n          data-slot=\"timeline-skeleton-branch\"\n        >\n          <div className=\"mtx-col-[-2_/_-1] mtx-self-end mtx-pb-2\" style={{ gridRow: lane * 2 + 1 }}>\n            <Skeleton aria-hidden=\"true\" className=\"mtx-h-3 mtx-w-14\" />\n            <Skeleton aria-hidden=\"true\" className=\"mtx-h-2 mtx-w-16 mtx-mt-1\" />\n            <Skeleton aria-hidden=\"true\" className=\"mtx-h-2 mtx-w-16 mtx-mt-1\" />\n          </div>\n          <div\n            className=\"mtx-relative mtx-col-[1_/_-1] mtx-mb-[9px] group-data-[size=sm]:mtx-mb-[7px] group-data-[size=lg]:mtx-mb-[11px] mtx-ml-3 mtx-mt-2.5 group-data-[size=sm]:mtx-mt-2 group-data-[size=lg]:mtx-mt-3 mtx-overflow-visible mtx-fill-none mtx-stroke-2 mtx-stroke-current mtx-z-[-1]\"\n            style={{\n              gridRow: `${lane * 2 + 2} / ${markerRow + 1}`,\n              width: `calc(100% - 100% / ${items.length - index})`,\n              color: \"oklch(var(--mtx-primary) / 0.1)\",\n            }}\n          >\n            <svg focusable=\"false\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" className=\"mtx-absolute mtx-size-full mtx-overflow-visible\">\n              <path\n                d={`${pathStart} 100 H${45 / (items.length - index - 1)} L${80 / (items.length - index - 1)} 0 H97`}\n                vectorEffect=\"non-scaling-stroke\"\n              />\n            </svg>\n          </div>\n          <Skeleton\n            className=\"mtx-col-[-2_/_-1] mtx-z-[2] mtx-rounded-full mtx-size-5 group-data-[size=sm]:mtx-size-4 group-data-[size=lg]:mtx-size-6\"\n            style={{ gridRow: lane * 2 + 2 }}\n            aria-hidden=\"true\"\n          />\n        </li>\n      ))}\n    </>\n  );\n};\n\nconst Timeline = React.forwardRef<HTMLDivElement, TimelineProps>(\n  (\n    {\n      items,\n      branches = [],\n      title,\n      loading = false,\n      activeColor,\n      completedColor,\n      errorColor,\n      inactiveColor,\n      minItemWidth = 112,\n      size = \"md\",\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const titleId = React.useId();\n    // Invalid origins and branches from the final step have no horizontal span.\n    const visibleBranches = useMemo(\n      () =>\n        branches.flatMap(branch => {\n          const index = items.findIndex(item => item.id === branch.from);\n          return index >= 0 && index < items.length - 1 ? [{ branch, index }] : [];\n        }),\n      [branches, items],\n    );\n\n    const superRow = visibleBranches.length * 2 + 1;\n    const markerRow = superRow + 1;\n    const colorFor = (item: TimelineItem) => item.color ?? `var(--timeline-${item.status ?? \"pending\"})`;\n    const variables = {\n      \"--timeline-active\": activeColor ?? \"oklch(var(--mtx-primary))\",\n      \"--timeline-completed\": completedColor ?? \"oklch(var(--mtx-success))\",\n      \"--timeline-error\": errorColor ?? \"oklch(var(--mtx-danger))\",\n      \"--timeline-pending\": inactiveColor ?? \"oklch(var(--mtx-gray-400))\",\n      ...style,\n    } as React.CSSProperties;\n\n    const gridTemplateRows = useMemo(() => {\n      const visibleBranchesLength = visibleBranches.length;\n      switch (size) {\n        case \"sm\":\n          return `${\"auto 16px \".repeat(visibleBranchesLength)}auto 16px auto auto`;\n        case \"lg\":\n          return `${\"auto 24px \".repeat(visibleBranchesLength)}auto 24px auto auto`;\n        default:\n          return `${\"auto 20px \".repeat(visibleBranchesLength)}auto 20px auto auto`;\n      }\n    }, [size, visibleBranches.length]);\n\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cn(\"mtx-group mtx-text-foreground mtx-text-xs data-[size=sm]:mtx-text-ss data-[size=lg]:mtx-text-sm\", className)}\n        data-size={size}\n        style={variables}\n        aria-busy={loading || undefined}\n      >\n        {title != null && (\n          <div id={titleId} className=\"mtx-mb-4 mtx-text-sm group-data-[size=sm]:mtx-text-xs group-data-[size=lg]:mtx-text-lg mtx-font-bold\">\n            {title}\n          </div>\n        )}\n        <div\n          className=\"mtx-overflow-x-auto mtx-p-0.5 focus-visible:mtx-outline-2 focus-visible:mtx-outline-offset-2 focus-visible:mtx-outline-[var(--timeline-active)]\"\n          role=\"region\"\n          aria-label=\"Timeline\"\n          tabIndex={0}\n        >\n          <ol\n            className=\"mtx-m-0 mtx-grid mtx-list-none mtx-isolate mtx-p-0\"\n            aria-labelledby={title != null ? titleId : undefined}\n            aria-label={title == null ? \"Timeline steps\" : undefined}\n            data-loading={loading || undefined}\n            style={{\n              gridTemplateColumns: `repeat(${Math.max(1, items.length)}, minmax(0, 1fr))`,\n              gridTemplateRows: gridTemplateRows,\n              minWidth: items.length * (Number.isFinite(minItemWidth) ? Math.max(48, minItemWidth) : 112),\n            }}\n          >\n            {loading && <TimelineSkeleton items={items} visibleBranches={visibleBranches} superRow={superRow} markerRow={markerRow} size={size} />}\n            {!loading &&\n              items.map((item, index) => {\n                const previous = items[index - 1];\n                const incoming =\n                  item.connectorColor === false\n                    ? undefined\n                    : (item.connectorColor ??\n                      (previous?.status === \"completed\" && item.status !== \"pending\" && item.status !== undefined ? colorFor(previous) : undefined));\n                return (\n                  <li\n                    key={item.id}\n                    className=\"mtx-relative mtx-grid mtx-min-w-0 mtx-row-span-full mtx-grid-rows-[subgrid] \"\n                    style={{ gridColumn: index + 1 }}\n                    aria-current={item.status === \"active\" ? \"step\" : undefined}\n                  >\n                    <div\n                      className=\"mtx-min-h-8 mtx-break-words mtx-self-end mtx-pb-2 mtx-mt-1 mtx-pr-3 mtx-text-ss group-data-[size=sm]:mtx-text-[0.5rem] group-data-[size=sm]:mtx-leading-3 group-data-[size=lg]:mtx-text-xs mtx-text-muted-foreground empty:mtx-p-0\"\n                      style={{ gridRow: superRow }}\n                    >\n                      {item.superTitle != null && <div>{item.superTitle}</div>}\n                      {item.superSubtitle != null && <div className=\"mtx-font-semibold\">{item.superSubtitle}</div>}\n                    </div>\n                    {index > 0 && (\n                      <span\n                        aria-hidden=\"true\"\n                        className=\"mtx-absolute mtx-top-2.5 group-data-[size=sm]:mtx-top-2 group-data-[size=lg]:mtx-top-3 mtx-left-[calc(-100%+12px)] mtx-z-10 mtx-h-0.5 mtx-w-full mtx-bg-[var(--timeline-pending)]\"\n                        style={{ gridRow: markerRow, backgroundColor: incoming }}\n                      />\n                    )}\n                    <div\n                      className=\"mtx-z-20 mtx-size-5 group-data-[size=sm]:mtx-size-4 group-data-[size=lg]:mtx-size-6\"\n                      style={{ gridRow: markerRow }}\n                    >\n                      <Marker item={item} color={colorFor(item)} size={size} />\n                    </div>\n                    <div className=\"mtx-break-words mtx-pt-1 mtx-pr-3 mtx-leading-[1.4]\" style={{ gridRow: markerRow + 1 }}>\n                      <div className={cn(\"mtx-font-medium\", (item.status ?? \"pending\") === \"pending\" && \"mtx-text-text-400\")}>{item.label}</div>\n                      {item.subData != null && (\n                        <div className=\"mtx-mt-0.5 mtx-text-ss group-data-[size=sm]:mtx-text-[0.5rem] group-data-[size=sm]:mtx-leading-3 group-data-[size=lg]:mtx-text-xs\">\n                          {item.subData}\n                        </div>\n                      )}\n                    </div>\n                    <div\n                      className=\"mtx-break-words mtx-pr-3 mtx-pt-5 mtx-text-ss group-data-[size=sm]:mtx-text-[0.5rem] group-data-[size=sm]:mtx-leading-3 group-data-[size=lg]:mtx-text-xs mtx-font-medium mtx-text-muted-foreground empty:mtx-p-0\"\n                      style={{ gridRow: markerRow + 2 }}\n                    >\n                      {item.footer}\n                    </div>\n                  </li>\n                );\n              })}\n            {!loading &&\n              visibleBranches.map(({ branch, index }, lane) => {\n                const branchColor = branch.active\n                  ? (branch.activeColor ?? branch.color ?? errorColor ?? \"var(--timeline-error)\")\n                  : \"var(--timeline-pending)\";\n                return (\n                  <li\n                    key={`branch-${branch.id}`}\n                    className={cn(\n                      \"mtx-pointer-events-none mtx-grid mtx-min-w-0 mtx-row-span-full mtx-grid-cols-[subgrid] mtx-grid-rows-[subgrid]\",\n                      branch.active && \"mtx-z-10\",\n                    )}\n                    data-active={branch.active || undefined}\n                    style={{ gridColumn: `${index + 1} / -1` }}\n                    aria-current={branch.status === \"active\" ? \"step\" : undefined}\n                  >\n                    <span className=\"mtx-sr-only\">Branch from {items[index].label}: </span>\n                    <div\n                      className=\"mtx-pointer-events-auto mtx-col-[-2_/_-1] mtx-self-end mtx-break-words mtx-pb-2\"\n                      style={{ gridRow: lane * 2 + 1, color: branch.active ? branchColor : undefined }}\n                    >\n                      {branch.superTitle != null && (\n                        <div className=\"mtx-break-words mtx-text-ss group-data-[size=sm]:mtx-text-[0.5rem] group-data-[size=sm]:mtx-leading-3 group-data-[size=lg]:mtx-text-xs mtx-text-muted-foreground\">\n                          {branch.superTitle}\n                        </div>\n                      )}\n                      {branch.superSubtitle != null && (\n                        <div className=\"mtx-break-words mtx-pb-2 mtx-pr-3 mtx-text-ss group-data-[size=sm]:mtx-text-[0.5rem] group-data-[size=sm]:mtx-leading-3 group-data-[size=lg]:mtx-text-xs mtx-font-semibold mtx-text-muted-foreground\">\n                          {branch.superSubtitle}\n                        </div>\n                      )}\n                      <div className={cn(\"mtx-font-medium\", (branch.status ?? \"pending\") === \"pending\" && \"mtx-text-text-400\")}>{branch.label}</div>\n                      {branch.subData != null && (\n                        <div className=\"mtx-mt-0.5 mtx-text-ss group-data-[size=sm]:mtx-text-[0.5rem] group-data-[size=sm]:mtx-leading-3 group-data-[size=lg]:mtx-text-xs\">\n                          {branch.subData}\n                        </div>\n                      )}\n                      {branch.footer != null && (\n                        <div className=\"mtx-break-words mtx-pr-3 mtx-pt-1 mtx-text-ss group-data-[size=sm]:mtx-text-[0.5rem] group-data-[size=sm]:mtx-leading-3 group-data-[size=lg]:mtx-text-xs mtx-font-bold mtx-text-muted-foreground\">\n                          {branch.footer}\n                        </div>\n                      )}\n                    </div>\n                    <div\n                      className=\"mtx-relative mtx-col-[1_/_-1] mtx-mb-[9px] group-data-[size=sm]:mtx-mb-[7px] group-data-[size=lg]:mtx-mb-[11px] mtx-ml-3 mtx-mt-2.5 group-data-[size=sm]:mtx-mt-2 group-data-[size=lg]:mtx-mt-3 mtx-overflow-visible mtx-fill-none mtx-stroke-2 mtx-stroke-current mtx-z-[-1]\"\n                      aria-hidden=\"true\"\n                      style={{\n                        gridRow: `${lane * 2 + 2} / ${markerRow + 1}`,\n                        width: `calc(100% - 100% / ${items.length - index})`,\n                        color: branchColor,\n                      }}\n                    >\n                      <svg\n                        focusable=\"false\"\n                        viewBox=\"0 0 100 100\"\n                        preserveAspectRatio=\"none\"\n                        className=\"mtx-absolute mtx-size-full mtx-overflow-visible\"\n                      >\n                        <path\n                          d={`M0 100 H${45 / (items.length - index - 1)} L${80 / (items.length - index - 1)} 0 H100`}\n                          vectorEffect=\"non-scaling-stroke\"\n                        />\n                      </svg>\n                    </div>\n                    <div\n                      className=\"mtx-col-[-2_/_-1] mtx-z-[2] mtx-size-5 group-data-[size=sm]:mtx-size-4 group-data-[size=lg]:mtx-size-6\"\n                      style={{ gridRow: lane * 2 + 2 }}\n                    >\n                      <Marker item={branch} color={branchColor} size={size} />\n                    </div>\n                  </li>\n                );\n              })}\n          </ol>\n        </div>\n      </div>\n    );\n  },\n);\nTimeline.displayName = \"Timeline\";\n\nexport { Timeline };\n"],"names":["Marker","item","color","size","status","jsxs","jsx","TimelineSkeleton","items","visibleBranches","superRow","markerRow","pathStart","useMemo","Fragment","index","Skeleton","branch","lane","Timeline","React","branches","title","loading","activeColor","completedColor","errorColor","inactiveColor","minItemWidth","className","style","props","ref","titleId","colorFor","variables","gridTemplateRows","visibleBranchesLength","cn","previous","incoming","branchColor"],"mappings":"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"}