@lindle/linoardo 1.0.12 → 1.0.13

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React3 from 'react';
-import { forwardRef, useCallback, useContext, useId, useState, useMemo, useEffect } from 'react';
+import { forwardRef, Component } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -333,46 +333,37 @@ var Chip = forwardRef(
     const appendIconClassName = resolveIconClassName2(appendIcon);
     const closeIconClassName = resolveIconClassName2(closeIcon);
     const filterIconClassName = filter && selected ? resolveIconClassName2(filterIcon) : void 0;
-    const handleClick = useCallback(
-      (event) => {
-        if (disabled) {
-          event.preventDefault();
-          event.stopPropagation();
-          return;
-        }
-        onClick?.(event);
-      },
-      [disabled, onClick]
-    );
-    const handleKeyDown = 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 = useCallback(
-      (event) => {
+    const handleClick = (event) => {
+      if (disabled) {
+        event.preventDefault();
         event.stopPropagation();
-        if (disabled) {
-          event.preventDefault();
-          return;
-        }
-        onClose?.(event);
-      },
-      [disabled, onClose]
-    );
-    const handleCloseKeyDown = useCallback((event) => {
+        return;
+      }
+      onClick?.(event);
+    };
+    const handleKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented || disabled || !interactive) {
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        event.currentTarget.click();
+      }
+    };
+    const handleCloseClick = (event) => {
+      event.stopPropagation();
+      if (disabled) {
+        event.preventDefault();
+        return;
+      }
+      onClose?.(event);
+    };
+    const handleCloseKeyDown = (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",
@@ -475,20 +466,20 @@ var ListItem = React3.forwardRef((props, ref) => {
   const sharp = sharpOverride ?? false;
   const accent = accentClasses[color] ?? accentClasses.primary;
   const shapeClass = divided || sharp ? "rounded-none" : "rounded-lg";
-  const Component = component ?? (href ? "a" : "div");
-  const interactive = typeof rest.onClick === "function" || Component === "a" || Component === "button";
+  const Component3 = component ?? (href ? "a" : "div");
+  const interactive = typeof rest.onClick === "function" || Component3 === "a" || Component3 === "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 resolvedTabIndex = disabled ? -1 : tabIndex ?? (interactive && Component3 === "div" ? 0 : void 0);
+  const resolvedRel = Component3 === "a" ? rel : void 0;
+  const resolvedTarget = Component3 === "a" ? target : void 0;
+  const resolvedHref = Component3 === "a" ? href : void 0;
+  const resolvedType = Component3 === "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(
-    Component,
+    Component3,
     {
       ...rest,
       ref,
@@ -740,135 +731,148 @@ var accentClasses2 = {
   surface: { text: "text-gray-900", bg: "bg-gray-100", border: "border-gray-200" },
   bw: { text: "text-gray-900", bg: "bg-gray-100", border: "border-gray-200" }
 };
-var ExpansionPanelItem = forwardRef((props, ref) => {
-  const {
-    value,
-    title,
-    subtitle,
-    text,
-    prepend,
-    append,
-    expandIcon,
-    collapseIcon,
-    hideToggleIcon = false,
-    headerClassName,
-    contentClassName,
-    className,
-    disabled = false,
-    children,
-    color: colorOverride,
-    ...rest
-  } = props;
-  const context = useContext(ExpansionPanelContext);
-  const generatedValue = useId();
-  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 headerId = useId();
-  const contentId = useId();
-  const [standaloneExpanded, setStandaloneExpanded] = useState(false);
-  const isExpanded = context ? context.expandedValues.includes(panelValue) : standaloneExpanded;
-  const handleToggle = () => {
-    if (disabled) {
-      return;
-    }
-    if (context) {
-      context.toggle(panelValue, disabled);
-    } else {
-      setStandaloneExpanded((prev) => !prev);
-    }
-  };
-  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 = twMerge("border-l-2 border-transparent", isExpanded ? accent.border : void 0);
-  const defaultToggleIcon = /* @__PURE__ */ 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 = 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__ */ jsxs(
-    "div",
-    {
-      ...rest,
-      ref,
-      className: 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__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            id: headerId,
-            onClick: handleToggle,
-            disabled,
-            "aria-expanded": isExpanded,
-            "aria-controls": hasContent ? contentId : void 0,
-            className: 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__ */ jsx("span", { className: "flex h-10 w-10 items-center justify-center text-gray-500", children: prepend }),
-              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5 text-left", children: [
-                title && /* @__PURE__ */ jsx("span", { className: twMerge("truncate font-medium text-gray-900", titleClass), children: title }),
-                subtitle && /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: subtitle })
-              ] }),
-              append && /* @__PURE__ */ jsx("span", { className: "ml-auto flex items-center gap-2 text-sm text-gray-500", children: append }),
-              !hideToggleIcon && /* @__PURE__ */ jsx("span", { className: toggleWrapperClass, children: toggleIconNode })
-            ]
-          }
+var uniqueIdCounter = 0;
+var generateId = (prefix) => `${prefix}-${++uniqueIdCounter}`;
+var ExpansionPanelItemInner = class extends Component {
+  constructor(props) {
+    super(props);
+    this.handleToggle = () => {
+      const { disabled = false } = this.props;
+      if (disabled) {
+        return;
+      }
+      const context = this.context;
+      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");
+  }
+  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.context;
+    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 = twMerge("border-l-2 border-transparent", isExpanded ? accent.border : void 0);
+    const defaultToggleIcon = /* @__PURE__ */ 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 = 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__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref: forwardedRef,
+        className: twMerge(
+          "expansion-panel-item flex flex-col overflow-hidden transition-colors duration-200",
+          rootSurface,
+          shapeClass,
+          className
         ),
-        hasContent && /* @__PURE__ */ 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__ */ jsx(
-              "div",
-              {
-                id: contentId,
-                role: "region",
-                "aria-labelledby": headerId,
-                "data-state": isExpanded ? "open" : "closed",
-                className: 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
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-});
+        "data-state": isExpanded ? "open" : "closed",
+        "data-disabled": disabled || void 0,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              id: this.headerId,
+              onClick: this.handleToggle,
+              disabled,
+              "aria-expanded": isExpanded,
+              "aria-controls": hasContent ? this.contentId : void 0,
+              className: 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__ */ jsx("span", { className: "flex h-10 w-10 items-center justify-center text-gray-500", children: prepend }),
+                /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5 text-left", children: [
+                  title && /* @__PURE__ */ jsx("span", { className: twMerge("truncate font-medium text-gray-900", titleClass), children: title }),
+                  subtitle && /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: subtitle })
+                ] }),
+                append && /* @__PURE__ */ jsx("span", { className: "ml-auto flex items-center gap-2 text-sm text-gray-500", children: append }),
+                !hideToggleIcon && /* @__PURE__ */ jsx("span", { className: toggleWrapperClass, children: toggleIconNode })
+              ]
+            }
+          ),
+          hasContent && /* @__PURE__ */ 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__ */ jsx(
+                "div",
+                {
+                  id: this.contentId,
+                  role: "region",
+                  "aria-labelledby": this.headerId,
+                  "data-state": isExpanded ? "open" : "closed",
+                  className: 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
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+};
+ExpansionPanelItemInner.contextType = ExpansionPanelContext;
+var ExpansionPanelItem = forwardRef((props, ref) => /* @__PURE__ */ jsx(ExpansionPanelItemInner, { ...props, forwardedRef: ref }));
 ExpansionPanelItem.displayName = "ExpansionPanelItem";
 var ExpansionPanelItem_default = ExpansionPanelItem;
 var variantContainerClasses = {
@@ -896,80 +900,98 @@ var normalizeValues = (value, allowMultiple) => {
   return normalized.length ? [normalized[0]] : [];
 };
 var clampValues = (values, allowMultiple) => allowMultiple ? uniqueValues(values) : values.length ? [values[0]] : [];
-var ExpansionPanel = forwardRef((props, ref) => {
-  const {
-    variant = "elevated",
-    rounded = "lg",
-    density = "default",
-    color = "primary",
-    divider = true,
-    multiple = false,
-    value,
-    defaultValue,
-    onChange,
-    className,
-    children,
-    ...rest
-  } = props;
-  const isControlled = value !== void 0;
-  const controlledValues = useMemo(() => {
-    if (!isControlled) {
-      return void 0;
-    }
-    return normalizeValues(value, multiple);
-  }, [isControlled, value, multiple]);
-  const [internalValues, setInternalValues] = useState(
-    () => normalizeValues(defaultValue, multiple)
-  );
-  const expandedValues = controlledValues ?? internalValues;
-  useEffect(() => {
-    if (!isControlled) {
-      setInternalValues((prev) => clampValues(prev, multiple));
-    }
-  }, [multiple, isControlled]);
-  const handleValueChange = useCallback(
-    (next) => {
+var ExpansionPanelInner = class extends Component {
+  constructor(props) {
+    super(props);
+    this.isControlled = () => this.props.value !== void 0;
+    this.getExpandedValues = (allowMultiple = this.props.multiple ?? false) => {
+      if (this.isControlled()) {
+        return normalizeValues(this.props.value, allowMultiple);
+      }
+      return this.state.internalValues;
+    };
+    this.handleValueChange = (next) => {
+      const { onChange } = this.props;
+      const allowMultiple = this.props.multiple ?? false;
+      const isControlled = this.isControlled();
       if (!isControlled) {
-        setInternalValues(next);
+        this.setState({ internalValues: next });
       }
       if (onChange) {
-        if (multiple) {
+        if (allowMultiple) {
           onChange(next);
         } else {
           onChange(next[0] ?? null);
         }
       }
-    },
-    [isControlled, multiple, onChange]
-  );
-  const toggle = useCallback(
-    (panelValue, disabled) => {
+    };
+    this.handleToggle = (panelValue, disabled) => {
       if (disabled) {
         return;
       }
+      const allowMultiple = this.props.multiple ?? false;
+      const expandedValues = this.getExpandedValues(allowMultiple);
       const isActive = expandedValues.includes(panelValue);
-      const next = multiple ? isActive ? expandedValues.filter((v) => v !== panelValue) : [...expandedValues, panelValue] : isActive ? [] : [panelValue];
-      handleValueChange(next);
-    },
-    [expandedValues, handleValueChange, multiple]
-  );
-  const providerValue = useMemo(
-    () => ({ expandedValues, toggle, density, color, divider, rounded, variant }),
-    [expandedValues, toggle, density, color, divider, rounded, variant]
-  );
-  const variantClass = divider ? variantContainerClasses[variant] : "bg-transparent border border-transparent shadow-none";
-  const shapeClass = roundedClasses2[rounded] ?? roundedClasses2.lg;
-  const layoutClass = divider ? "divide-y divide-gray-100 overflow-hidden" : "gap-4";
-  return /* @__PURE__ */ jsx(ExpansionPanelContext.Provider, { value: providerValue, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...rest,
-      ref,
-      className: twMerge("expansion-panel flex w-full flex-col text-gray-900", variantClass, shapeClass, layoutClass, className),
-      children
+      const next = allowMultiple ? isActive ? expandedValues.filter((v) => v !== panelValue) : [...expandedValues, panelValue] : isActive ? [] : [panelValue];
+      this.handleValueChange(next);
+    };
+    const allowMultiple = props.multiple ?? false;
+    this.state = {
+      internalValues: normalizeValues(props.defaultValue, allowMultiple)
+    };
+  }
+  componentDidUpdate(prevProps) {
+    const allowMultiple = this.props.multiple ?? false;
+    const prevAllowMultiple = prevProps.multiple ?? false;
+    const isControlled = this.isControlled();
+    const wasControlled = prevProps.value !== void 0;
+    if (!isControlled && (allowMultiple !== prevAllowMultiple || wasControlled !== isControlled)) {
+      this.setState((prevState) => ({
+        internalValues: clampValues(prevState.internalValues, allowMultiple)
+      }));
     }
-  ) });
-});
+  }
+  render() {
+    const {
+      variant = "elevated",
+      rounded = "lg",
+      density = "default",
+      color = "primary",
+      divider = true,
+      multiple = false,
+      className,
+      children,
+      forwardedRef,
+      value: _value,
+      defaultValue: _defaultValue,
+      onChange: _onChange,
+      ...rest
+    } = this.props;
+    const expandedValues = this.getExpandedValues(multiple);
+    const providerValue = {
+      expandedValues,
+      toggle: this.handleToggle,
+      density,
+      color,
+      divider,
+      rounded,
+      variant
+    };
+    const variantClass = divider ? variantContainerClasses[variant] : "bg-transparent border border-transparent shadow-none";
+    const shapeClass = roundedClasses2[rounded] ?? roundedClasses2.lg;
+    const layoutClass = divider ? "divide-y divide-gray-100 overflow-hidden" : "gap-4";
+    return /* @__PURE__ */ jsx(ExpansionPanelContext.Provider, { value: providerValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        ref: forwardedRef,
+        className: twMerge("expansion-panel flex w-full flex-col text-gray-900", variantClass, shapeClass, layoutClass, className),
+        children
+      }
+    ) });
+  }
+};
+var ExpansionPanel = forwardRef((props, ref) => /* @__PURE__ */ jsx(ExpansionPanelInner, { ...props, forwardedRef: ref }));
 ExpansionPanel.displayName = "ExpansionPanel";
 var ExpansionPanel_default = ExpansionPanel;
 var containerBaseClasses = "fixed inset-0 z-[70] flex items-center justify-center p-4 sm:p-8 data-[state=closed]:pointer-events-none";