@lindle/linoardo 1.0.38 → 1.0.40

package/dist/index.cjs

@@ -2299,6 +2299,8 @@ var Input = React4__namespace.default.forwardRef(
     className,
     wrapperClassName,
     label,
+    prefix,
+    suffix,
     ...props
   }, ref) => {
     const { placeholder, onFocus, onBlur, ...inputProps } = props;
@@ -2319,19 +2321,51 @@ var Input = React4__namespace.default.forwardRef(
       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" },
+      "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 +2381,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 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 = sizeClasses4[size] ?? sizeClasses4.medium;
-    const sizeClass = [
-      prependIconClass ? sizeConfig.paddingWithIcon : sizeConfig.paddingNoIcon,
-      sizeConfig.text
-    ].join(" ");
+    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 +2409,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 +2452,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 })
     ] });
@@ -2916,6 +2962,10 @@ var normalizeOption = (option) => {
   }
   return option;
 };
+var toIdSafe = (value) => {
+  const sanitized = value.replace(/\s+/g, "-").replace(/[^A-Za-z0-9_-]/g, "");
+  return sanitized || "opt";
+};
 var resolveIconClassName5 = (icon) => {
   if (!icon) {
     return void 0;
@@ -2941,7 +2991,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,
@@ -2959,13 +3009,25 @@ 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 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) : [];
+  const selectedLabels = normalizedOptions.filter((option) => selectedValueList.includes(String(option.value))).map((option) => option.label);
+  const hasSelection = selectedLabels.length > 0;
+  const summaryText = hasSelection ? multiple ? selectedLabels.join(", ") : selectedLabels[0] : placeholder || "\xA0";
+  const handleOptionChange = (event) => {
+    onChange?.(event);
+    if (multiple) return;
+    const detailsEl = event.currentTarget.closest("details");
+    detailsEl?.removeAttribute("open");
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-col gap-1", wrapperClassName), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "group w-full", ...props, open: void 0, children: [
@@ -2984,7 +3046,7 @@ var Select = ({
             style: { minHeight: "2.75rem" },
             onClick: (e) => disabled && e.preventDefault(),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("truncate", !value && !defaultValue && "text-gray-500 dark:text-gray-400"), children: label || placeholder || "\xA0" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("truncate", !hasSelection && "text-gray-500 dark:text-gray-400"), children: summaryText }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500 dark:text-gray-300", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-chevron-down text-base leading-none transition-transform duration-200 group-open:rotate-180", "aria-hidden": true }) })
             ]
           }
@@ -2994,7 +3056,7 @@ var Select = ({
           const isSelected = Array.isArray(value) ? value.map(String).includes(optionValueStr) : String(value) === optionValueStr;
           const isDefaultSelected = Array.isArray(defaultValue) ? defaultValue.map(String).includes(optionValueStr) : String(defaultValue) === optionValueStr;
           const iconClassName = resolveIconClassName5(option.icon);
-          const inputId = `-opt-`;
+          const inputId = `${selectId}-${toIdSafe(optionValueStr)}-${index}`;
           return /* @__PURE__ */ jsxRuntime.jsxs(
             "label",
             {
@@ -3009,12 +3071,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,
+                    onChange: handleOptionChange,
+                    onBlur,
+                    ref,
                     required: required && !multiple,
                     className: "peer sr-only"
                   }
@@ -3024,7 +3088,7 @@ var Select = ({
                 /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-check invisible ml-auto text-primary peer-checked:visible" })
               ]
             },
-            `${option.value}-`
+            `${optionValueStr}-${index}`
           );
         }) })
       ] }),
@@ -3038,7 +3102,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: {
@@ -3929,6 +3994,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 resolveIconNode2 = (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 = resolveIconNode2(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;
@@ -3954,6 +4227,8 @@ exports.Select = Select_default;
 exports.Slider = Slider_default;
 exports.Switch = Switch_default;
 exports.TextArea = TextArea_default;
+exports.TimeLine = TimeLine_default;
+exports.TimeLineItem = TimeLineItem;
 exports.ToolTip = ToolTip_default;
 exports.useNotification = useNotification_default;
 //# sourceMappingURL=index.cjs.map