@trsys-tech/matrix-library 1.1.1-canary.0 → 1.1.3

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,182 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import f from "react";
+import { cn as n } from "./utils.es.js";
+function b({ item: l, color: x }) {
+  const r = l.status ?? "pending";
+  return /* @__PURE__ */ o("span", { className: "mtx-block mtx-size-5", "data-status": r, style: { color: x }, children: [
+    /* @__PURE__ */ o(
+      "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" }),
+          r === "completed" && /* @__PURE__ */ e("path", { d: "m7 12 3 3 7-7" }),
+          r === "error" && /* @__PURE__ */ e("path", { d: "m8 8 8 8m0-8-8 8" }),
+          r === "active" && /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "6", fill: "currentColor", stroke: "none" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e("span", { className: "mtx-sr-only", children: l.statusLabel ?? r })
+  ] });
+}
+const $ = f.forwardRef(
+  ({ items: l, branches: x = [], title: r, activeColor: h, completedColor: w, errorColor: c, inactiveColor: N, minItemWidth: u = 112, className: k, style: y, ...R }, z) => {
+    const p = f.useId(), d = x.flatMap((t) => {
+      const s = l.findIndex((m) => m.id === t.from);
+      return s >= 0 && s < l.length - 1 ? [{ branch: t, index: s }] : [];
+    }), v = d.length * 2 + 1, i = v + 1, g = (t) => t.color ?? `var(--timeline-${t.status ?? "pending"})`, T = {
+      "--timeline-active": h ?? "oklch(var(--mtx-primary))",
+      "--timeline-completed": w ?? "oklch(var(--mtx-success))",
+      "--timeline-error": c ?? "oklch(var(--mtx-danger))",
+      "--timeline-pending": N ?? "oklch(var(--mtx-gray-400))",
+      ...y
+    };
+    return /* @__PURE__ */ o("div", { ...R, ref: z, className: n("mtx-text-foreground mtx-text-xs", k), style: T, children: [
+      r != null && /* @__PURE__ */ e("div", { id: p, className: "mtx-mb-4 mtx-text-sm mtx-font-bold", children: r }),
+      /* @__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__ */ o(
+            "ol",
+            {
+              className: "mtx-m-0 mtx-grid mtx-list-none mtx-isolate mtx-p-0",
+              "aria-labelledby": r != null ? p : void 0,
+              "aria-label": r == null ? "Timeline steps" : void 0,
+              style: {
+                gridTemplateColumns: `repeat(${Math.max(1, l.length)}, minmax(0, 1fr))`,
+                gridTemplateRows: `${"auto 24px ".repeat(d.length)}auto 24px auto auto`,
+                minWidth: l.length * (Number.isFinite(u) ? Math.max(48, u) : 112)
+              },
+              children: [
+                l.map((t, s) => {
+                  const m = l[s - 1], a = t.connectorColor === !1 ? void 0 : t.connectorColor ?? (m?.status === "completed" && t.status !== "pending" && t.status !== void 0 ? g(m) : void 0);
+                  return /* @__PURE__ */ o(
+                    "li",
+                    {
+                      className: "mtx-relative mtx-grid mtx-min-w-0 mtx-row-span-full mtx-grid-rows-[subgrid] ",
+                      style: { gridColumn: s + 1 },
+                      "aria-current": t.status === "active" ? "step" : void 0,
+                      children: [
+                        /* @__PURE__ */ o(
+                          "div",
+                          {
+                            className: "mtx-min-h-8 mtx-break-words mtx-self-end mtx-pb-2 mtx-pr-3 mtx-text-ss mtx-leading-3 mtx-text-muted-foreground empty:mtx-p-0",
+                            style: { gridRow: v },
+                            children: [
+                              t.superTitle != null && /* @__PURE__ */ e("div", { children: t.superTitle }),
+                              t.superSubtitle != null && /* @__PURE__ */ e("div", { className: "mtx-font-semibold", children: t.superSubtitle })
+                            ]
+                          }
+                        ),
+                        s > 0 && /* @__PURE__ */ e(
+                          "span",
+                          {
+                            "aria-hidden": "true",
+                            className: "mtx-absolute mtx-top-2.5 mtx-left-[calc(-100%+12px)] mtx-z-10 mtx-h-0.5 mtx-w-full mtx-bg-[var(--timeline-pending)]",
+                            style: { gridRow: i, backgroundColor: a }
+                          }
+                        ),
+                        /* @__PURE__ */ e("div", { className: "mtx-z-20 mtx-size-5", style: { gridRow: i }, children: /* @__PURE__ */ e(b, { item: t, color: g(t) }) }),
+                        /* @__PURE__ */ o("div", { className: "mtx-break-words mtx-pt-2.5 mtx-pr-3 mtx-leading-[1.4]", style: { gridRow: i + 1 }, children: [
+                          /* @__PURE__ */ e("div", { className: n("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", children: t.subData })
+                        ] }),
+                        /* @__PURE__ */ e(
+                          "div",
+                          {
+                            className: "mtx-break-words mtx-pr-3 mtx-pt-5 mtx-text-ss mtx-font-medium mtx-text-muted-foreground empty:mtx-p-0",
+                            style: { gridRow: i + 2 },
+                            children: t.footer
+                          }
+                        )
+                      ]
+                    },
+                    t.id
+                  );
+                }),
+                d.map(({ branch: t, index: s }, m) => {
+                  const a = t.active ? t.activeColor ?? t.color ?? c ?? "var(--timeline-error)" : "var(--timeline-pending)";
+                  return /* @__PURE__ */ o(
+                    "li",
+                    {
+                      className: n(
+                        "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: `${s + 1} / -1` },
+                      "aria-current": t.status === "active" ? "step" : void 0,
+                      children: [
+                        /* @__PURE__ */ o("span", { className: "mtx-sr-only", children: [
+                          "Branch from ",
+                          l[s].label,
+                          ": "
+                        ] }),
+                        /* @__PURE__ */ o(
+                          "div",
+                          {
+                            className: "mtx-pointer-events-auto mtx-col-[-2_/_-1] mtx-self-end mtx-break-words mtx-pb-2",
+                            style: { gridRow: m * 2 + 1, color: t.active ? a : void 0 },
+                            children: [
+                              t.superTitle != null && /* @__PURE__ */ e("div", { className: "mtx-break-words mtx-text-ss 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 mtx-font-semibold mtx-text-muted-foreground", children: t.superSubtitle }),
+                              /* @__PURE__ */ e("div", { className: n("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", children: t.subData }),
+                              t.footer != null && /* @__PURE__ */ e("div", { className: "mtx-break-words mtx-pr-3 mtx-pt-1 mtx-text-ss mtx-font-bold mtx-text-muted-foreground", children: t.footer })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ e(
+                          "div",
+                          {
+                            className: "mtx-relative mtx-col-[1_/_-1] mtx-mb-[13px] mtx-ml-3 mtx-mt-[11px] mtx-overflow-visible mtx-fill-none mtx-stroke-2 mtx-stroke-current mtx-z-[-1]",
+                            "aria-hidden": "true",
+                            style: {
+                              gridRow: `${m * 2 + 2} / ${i + 1}`,
+                              width: `calc(100% - 100% / ${l.length - s})`,
+                              color: a
+                            },
+                            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 / (l.length - s - 1)} L${80 / (l.length - s - 1)} 0 H100`,
+                                    vectorEffect: "non-scaling-stroke"
+                                  }
+                                )
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ e("div", { className: "mtx-col-[-2_/_-1] mtx-z-[2] mtx-size-5", style: { gridRow: m * 2 + 2 }, children: /* @__PURE__ */ e(b, { item: t, color: a }) })
+                      ]
+                    },
+                    `branch-${t.id}`
+                  );
+                })
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+$.displayName = "Timeline";
+export {
+  $ 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 from \"react\";\nimport { cn } from \"../../lib/utils\";\n\nexport type TimelineStatus = \"pending\" | \"active\" | \"completed\" | \"error\";\n\nexport interface TimelineItem {\n  id: string;\n  label: React.ReactNode;\n  superTitle?: React.ReactNode;\n  superSubtitle?: React.ReactNode;\n  subData?: React.ReactNode;\n  /** Arbitrary content shown on the bottom row. */\n  footer?: React.ReactNode;\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\nexport interface TimelineBranch extends 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\nexport interface TimelineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\" | \"title\"> {\n  items: readonly TimelineItem[];\n  branches?: readonly TimelineBranch[];\n  title?: React.ReactNode;\n  activeColor?: string;\n  completedColor?: string;\n  errorColor?: string;\n  inactiveColor?: string;\n  /** Minimum column width in pixels; narrower containers scroll horizontally. */\n  minItemWidth?: number;\n}\n\nfunction Marker({ item, color }: { item: TimelineItem; color?: string }) {\n  const status = item.status ?? \"pending\";\n  return (\n    <span className=\"mtx-block mtx-size-5\" data-status={status} style={{ color }}>\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\nconst Timeline = React.forwardRef<HTMLDivElement, TimelineProps>(\n  ({ items, branches = [], title, activeColor, completedColor, errorColor, inactiveColor, minItemWidth = 112, className, style, ...props }, ref) => {\n    const titleId = React.useId();\n    // Invalid origins and branches from the final step have no horizontal span.\n    const visibleBranches = 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    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    return (\n      <div {...props} ref={ref} className={cn(\"mtx-text-foreground mtx-text-xs\", className)} style={variables}>\n        {title != null && (\n          <div id={titleId} className=\"mtx-mb-4 mtx-text-sm 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            style={{\n              gridTemplateColumns: `repeat(${Math.max(1, items.length)}, minmax(0, 1fr))`,\n              gridTemplateRows: `${\"auto 24px \".repeat(visibleBranches.length)}auto 24px auto auto`,\n              minWidth: items.length * (Number.isFinite(minItemWidth) ? Math.max(48, minItemWidth) : 112),\n            }}\n          >\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-pr-3 mtx-text-ss mtx-leading-3 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 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 className=\"mtx-z-20 mtx-size-5\" style={{ gridRow: markerRow }}>\n                    <Marker item={item} color={colorFor(item)} />\n                  </div>\n                  <div className=\"mtx-break-words mtx-pt-2.5 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 && <div className=\"mtx-mt-0.5 mtx-text-ss\">{item.subData}</div>}\n                  </div>\n                  <div\n                    className=\"mtx-break-words mtx-pr-3 mtx-pt-5 mtx-text-ss 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            {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 && <div className=\"mtx-break-words mtx-text-ss mtx-text-muted-foreground\">{branch.superTitle}</div>}\n                    {branch.superSubtitle != null && (\n                      <div className=\"mtx-break-words mtx-pb-2 mtx-pr-3 mtx-text-ss 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 && <div className=\"mtx-mt-0.5 mtx-text-ss\">{branch.subData}</div>}\n                    {branch.footer != null && (\n                      <div className=\"mtx-break-words mtx-pr-3 mtx-pt-1 mtx-text-ss mtx-font-bold mtx-text-muted-foreground\">{branch.footer}</div>\n                    )}\n                  </div>\n                  <div\n                    className=\"mtx-relative mtx-col-[1_/_-1] mtx-mb-[13px] mtx-ml-3 mtx-mt-[11px] 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 className=\"mtx-col-[-2_/_-1] mtx-z-[2] mtx-size-5\" style={{ gridRow: lane * 2 + 2 }}>\n                    <Marker item={branch} color={branchColor} />\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","status","jsxs","jsx","Timeline","React","items","branches","title","activeColor","completedColor","errorColor","inactiveColor","minItemWidth","className","style","props","ref","titleId","visibleBranches","branch","index","superRow","markerRow","colorFor","variables","cn","previous","incoming","lane","branchColor"],"mappings":"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"}

package/dist/timepickercontent.es.js

@@ -1,64 +1,61 @@
-import { jsxs as M, jsx as l } from "react/jsx-runtime";
-import { useState as P, useRef as h, useEffect as b } from "react";
+import { jsxs as S, jsx as c } from "react/jsx-runtime";
+import { useMemo as j, useRef as f, useEffect as g } from "react";
 import { cn as a } from "./utils.es.js";
-const k = () => {
+const P = () => {
   const e = /* @__PURE__ */ new Date(), r = e.getHours();
   return { hour: r % 12 || 12, minute: e.getMinutes(), ampm: r < 12 ? "AM" : "PM" };
-}, y = (e, r, n) => Math.min(Math.max(e, r), n), B = (e) => e ? { hour: 0, minute: 0 } : k(), d = (e, r) => {
+}, w = (e, r, n) => Math.min(Math.max(e, r), n), k = (e) => e ? { hour: 0, minute: 0 } : P(), b = (e, r) => {
   if (!e)
-    return B(r);
-  const n = y(e.minute, 0, 59), c = e.ampm ? e.hour % 12 + (e.ampm === "PM" ? 12 : 0) : e.hour;
-  return r ? { hour: y(c, 0, 23), minute: n } : {
-    hour: c % 12 || 12,
+    return k(r);
+  const n = w(e.minute, 0, 59), x = e.ampm ? e.hour % 12 + (e.ampm === "PM" ? 12 : 0) : e.hour;
+  return r ? { hour: w(x, 0, 23), minute: n } : {
+    hour: x % 12 || 12,
     minute: n,
-    ampm: e.ampm ?? (c >= 12 ? "PM" : "AM")
+    ampm: e.ampm ?? (x >= 12 ? "PM" : "AM")
   };
-}, z = ({ isOpen: e, time: r, is24HourMode: n = !1, onTimeChange: c, slotsProps: i }) => {
-  const [u, p] = P(() => d(r, n)), o = h(u), g = h(null), w = h(null), x = 32, s = 8, T = n ? Array.from({ length: 24 }, (t, m) => m) : Array.from({ length: 12 }, (t, m) => m + 1), v = (t) => {
-    g?.current?.scrollTo({
-      top: t * (x + s),
+}, _ = ({ isOpen: e, time: r, is24HourMode: n = !1, onTimeChange: x, slotsProps: i }) => {
+  const l = j(() => b(r, n), [r, n]), m = f(l), d = f(null), p = f(null), s = 32, u = 8, y = n ? Array.from({ length: 24 }, (t, o) => o) : Array.from({ length: 12 }, (t, o) => o + 1), T = (t) => {
+    d?.current?.scrollTo({
+      top: t * (s + u),
       behavior: "smooth"
     });
-  }, S = (t) => {
-    w?.current?.scrollTo({
-      top: t * (x + s),
+  }, v = (t) => {
+    p?.current?.scrollTo({
+      top: t * (s + u),
       behavior: "smooth"
     });
-  }, f = (t) => {
-    const m = d(t, n);
-    o.current = m, p(m), c(m);
+  }, h = (t) => {
+    const o = b(t, n);
+    m.current = o, x(o);
   }, N = (t) => {
-    f({ ...o.current, hour: t });
+    h({ ...m.current, hour: t });
   }, A = (t) => {
-    f({ ...o.current, minute: t });
-  }, j = (t) => {
-    f({ ...o.current, ampm: t });
+    h({ ...m.current, minute: t });
+  }, M = (t) => {
+    h({ ...m.current, ampm: t });
   };
-  return b(() => {
-    if (e) {
-      const t = d(r, n);
-      o.current = t, p(t);
-    }
-  }, [e, r, n]), b(() => {
+  return g(() => {
+    m.current = l;
+  }, [l]), g(() => {
     if (!e)
       return;
     const t = window.setTimeout(() => {
-      v(n ? o.current.hour : o.current.hour - 1), S(o.current.minute);
+      T(n ? m.current.hour : m.current.hour - 1), v(m.current.minute);
     });
     return () => window.clearTimeout(t);
-  }, [e, n]), /* @__PURE__ */ M(
+  }, [e, n]), /* @__PURE__ */ S(
     "div",
     {
       ...i?.content ?? {},
       className: a("mtx-py-2 mtx-px-0 mtx-h-52 mtx-w-full mtx-flex mtx-justify-center mtx-gap-1", i?.content?.className),
       children: [
-        /* @__PURE__ */ l("div", { className: "mtx-w-24 mtx-px-2 mtx-h-full mtx-relative mtx-overflow-auto mtx-thin-scrollbar", ref: g, children: T.map((t) => /* @__PURE__ */ l(
+        /* @__PURE__ */ c("div", { className: "mtx-w-24 mtx-px-2 mtx-h-full mtx-relative mtx-overflow-auto mtx-thin-scrollbar", ref: d, children: y.map((t) => /* @__PURE__ */ c(
           "button",
           {
-            style: { height: x, marginBottom: s },
+            style: { height: s, marginBottom: u },
             className: a(
               "mtx-w-full mtx-flex mtx-justify-center mtx-items-center mtx-rounded-full mtx-text-xs mtx-font-bold mtx-text-text-400",
-              t === u.hour && "mtx-bg-secondary"
+              t === l.hour && "mtx-bg-secondary"
             ),
             onClick: () => N(t),
             type: "button",
@@ -66,13 +63,13 @@ const k = () => {
           },
           t
         )) }),
-        /* @__PURE__ */ l("div", { className: "mtx-h-full mtx-w-24 mtx-px-2 mtx-relative mtx-overflow-auto mtx-thin-scrollbar", ref: w, children: Array.from({ length: 60 }, (t, m) => m).map((t) => /* @__PURE__ */ l(
+        /* @__PURE__ */ c("div", { className: "mtx-h-full mtx-w-24 mtx-px-2 mtx-relative mtx-overflow-auto mtx-thin-scrollbar", ref: p, children: Array.from({ length: 60 }, (t, o) => o).map((t) => /* @__PURE__ */ c(
           "button",
           {
-            style: { height: x, marginBottom: s },
+            style: { height: s, marginBottom: u },
             className: a(
               "mtx-w-full mtx-flex mtx-justify-center mtx-items-center mtx-rounded-full mtx-text-xs mtx-font-bold mtx-text-text-400",
-              t === u.minute && "mtx-bg-secondary"
+              t === l.minute && "mtx-bg-secondary"
             ),
             onClick: () => A(t),
             type: "button",
@@ -80,15 +77,15 @@ const k = () => {
           },
           t
         )) }),
-        !n && /* @__PURE__ */ l("div", { className: "mtx-h-full mtx-w-24 mtx-px-2 mtx-relative mtx-overflow-auto mtx-thin-scrollbar", children: ["AM", "PM"].map((t) => /* @__PURE__ */ l(
+        !n && /* @__PURE__ */ c("div", { className: "mtx-h-full mtx-w-24 mtx-px-2 mtx-relative mtx-overflow-auto mtx-thin-scrollbar", children: ["AM", "PM"].map((t) => /* @__PURE__ */ c(
           "button",
           {
-            style: { height: x, marginBottom: s },
+            style: { height: s, marginBottom: u },
             className: a(
               "mtx-w-full mtx-flex mtx-justify-center mtx-items-center mtx-rounded-full mtx-text-xs mtx-font-bold mtx-text-text-400",
-              t === u.ampm && "mtx-bg-secondary"
+              t === l.ampm && "mtx-bg-secondary"
             ),
-            onClick: () => j(t),
+            onClick: () => M(t),
             type: "button",
             children: t
           },
@@ -99,6 +96,6 @@ const k = () => {
   );
 };
 export {
-  z as TimePickerContent
+  _ as TimePickerContent
 };
 //# sourceMappingURL=timepickercontent.es.js.map