@lindle/linoardo 1.0.17 → 1.0.18

package/dist/index.cjs

@@ -151,6 +151,13 @@ var sizeClasses = {
   large: "px-6 py-3 text-lg",
   "x-large": "px-7 py-3.5 text-xl"
 };
+var iconOnlySizeClasses = {
+  "x-small": "p-2 text-xs aspect-square",
+  small: "p-2.5 text-sm aspect-square",
+  medium: "p-3 text-base aspect-square",
+  large: "p-3.5 text-lg aspect-square",
+  "x-large": "p-4 text-xl aspect-square"
+};
 var Button = React3__namespace.forwardRef(
   ({
     variant = "solid",
@@ -160,6 +167,7 @@ var Button = React3__namespace.forwardRef(
     loading = false,
     loadingText,
     icon,
+    iconOnly = false,
     className,
     children,
     disabled,
@@ -167,14 +175,14 @@ var Button = React3__namespace.forwardRef(
     ...rest
   }, ref) => {
     const variantClass = resolveVariantClass(variant, color);
-    const sizeClass = sizeClasses[size] ?? sizeClasses.medium;
+    const sizeClass = iconOnly ? iconOnlySizeClasses[size] ?? iconOnlySizeClasses.medium : sizeClasses[size] ?? sizeClasses.medium;
     const blockClass = block ? "w-full" : null;
     const isDisabled = disabled || loading;
     const cursor = onClick && !isDisabled ? "cursor-pointer" : "cursor-default";
     const resolvedIconClass = resolveIconClassName(icon);
     const shouldRenderIcon = Boolean(resolvedIconClass && !loading);
     const isLoadingTextProvided = loadingText !== void 0 && loadingText !== null;
-    const content = loading && isLoadingTextProvided ? loadingText : children;
+    const content = iconOnly ? null : loading && isLoadingTextProvided ? loadingText : children;
     const hasDecorators = (loading || shouldRenderIcon) && Boolean(content);
     const gapClass = hasDecorators ? "gap-2" : void 0;
     const loadingIconClass = loading ? tailwindMerge.twMerge("mdi mdi-loading mdi-spin", "leading-none") : void 0;
@@ -663,20 +671,39 @@ var Menu = React3__namespace.forwardRef((props, ref) => {
     className,
     ...rest
   } = props;
+  const { onMouseEnter, onMouseLeave, onFocus, onBlur, ...restProps } = rest;
   const hasContent = children !== void 0 && children !== null;
-  const manual = typeof open === "boolean";
-  const visible = Boolean(open);
-  const shouldRenderContent = hasContent && (keepMounted || visible || !manual && (openOnHover || openOnFocus));
+  const isControlled = typeof open === "boolean";
+  const [uncontrolledOpen, setUncontrolledOpen] = React3__namespace.useState(false);
+  const closeTimer = React3__namespace.useRef(null);
+  const visible = isControlled ? Boolean(open) : uncontrolledOpen;
+  const shouldRenderContent = hasContent && (keepMounted || visible || !isControlled && (openOnHover || openOnFocus));
   const verticalPlacement = placement.startsWith("top") ? "top" : "bottom";
-  const visibilityClasses = (() => {
-    if (manual) {
-      return visible ? "pointer-events-auto opacity-100 scale-100" : "pointer-events-none opacity-0 scale-95";
+  const clearCloseTimer = () => {
+    if (closeTimer.current !== null) {
+      window.clearTimeout(closeTimer.current);
+      closeTimer.current = null;
     }
-    const base2 = "pointer-events-none opacity-0 scale-95";
-    const hover = openOnHover ? " group-hover/menu:pointer-events-auto group-hover/menu:opacity-100 group-hover/menu:scale-100" : "";
-    const focus = openOnFocus ? " group-focus-within/menu:pointer-events-auto group-focus-within/menu:opacity-100 group-focus-within/menu:scale-100" : "";
-    return `${base2}${hover}${focus}`;
-  })();
+  };
+  const openMenu = () => {
+    clearCloseTimer();
+    if (!isControlled) {
+      setUncontrolledOpen(true);
+    }
+  };
+  const scheduleClose = () => {
+    clearCloseTimer();
+    if (!isControlled) {
+      closeTimer.current = window.setTimeout(() => {
+        setUncontrolledOpen(false);
+        closeTimer.current = null;
+      }, 120);
+    }
+  };
+  React3__namespace.useEffect(() => {
+    return () => clearCloseTimer();
+  }, []);
+  const visibilityClasses = visible ? "pointer-events-auto opacity-100 scale-100" : "pointer-events-none opacity-0 scale-95";
   const {
     className: contentExtraClassName,
     style: contentStyle,
@@ -690,10 +717,34 @@ var Menu = React3__namespace.forwardRef((props, ref) => {
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        ...rest,
+        ...restProps,
         ref,
         className: tailwindMerge.twMerge("relative inline-flex min-w-0 group/menu", className),
         "data-open": visible || void 0,
+        onMouseEnter: (event) => {
+          if (openOnHover) {
+            openMenu();
+          }
+          onMouseEnter?.(event);
+        },
+        onMouseLeave: (event) => {
+          if (openOnHover) {
+            scheduleClose();
+          }
+          onMouseLeave?.(event);
+        },
+        onFocus: (event) => {
+          if (openOnFocus) {
+            openMenu();
+          }
+          onFocus?.(event);
+        },
+        onBlur: (event) => {
+          if (openOnFocus) {
+            scheduleClose();
+          }
+          onBlur?.(event);
+        },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex w-full min-w-0", children: activator }),
           shouldRenderContent ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -713,6 +764,18 @@ var Menu = React3__namespace.forwardRef((props, ref) => {
               role: contentRole ?? "menu",
               tabIndex: contentTabIndex ?? -1,
               style: contentStyle,
+              onMouseEnter: (event) => {
+                if (openOnHover) {
+                  openMenu();
+                }
+                restContentProps?.onMouseEnter?.(event);
+              },
+              onMouseLeave: (event) => {
+                if (openOnHover) {
+                  scheduleClose();
+                }
+                restContentProps?.onMouseLeave?.(event);
+              },
               children
             }
           ) : null
@@ -1260,6 +1323,82 @@ var ToolTip = React3__namespace.forwardRef((props, forwardedRef) => {
 });
 ToolTip.displayName = "ToolTip";
 var ToolTip_default = ToolTip;
+var paddingClasses = {
+  none: "p-0",
+  sm: "p-3",
+  md: "p-4",
+  lg: "p-6"
+};
+var cardBase = "card-base relative w-full overflow-hidden bg-white text-gray-900 transition-colors";
+var variantClasses = {
+  solid: "rounded-2xl border border-gray-200 bg-white shadow-lg shadow-gray-200/55",
+  outline: "rounded-2xl border border-gray-300 bg-white shadow-none",
+  text: "rounded-2xl border border-transparent bg-transparent shadow-none",
+  ghost: "rounded-2xl border border-transparent bg-gray-50 shadow-none",
+  filled: "rounded-2xl border border-gray-200 bg-gray-50 shadow-sm",
+  underlined: "rounded-2xl border border-transparent border-b border-b-gray-200 shadow-none",
+  rounded: "rounded-3xl border border-gray-200 bg-white shadow-md",
+  sharp: "rounded-none border border-gray-200 bg-white shadow-md"
+};
+var CardRoot = React3.forwardRef(function Card({ className, children, variant = "solid", padding = "md", interactive = false, ...rest }, ref) {
+  const variantClass = variantClasses[variant] ?? variantClasses.solid;
+  const paddingClass = paddingClasses[padding] ?? paddingClasses.md;
+  const interactiveClass = interactive ? "transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2" : void 0;
+  const tabIndexValue = interactive && rest.tabIndex === void 0 ? 0 : rest.tabIndex;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rest,
+      ref,
+      tabIndex: tabIndexValue,
+      className: tailwindMerge.twMerge(cardBase, variantClass, paddingClass, interactiveClass, className),
+      children
+    }
+  );
+});
+var CardHeader = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ...rest,
+    className: tailwindMerge.twMerge("card-header mb-2 flex flex-col gap-1 border-b border-gray-100 pb-3", className)
+  }
+);
+var CardBody = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, className: tailwindMerge.twMerge("card-body flex flex-col gap-3", className) });
+var CardFooter = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ...rest,
+    className: tailwindMerge.twMerge("card-footer mt-3 flex flex-wrap items-center gap-3 border-t border-gray-100 pt-3", className)
+  }
+);
+var CardTitle = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("h3", { ...rest, className: tailwindMerge.twMerge("card-title text-lg font-semibold text-gray-900", className) });
+var CardSubtitle = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("p", { ...rest, className: tailwindMerge.twMerge("card-subtitle text-sm font-medium text-gray-600", className) });
+var CardText = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("p", { ...rest, className: tailwindMerge.twMerge("card-text text-sm text-gray-700", className) });
+var CardMedia = ({ className, rounded = false, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "img",
+  {
+    ...rest,
+    className: tailwindMerge.twMerge(
+      "card-media w-full object-cover",
+      rounded ? "rounded-xl" : "rounded-none",
+      rest.height || rest.style ? "block" : "block max-h-60",
+      className
+    ),
+    loading: rest.loading ?? "lazy"
+  }
+);
+var CardActions = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, className: tailwindMerge.twMerge("card-actions flex flex-wrap gap-2", className) });
+var Card2 = Object.assign(CardRoot, {
+  Header: CardHeader,
+  Body: CardBody,
+  Footer: CardFooter,
+  Title: CardTitle,
+  Subtitle: CardSubtitle,
+  Text: CardText,
+  Media: CardMedia,
+  Actions: CardActions
+});
+var Card_default = Card2;
 
 // src/Form/Input/states.input.ts
 var resolveIconClassName3 = (icon) => {
@@ -1309,7 +1448,7 @@ var Input = ({
   ...props
 }) => {
   const classBase = "input-base px-3 py-2 focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed w-full";
-  const variantClasses = {
+  const variantClasses2 = {
     solid: "rounded border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30",
     sharp: "rounded-none border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30",
     outline: "rounded border border-gray-300 bg-transparent focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30",
@@ -1330,7 +1469,7 @@ var Input = ({
     warn: "text-amber-600",
     success: "text-emerald-600"
   };
-  const variantClass = variantClasses[variant] ?? variantClasses.outline;
+  const variantClass = variantClasses2[variant] ?? variantClasses2.outline;
   const toneClass = status ? statusClasses[status.tone] : void 0;
   const prependIconClass = resolveIconClassName3(icon);
   const prependPadding = prependIconClass ? "pl-10" : void 0;
@@ -1351,8 +1490,260 @@ var Input = ({
   ] });
 };
 var Input_default = Input;
+var paletteValues = {
+  primary: { fill: "var(--color-primary, #6366f1)", ring: "rgba(99, 102, 241, 0.28)", thumbBorder: "#6366f1" },
+  neutral: { fill: "#4b5563", ring: "rgba(75, 85, 99, 0.28)", thumbBorder: "#4b5563" },
+  info: { fill: "#0284c7", ring: "rgba(2, 132, 199, 0.28)", thumbBorder: "#0284c7" },
+  success: { fill: "#059669", ring: "rgba(5, 150, 105, 0.24)", thumbBorder: "#059669" },
+  warning: { fill: "#d97706", ring: "rgba(217, 119, 6, 0.24)", thumbBorder: "#d97706" },
+  danger: { fill: "#dc2626", ring: "rgba(220, 38, 38, 0.24)", thumbBorder: "#dc2626" },
+  surface: { fill: "#0f172a", ring: "rgba(15, 23, 42, 0.22)", thumbBorder: "#0f172a" },
+  bw: { fill: "#000000", ring: "rgba(0, 0, 0, 0.26)", thumbBorder: "#000000" }
+};
+var sizeTokens = {
+  small: { trackHeight: "0.375rem", thumbSize: "1.1rem", trackClass: "h-1.5", valueClass: "text-xs" },
+  medium: { trackHeight: "0.5rem", thumbSize: "1.25rem", trackClass: "h-2", valueClass: "text-sm" },
+  large: { trackHeight: "0.6rem", thumbSize: "1.4rem", trackClass: "h-[0.65rem]", valueClass: "text-base" }
+};
+var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+var toNumber = (value, fallback) => {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : fallback;
+};
+var Slider = ({
+  color = "primary",
+  size = "medium",
+  label,
+  hint,
+  showValue = true,
+  valueLabel,
+  wrapperClassName,
+  className,
+  trackColor,
+  onChange,
+  disabled,
+  min = 0,
+  max = 100,
+  step = 1,
+  ...rest
+}) => {
+  const palette = paletteValues[color] ?? paletteValues.primary;
+  const sizeToken = sizeTokens[size] ?? sizeTokens.medium;
+  const { value, defaultValue, ...inputProps } = rest;
+  const resolvedMin = toNumber(min, 0);
+  const resolvedMax = toNumber(max, resolvedMin < 100 ? 100 : resolvedMin);
+  const resolvedStep = toNumber(step, 1);
+  const isControlled = typeof value === "number";
+  const [internalValue, setInternalValue] = React3.useState(
+    clamp(
+      typeof value === "number" ? value : typeof defaultValue === "number" ? defaultValue : resolvedMin,
+      resolvedMin,
+      resolvedMax
+    )
+  );
+  React3.useEffect(() => {
+    if (isControlled && typeof value === "number") {
+      setInternalValue(clamp(value, resolvedMin, resolvedMax));
+    }
+  }, [isControlled, value, resolvedMin, resolvedMax]);
+  React3.useEffect(() => {
+    if (!isControlled) {
+      setInternalValue((prev) => clamp(prev, resolvedMin, resolvedMax));
+    }
+  }, [isControlled, resolvedMin, resolvedMax]);
+  const currentValue = isControlled && typeof value === "number" ? clamp(value, resolvedMin, resolvedMax) : internalValue;
+  const percentage = resolvedMax === resolvedMin ? 0 : (currentValue - resolvedMin) / (resolvedMax - resolvedMin) * 100;
+  const cssVars = {
+    "--slider-color": palette.fill,
+    "--slider-ring-color": palette.ring,
+    "--slider-thumb-border": palette.thumbBorder,
+    "--slider-track-color": trackColor ?? "#e5e7eb",
+    "--slider-track-height": sizeToken.trackHeight,
+    "--slider-thumb-size": sizeToken.thumbSize,
+    "--slider-percentage": `${percentage}%`
+  };
+  if (disabled) {
+    cssVars["--slider-disabled-fill"] = "#d1d5db";
+    cssVars["--slider-thumb-border"] = "#d1d5db";
+    cssVars["--slider-track-color-disabled"] = "#e5e7eb";
+  }
+  const handleChange = (event) => {
+    const nextValue = Number(event.target.value);
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    onChange?.(nextValue, event);
+  };
+  const displayValue = valueLabel ? valueLabel(currentValue) : currentValue;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-col gap-2", wrapperClassName), children: [
+    (label || showValue) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900", children: label }),
+      showValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("tabular-nums text-gray-900", sizeToken.valueClass), children: displayValue })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ...inputProps,
+        type: "range",
+        min: resolvedMin,
+        max: resolvedMax,
+        step: resolvedStep,
+        value: currentValue,
+        onChange: handleChange,
+        disabled,
+        className: tailwindMerge.twMerge(
+          "slider-control focus-visible:outline-none rounded-full",
+          sizeToken.trackClass,
+          disabled ? "cursor-not-allowed opacity-70" : "cursor-pointer",
+          className
+        ),
+        style: cssVars
+      }
+    ),
+    hint && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-600", children: hint })
+  ] });
+};
+var Slider_default = Slider;
+var trackSizes = {
+  small: "w-10 h-6",
+  medium: "w-12 h-7",
+  large: "w-14 h-8"
+};
+var thumbSizes = {
+  small: "w-5 h-5",
+  medium: "w-6 h-6",
+  large: "w-7 h-7"
+};
+var thumbTranslate = {
+  small: "translate-x-4",
+  medium: "translate-x-5",
+  large: "translate-x-6"
+};
+var paletteTrackClasses = {
+  primary: { active: "bg-primary", inactive: "bg-gray-300" },
+  neutral: { active: "bg-gray-600", inactive: "bg-gray-300" },
+  info: { active: "bg-sky-500", inactive: "bg-gray-300" },
+  success: { active: "bg-emerald-500", inactive: "bg-gray-300" },
+  warning: { active: "bg-amber-500", inactive: "bg-gray-300" },
+  danger: { active: "bg-red-500", inactive: "bg-gray-300" },
+  surface: { active: "bg-gray-900", inactive: "bg-gray-300" },
+  bw: { active: "bg-black", inactive: "bg-gray-200" }
+};
+var focusRingClasses = {
+  primary: "peer-focus-visible:ring-primary/40",
+  neutral: "peer-focus-visible:ring-gray-400",
+  info: "peer-focus-visible:ring-sky-400",
+  success: "peer-focus-visible:ring-emerald-400",
+  warning: "peer-focus-visible:ring-amber-400",
+  danger: "peer-focus-visible:ring-red-400",
+  surface: "peer-focus-visible:ring-gray-800/70",
+  bw: "peer-focus-visible:ring-black/50"
+};
+var thumbActiveClasses = {
+  primary: "border-primary shadow-[0_4px_12px_rgba(99,102,241,0.35)]",
+  neutral: "border-gray-600 shadow-[0_4px_12px_rgba(75,85,99,0.35)]",
+  info: "border-sky-500 shadow-[0_4px_12px_rgba(2,132,199,0.32)]",
+  success: "border-emerald-500 shadow-[0_4px_12px_rgba(16,185,129,0.32)]",
+  warning: "border-amber-500 shadow-[0_4px_12px_rgba(245,158,11,0.32)]",
+  danger: "border-red-500 shadow-[0_4px_12px_rgba(239,68,68,0.32)]",
+  surface: "border-gray-900 shadow-[0_4px_12px_rgba(15,23,42,0.32)]",
+  bw: "border-black shadow-[0_4px_12px_rgba(0,0,0,0.32)]"
+};
+var Switch = React3.forwardRef(
+  ({
+    color = "primary",
+    size = "medium",
+    label,
+    description,
+    wrapperClassName,
+    className,
+    labelClassName,
+    disabled,
+    onChange,
+    checked,
+    defaultChecked,
+    ...rest
+  }, ref) => {
+    const paletteTrack = paletteTrackClasses[color] ?? paletteTrackClasses.primary;
+    const focusClass = focusRingClasses[color] ?? focusRingClasses.primary;
+    const thumbActive = thumbActiveClasses[color] ?? thumbActiveClasses.primary;
+    const isControlled = checked !== void 0;
+    const [internalChecked, setInternalChecked] = React3.useState(
+      Boolean((isControlled ? checked : defaultChecked) ?? false)
+    );
+    React3.useEffect(() => {
+      if (isControlled) {
+        setInternalChecked(Boolean(checked));
+      }
+    }, [checked, isControlled]);
+    const currentChecked = isControlled ? Boolean(checked) : internalChecked;
+    const handleChange = (event) => {
+      if (!isControlled) {
+        setInternalChecked(event.target.checked);
+      }
+      onChange?.(event);
+    };
+    const sizeTrackClass = trackSizes[size] ?? trackSizes.medium;
+    const sizeThumbClass = thumbSizes[size] ?? thumbSizes.medium;
+    const thumbShiftClass = thumbTranslate[size] ?? thumbTranslate.medium;
+    const pointerClass = disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer";
+    return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: tailwindMerge.twMerge("flex items-center gap-3 select-none", pointerClass, wrapperClassName), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ...rest,
+            type: "checkbox",
+            ref,
+            checked: currentChecked,
+            onChange: handleChange,
+            disabled,
+            className: "peer sr-only"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: tailwindMerge.twMerge(
+              "block rounded-full border border-transparent transition-all duration-200",
+              sizeTrackClass,
+              currentChecked ? paletteTrack.active : paletteTrack.inactive,
+              disabled && "bg-gray-200",
+              "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2",
+              focusClass,
+              className
+            ),
+            "aria-hidden": true,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: tailwindMerge.twMerge(
+                  "absolute left-0.5 top-0.5 rounded-full bg-white shadow-md border border-gray-200 transition-transform duration-200",
+                  sizeThumbClass,
+                  currentChecked && thumbShiftClass,
+                  currentChecked && thumbActive,
+                  disabled && "border-gray-300"
+                )
+              }
+            )
+          }
+        )
+      ] }),
+      (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: tailwindMerge.twMerge("flex flex-col leading-tight", labelClassName), children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900", children: label }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-600", children: description })
+      ] })
+    ] });
+  }
+);
+Switch.displayName = "Switch";
+var Switch_default = Switch;
 
 exports.Button = Button_default;
+exports.Card = Card_default;
 exports.Chip = Chip_default;
 exports.Dialog = Dialog_default;
 exports.ExpansionPanel = ExpansionPanel_default;
@@ -1361,6 +1752,8 @@ exports.Input = Input_default;
 exports.List = List_default;
 exports.ListItem = Item_default;
 exports.Menu = Menu_default;
+exports.Slider = Slider_default;
+exports.Switch = Switch_default;
 exports.ToolTip = ToolTip_default;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map