@lindle/linoardo 1.0.2 → 1.0.4

package/dist/index.js

@@ -1,5 +1,6 @@
+import * as React6 from 'react';
 import { twMerge } from 'tailwind-merge';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/Containment/Button/index.tsx
 
@@ -10,48 +11,56 @@ var iconBaseClasses = {
 
 // src/Containment/Button/states.button.ts
 var base = "btn-base focus-visible:outline-none focus-visible:ring-2 rounded-md transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed";
+var blackAndWhiteVariantClass = "bg-white hover:bg-black hover:text-white text-black border border-black focus-visible:ring-black/40 focus-visible:ring-offset-white";
 var paletteVariantClasses = {
   primary: {
     solid: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary",
     outline: "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary",
     ghost: "text-primary bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40",
-    text: "bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/30 underline-offset-2"
+    text: "bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/30 underline-offset-2",
+    bw: blackAndWhiteVariantClass
   },
   neutral: {
     solid: "bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500",
     outline: "border border-gray-400 text-gray-700 bg-white hover:bg-gray-700 hover:text-white focus-visible:ring-gray-400",
     ghost: "text-gray-700 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-300",
-    text: "bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2"
+    text: "bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2",
+    bw: blackAndWhiteVariantClass
   },
   info: {
     solid: "bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-400",
     outline: "border border-sky-500 text-sky-600 bg-white hover:bg-sky-500 hover:text-white focus-visible:ring-sky-400",
     ghost: "text-sky-600 bg-sky-100 hover:bg-sky-200 focus-visible:ring-sky-300",
-    text: "bg-transparent text-sky-600 hover:bg-sky-100 focus-visible:ring-sky-200 underline-offset-2"
+    text: "bg-transparent text-sky-600 hover:bg-sky-100 focus-visible:ring-sky-200 underline-offset-2",
+    bw: blackAndWhiteVariantClass
   },
   success: {
     solid: "bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-400",
     outline: "border border-emerald-500 text-emerald-600 bg-white hover:bg-emerald-500 hover:text-white focus-visible:ring-emerald-400",
     ghost: "text-emerald-600 bg-emerald-100 hover:bg-emerald-200 focus-visible:ring-emerald-300",
-    text: "bg-transparent text-emerald-600 hover:bg-emerald-100 focus-visible:ring-emerald-200 underline-offset-2"
+    text: "bg-transparent text-emerald-600 hover:bg-emerald-100 focus-visible:ring-emerald-200 underline-offset-2",
+    bw: blackAndWhiteVariantClass
   },
   warning: {
     solid: "bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-400",
     outline: "border border-amber-500 text-amber-600 bg-white hover:bg-amber-500 hover:text-white focus-visible:ring-amber-400",
     ghost: "text-amber-600 bg-amber-100 hover:bg-amber-200 focus-visible:ring-amber-300",
-    text: "bg-transparent text-amber-600 hover:bg-amber-100 focus-visible:ring-amber-200 underline-offset-2"
+    text: "bg-transparent text-amber-600 hover:bg-amber-100 focus-visible:ring-amber-200 underline-offset-2",
+    bw: blackAndWhiteVariantClass
   },
   danger: {
     solid: "bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400",
     outline: "border border-red-500 text-red-600 bg-white hover:bg-red-500 hover:text-white focus-visible:ring-red-400",
     ghost: "text-red-600 bg-red-100 hover:bg-red-200 focus-visible:ring-red-300",
-    text: "bg-transparent text-red-600 hover:bg-red-100 focus-visible:ring-red-200 underline-offset-2"
+    text: "bg-transparent text-red-600 hover:bg-red-100 focus-visible:ring-red-200 underline-offset-2",
+    bw: blackAndWhiteVariantClass
   },
   surface: {
     solid: "bg-white text-gray-900 border border-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200",
     outline: "border border-gray-300 text-gray-900 bg-white hover:bg-gray-100 focus-visible:ring-gray-200",
     ghost: "text-gray-900 bg-gray-100 hover:bg-gray-200 focus-visible:ring-gray-200",
-    text: "bg-transparent text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2"
+    text: "bg-transparent text-gray-900 hover:bg-gray-100 focus-visible:ring-gray-200 underline-offset-2",
+    bw: blackAndWhiteVariantClass
   }
 };
 var resolveVariantClass = (variant, palette) => {
@@ -90,51 +99,813 @@ var sizeClasses = {
   large: "px-6 py-3 text-lg",
   "x-large": "px-7 py-3.5 text-xl"
 };
-var Button = ({
-  variant = "solid",
-  color = "primary",
-  size = "medium",
-  block = false,
-  loading = false,
-  icon,
-  className,
-  children,
-  disabled,
-  onClick,
-  ...rest
-}) => {
-  const variantClass = resolveVariantClass(variant, color);
-  const sizeClass = 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 hasDecorators = (loading || shouldRenderIcon) && Boolean(children);
-  const gapClass = hasDecorators ? "gap-2" : void 0;
-  const loadingIconClass = loading ? twMerge("mdi mdi-loading mdi-spin", "leading-none") : void 0;
-  const iconClassName = shouldRenderIcon ? twMerge("leading-none", resolvedIconClass) : void 0;
+var Button = React6.forwardRef(
+  ({
+    variant = "solid",
+    color = "primary",
+    size = "medium",
+    block = false,
+    loading = false,
+    loadingText,
+    icon,
+    className,
+    children,
+    disabled,
+    onClick,
+    ...rest
+  }, ref) => {
+    const variantClass = resolveVariantClass(variant, color);
+    const sizeClass = 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 hasDecorators = (loading || shouldRenderIcon) && Boolean(content);
+    const gapClass = hasDecorators ? "gap-2" : void 0;
+    const loadingIconClass = loading ? twMerge("mdi mdi-loading mdi-spin", "leading-none") : void 0;
+    const iconClassName = shouldRenderIcon ? twMerge("leading-none", resolvedIconClass) : void 0;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ...rest,
+        ref,
+        onClick,
+        disabled: isDisabled,
+        className: twMerge(base, cursor, variantClass, sizeClass, blockClass, gapClass, className),
+        "data-loading": loading || void 0,
+        "aria-busy": loading || void 0,
+        children: [
+          loading && /* @__PURE__ */ jsx("i", { className: loadingIconClass, "aria-hidden": true }),
+          iconClassName && /* @__PURE__ */ jsx("i", { className: iconClassName, "aria-hidden": true }),
+          content
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Button_default = Button;
+
+// src/Containment/Chip/states.chip.ts
+var chipBaseClasses = "inline-flex items-center gap-1.5 border font-medium leading-tight transition-all duration-200 select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2";
+var chipSizeClasses = {
+  small: "text-xs px-3 py-1 min-h-[1.5rem]",
+  medium: "text-sm px-4 py-1.5 min-h-[2rem]",
+  large: "text-base px-5 py-2 min-h-[2.5rem]"
+};
+var closeButtonClasses = "ml-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-transparent text-current/70 transition-colors duration-200 hover:bg-current/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/30 focus-visible:ring-offset-2";
+var blackAndWhiteChipVariantClass = "bg-white text-black border border-black hover:bg-white focus-visible:ring-black/40 focus-visible:ring-offset-white";
+var paletteVariantClasses2 = {
+  primary: {
+    solid: "bg-primary text-white border border-primary hover:bg-primary/90",
+    outline: "bg-transparent text-primary border border-primary hover:bg-primary/10",
+    ghost: "bg-primary/15 text-primary border border-transparent hover:bg-primary/25",
+    text: "bg-transparent text-primary border border-transparent hover:text-primary/80",
+    bw: blackAndWhiteChipVariantClass
+  },
+  neutral: {
+    solid: "bg-gray-900 text-white border border-gray-900 hover:bg-gray-800",
+    outline: "bg-transparent text-gray-900 border border-gray-500 hover:bg-gray-100",
+    ghost: "bg-gray-100 text-gray-900 border border-transparent hover:bg-gray-200",
+    text: "bg-transparent text-gray-900 border border-transparent hover:text-gray-700",
+    bw: blackAndWhiteChipVariantClass
+  },
+  info: {
+    solid: "bg-sky-500 text-white border border-sky-500 hover:bg-sky-600",
+    outline: "bg-transparent text-sky-600 border border-sky-500 hover:bg-sky-50",
+    ghost: "bg-sky-100 text-sky-700 border border-transparent hover:bg-sky-200",
+    text: "bg-transparent text-sky-600 border border-transparent hover:text-sky-700",
+    bw: blackAndWhiteChipVariantClass
+  },
+  success: {
+    solid: "bg-emerald-500 text-white border border-emerald-500 hover:bg-emerald-600",
+    outline: "bg-transparent text-emerald-600 border border-emerald-500 hover:bg-emerald-50",
+    ghost: "bg-emerald-100 text-emerald-700 border border-transparent hover:bg-emerald-200",
+    text: "bg-transparent text-emerald-600 border border-transparent hover:text-emerald-700",
+    bw: blackAndWhiteChipVariantClass
+  },
+  warning: {
+    solid: "bg-amber-500 text-white border border-amber-500 hover:bg-amber-600",
+    outline: "bg-transparent text-amber-700 border border-amber-500 hover:bg-amber-50",
+    ghost: "bg-amber-100 text-amber-800 border border-transparent hover:bg-amber-200",
+    text: "bg-transparent text-amber-700 border border-transparent hover:text-amber-800",
+    bw: blackAndWhiteChipVariantClass
+  },
+  danger: {
+    solid: "bg-red-500 text-white border border-red-500 hover:bg-red-600",
+    outline: "bg-transparent text-red-600 border border-red-500 hover:bg-red-50",
+    ghost: "bg-red-100 text-red-700 border border-transparent hover:bg-red-200",
+    text: "bg-transparent text-red-600 border border-transparent hover:text-red-700",
+    bw: blackAndWhiteChipVariantClass
+  },
+  surface: {
+    solid: "bg-white text-gray-900 border border-gray-200 hover:bg-gray-50",
+    outline: "bg-transparent text-gray-900 border border-gray-300 hover:bg-gray-50",
+    ghost: "bg-gray-100 text-gray-900 border border-transparent hover:bg-gray-200",
+    text: "bg-transparent text-gray-900 border border-transparent hover:text-gray-600",
+    bw: blackAndWhiteChipVariantClass
+  }
+};
+var resolveVariantClass2 = (variant, palette) => {
+  const variants = paletteVariantClasses2[palette] ?? paletteVariantClasses2.primary;
+  return variants[variant] ?? variants.solid;
+};
+var resolveIconClassName2 = (icon) => {
+  if (!icon) {
+    return void 0;
+  }
+  if (typeof icon === "string") {
+    const trimmed = icon.trim();
+    if (!trimmed) {
+      return void 0;
+    }
+    if (trimmed.includes(" ")) {
+      return trimmed;
+    }
+    const normalized2 = trimmed.startsWith("mdi-") ? trimmed : `mdi-${trimmed}`;
+    return ["mdi", normalized2].join(" ");
+  }
+  const [library, providedName] = icon;
+  const normalizedLibrary = library.trim();
+  const baseClasses = iconBaseClasses[normalizedLibrary] ?? [normalizedLibrary];
+  const iconName = providedName.trim();
+  if (!iconName) {
+    return baseClasses.join(" ");
+  }
+  const normalized = iconName.startsWith("mdi-") ? iconName : `mdi-${iconName}`;
+  return Array.from(/* @__PURE__ */ new Set([...baseClasses, normalized])).join(" ");
+};
+var Chip = React6.forwardRef(
+  ({
+    variant = "solid",
+    color = "primary",
+    size = "medium",
+    pill = true,
+    selected = false,
+    closable = false,
+    closeIcon = "mdi-close",
+    onClose,
+    filter = false,
+    filterIcon = "mdi-check-bold",
+    prependIcon,
+    appendIcon,
+    disabled = false,
+    className,
+    children,
+    ...rest
+  }, ref) => {
+    const { onClick, onKeyDown, role, tabIndex, ...nativeProps } = rest;
+    const interactive = typeof onClick === "function";
+    const variantClass = resolveVariantClass2(variant, color);
+    const sizeClass = chipSizeClasses[size] ?? chipSizeClasses.medium;
+    const pillClass = pill ? "rounded-full" : "rounded-lg";
+    const cursorClass = disabled ? "pointer-events-none opacity-50" : interactive ? "cursor-pointer" : "cursor-default";
+    const selectedClass = selected ? "ring-2 ring-current/50 ring-offset-2 ring-offset-white" : void 0;
+    const resolvedRole = disabled ? role : role ?? (interactive ? "button" : void 0);
+    const resolvedTabIndex = disabled ? -1 : tabIndex ?? (interactive ? 0 : void 0);
+    const prependIconClassName = resolveIconClassName2(prependIcon);
+    const appendIconClassName = resolveIconClassName2(appendIcon);
+    const closeIconClassName = resolveIconClassName2(closeIcon);
+    const filterIconClassName = filter && selected ? resolveIconClassName2(filterIcon) : void 0;
+    const handleClick = React6.useCallback(
+      (event) => {
+        if (disabled) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        onClick?.(event);
+      },
+      [disabled, onClick]
+    );
+    const handleKeyDown = React6.useCallback(
+      (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || disabled || !interactive) {
+          return;
+        }
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          event.currentTarget.click();
+        }
+      },
+      [disabled, interactive, onKeyDown]
+    );
+    const handleCloseClick = React6.useCallback(
+      (event) => {
+        event.stopPropagation();
+        if (disabled) {
+          event.preventDefault();
+          return;
+        }
+        onClose?.(event);
+      },
+      [disabled, onClose]
+    );
+    const handleCloseKeyDown = React6.useCallback((event) => {
+      if (event.key === " " || event.key === "Enter") {
+        event.stopPropagation();
+      }
+    }, []);
+    const renderableChildren = typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx("span", { className: "truncate", children }) : children;
+    const filterAdornment = filter ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-current/30 text-[0.55rem]",
+        "aria-hidden": true,
+        children: filterIconClassName ? /* @__PURE__ */ jsx("i", { className: filterIconClassName, "aria-hidden": true }) : null
+      }
+    ) : null;
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ...nativeProps,
+        ref,
+        role: resolvedRole,
+        tabIndex: resolvedTabIndex,
+        "aria-disabled": disabled || void 0,
+        "aria-pressed": filter ? selected : void 0,
+        "data-selected": selected || void 0,
+        className: twMerge(chipBaseClasses, sizeClass, pillClass, variantClass, cursorClass, selectedClass, className),
+        onClick: interactive ? handleClick : void 0,
+        onKeyDown: interactive ? handleKeyDown : onKeyDown,
+        children: [
+          filterAdornment,
+          prependIconClassName && /* @__PURE__ */ jsx("i", { className: twMerge("text-[1em] leading-none", prependIconClassName), "aria-hidden": true }),
+          renderableChildren,
+          appendIconClassName && /* @__PURE__ */ jsx("i", { className: twMerge("text-[1em] leading-none", appendIconClassName), "aria-hidden": true }),
+          closable && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled,
+              "aria-label": "Remove chip",
+              className: twMerge(closeButtonClasses),
+              onClick: handleCloseClick,
+              onKeyDown: handleCloseKeyDown,
+              children: closeIconClassName ? /* @__PURE__ */ jsx("i", { className: closeIconClassName, "aria-hidden": true }) : /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xD7" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Chip.displayName = "Chip";
+var Chip_default = Chip;
+var defaultListContext = {
+  density: "default",
+  lines: "one",
+  nav: false,
+  divided: false,
+  color: "primary"
+};
+var ListContext = React6.createContext(defaultListContext);
+var useListContext = () => React6.useContext(ListContext);
+var listItemBaseClasses = "relative flex w-full items-center gap-4 bg-transparent text-left text-sm transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white hover:bg-neutral-200";
+var densityClasses = {
+  default: "px-4 py-3 text-base",
+  comfortable: "px-4 py-2.5 text-sm",
+  compact: "px-3 py-2 text-sm"
+};
+var lineClasses = {
+  one: "min-h-[3rem]",
+  two: "min-h-[3.75rem]",
+  three: "min-h-[4.5rem]"
+};
+var accentClasses = {
+  primary: { text: "text-primary", bg: "bg-primary/10", indicator: "bg-primary" },
+  neutral: { text: "text-gray-900", bg: "bg-gray-100", indicator: "bg-gray-900" },
+  info: { text: "text-sky-600", bg: "bg-sky-50", indicator: "bg-sky-500" },
+  success: { text: "text-emerald-600", bg: "bg-emerald-50", indicator: "bg-emerald-500" },
+  warning: { text: "text-amber-700", bg: "bg-amber-50", indicator: "bg-amber-500" },
+  danger: { text: "text-red-600", bg: "bg-red-50", indicator: "bg-red-500" },
+  surface: { text: "text-gray-900", bg: "bg-gray-100", indicator: "bg-gray-900" }
+};
+var ListItem = React6.forwardRef((props, ref) => {
+  const {
+    component,
+    href,
+    target,
+    rel,
+    type,
+    title,
+    subtitle,
+    overline,
+    prepend,
+    append,
+    active = false,
+    disabled = false,
+    inset = false,
+    density: densityOverride,
+    lines: linesOverride,
+    className,
+    children,
+    tabIndex,
+    role,
+    ...rest
+  } = props;
+  const listContext = useListContext();
+  const density = densityOverride ?? listContext.density;
+  const lines = linesOverride ?? listContext.lines;
+  const nav = listContext.nav;
+  const accent = accentClasses[listContext.color] ?? accentClasses.primary;
+  const shapeClass = listContext.divided ? "rounded-none" : "rounded-lg";
+  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 && 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__ */ jsxs(
-    "button",
+    Component,
     {
       ...rest,
-      onClick,
-      disabled: isDisabled,
-      className: twMerge(base, cursor, variantClass, sizeClass, blockClass, gapClass, className),
-      "data-loading": loading || void 0,
-      "aria-busy": loading || void 0,
+      ref,
+      role: resolvedRole,
+      tabIndex: resolvedTabIndex,
+      "aria-disabled": disabled || void 0,
+      "aria-current": active ? "true" : void 0,
+      className: twMerge(
+        listItemBaseClasses,
+        densityClasses[density],
+        lineClasses[lines],
+        shapeClass,
+        navPaddingClass,
+        insetClass,
+        disabledClass,
+        activeClasses,
+        className
+      ),
+      href: resolvedHref,
+      target: resolvedTarget,
+      rel: resolvedRel,
+      type: resolvedType,
+      "data-active": active || void 0,
       children: [
-        loading && /* @__PURE__ */ jsx("i", { className: loadingIconClass, "aria-hidden": true }),
-        iconClassName && /* @__PURE__ */ jsx("i", { className: iconClassName, "aria-hidden": true }),
-        children
+        nav && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: twMerge(
+              "absolute left-1 top-2 bottom-2 w-0.5 rounded-full bg-transparent transition-colors duration-150",
+              active ? accent.indicator : void 0
+            )
+          }
+        ),
+        prepend && /* @__PURE__ */ jsx("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center text-base text-gray-500", children: prepend }),
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-0.5 text-left", children: [
+          overline && /* @__PURE__ */ jsx("span", { className: "text-[0.65rem] font-semibold uppercase tracking-wide text-gray-500", children: overline }),
+          title && /* @__PURE__ */ jsx("span", { className: twMerge("truncate font-medium text-gray-900", active ? accent.text : void 0), children: title }),
+          subtitle && /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: subtitle }),
+          children
+        ] }),
+        append && /* @__PURE__ */ jsx("span", { className: "ml-auto flex items-center gap-2 whitespace-nowrap text-sm text-gray-500", children: append })
       ]
     }
   );
+});
+ListItem.displayName = "ListItem";
+var Item_default = ListItem;
+var listBaseClasses = "flex w-full min-w-0 flex-col text-gray-900 transition-colors duration-150";
+var listVariantClasses = {
+  solid: "bg-white border border-gray-200 shadow-sm shadow-gray-900/5",
+  outline: "bg-transparent border border-gray-300",
+  ghost: "bg-gray-50 border border-transparent",
+  text: "bg-transparent border border-transparent",
+  bw: "bg-white text-black border border-black shadow-none"
 };
-var Button_default = Button;
+var listRoundedClasses = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  pill: "rounded-full"
+};
+var List = React6.forwardRef((props, ref) => {
+  const {
+    variant = "solid",
+    density = "default",
+    lines = "one",
+    nav = false,
+    divided = false,
+    rounded = "lg",
+    color = "primary",
+    className,
+    role,
+    children,
+    ...rest
+  } = props;
+  const variantClass = listVariantClasses[variant] ?? listVariantClasses.solid;
+  const roundedClass = listRoundedClasses[rounded] ?? listRoundedClasses.lg;
+  const dividerClass = divided ? "divide-y divide-gray-100" : void 0;
+  const gapClass = divided ? "p-0" : "gap-1 p-1";
+  const navClass = nav ? "py-1" : void 0;
+  const accentColor = variant === "bw" ? "surface" : color;
+  const contextValue = React6.useMemo(
+    () => ({
+      density,
+      lines,
+      nav,
+      divided,
+      color: accentColor
+    }),
+    [accentColor, density, lines, nav, divided]
+  );
+  return /* @__PURE__ */ jsx(ListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref,
+      role: role ?? "list",
+      className: twMerge(listBaseClasses, variantClass, roundedClass, dividerClass, gapClass, navClass, className),
+      children
+    }
+  ) });
+});
+List.displayName = "List";
+var List_default = List;
+var isBrowser = typeof window !== "undefined";
+var useIsomorphicLayoutEffect = isBrowser ? React6.useLayoutEffect : React6.useEffect;
+var placementClasses = {
+  "bottom-start": "left-0 top-full origin-top-left",
+  bottom: "left-1/2 top-full -translate-x-1/2 origin-top",
+  "bottom-end": "right-0 top-full origin-top-right",
+  "top-start": "left-0 bottom-full origin-bottom-left",
+  top: "left-1/2 bottom-full -translate-x-1/2 origin-bottom",
+  "top-end": "right-0 bottom-full origin-bottom-right"
+};
+var offsetClasses = {
+  top: "mb-2",
+  bottom: "mt-2"
+};
+var menuBaseClasses = "absolute z-50 min-w-[10rem] rounded-xl border border-gray-200/80 bg-white/95 p-2 text-sm text-gray-700 shadow-lg shadow-gray-900/10 ring-1 ring-black/5 backdrop-blur-md transition-all duration-150 data-[state=closed]:pointer-events-none data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2";
+var overlayBaseClasses = "fixed inset-0 z-40 bg-gray-900/30 backdrop-blur-[1px]";
+var Menu = React6.forwardRef((props, ref) => {
+  const {
+    activator,
+    children,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    placement = "bottom-start",
+    openOnHover = false,
+    closeOnContentClick = true,
+    matchActivatorWidth = false,
+    keepMounted = false,
+    disabled = false,
+    scrim = false,
+    contentClassName,
+    contentProps,
+    overlayClassName,
+    className,
+    onMouseEnter: rootMouseEnter,
+    onMouseLeave: rootMouseLeave,
+    ...rest
+  } = props;
+  const baseId = React6.useId();
+  const menuId = `${baseId}-menu`;
+  const activatorId = `${baseId}-activator`;
+  const isControlled = typeof openProp === "boolean";
+  const [internalOpen, setInternalOpen] = React6.useState(defaultOpen);
+  const open = isControlled ? Boolean(openProp) : internalOpen;
+  const localRootRef = React6.useRef(null);
+  const menuRef = React6.useRef(null);
+  const activatorRef = React6.useRef(null);
+  const closeTimeoutRef = React6.useRef(null);
+  const mergedRootRef = React6.useCallback(
+    (node) => {
+      localRootRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+  const [activatorWidth, setActivatorWidth] = React6.useState();
+  const updateActivatorWidth = React6.useCallback(() => {
+    if (!matchActivatorWidth) {
+      setActivatorWidth(void 0);
+      return;
+    }
+    const node = activatorRef.current;
+    if (!node) {
+      return;
+    }
+    setActivatorWidth(node.getBoundingClientRect().width);
+  }, [matchActivatorWidth]);
+  useIsomorphicLayoutEffect(() => {
+    if (!matchActivatorWidth) {
+      return;
+    }
+    updateActivatorWidth();
+    if (!activatorRef.current || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver(() => updateActivatorWidth());
+    observer.observe(activatorRef.current);
+    return () => observer.disconnect();
+  }, [matchActivatorWidth, updateActivatorWidth]);
+  const setOpen = React6.useCallback(
+    (nextOpen) => {
+      if (disabled || open === nextOpen) {
+        return;
+      }
+      if (!isControlled) {
+        setInternalOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+    },
+    [disabled, isControlled, onOpenChange, open]
+  );
+  React6.useEffect(() => {
+    if (!disabled || !open) {
+      return;
+    }
+    if (!isControlled) {
+      setInternalOpen(false);
+    }
+    onOpenChange?.(false);
+  }, [disabled, open, isControlled, onOpenChange]);
+  React6.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (!target) {
+        return;
+      }
+      if (localRootRef.current?.contains(target)) {
+        return;
+      }
+      setOpen(false);
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        setOpen(false);
+        activatorRef.current?.focus();
+      }
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, setOpen]);
+  React6.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const node = menuRef.current;
+    if (!node) {
+      return;
+    }
+    const id = window.requestAnimationFrame(() => {
+      node.focus({ preventScroll: true });
+    });
+    return () => window.cancelAnimationFrame(id);
+  }, [open]);
+  const setActivatorNode = React6.useCallback(
+    (node) => {
+      activatorRef.current = node;
+      if (node && matchActivatorWidth) {
+        setActivatorWidth(node.getBoundingClientRect().width);
+      }
+    },
+    [matchActivatorWidth]
+  );
+  const handleActivatorClick = React6.useCallback(
+    (event) => {
+      event.preventDefault();
+      if (disabled) {
+        return;
+      }
+      setOpen(!open);
+    },
+    [disabled, open, setOpen]
+  );
+  const handleActivatorKeyDown = React6.useCallback(
+    (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        setOpen(!open);
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setOpen(true);
+      }
+    },
+    [open, setOpen]
+  );
+  const clearCloseTimeout = React6.useCallback(() => {
+    if (closeTimeoutRef.current !== null) {
+      if (isBrowser) {
+        window.clearTimeout(closeTimeoutRef.current);
+      }
+      closeTimeoutRef.current = null;
+    }
+  }, []);
+  const scheduleClose = React6.useCallback(() => {
+    if (!isBrowser) {
+      setOpen(false);
+      return;
+    }
+    clearCloseTimeout();
+    closeTimeoutRef.current = window.setTimeout(() => {
+      setOpen(false);
+      closeTimeoutRef.current = null;
+    }, 150);
+  }, [clearCloseTimeout, setOpen]);
+  React6.useEffect(() => {
+    return () => clearCloseTimeout();
+  }, [clearCloseTimeout]);
+  const isMovingWithinMenu = React6.useCallback(
+    (event) => {
+      const nextTarget = event.relatedTarget;
+      if (!nextTarget || !localRootRef.current) {
+        return false;
+      }
+      return localRootRef.current.contains(nextTarget);
+    },
+    [localRootRef]
+  );
+  const handleRootMouseEnter = React6.useCallback(
+    (event) => {
+      rootMouseEnter?.(event);
+      if (event.defaultPrevented) {
+        return;
+      }
+      if (openOnHover) {
+        clearCloseTimeout();
+        setOpen(true);
+      }
+    },
+    [clearCloseTimeout, openOnHover, rootMouseEnter, setOpen]
+  );
+  const handleRootMouseLeave = React6.useCallback(
+    (event) => {
+      rootMouseLeave?.(event);
+      if (event.defaultPrevented) {
+        return;
+      }
+      if (openOnHover) {
+        if (isMovingWithinMenu(event)) {
+          return;
+        }
+        scheduleClose();
+      }
+    },
+    [isMovingWithinMenu, openOnHover, rootMouseLeave, scheduleClose]
+  );
+  const handleActivatorMouseEnter = React6.useCallback(
+    (_event) => {
+      if (disabled) {
+        return;
+      }
+      clearCloseTimeout();
+      setOpen(true);
+    },
+    [clearCloseTimeout, disabled, setOpen]
+  );
+  const handleActivatorMouseLeave = React6.useCallback(
+    (event) => {
+      if (disabled || !openOnHover) {
+        return;
+      }
+      if (isMovingWithinMenu(event)) {
+        return;
+      }
+      scheduleClose();
+    },
+    [disabled, isMovingWithinMenu, openOnHover, scheduleClose]
+  );
+  const {
+    className: contentClass,
+    style: contentStyle,
+    onClick: contentOnClick,
+    onMouseEnter: contentOnMouseEnter,
+    onMouseLeave: contentOnMouseLeave,
+    role: contentRole,
+    tabIndex: contentTabIndex,
+    ["aria-labelledby"]: ariaLabelledBy,
+    ...restContentProps
+  } = contentProps ?? {};
+  const shouldRenderContent = open || keepMounted;
+  const verticalPlacement = placement.startsWith("top") ? "top" : "bottom";
+  const activatorElement = activator({
+    ref: setActivatorNode,
+    id: activatorId,
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    "aria-controls": menuId,
+    onClick: handleActivatorClick,
+    onKeyDown: handleActivatorKeyDown,
+    onMouseEnter: openOnHover ? handleActivatorMouseEnter : void 0,
+    onMouseLeave: openOnHover ? handleActivatorMouseLeave : void 0,
+    disabled,
+    open
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    scrim && open ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: twMerge(overlayBaseClasses, overlayClassName),
+        "aria-hidden": true,
+        onClick: () => setOpen(false),
+        onMouseDown: (event) => event.preventDefault()
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref: mergedRootRef,
+        className: twMerge("relative inline-flex min-w-0", className),
+        "data-open": open || void 0,
+        onMouseEnter: openOnHover ? handleRootMouseEnter : rootMouseEnter,
+        onMouseLeave: openOnHover ? handleRootMouseLeave : rootMouseLeave,
+        children: [
+          activatorElement,
+          shouldRenderContent ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              ...restContentProps,
+              ref: menuRef,
+              id: menuId,
+              role: contentRole ?? "menu",
+              tabIndex: contentTabIndex ?? -1,
+              "aria-labelledby": ariaLabelledBy ?? activatorId,
+              "data-state": open ? "open" : "closed",
+              className: twMerge(
+                menuBaseClasses,
+                placementClasses[placement],
+                offsetClasses[verticalPlacement],
+                contentClassName,
+                contentClass
+              ),
+              style: {
+                ...contentStyle,
+                ...matchActivatorWidth && activatorWidth ? { minWidth: activatorWidth, width: activatorWidth } : void 0
+              },
+              onMouseEnter: (event) => {
+                contentOnMouseEnter?.(event);
+                if (event.defaultPrevented) {
+                  return;
+                }
+                if (openOnHover) {
+                  clearCloseTimeout();
+                  setOpen(true);
+                }
+              },
+              onMouseLeave: (event) => {
+                contentOnMouseLeave?.(event);
+                if (event.defaultPrevented) {
+                  return;
+                }
+                if (openOnHover) {
+                  if (isMovingWithinMenu(event)) {
+                    return;
+                  }
+                  scheduleClose();
+                }
+              },
+              onClick: (event) => {
+                contentOnClick?.(event);
+                if (event.defaultPrevented) {
+                  return;
+                }
+                if (closeOnContentClick) {
+                  setOpen(false);
+                }
+              },
+              children
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+});
+Menu.displayName = "Menu";
+var Menu_default = Menu;
 
 // src/Form/Input/states.input.ts
-var resolveIconClassName2 = (icon) => {
+var resolveIconClassName3 = (icon) => {
   if (!icon) {
     return void 0;
   }
@@ -160,7 +931,7 @@ var resolveIconClassName2 = (icon) => {
   return Array.from(new Set(classes)).join(" ");
 };
 var Input = ({ variant = "outline", success, error, warn, icon, className, ...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";
+  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 = {
     outline: "rounded border border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary",
     filled: "rounded bg-gray-100 border border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary",
@@ -179,7 +950,7 @@ var Input = ({ variant = "outline", success, error, warn, icon, className, ...pr
   };
   const variantClass = variantClasses[variant] ?? variantClasses.outline;
   const toneClass = status ? statusClasses[status.tone] : void 0;
-  const prependIconClass = resolveIconClassName2(icon);
+  const prependIconClass = resolveIconClassName3(icon);
   const prependPadding = prependIconClass ? "pl-10" : void 0;
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
     /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
@@ -191,6 +962,6 @@ var Input = ({ variant = "outline", success, error, warn, icon, className, ...pr
 };
 var Input_default = Input;
 
-export { Button_default as Button, Input_default as Input };
+export { Button_default as Button, Chip_default as Chip, Input_default as Input, List_default as List, Item_default as ListItem, Menu_default as Menu };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map