@lindle/linoardo 1.0.40 → 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",
@@ -2320,7 +2719,7 @@ 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 = {
+    const sizeClasses5 = {
       "x-small": {
         paddingY: "py-2",
         paddingLeft: "pl-2",
@@ -2386,7 +2785,7 @@ var Input = React4__namespace.default.forwardRef(
     const hasLeadingIcon = Boolean(prependIconClass);
     const hasLeadingAdornment = hasLeadingIcon || hasPrefix;
     const hasTrailingAdornment = hasSuffix;
-    const sizeConfig = sizeClasses4[size] ?? sizeClasses4.medium;
+    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(" ");
@@ -2949,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" },
@@ -3015,7 +3414,7 @@ var Select = React4__namespace.default.forwardRef(({
   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) : [];
@@ -3376,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",
@@ -3414,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) });
 };
@@ -3537,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;
@@ -3568,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;
@@ -4060,7 +4459,7 @@ var resolveSide = (side, index) => {
   }
   return side;
 };
-var resolveIconNode2 = (icon) => {
+var resolveIconNode3 = (icon) => {
   if (!icon) return null;
   const iconClass = resolveIconClassName2(icon);
   return iconClass ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: iconClass, "aria-hidden": true }) : null;
@@ -4099,7 +4498,7 @@ var TimeLineItem = React4__namespace.forwardRef((props, ref) => {
   const resolvedColor = color ?? __timelineColor;
   const dotSizeClass = dotSizeClasses[__timelineDotSize] ?? dotSizeClasses.md;
   const dotPalette = resolveDotPalette(resolvedColor, variant);
-  const iconNode = resolveIconNode2(icon);
+  const iconNode = resolveIconNode3(icon);
   const isLast = __timelineIndex >= __timelineCount - 1;
   const showLine = !hideLine && !isLast;
   const lineStyle = {
@@ -4226,6 +4625,8 @@ 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;