@lindle/linoardo 1.0.16 → 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;
@@ -487,20 +495,20 @@ var ListItem = React3__namespace.forwardRef((props, ref) => {
   const sharp = sharpOverride ?? false;
   const accent = accentClasses[color] ?? accentClasses.primary;
   const shapeClass = divided || sharp ? "rounded-none" : "rounded-lg";
-  const Component2 = component ?? (href ? "a" : "div");
-  const interactive = typeof rest.onClick === "function" || Component2 === "a" || Component2 === "button";
+  const Component = component ?? (href ? "a" : "div");
+  const interactive = typeof rest.onClick === "function" || Component === "a" || Component === "button";
   const resolvedRole = role ?? "listitem";
-  const resolvedTabIndex = disabled ? -1 : tabIndex ?? (interactive && Component2 === "div" ? 0 : void 0);
-  const resolvedRel = Component2 === "a" ? rel : void 0;
-  const resolvedTarget = Component2 === "a" ? target : void 0;
-  const resolvedHref = Component2 === "a" ? href : void 0;
-  const resolvedType = Component2 === "button" ? type ?? "button" : void 0;
+  const resolvedTabIndex = disabled ? -1 : tabIndex ?? (interactive && Component === "div" ? 0 : void 0);
+  const resolvedRel = Component === "a" ? rel : void 0;
+  const resolvedTarget = Component === "a" ? target : void 0;
+  const resolvedHref = Component === "a" ? href : void 0;
+  const resolvedType = Component === "button" ? type ?? "button" : void 0;
   const disabledClass = disabled ? "pointer-events-none opacity-60" : "cursor-pointer";
   const navPaddingClass = nav ? "pl-5" : void 0;
   const insetClass = inset ? "pl-12" : void 0;
   const activeClasses = active ? accent.bg : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Component2,
+    Component,
     {
       ...rest,
       ref,
@@ -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
@@ -802,144 +865,148 @@ var accentClasses2 = {
 };
 var uniqueIdCounter = 0;
 var generateId = (prefix) => `${prefix}-${++uniqueIdCounter}`;
-var ExpansionPanelItemInner = class extends React3.Component {
-  constructor(props) {
-    super(props);
-    this.getContext = () => this.props.__expansionPanelContext ?? null;
-    this.handleToggle = () => {
-      const { disabled = false } = this.props;
-      if (disabled) {
-        return;
-      }
-      const context = this.getContext();
-      const panelValue = this.props.value ?? this.generatedValue;
-      if (context) {
-        context.toggle(panelValue, disabled);
-        return;
-      }
-      this.setState((prev) => ({ standaloneExpanded: !prev.standaloneExpanded }));
-    };
-    this.state = { standaloneExpanded: false };
-    this.generatedValue = generateId("expansion-panel-value");
-    this.headerId = generateId("expansion-panel-header");
-    this.contentId = generateId("expansion-panel-content");
+var ExpansionPanelItemInner = (props) => {
+  const {
+    value,
+    title,
+    subtitle,
+    text,
+    prepend,
+    append,
+    expandIcon,
+    collapseIcon,
+    hideToggleIcon = false,
+    headerClassName,
+    contentClassName,
+    className,
+    disabled = false,
+    children,
+    color: colorOverride,
+    forwardedRef,
+    __expansionPanelContext,
+    ...rest
+  } = props;
+  const [standaloneExpanded, setStandaloneExpanded] = React3.useState(false);
+  const generatedValueRef = React3.useRef(null);
+  if (generatedValueRef.current === null) {
+    generatedValueRef.current = generateId("expansion-panel-value");
   }
-  render() {
-    const {
-      value,
-      title,
-      subtitle,
-      text,
-      prepend,
-      append,
-      expandIcon,
-      collapseIcon,
-      hideToggleIcon = false,
-      headerClassName,
-      contentClassName,
-      className,
-      disabled = false,
-      children,
-      color: colorOverride,
-      forwardedRef,
-      ...rest
-    } = this.props;
-    const context = this.getContext();
-    const panelValue = value ?? this.generatedValue;
-    const density = context?.density ?? "default";
-    const color = colorOverride ?? context?.color ?? "primary";
-    const divider = context?.divider ?? true;
-    const variant = context?.variant ?? "elevated";
-    const rounded = context?.rounded ?? "lg";
-    const accent = accentClasses2[color] ?? accentClasses2.primary;
-    const isExpanded = context ? context.expandedValues.includes(panelValue) : this.state.standaloneExpanded;
-    const rootSurface = divider ? "bg-transparent border-0 shadow-none" : itemVariantClasses[variant];
-    const shapeClass = divider ? void 0 : roundedClasses[rounded] ?? roundedClasses.lg;
-    const densityPadding = densityClasses2[density] ?? densityClasses2.default;
-    const disabledClass = disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer";
-    const titleClass = isExpanded ? accent.text : void 0;
-    const activeBorderClass = tailwindMerge.twMerge("border-l-2 border-transparent", isExpanded ? accent.border : void 0);
-    const defaultToggleIcon = /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-chevron-down text-lg leading-none transition-transform duration-200", "aria-hidden": true });
-    const hasContent = Boolean(children ?? text);
-    const contentAnimationClass = isExpanded ? "pb-5 opacity-100" : "pb-0 opacity-0";
-    const toggleIconNode = hideToggleIcon ? null : isExpanded && collapseIcon ? collapseIcon : expandIcon ?? defaultToggleIcon;
-    const shouldRotateDefaultIcon = !expandIcon && !collapseIcon && !hideToggleIcon;
-    const toggleWrapperClass = tailwindMerge.twMerge(
-      "ml-3 flex h-6 w-6 items-center justify-center text-gray-500 transition-transform duration-200",
-      shouldRotateDefaultIcon && isExpanded ? "rotate-180" : void 0
-    );
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ...rest,
-        ref: forwardedRef,
-        className: tailwindMerge.twMerge(
-          "expansion-panel-item flex flex-col overflow-hidden transition-colors duration-200",
-          rootSurface,
-          shapeClass,
-          className
-        ),
-        "data-state": isExpanded ? "open" : "closed",
-        "data-disabled": disabled || void 0,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              id: this.headerId,
-              onClick: this.handleToggle,
-              disabled,
-              "aria-expanded": isExpanded,
-              "aria-controls": hasContent ? this.contentId : void 0,
-              className: tailwindMerge.twMerge(
-                "flex w-full items-center gap-4 px-4 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
-                densityPadding,
-                disabledClass,
-                isExpanded ? accent.bg : void 0,
-                headerClassName
-              ),
-              "data-state": isExpanded ? "open" : "closed",
-              children: [
-                prepend && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-10 w-10 items-center justify-center text-gray-500", children: prepend }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5 text-left", children: [
-                  title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("truncate font-medium text-gray-900", titleClass), children: title }),
-                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: subtitle })
-                ] }),
-                append && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto flex items-center gap-2 text-sm text-gray-500", children: append }),
-                !hideToggleIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: toggleWrapperClass, children: toggleIconNode })
-              ]
-            }
-          ),
-          hasContent && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "grid overflow-hidden border-t border-gray-100 transition-all duration-200 ease-in-out",
-              style: { gridTemplateRows: isExpanded ? "1fr" : "0fr" },
-              "aria-hidden": isExpanded ? void 0 : true,
-              "data-state": isExpanded ? "open" : "closed",
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  id: this.contentId,
-                  role: "region",
-                  "aria-labelledby": this.headerId,
-                  "data-state": isExpanded ? "open" : "closed",
-                  className: tailwindMerge.twMerge(
-                    "min-h-0 px-4 pt-0 text-sm text-gray-600 transition-all duration-200",
-                    activeBorderClass,
-                    contentAnimationClass,
-                    isExpanded ? "pointer-events-auto" : "pointer-events-none",
-                    contentClassName
-                  ),
-                  children: children ?? text
-                }
-              )
-            }
-          )
-        ]
-      }
-    );
+  const generatedValue = generatedValueRef.current;
+  const headerIdRef = React3.useRef(null);
+  if (!headerIdRef.current) {
+    headerIdRef.current = generateId("expansion-panel-header");
+  }
+  const headerId = headerIdRef.current;
+  const contentIdRef = React3.useRef(null);
+  if (!contentIdRef.current) {
+    contentIdRef.current = generateId("expansion-panel-content");
   }
+  const contentId = contentIdRef.current;
+  const context = __expansionPanelContext ?? null;
+  const panelValue = value ?? generatedValue;
+  const density = context?.density ?? "default";
+  const color = colorOverride ?? context?.color ?? "primary";
+  const divider = context?.divider ?? true;
+  const variant = context?.variant ?? "elevated";
+  const rounded = context?.rounded ?? "lg";
+  const accent = accentClasses2[color] ?? accentClasses2.primary;
+  const isExpanded = context ? context.expandedValues.includes(panelValue) : standaloneExpanded;
+  const rootSurface = divider ? "bg-transparent border-0 shadow-none" : itemVariantClasses[variant];
+  const shapeClass = divider ? void 0 : roundedClasses[rounded] ?? roundedClasses.lg;
+  const densityPadding = densityClasses2[density] ?? densityClasses2.default;
+  const disabledClass = disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer";
+  const titleClass = isExpanded ? accent.text : void 0;
+  const activeBorderClass = tailwindMerge.twMerge("border-l-2 border-transparent", isExpanded ? accent.border : void 0);
+  const defaultToggleIcon = /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-chevron-down text-lg leading-none transition-transform duration-200", "aria-hidden": true });
+  const hasContent = Boolean(children ?? text);
+  const contentAnimationClass = isExpanded ? "pb-5 opacity-100" : "pb-0 opacity-0";
+  const toggleIconNode = hideToggleIcon ? null : isExpanded && collapseIcon ? collapseIcon : expandIcon ?? defaultToggleIcon;
+  const shouldRotateDefaultIcon = !expandIcon && !collapseIcon && !hideToggleIcon;
+  const toggleWrapperClass = tailwindMerge.twMerge(
+    "ml-3 flex h-6 w-6 items-center justify-center text-gray-500 transition-transform duration-200",
+    shouldRotateDefaultIcon && isExpanded ? "rotate-180" : void 0
+  );
+  const handleToggle = () => {
+    if (disabled) {
+      return;
+    }
+    if (context) {
+      context.toggle(panelValue, disabled);
+      return;
+    }
+    setStandaloneExpanded((prev) => !prev);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...rest,
+      ref: forwardedRef,
+      className: tailwindMerge.twMerge(
+        "expansion-panel-item flex flex-col overflow-hidden transition-colors duration-200",
+        rootSurface,
+        shapeClass,
+        className
+      ),
+      "data-state": isExpanded ? "open" : "closed",
+      "data-disabled": disabled || void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            id: headerId,
+            onClick: handleToggle,
+            disabled,
+            "aria-expanded": isExpanded,
+            "aria-controls": hasContent ? contentId : void 0,
+            className: tailwindMerge.twMerge(
+              "flex w-full items-center gap-4 px-4 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+              densityPadding,
+              disabledClass,
+              isExpanded ? accent.bg : void 0,
+              headerClassName
+            ),
+            "data-state": isExpanded ? "open" : "closed",
+            children: [
+              prepend && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-10 w-10 items-center justify-center text-gray-500", children: prepend }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5 text-left", children: [
+                title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("truncate font-medium text-gray-900", titleClass), children: title }),
+                subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: subtitle })
+              ] }),
+              append && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto flex items-center gap-2 text-sm text-gray-500", children: append }),
+              !hideToggleIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: toggleWrapperClass, children: toggleIconNode })
+            ]
+          }
+        ),
+        hasContent && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "grid overflow-hidden border-t border-gray-100 transition-all duration-200 ease-in-out",
+            style: { gridTemplateRows: isExpanded ? "1fr" : "0fr" },
+            "aria-hidden": isExpanded ? void 0 : true,
+            "data-state": isExpanded ? "open" : "closed",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                id: contentId,
+                role: "region",
+                "aria-labelledby": headerId,
+                "data-state": isExpanded ? "open" : "closed",
+                className: tailwindMerge.twMerge(
+                  "min-h-0 px-4 pt-0 text-sm text-gray-600 transition-all duration-200",
+                  activeBorderClass,
+                  contentAnimationClass,
+                  isExpanded ? "pointer-events-auto" : "pointer-events-none",
+                  contentClassName
+                ),
+                children: children ?? text
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
 };
 var ExpansionPanelItem = React3.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(ExpansionPanelItemInner, { ...props, forwardedRef: ref }));
 ExpansionPanelItem.displayName = "ExpansionPanelItem";
@@ -1256,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) => {
@@ -1305,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",
@@ -1326,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;
@@ -1347,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;
@@ -1357,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