@lindle/linoardo 1.0.39 → 1.0.41

package/dist/index.cjs

@@ -1843,6 +1843,405 @@ function resolveItemContent(item, index, renderItem) {
   }
   return item;
 }
+var TABS_TAB_MARKER = "__isTabsTab";
+var hasMarker2 = (type) => {
+  if (!type || typeof type !== "function" && typeof type !== "object") {
+    return false;
+  }
+  if (type[TABS_TAB_MARKER]) {
+    return true;
+  }
+  const innerType = type.type;
+  if (innerType && innerType !== type) {
+    return hasMarker2(innerType);
+  }
+  return false;
+};
+var isTabsTabElement = (element) => {
+  if (!React4.isValidElement(element)) {
+    return false;
+  }
+  return hasMarker2(element.type);
+};
+var markTabsTab = (component) => {
+  if (typeof component !== "function" && (typeof component !== "object" || component === null)) {
+    return;
+  }
+  component[TABS_TAB_MARKER] = true;
+};
+var sizeClasses2 = {
+  "x-small": { tab: "h-7 px-2 text-xs", icon: "text-sm" },
+  small: { tab: "h-8 px-2.5 text-sm", icon: "text-base" },
+  medium: { tab: "h-9 px-3 text-sm", icon: "text-base" },
+  large: { tab: "h-10 px-3.5 text-base", icon: "text-lg" },
+  "x-large": { tab: "h-11 px-4 text-base", icon: "text-lg" }
+};
+var variantListClasses = {
+  line: "border-b border-gray-200",
+  card: "rounded-xl bg-gray-100 p-1",
+  pill: "rounded-full bg-gray-100/80 p-1"
+};
+var variantTabBaseClasses = {
+  line: "border-b-2 border-transparent -mb-px",
+  card: "rounded-lg border border-transparent bg-white/70",
+  pill: "rounded-full"
+};
+var paletteClasses = {
+  primary: {
+    text: "text-primary",
+    border: "border-primary",
+    bg: "bg-primary/10",
+    ring: "ring-primary/30",
+    ink: "bg-primary"
+  },
+  neutral: {
+    text: "text-gray-900",
+    border: "border-gray-900",
+    bg: "bg-gray-100",
+    ring: "ring-gray-900/20",
+    ink: "bg-gray-900"
+  },
+  info: {
+    text: "text-sky-600",
+    border: "border-sky-500",
+    bg: "bg-sky-50",
+    ring: "ring-sky-500/20",
+    ink: "bg-sky-500"
+  },
+  success: {
+    text: "text-emerald-600",
+    border: "border-emerald-500",
+    bg: "bg-emerald-50",
+    ring: "ring-emerald-500/20",
+    ink: "bg-emerald-500"
+  },
+  warning: {
+    text: "text-amber-600",
+    border: "border-amber-500",
+    bg: "bg-amber-50",
+    ring: "ring-amber-500/20",
+    ink: "bg-amber-500"
+  },
+  danger: {
+    text: "text-red-600",
+    border: "border-red-500",
+    bg: "bg-red-50",
+    ring: "ring-red-500/20",
+    ink: "bg-red-500"
+  },
+  surface: {
+    text: "text-gray-900",
+    border: "border-gray-300",
+    bg: "bg-white",
+    ring: "ring-gray-300/30",
+    ink: "bg-gray-400"
+  },
+  bw: {
+    text: "text-black",
+    border: "border-black",
+    bg: "bg-black/10",
+    ring: "ring-black/20",
+    ink: "bg-black"
+  }
+};
+var panelVariantClasses = {
+  line: "pt-4",
+  card: "mt-3 rounded-xl border border-gray-200 bg-white p-4 shadow-sm",
+  pill: "mt-3 rounded-2xl border border-gray-200 bg-white/90 p-4"
+};
+var isExtraContentObject = (value) => {
+  return !!value && typeof value === "object" && !React4__namespace.isValidElement(value) && ("left" in value || "right" in value);
+};
+var resolveFirstEnabledTab = (tabs) => tabs.find((tab) => !tab.disabled)?.value;
+var clampActive = (value, tabs) => {
+  if (value === void 0) {
+    return resolveFirstEnabledTab(tabs);
+  }
+  const match = tabs.find((tab) => tab.value === value);
+  if (!match || match.disabled) {
+    return resolveFirstEnabledTab(tabs);
+  }
+  return value;
+};
+var resolveIconNode = (icon, size) => {
+  if (!icon) return null;
+  const iconClass = resolveIconClassName2(icon);
+  return iconClass ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: tailwindMerge.twMerge(iconClass, size ? sizeClasses2[size].icon : void 0), "aria-hidden": true }) : null;
+};
+var collectTabs = (children, tabsId) => {
+  const tabs = [];
+  let index = 0;
+  const walk = (node) => {
+    if (Array.isArray(node)) {
+      node.forEach(walk);
+      return;
+    }
+    if (!isTabsTabElement(node)) {
+      if (React4__namespace.isValidElement(node)) {
+        const props = node.props;
+        if (props && Object.prototype.hasOwnProperty.call(props, "children")) {
+          walk(props.children);
+        }
+      }
+      return;
+    }
+    const tabIndex = index++;
+    const value = node.props.value ?? tabIndex;
+    const tabId = `${tabsId}-tab-${tabIndex}`;
+    const panelId = `${tabsId}-panel-${tabIndex}`;
+    tabs.push({
+      element: node,
+      index: tabIndex,
+      value,
+      label: node.props.label,
+      disabled: node.props.disabled,
+      icon: node.props.icon,
+      badge: node.props.badge,
+      tabClassName: node.props.tabClassName,
+      panelClassName: node.props.panelClassName,
+      tabId,
+      panelId,
+      forceRender: node.props.forceRender
+    });
+  };
+  walk(children);
+  return tabs;
+};
+var injectTabs = (children, context, tabs) => {
+  let index = 0;
+  const walk = (node) => {
+    if (Array.isArray(node)) {
+      let changed = false;
+      const next = node.map((child) => {
+        const mapped = walk(child);
+        if (mapped !== child) {
+          changed = true;
+        }
+        return mapped;
+      });
+      return changed ? next : node;
+    }
+    if (!React4__namespace.isValidElement(node)) {
+      return node;
+    }
+    if (isTabsTabElement(node)) {
+      const tab = tabs[index++];
+      if (!tab) {
+        return node;
+      }
+      const injectedProps = {
+        value: tab.value,
+        __tabsContext: context,
+        __tabsValue: tab.value,
+        __tabsIndex: tab.index,
+        __tabsTabId: tab.tabId,
+        __tabsPanelId: tab.panelId
+      };
+      return React4__namespace.cloneElement(node, injectedProps);
+    }
+    if (node.props) {
+      const props = node.props;
+      if (props && Object.prototype.hasOwnProperty.call(props, "children")) {
+        const mappedChildren = walk(props.children);
+        if (mappedChildren !== props.children) {
+          return React4__namespace.cloneElement(node, void 0, mappedChildren);
+        }
+      }
+    }
+    return node;
+  };
+  return walk(children);
+};
+var handleTabListKeyDown = (event) => {
+  const { key } = event;
+  if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(key)) {
+    return;
+  }
+  const tabs = Array.from(event.currentTarget.querySelectorAll('[role="tab"]')).filter((tab) => !tab.disabled);
+  if (!tabs.length) {
+    return;
+  }
+  const currentIndex = tabs.findIndex((tab) => tab === document.activeElement);
+  let nextIndex = currentIndex;
+  if (key === "ArrowRight") {
+    nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % tabs.length;
+  }
+  if (key === "ArrowLeft") {
+    nextIndex = currentIndex === -1 ? tabs.length - 1 : (currentIndex - 1 + tabs.length) % tabs.length;
+  }
+  if (key === "Home") {
+    nextIndex = 0;
+  }
+  if (key === "End") {
+    nextIndex = tabs.length - 1;
+  }
+  tabs[nextIndex]?.focus();
+  event.preventDefault();
+};
+var Tabs = React4__namespace.forwardRef((props, ref) => {
+  const {
+    activeKey,
+    defaultActiveKey,
+    onChange,
+    variant = "line",
+    size = "medium",
+    color = "primary",
+    align = "start",
+    tabBarGutter = 8,
+    tabBarExtraContent,
+    tabBarClassName,
+    destroyInactiveTabPane = false,
+    keepMounted = false,
+    className,
+    children,
+    id,
+    ...rest
+  } = props;
+  const tabsId = typeof id === "string" && id.trim().length ? id : "tabs";
+  const tabs = collectTabs(children, tabsId);
+  const resolvedActive = clampActive(activeKey ?? defaultActiveKey, tabs);
+  const handleActivate = (value) => {
+    onChange?.(value);
+  };
+  const extraContent = tabBarExtraContent;
+  const extraLeft = isExtraContentObject(extraContent) ? extraContent.left : null;
+  const extraRight = isExtraContentObject(extraContent) ? extraContent.right : extraContent;
+  const palette = paletteClasses[color] ?? paletteClasses.primary;
+  const context = {
+    activeKey: resolvedActive,
+    onChange: handleActivate,
+    variant,
+    size,
+    color,
+    destroyInactiveTabPane,
+    keepMounted
+  };
+  const enhancedChildren = injectTabs(children, context, tabs);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...rest,
+      id,
+      ref,
+      className: tailwindMerge.twMerge("tabs flex w-full flex-col text-gray-900", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          extraLeft ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: extraLeft }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              role: "tablist",
+              "aria-orientation": "horizontal",
+              onKeyDown: handleTabListKeyDown,
+              className: tailwindMerge.twMerge(
+                "flex min-w-0 flex-1 items-center gap-2 overflow-x-auto",
+                align === "center" ? "justify-center" : align === "end" ? "justify-end" : void 0,
+                variantListClasses[variant],
+                tabBarClassName
+              ),
+              style: { gap: tabBarGutter },
+              children: tabs.map((tab) => {
+                const isActive = tab.value === resolvedActive;
+                const sizeClass = sizeClasses2[size] ?? sizeClasses2.medium;
+                const iconNode = resolveIconNode(tab.icon, size);
+                const badgeNode = tab.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-gray-200 px-1.5 py-0.5 text-[0.6rem] font-semibold text-gray-700", children: tab.badge }) : null;
+                const activeText = isActive ? palette.text : "text-gray-600";
+                const activeBorder = isActive ? palette.border : "border-transparent";
+                const activeBg = isActive ? palette.bg : void 0;
+                const activeRing = isActive ? palette.ring : void 0;
+                const variantClasses5 = {
+                  line: tailwindMerge.twMerge(activeText, activeBorder),
+                  card: tailwindMerge.twMerge(activeText, activeBg, activeBorder, isActive ? "shadow-sm" : void 0),
+                  pill: tailwindMerge.twMerge(activeText, activeBg)
+                };
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "tab",
+                    id: tab.tabId,
+                    "aria-selected": isActive,
+                    "aria-controls": tab.panelId,
+                    "aria-disabled": tab.disabled || void 0,
+                    disabled: tab.disabled,
+                    tabIndex: isActive ? 0 : -1,
+                    onClick: () => {
+                      if (!tab.disabled) {
+                        handleActivate(tab.value);
+                      }
+                    },
+                    className: tailwindMerge.twMerge(
+                      "inline-flex items-center gap-2 whitespace-nowrap font-medium transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2",
+                      sizeClass.tab,
+                      variantTabBaseClasses[variant],
+                      variantClasses5[variant],
+                      activeRing ? `ring-1 ${activeRing}` : void 0,
+                      tab.disabled ? "cursor-not-allowed text-gray-400 opacity-60" : "hover:text-gray-900",
+                      tab.tabClassName
+                    ),
+                    "data-state": isActive ? "active" : "inactive",
+                    children: [
+                      iconNode,
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: tab.label }),
+                      badgeNode
+                    ]
+                  },
+                  tab.value
+                );
+              })
+            }
+          ),
+          extraRight ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: extraRight }) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("min-h-0", panelVariantClasses[variant]), children: enhancedChildren })
+      ]
+    }
+  );
+});
+Tabs.displayName = "Tabs";
+var Tab = React4__namespace.forwardRef((props, ref) => {
+  const {
+    label: _label,
+    value,
+    disabled,
+    forceRender,
+    tabClassName: _tabClassName,
+    panelClassName,
+    className,
+    children,
+    __tabsContext,
+    __tabsValue,
+    __tabsTabId,
+    __tabsPanelId,
+    ...rest
+  } = props;
+  const context = __tabsContext;
+  const resolvedValue = value ?? __tabsValue;
+  const isActive = context ? context.activeKey === resolvedValue : true;
+  const shouldRender = !context || isActive || context.keepMounted || !context.destroyInactiveTabPane || forceRender;
+  if (!shouldRender) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rest,
+      ref,
+      role: "tabpanel",
+      id: __tabsPanelId,
+      "aria-labelledby": __tabsTabId,
+      "aria-hidden": context ? !isActive : void 0,
+      hidden: context ? !isActive : void 0,
+      className: tailwindMerge.twMerge("tabs-panel text-gray-900", className, panelClassName),
+      "data-state": isActive ? "active" : "inactive",
+      "data-disabled": disabled || void 0,
+      children
+    }
+  );
+});
+Tab.displayName = "Tab";
+markTabsTab(Tab);
+var Tabs_default = Tabs;
 var positionClasses = {
   fixed: "fixed inset-x-0 top-0",
   absolute: "absolute inset-x-0 top-0",
@@ -2299,6 +2698,8 @@ var Input = React4__namespace.default.forwardRef(
     className,
     wrapperClassName,
     label,
+    prefix,
+    suffix,
     ...props
   }, ref) => {
     const { placeholder, onFocus, onBlur, ...inputProps } = props;
@@ -2318,20 +2719,52 @@ var Input = React4__namespace.default.forwardRef(
       underlined: "rounded-none border-0 border-b border-gray-300 px-0 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70",
       rounded: "rounded-full px-4 border border-gray-300 bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 shadow-sm dark:border-gray-600 dark:bg-slate-900 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/30 dark:shadow-black/20"
     };
-    const sizeClasses4 = {
-      "x-small": { paddingNoIcon: "px-2 py-2", paddingWithIcon: "pl-8 pr-2 py-2", text: "text-xs" },
+    const sizeClasses5 = {
+      "x-small": {
+        paddingY: "py-2",
+        paddingLeft: "pl-2",
+        paddingRight: "pr-2",
+        paddingLeftLeading: "pl-8",
+        paddingLeftLeadingDouble: "pl-12",
+        paddingRightTrailing: "pr-8",
+        text: "text-xs"
+      },
       small: {
-        paddingNoIcon: "px-2.5 py-2.5",
-        paddingWithIcon: "pl-9 pr-2.5 py-2.5",
+        paddingY: "py-2.5",
+        paddingLeft: "pl-2.5",
+        paddingRight: "pr-2.5",
+        paddingLeftLeading: "pl-9",
+        paddingLeftLeadingDouble: "pl-12",
+        paddingRightTrailing: "pr-9",
         text: "text-sm"
       },
-      medium: { paddingNoIcon: "px-3 py-3", paddingWithIcon: "pl-10 pr-3 py-3", text: "text-base" },
+      medium: {
+        paddingY: "py-3",
+        paddingLeft: "pl-3",
+        paddingRight: "pr-3",
+        paddingLeftLeading: "pl-10",
+        paddingLeftLeadingDouble: "pl-14",
+        paddingRightTrailing: "pr-10",
+        text: "text-base"
+      },
       large: {
-        paddingNoIcon: "px-3.5 py-3.5",
-        paddingWithIcon: "pl-11 pr-3.5 py-3.5",
+        paddingY: "py-3.5",
+        paddingLeft: "pl-3.5",
+        paddingRight: "pr-3.5",
+        paddingLeftLeading: "pl-11",
+        paddingLeftLeadingDouble: "pl-14",
+        paddingRightTrailing: "pr-11",
         text: "text-lg"
       },
-      "x-large": { paddingNoIcon: "px-4 py-4", paddingWithIcon: "pl-12 pr-4 py-4", text: "text-xl" }
+      "x-large": {
+        paddingY: "py-4",
+        paddingLeft: "pl-4",
+        paddingRight: "pr-4",
+        paddingLeftLeading: "pl-12",
+        paddingLeftLeadingDouble: "pl-16",
+        paddingRightTrailing: "pr-12",
+        text: "text-xl"
+      }
     };
     const status = error ? { tone: "error", message: error } : warn ? { tone: "warn", message: warn } : success ? { tone: "success", message: success } : void 0;
     const statusClasses = {
@@ -2347,16 +2780,23 @@ var Input = React4__namespace.default.forwardRef(
     const variantClass = variantClasses5[variant] ?? variantClasses5.outline;
     const toneClass = status ? statusClasses[status.tone] : void 0;
     let prependIconClass = resolveIconClassName4(icon);
-    const sizeConfig = sizeClasses4[size] ?? sizeClasses4.medium;
-    const sizeClass = [
-      prependIconClass ? sizeConfig.paddingWithIcon : sizeConfig.paddingNoIcon,
-      sizeConfig.text
-    ].join(" ");
+    const hasPrefix = typeof prefix === "string" ? prefix.trim().length > 0 : Boolean(prefix);
+    const hasSuffix = typeof suffix === "string" ? suffix.trim().length > 0 : Boolean(suffix);
+    const hasLeadingIcon = Boolean(prependIconClass);
+    const hasLeadingAdornment = hasLeadingIcon || hasPrefix;
+    const hasTrailingAdornment = hasSuffix;
+    const sizeConfig = sizeClasses5[size] ?? sizeClasses5.medium;
+    const leftPaddingClass = hasPrefix ? sizeConfig.paddingLeftLeadingDouble : hasLeadingAdornment ? sizeConfig.paddingLeftLeading : sizeConfig.paddingLeft;
+    const rightPaddingClass = hasTrailingAdornment ? sizeConfig.paddingRightTrailing : sizeConfig.paddingRight;
+    const sizeClass = [sizeConfig.paddingY, leftPaddingClass, rightPaddingClass, sizeConfig.text].join(" ");
     const inputName = inputProps.name || reactId;
     const basePlaceholder = placeholder ?? (hasLabel ? " " : void 0);
     const placeholderValue = hidePlaceholderUntilFocus ? isFocused ? placeholder : " " : basePlaceholder;
     const placeholderClass = hidePlaceholderUntilFocus ? "placeholder-transparent focus:placeholder-gray-500 focus:dark:placeholder-gray-400" : void 0;
-    const labelLeftClass = prependIconClass ? "left-10" : "left-3";
+    const labelLeftClass = hasLeadingAdornment ? "left-10" : "left-3";
+    const labelFocusLeftClass = hasLeadingAdornment ? "peer-focus:left-10" : "peer-focus:left-3";
+    const renderPrefix = hasPrefix ? typeof prefix === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-gray-500 dark:text-gray-400", sizeConfig.text), children: prefix }) : prefix : null;
+    const renderSuffix = hasSuffix ? typeof suffix === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-gray-500 dark:text-gray-400", sizeConfig.text), children: suffix }) : suffix : null;
     const labelBgDefault = ["outline", "text", "underlined"].includes(variant) ? "bg-transparent" : "bg-white/90 dark:bg-slate-900";
     const handleFocus = (event) => {
       if (hidePlaceholderUntilFocus) setIsFocused(true);
@@ -2368,17 +2808,20 @@ var Input = React4__namespace.default.forwardRef(
     };
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-col gap-1", wrapperClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
-        prependIconClass && /* @__PURE__ */ jsxRuntime.jsx(
-          "i",
-          {
-            className: tailwindMerge.twMerge(
-              "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400",
-              status?.tone && statusMessageClasses[status?.tone] || "",
-              prependIconClass
-            ),
-            "aria-hidden": true
-          }
-        ),
+        hasLeadingAdornment && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "absolute left-3 inset-y-0 flex items-center gap-2", children: [
+          prependIconClass && /* @__PURE__ */ jsxRuntime.jsx(
+            "i",
+            {
+              className: tailwindMerge.twMerge(
+                "text-gray-500 dark:text-gray-400",
+                status?.tone && statusMessageClasses[status?.tone] || "",
+                prependIconClass
+              ),
+              "aria-hidden": true
+            }
+          ),
+          renderPrefix
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -2408,16 +2851,18 @@ var Input = React4__namespace.default.forwardRef(
               "absolute transition-all duration-150 pointer-events-none text-gray-700 rounded dark:text-gray-200",
               labelLeftClass,
               // Floated state: center label's vertical middle on the top border line
-              "-top-1.5  left-1 peer-focus:left-7   -translate-y-2/3 text-xs px-1",
+              "-top-1.5 -translate-y-2/3 text-xs px-1",
               labelBgDefault,
               // focus state mirrors floated state (keeps center on border)
+              labelFocusLeftClass,
               "peer-focus:top-0 peer-focus:-translate-y-1/2 peer-focus:text-xs peer-focus:px-1 peer-focus:bg-white peer-focus:text-gray-600 dark:peer-focus:bg-slate-900 dark:peer-focus:text-gray-300",
               // when input is empty (placeholder shown) -> center label inside input
               "peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-sm peer-placeholder-shown:bg-transparent peer-placeholder-shown:text-gray-500 dark:peer-placeholder-shown:text-gray-400"
             ),
             children: label
           }
-        )
+        ),
+        hasTrailingAdornment && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-3 inset-y-0 flex items-center", children: renderSuffix })
       ] }),
       status?.message && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-sm", statusMessageClasses[status.tone]), children: status.message })
     ] });
@@ -2903,7 +3348,7 @@ var variantClasses4 = {
   underlined: "rounded-none border-0 border-b border-gray-300 pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-300 dark:focus-visible:border-primary/70",
   rounded: "rounded-full pl-4 pr-10 border border-gray-300 bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 shadow-sm dark:border-gray-600 dark:bg-slate-900 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/30 dark:shadow-black/20"
 };
-var sizeClasses2 = {
+var sizeClasses3 = {
   "x-small": { padding: "pl-2 pr-8 py-2", text: "text-xs" },
   small: { padding: "pl-2.5 pr-9 py-2.5", text: "text-sm" },
   medium: { padding: "pl-3 pr-10 py-3", text: "text-base" },
@@ -2945,7 +3390,7 @@ var resolveIconClassName5 = (icon) => {
   const classes = [...baseClasses, normalizedName];
   return Array.from(new Set(classes)).join(" ");
 };
-var Select = ({
+var Select = React4__namespace.default.forwardRef(({
   options,
   label,
   placeholder,
@@ -2963,11 +3408,13 @@ var Select = ({
   disabled,
   required,
   onChange,
+  onBlur,
   ...props
-}) => {
+}, ref) => {
   const selectId = id || name || generateString();
+  const inputName = name || selectId;
   const variantClass = variantClasses4[variant] ?? variantClasses4.outline;
-  const sizeConfig = sizeClasses2[size] ?? sizeClasses2.medium;
+  const sizeConfig = sizeClasses3[size] ?? sizeClasses3.medium;
   const sizeClass = `${sizeConfig.padding} ${sizeConfig.text}`;
   const normalizedOptions = options.map(normalizeOption);
   const selectedValueList = value !== void 0 ? (Array.isArray(value) ? value : [value]).map(String) : defaultValue !== void 0 ? (Array.isArray(defaultValue) ? defaultValue : [defaultValue]).map(String) : [];
@@ -3023,12 +3470,14 @@ var Select = ({
                   {
                     type: multiple ? "checkbox" : "radio",
                     id: inputId,
-                    name: name || selectId,
+                    name: inputName,
                     value: option.value,
                     disabled: option.disabled || disabled,
                     checked: value !== void 0 ? isSelected : void 0,
                     defaultChecked: defaultValue !== void 0 ? isDefaultSelected : void 0,
                     onChange: handleOptionChange,
+                    onBlur,
+                    ref,
                     required: required && !multiple,
                     className: "peer sr-only"
                   }
@@ -3052,7 +3501,8 @@ var Select = ({
     ] }),
     helperText && /* @__PURE__ */ jsxRuntime.jsx("p", { className: tailwindMerge.twMerge("mt-1 text-xs text-gray-500", error && "text-red-500"), children: helperText })
   ] });
-};
+});
+Select.displayName = "Select";
 var Select_default = Select;
 var paletteValues = {
   primary: {
@@ -3325,7 +3775,7 @@ var Switch = React4.forwardRef(
 );
 Switch.displayName = "Switch";
 var Switch_default = Switch;
-var sizeClasses3 = {
+var sizeClasses4 = {
   "x-small": "text-xs",
   small: "text-sm",
   medium: "text-base",
@@ -3363,7 +3813,7 @@ var Icon = ({ className, icon, size, color, ...rest }) => {
     }
   }
   const classBase = "mdi";
-  const sizeClass = size ? sizeClasses3[size] ?? sizeClasses3.medium : void 0;
+  const sizeClass = size ? sizeClasses4[size] ?? sizeClasses4.medium : void 0;
   const colorClass = color ? colorClasses2[color] ?? colorClasses2.primary : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx("i", { ...rest, className: tailwindMerge.twMerge(classBase, iconValue, sizeClass, colorClass, className) });
 };
@@ -3486,7 +3936,7 @@ var resolveIconClassName6 = (icon) => {
   const normalized = iconName?.startsWith("mdi-") ? iconName : `mdi-${iconName}`;
   return `mdi ${library} ${normalized}`.trim();
 };
-var resolveIconNode = (icon, fallbackClassName) => {
+var resolveIconNode2 = (icon, fallbackClassName) => {
   if (React4__namespace.isValidElement(icon)) return icon;
   const iconClassName = resolveIconClassName6(icon) ?? fallbackClassName;
   if (!iconClassName) return null;
@@ -3517,8 +3967,8 @@ var NotificationCard = ({ item }) => {
   const hasDescription = description !== void 0 && description !== null;
   const hasContent = hasMessage || hasDescription;
   const accentClass = type ? typeAccentMap[type] : void 0;
-  const iconNode = resolveIconNode(icon, type ? `mdi ${typeIconMap[type]}` : void 0);
-  const closeIconNode = resolveIconNode(closeIcon, "mdi mdi-close");
+  const iconNode = resolveIconNode2(icon, type ? `mdi ${typeIconMap[type]}` : void 0);
+  const closeIconNode = resolveIconNode2(closeIcon, "mdi mdi-close");
   const variantClass = resolveVariantClass3(variant, type);
   const toneIconBg = type ? typeTone[type]?.iconBg : void 0;
   const toneIconText = type ? typeTone[type]?.iconText : void 0;
@@ -3943,6 +4393,214 @@ var Progress = (props) => {
   );
 };
 var Progress_default = Progress;
+var densityGapClasses = {
+  default: "gap-6",
+  compact: "gap-4"
+};
+var alignClasses = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end"
+};
+var dotSizeClasses = {
+  sm: "h-6 w-6 text-xs",
+  md: "h-8 w-8 text-sm",
+  lg: "h-10 w-10 text-base"
+};
+var paletteDotClasses = {
+  primary: {
+    filled: { dot: "bg-primary text-white border border-primary", ring: "ring-primary/30" },
+    outlined: { dot: "bg-white text-primary border border-primary", ring: "ring-primary/20" },
+    tonal: { dot: "bg-primary/15 text-primary border border-primary/20", ring: "ring-primary/20" }
+  },
+  neutral: {
+    filled: { dot: "bg-gray-900 text-white border border-gray-900", ring: "ring-gray-900/20" },
+    outlined: { dot: "bg-white text-gray-900 border border-gray-900", ring: "ring-gray-900/15" },
+    tonal: { dot: "bg-gray-100 text-gray-800 border border-gray-200", ring: "ring-gray-900/10" }
+  },
+  info: {
+    filled: { dot: "bg-sky-500 text-white border border-sky-500", ring: "ring-sky-500/30" },
+    outlined: { dot: "bg-white text-sky-600 border border-sky-500", ring: "ring-sky-500/20" },
+    tonal: { dot: "bg-sky-100 text-sky-700 border border-sky-200", ring: "ring-sky-500/20" }
+  },
+  success: {
+    filled: { dot: "bg-emerald-500 text-white border border-emerald-500", ring: "ring-emerald-500/30" },
+    outlined: { dot: "bg-white text-emerald-600 border border-emerald-500", ring: "ring-emerald-500/20" },
+    tonal: { dot: "bg-emerald-100 text-emerald-700 border border-emerald-200", ring: "ring-emerald-500/20" }
+  },
+  warning: {
+    filled: { dot: "bg-amber-500 text-white border border-amber-500", ring: "ring-amber-500/30" },
+    outlined: { dot: "bg-white text-amber-700 border border-amber-500", ring: "ring-amber-500/20" },
+    tonal: { dot: "bg-amber-100 text-amber-800 border border-amber-200", ring: "ring-amber-500/20" }
+  },
+  danger: {
+    filled: { dot: "bg-red-500 text-white border border-red-500", ring: "ring-red-500/30" },
+    outlined: { dot: "bg-white text-red-600 border border-red-500", ring: "ring-red-500/20" },
+    tonal: { dot: "bg-red-100 text-red-700 border border-red-200", ring: "ring-red-500/20" }
+  },
+  surface: {
+    filled: { dot: "bg-white text-gray-900 border border-gray-200", ring: "ring-gray-300/30" },
+    outlined: { dot: "bg-white text-gray-900 border border-gray-300", ring: "ring-gray-300/20" },
+    tonal: { dot: "bg-gray-50 text-gray-800 border border-gray-200", ring: "ring-gray-300/20" }
+  },
+  bw: {
+    filled: { dot: "bg-black text-white border border-black", ring: "ring-black/30" },
+    outlined: { dot: "bg-white text-black border border-black", ring: "ring-black/20" },
+    tonal: { dot: "bg-black/10 text-black border border-black/20", ring: "ring-black/20" }
+  }
+};
+var resolveDotPalette = (color, variant) => {
+  const palette = paletteDotClasses[color] ?? paletteDotClasses.primary;
+  return palette[variant] ?? palette.filled;
+};
+var resolveSide = (side, index) => {
+  if (side === "alternate") {
+    return index % 2 === 0 ? "left" : "right";
+  }
+  return side;
+};
+var resolveIconNode3 = (icon) => {
+  if (!icon) return null;
+  const iconClass = resolveIconClassName2(icon);
+  return iconClass ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: iconClass, "aria-hidden": true }) : null;
+};
+var TimeLineItem = React4__namespace.forwardRef((props, ref) => {
+  const {
+    title,
+    subtitle,
+    opposite,
+    icon,
+    dot,
+    color,
+    variant = "filled",
+    side,
+    align,
+    hideLine,
+    dotClassName,
+    contentClassName,
+    oppositeClassName,
+    lineClassName,
+    className,
+    children,
+    __timelineSide = "right",
+    __timelineAlign = "center",
+    __timelineDensity = "default",
+    __timelineColor = "primary",
+    __timelineDotSize = "md",
+    __timelineLineColor,
+    __timelineLineWidth = 2,
+    __timelineIndex = 0,
+    __timelineCount = 1,
+    ...rest
+  } = props;
+  const resolvedAlign = align ?? __timelineAlign;
+  const resolvedSide = resolveSide(side ?? __timelineSide, __timelineIndex);
+  const resolvedColor = color ?? __timelineColor;
+  const dotSizeClass = dotSizeClasses[__timelineDotSize] ?? dotSizeClasses.md;
+  const dotPalette = resolveDotPalette(resolvedColor, variant);
+  const iconNode = resolveIconNode3(icon);
+  const isLast = __timelineIndex >= __timelineCount - 1;
+  const showLine = !hideLine && !isLast;
+  const lineStyle = {
+    width: __timelineLineWidth,
+    backgroundColor: __timelineLineColor
+  };
+  const baseItemClass = tailwindMerge.twMerge(
+    "timeline-item grid grid-cols-[1fr_auto_1fr] gap-4",
+    alignClasses[resolvedAlign] ?? alignClasses.center,
+    className
+  );
+  const contentNode = children ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-gray-900", children: title }),
+    subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-500", children: subtitle })
+  ] });
+  const leftContent = resolvedSide === "left" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex flex-col text-right", contentClassName), children: contentNode }) : opposite ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex flex-col text-right text-sm text-gray-500", oppositeClassName), children: opposite }) : /* @__PURE__ */ jsxRuntime.jsx("div", {});
+  const rightContent = resolvedSide === "right" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex flex-col text-left", contentClassName), children: contentNode }) : opposite ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex flex-col text-left text-sm text-gray-500", oppositeClassName), children: opposite }) : /* @__PURE__ */ jsxRuntime.jsx("div", {});
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, ref, className: baseItemClass, children: [
+    leftContent,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-full flex-col items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: tailwindMerge.twMerge(
+            "flex items-center justify-center rounded-full ring-4 ring-white",
+            dotSizeClass,
+            dotPalette.dot,
+            dotPalette.ring,
+            dotClassName
+          ),
+          children: dot ?? iconNode
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: tailwindMerge.twMerge(
+            "mt-3 flex-1 bg-gray-200 dark:bg-gray-700",
+            showLine ? void 0 : "invisible",
+            lineClassName
+          ),
+          style: lineStyle,
+          "aria-hidden": true
+        }
+      )
+    ] }),
+    rightContent
+  ] });
+});
+TimeLineItem.displayName = "TimeLine.Item";
+var isTimeLineItem = (child) => {
+  if (!React4__namespace.isValidElement(child)) {
+    return false;
+  }
+  const elementType = child.type;
+  return child.type === TimeLineItem || elementType.displayName === TimeLineItem.displayName;
+};
+var TimeLine = React4__namespace.forwardRef((props, ref) => {
+  const {
+    side = "right",
+    align = "center",
+    density = "default",
+    color = "primary",
+    lineColor,
+    lineWidth = 2,
+    dotSize = "md",
+    className,
+    children,
+    ...rest
+  } = props;
+  const resolvedGap = densityGapClasses[density] ?? densityGapClasses.default;
+  const childArray = React4__namespace.Children.toArray(children);
+  const resolvedChildren = childArray.map((child, index) => {
+    if (!isTimeLineItem(child)) {
+      return child;
+    }
+    return React4__namespace.cloneElement(child, {
+      __timelineSide: side,
+      __timelineAlign: align,
+      __timelineDensity: density,
+      __timelineColor: color,
+      __timelineDotSize: dotSize,
+      __timelineLineColor: lineColor,
+      __timelineLineWidth: lineWidth,
+      __timelineIndex: index,
+      __timelineCount: childArray.length
+    });
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rest,
+      ref,
+      className: tailwindMerge.twMerge("timeline flex flex-col", resolvedGap, className),
+      children: resolvedChildren
+    }
+  );
+});
+TimeLine.displayName = "TimeLine";
+var TimeLineWithItem = TimeLine;
+TimeLineWithItem.Item = TimeLineItem;
+var TimeLine_default = TimeLineWithItem;
 
 exports.Alert = Alert_default;
 exports.AppBar = AppBar_default;
@@ -3967,7 +4625,11 @@ exports.Progress = Progress_default;
 exports.Select = Select_default;
 exports.Slider = Slider_default;
 exports.Switch = Switch_default;
+exports.Tab = Tab;
+exports.Tabs = Tabs_default;
 exports.TextArea = TextArea_default;
+exports.TimeLine = TimeLine_default;
+exports.TimeLineItem = TimeLineItem;
 exports.ToolTip = ToolTip_default;
 exports.useNotification = useNotification_default;
 //# sourceMappingURL=index.cjs.map