@lindle/linoardo 1.0.42 → 1.0.43

package/dist/chunk-F3PI7A6V.js

@@ -0,0 +1,200 @@
+import { generateString } from './chunk-6SKW43XI.js';
+import { iconBaseClasses } from './chunk-IEILIKS2.js';
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var baseClass = "select-base w-full appearance-none focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed bg-white text-gray-900 placeholder:text-gray-500 dark:bg-slate-900 dark:text-gray-100 dark:placeholder:text-gray-400";
+var variantClasses = {
+  solid: "rounded border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
+  sharp: "rounded-none border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
+  outline: "rounded border-2 border-black bg-white focus-visible:border-black focus-visible:ring-2 focus-visible:ring-black/30 dark:border-black dark:bg-transparent dark:focus-visible:border-black dark:focus-visible:ring-black/40",
+  text: "rounded-none border-0 border-b border-transparent pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70",
+  ghost: "rounded border border-transparent bg-gray-50 text-gray-900 focus-visible:bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15 dark:bg-slate-800 dark:text-gray-100 dark:focus-visible:bg-slate-700 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/25",
+  filled: "rounded border border-gray-200 bg-gray-100 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/30",
+  underlined: "rounded-none border-0 border-b border-gray-300 pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-300 dark:focus-visible:border-primary/70",
+  rounded: "rounded-full pl-4 pr-10 border border-gray-300 bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 shadow-sm dark:border-gray-600 dark:bg-slate-900 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/30 dark:shadow-black/20"
+};
+var sizeClasses = {
+  "x-small": { padding: "pl-2 pr-8 py-2", text: "text-xs" },
+  small: { padding: "pl-2.5 pr-9 py-2.5", text: "text-sm" },
+  medium: { padding: "pl-3 pr-10 py-3", text: "text-base" },
+  large: { padding: "pl-3.5 pr-11 py-3.5", text: "text-lg" },
+  "x-large": { padding: "pl-4 pr-12 py-4", text: "text-xl" }
+};
+var normalizeOption = (option) => {
+  if (typeof option === "string") {
+    return { label: option, value: option };
+  }
+  return option;
+};
+var toIdSafe = (value) => {
+  const sanitized = value.replace(/\s+/g, "-").replace(/[^A-Za-z0-9_-]/g, "");
+  return sanitized || "opt";
+};
+var resolveIconClassName = (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 normalizedName2 = trimmed.startsWith("mdi-") ? trimmed : `mdi-${trimmed}`;
+    return ["mdi", normalizedName2].join(" ");
+  }
+  const [library, iconNameRaw] = icon;
+  const baseClasses = iconBaseClasses[library] ?? [library];
+  const iconName = iconNameRaw.trim();
+  if (!iconName) {
+    return baseClasses.join(" ");
+  }
+  const normalizedName = iconName.startsWith("mdi-") ? iconName : `mdi-${iconName}`;
+  const classes = [...baseClasses, normalizedName];
+  return Array.from(new Set(classes)).join(" ");
+};
+var Select = React.forwardRef(
+  ({
+    options,
+    label,
+    placeholder,
+    variant = "outline",
+    size = "medium",
+    className,
+    wrapperClassName,
+    id,
+    name,
+    multiple,
+    value,
+    defaultValue,
+    error,
+    helperText,
+    disabled,
+    required,
+    onChange,
+    onBlur,
+    onFocus,
+    ...props
+  }, ref) => {
+    const selectId = id || name || generateString();
+    const inputName = name || selectId;
+    const variantClass = variantClasses[variant] ?? variantClasses.outline;
+    const sizeConfig = sizeClasses[size] ?? sizeClasses.medium;
+    const sizeClass = `${sizeConfig.padding} ${sizeConfig.text}`;
+    const normalizedOptions = options.map(normalizeOption);
+    const selectedValueList = value !== void 0 ? (Array.isArray(value) ? value : [value]).map(String) : defaultValue !== void 0 ? (Array.isArray(defaultValue) ? defaultValue : [defaultValue]).map(String) : [];
+    const selectedLabels = normalizedOptions.filter((option) => selectedValueList.includes(String(option.value))).map((option) => option.label);
+    const hasSelection = selectedLabels.length > 0;
+    const summaryText = hasSelection ? multiple ? selectedLabels.join(", ") : selectedLabels[0] : placeholder || "\xA0";
+    const handleOptionChange = (event) => {
+      onChange?.(event);
+      if (multiple) return;
+      const detailsEl = event.currentTarget.closest("details");
+      detailsEl?.removeAttribute("open");
+    };
+    const handleDetailsBlur = (event) => {
+      const nextFocus = event.relatedTarget;
+      if (nextFocus && event.currentTarget.contains(nextFocus)) return;
+      event.currentTarget.removeAttribute("open");
+    };
+    const handleDetailsFocus = (event) => {
+      if (normalizedOptions.length === 0) {
+        onFocus?.(event);
+      }
+    };
+    return /* @__PURE__ */ jsxs("div", { className: twMerge("flex flex-col gap-1", wrapperClassName), children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs(
+          "details",
+          {
+            className: "group w-full",
+            ...props,
+            onBlur: onBlur ? void 0 : handleDetailsBlur,
+            onFocus: onFocus ? handleDetailsFocus : void 0,
+            open: void 0,
+            children: [
+              /* @__PURE__ */ jsxs(
+                "summary",
+                {
+                  className: twMerge(
+                    baseClass,
+                    variantClass,
+                    sizeClass,
+                    "list-none cursor-pointer flex items-center justify-between pr-10 relative [&::-webkit-details-marker]:hidden",
+                    error && "border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500",
+                    disabled && "pointer-events-none opacity-50 cursor-not-allowed",
+                    className
+                  ),
+                  style: { minHeight: "2.75rem" },
+                  onClick: (e) => disabled && e.preventDefault(),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: twMerge("truncate", !hasSelection && "text-gray-500 dark:text-gray-400"), children: summaryText }),
+                    /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500 dark:text-gray-300", children: /* @__PURE__ */ jsx("i", { className: "mdi mdi-chevron-down text-base leading-none transition-transform duration-200 group-open:rotate-180", "aria-hidden": true }) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-gray-200 bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-slate-800 dark:border-slate-700", children: normalizedOptions.map((option, index) => {
+                const optionValueStr = String(option.value);
+                const isSelected = Array.isArray(value) ? value.map(String).includes(optionValueStr) : String(value) === optionValueStr;
+                const isDefaultSelected = Array.isArray(defaultValue) ? defaultValue.map(String).includes(optionValueStr) : String(defaultValue) === optionValueStr;
+                const iconClassName = resolveIconClassName(option.icon);
+                const inputId = `${selectId}-${toIdSafe(optionValueStr)}-${index}`;
+                return /* @__PURE__ */ jsxs(
+                  "label",
+                  {
+                    htmlFor: inputId,
+                    className: twMerge(
+                      "relative flex cursor-pointer select-none items-center gap-2 px-4 py-2 text-sm text-gray-900 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-slate-700",
+                      option.disabled && "cursor-not-allowed opacity-50"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: multiple ? "checkbox" : "radio",
+                          id: inputId,
+                          name: inputName,
+                          value: option.value,
+                          disabled: option.disabled || disabled,
+                          checked: value !== void 0 ? isSelected : void 0,
+                          defaultChecked: defaultValue !== void 0 ? isDefaultSelected : void 0,
+                          onChange: handleOptionChange,
+                          onBlur,
+                          ref,
+                          required: required && !multiple,
+                          className: "peer sr-only"
+                        }
+                      ),
+                      iconClassName && /* @__PURE__ */ jsx("i", { className: twMerge(iconClassName, "text-lg text-gray-500 peer-checked:text-primary dark:text-gray-400") }),
+                      /* @__PURE__ */ jsx("span", { className: "flex-1 truncate peer-checked:font-medium peer-checked:text-primary", children: option.label }),
+                      /* @__PURE__ */ jsx("i", { className: "mdi mdi-check invisible ml-auto text-primary peer-checked:visible" })
+                    ]
+                  },
+                  `${optionValueStr}-${index}`
+                );
+              }) })
+            ]
+          }
+        ),
+        label && /* @__PURE__ */ jsx(
+          "label",
+          {
+            className: twMerge("absolute left-3 -top-1.5 text-xs bg-white px-1 text-gray-500 transition-all dark:bg-slate-900 dark:text-gray-400"),
+            children: label
+          }
+        )
+      ] }),
+      helperText && /* @__PURE__ */ jsx("p", { className: twMerge("mt-1 text-xs text-gray-500", error && "text-red-500"), children: helperText })
+    ] });
+  }
+);
+Select.displayName = "Select";
+var Select_default = Select;
+
+export { Select_default };
+//# sourceMappingURL=chunk-F3PI7A6V.js.map
+//# sourceMappingURL=chunk-F3PI7A6V.js.map

package/dist/chunk-F3PI7A6V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Form/Select/index.tsx"],"names":["normalizedName"],"mappings":"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","file":"chunk-F3PI7A6V.js","sourcesContent":["import React from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { iconBaseClasses } from '@lindle/linoardo/globals';\nimport type { GlobalSize, PropIcon } from '@lindle/linoardo/global.types';\nimport type { InputVariant } from '../Input/types';\nimport { generateString } from '../../utils/helpers/randomStr';\n\nexport interface SelectOptionObject {\n  value: string | number;\n  label: string;\n  disabled?: boolean;\n  icon?: PropIcon;\n}\n\nexport type SelectOption = SelectOptionObject | string;\n\nexport interface SelectProps extends Omit<React.DetailsHTMLAttributes<HTMLDetailsElement>, 'onBlur' | 'onChange' | 'value' | 'defaultValue'> {\n  options: SelectOption[];\n  label?: string;\n  placeholder?: string;\n  variant?: InputVariant;\n  size?: GlobalSize;\n  wrapperClassName?: string;\n  error?: boolean;\n  helperText?: string;\n  value?: string | number | readonly string[];\n  defaultValue?: string | number | readonly string[];\n  name?: string;\n  multiple?: boolean;\n  disabled?: boolean;\n  required?: boolean;\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  onFocus?: React.FocusEventHandler<HTMLDetailsElement>;\n}\n\nconst baseClass =\n  'select-base w-full appearance-none focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed bg-white text-gray-900 placeholder:text-gray-500 dark:bg-slate-900 dark:text-gray-100 dark:placeholder:text-gray-400';\n\nconst variantClasses = {\n  solid:\n    'rounded border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40',\n  sharp:\n    'rounded-none border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40',\n  outline:\n    'rounded border-2 border-black bg-white focus-visible:border-black focus-visible:ring-2 focus-visible:ring-black/30 dark:border-black dark:bg-transparent dark:focus-visible:border-black dark:focus-visible:ring-black/40',\n  text: 'rounded-none border-0 border-b border-transparent pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70',\n  ghost:\n    'rounded border border-transparent bg-gray-50 text-gray-900 focus-visible:bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15 dark:bg-slate-800 dark:text-gray-100 dark:focus-visible:bg-slate-700 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/25',\n  filled:\n    'rounded border border-gray-200 bg-gray-100 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/30',\n  underlined:\n    'rounded-none border-0 border-b border-gray-300 pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-300 dark:focus-visible:border-primary/70',\n  rounded:\n    'rounded-full pl-4 pr-10 border border-gray-300 bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 shadow-sm dark:border-gray-600 dark:bg-slate-900 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/30 dark:shadow-black/20'\n} satisfies Record<InputVariant, string>;\n\nconst sizeClasses = {\n  'x-small': { padding: 'pl-2 pr-8 py-2', text: 'text-xs' },\n  small: { padding: 'pl-2.5 pr-9 py-2.5', text: 'text-sm' },\n  medium: { padding: 'pl-3 pr-10 py-3', text: 'text-base' },\n  large: { padding: 'pl-3.5 pr-11 py-3.5', text: 'text-lg' },\n  'x-large': { padding: 'pl-4 pr-12 py-4', text: 'text-xl' }\n} satisfies Record<GlobalSize, { padding: string; text: string }>;\n\nconst normalizeOption = (option: SelectOption): SelectOptionObject => {\n  if (typeof option === 'string') {\n    return { label: option, value: option };\n  }\n  return option;\n};\n\nconst toIdSafe = (value: string) => {\n  const sanitized = value.replace(/\\s+/g, '-').replace(/[^A-Za-z0-9_-]/g, '');\n  return sanitized || 'opt';\n};\n\nconst resolveIconClassName = (icon?: PropIcon) => {\n  if (!icon) {\n    return undefined;\n  }\n\n  if (typeof icon === 'string') {\n    const trimmed = icon.trim();\n    if (!trimmed) {\n      return undefined;\n    }\n\n    if (trimmed.includes(' ')) {\n      return trimmed;\n    }\n\n    const normalizedName = trimmed.startsWith('mdi-') ? trimmed : `mdi-${trimmed}`;\n    return ['mdi', normalizedName].join(' ');\n  }\n\n  const [library, iconNameRaw] = icon;\n  const baseClasses = iconBaseClasses[library] ?? [library];\n  const iconName = iconNameRaw.trim();\n  if (!iconName) {\n    return baseClasses.join(' ');\n  }\n\n  const normalizedName = iconName.startsWith('mdi-') ? iconName : `mdi-${iconName}`;\n  const classes = [...baseClasses, normalizedName];\n  return Array.from(new Set(classes)).join(' ');\n};\n\n/**\n * Custom styled Select component using <details> and radio/checkbox inputs.\n * Supports icons and custom styling while remaining a Server Component (no hooks).\n */\nconst Select = React.forwardRef<HTMLInputElement, SelectProps>(\n  (\n    {\n      options,\n      label,\n      placeholder,\n      variant = 'outline',\n      size = 'medium',\n      className,\n      wrapperClassName,\n      id,\n      name,\n      multiple,\n      value,\n      defaultValue,\n      error,\n      helperText,\n      disabled,\n      required,\n      onChange,\n      onBlur,\n      onFocus,\n      ...props\n    },\n    ref\n  ) => {\n    const selectId = id || name || generateString();\n    const inputName = name || selectId;\n    const variantClass = variantClasses[variant] ?? variantClasses.outline;\n    const sizeConfig = sizeClasses[size] ?? sizeClasses.medium;\n    const sizeClass = `${sizeConfig.padding} ${sizeConfig.text}`;\n    const normalizedOptions = options.map(normalizeOption);\n    const selectedValueList =\n      value !== undefined\n        ? (Array.isArray(value) ? value : [value]).map(String)\n        : defaultValue !== undefined\n          ? (Array.isArray(defaultValue) ? defaultValue : [defaultValue]).map(String)\n          : [];\n    const selectedLabels = normalizedOptions.filter(option => selectedValueList.includes(String(option.value))).map(option => option.label);\n    const hasSelection = selectedLabels.length > 0;\n    const summaryText = hasSelection ? (multiple ? selectedLabels.join(', ') : selectedLabels[0]) : placeholder || '\\u00A0';\n    const handleOptionChange: React.ChangeEventHandler<HTMLInputElement> = event => {\n      onChange?.(event);\n      if (multiple) return;\n      const detailsEl = event.currentTarget.closest('details');\n      detailsEl?.removeAttribute('open');\n    };\n    const handleDetailsBlur: React.FocusEventHandler<HTMLDetailsElement> = event => {\n      const nextFocus = event.relatedTarget as Node | null;\n      if (nextFocus && event.currentTarget.contains(nextFocus)) return;\n      event.currentTarget.removeAttribute('open');\n    };\n    const handleDetailsFocus: React.FocusEventHandler<HTMLDetailsElement> = event => {\n      if (normalizedOptions.length === 0) {\n        onFocus?.(event);\n      }\n    };\n\n    return (\n      <div className={twMerge('flex flex-col gap-1', wrapperClassName)}>\n        <div className='relative'>\n          <details\n            className='group w-full'\n            {...props}\n            onBlur={onBlur ? undefined : handleDetailsBlur}\n            onFocus={onFocus ? handleDetailsFocus : undefined}\n            open={undefined}\n          >\n            <summary\n              className={twMerge(\n                baseClass,\n                variantClass,\n                sizeClass,\n                'list-none cursor-pointer flex items-center justify-between pr-10 relative [&::-webkit-details-marker]:hidden',\n                error && 'border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500',\n                disabled && 'pointer-events-none opacity-50 cursor-not-allowed',\n                className\n              )}\n              style={{ minHeight: '2.75rem' }}\n              onClick={e => disabled && e.preventDefault()}\n            >\n              <span className={twMerge('truncate', !hasSelection && 'text-gray-500 dark:text-gray-400')}>{summaryText}</span>\n              <span className='pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500 dark:text-gray-300'>\n                <i className='mdi mdi-chevron-down text-base leading-none transition-transform duration-200 group-open:rotate-180' aria-hidden />\n              </span>\n            </summary>\n\n            <div className='absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-gray-200 bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-slate-800 dark:border-slate-700'>\n              {normalizedOptions.map((option, index) => {\n                const optionValueStr = String(option.value);\n                const isSelected = Array.isArray(value) ? value.map(String).includes(optionValueStr) : String(value) === optionValueStr;\n                const isDefaultSelected = Array.isArray(defaultValue)\n                  ? defaultValue.map(String).includes(optionValueStr)\n                  : String(defaultValue) === optionValueStr;\n                const iconClassName = resolveIconClassName(option.icon);\n                const inputId = `${selectId}-${toIdSafe(optionValueStr)}-${index}`;\n\n                return (\n                  <label\n                    key={`${optionValueStr}-${index}`}\n                    htmlFor={inputId}\n                    className={twMerge(\n                      'relative flex cursor-pointer select-none items-center gap-2 px-4 py-2 text-sm text-gray-900 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-slate-700',\n                      option.disabled && 'cursor-not-allowed opacity-50'\n                    )}\n                  >\n                    <input\n                      type={multiple ? 'checkbox' : 'radio'}\n                      id={inputId}\n                      name={inputName}\n                      value={option.value}\n                      disabled={option.disabled || disabled}\n                      checked={value !== undefined ? isSelected : undefined}\n                      defaultChecked={defaultValue !== undefined ? isDefaultSelected : undefined}\n                      onChange={handleOptionChange}\n                      onBlur={onBlur}\n                      ref={ref}\n                      required={required && !multiple}\n                      className='peer sr-only'\n                    />\n                    {iconClassName && <i className={twMerge(iconClassName, 'text-lg text-gray-500 peer-checked:text-primary dark:text-gray-400')} />}\n                    <span className='flex-1 truncate peer-checked:font-medium peer-checked:text-primary'>{option.label}</span>\n                    <i className='mdi mdi-check invisible ml-auto text-primary peer-checked:visible' />\n                  </label>\n                );\n              })}\n            </div>\n          </details>\n\n          {label && (\n            <label\n              className={twMerge('absolute left-3 -top-1.5 text-xs bg-white px-1 text-gray-500 transition-all dark:bg-slate-900 dark:text-gray-400')}\n            >\n              {label}\n            </label>\n          )}\n        </div>\n        {helperText && <p className={twMerge('mt-1 text-xs text-gray-500', error && 'text-red-500')}>{helperText}</p>}\n      </div>\n    );\n  }\n);\n\nSelect.displayName = 'Select';\n\nexport default Select;\n"]}

package/dist/index.cjs

@@ -1473,10 +1473,119 @@ var Dialog = React4__namespace.forwardRef((props, forwardedRef) => {
 });
 Dialog.displayName = "Dialog";
 var Dialog_default = Dialog;
+var overlayBaseClasses3 = "fixed inset-0 z-[55] bg-gray-900/55 backdrop-blur-[2px] transition-opacity duration-200 data-[state=closed]:opacity-0 data-[state=open]:opacity-100";
+var temporaryContainerBaseClasses = "fixed inset-y-0 z-[60] flex max-w-full transition-transform duration-200";
+var staticContainerBaseClasses = "relative flex h-full max-w-full";
+var drawerBaseClasses = "flex h-full w-full flex-col bg-white text-gray-900 shadow-xl shadow-black/10 ring-1 ring-black/5 focus-visible:outline-none dark:bg-gray-900 dark:text-gray-100 dark:ring-white/10";
+var resolveSizeValue2 = (value) => {
+  if (value === void 0) {
+    return void 0;
+  }
+  return typeof value === "number" ? `${value}px` : value;
+};
+var Drawer = React4__namespace.forwardRef((props, ref) => {
+  const {
+    location = "left",
+    floating = false,
+    temporary = false,
+    open,
+    keepMounted = false,
+    scrim = true,
+    width = "18rem",
+    onClose,
+    containerClassName,
+    overlayClassName,
+    overlayProps,
+    portal = true,
+    portalContainer,
+    className,
+    style,
+    role,
+    ...rest
+  } = props;
+  const isOpen = open ?? !temporary;
+  const state = isOpen ? "open" : "closed";
+  const shouldRender = keepMounted || isOpen || temporary;
+  const resolvedPortalContainer = portalContainer ?? (typeof document !== "undefined" ? document.body : null);
+  const resolvedStyle = { ...style };
+  if (resolvedStyle.width === void 0) {
+    resolvedStyle.width = resolveSizeValue2(width);
+  }
+  const locationClass = location === "right" ? "right-0" : "left-0";
+  const translateClass = isOpen ? "translate-x-0" : location === "right" ? "translate-x-full" : "-translate-x-full";
+  const floatingClasses = floating ? "rounded-2xl shadow-2xl shadow-black/20 ring-1 ring-black/10 dark:ring-white/10" : void 0;
+  const borderClasses = !floating && !temporary ? location === "right" ? "border-l border-gray-200 dark:border-gray-800" : "border-r border-gray-200 dark:border-gray-800" : void 0;
+  const {
+    className: overlayExtraClassName,
+    onClick: overlayOnClick,
+    ...restOverlayProps
+  } = overlayProps ?? {};
+  const overlayNode = temporary && scrim && shouldRender ? /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...restOverlayProps,
+      className: tailwindMerge.twMerge(
+        overlayBaseClasses3,
+        isOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0",
+        overlayClassName,
+        overlayExtraClassName
+      ),
+      onClick: (event) => {
+        overlayOnClick?.(event);
+        if (!event.defaultPrevented) {
+          onClose?.();
+        }
+      },
+      "data-state": state,
+      "aria-hidden": true
+    }
+  ) : null;
+  const drawerNode = shouldRender ? /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: tailwindMerge.twMerge(
+        temporary ? temporaryContainerBaseClasses : staticContainerBaseClasses,
+        temporary ? locationClass : void 0,
+        temporary ? translateClass : void 0,
+        temporary && !isOpen ? "pointer-events-none" : void 0,
+        temporary && floating ? "p-4" : void 0,
+        !temporary && location === "right" ? "ml-auto" : void 0,
+        containerClassName
+      ),
+      "data-state": state,
+      "aria-hidden": temporary ? !isOpen : void 0,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ...rest,
+          ref,
+          role: role ?? "navigation",
+          className: tailwindMerge.twMerge(drawerBaseClasses, floatingClasses, borderClasses, className),
+          style: resolvedStyle,
+          "data-state": state,
+          children: props.children
+        }
+      )
+    }
+  ) : null;
+  const outputNode = temporary && portal && resolvedPortalContainer && drawerNode ? reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      overlayNode,
+      drawerNode
+    ] }),
+    resolvedPortalContainer
+  ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    overlayNode,
+    drawerNode
+  ] });
+  return outputNode;
+});
+Drawer.displayName = "Drawer";
+var Drawer_default = Drawer;
 var tooltipBaseClasses = "absolute z-[60] max-w-xs rounded-lg border border-white/10 bg-gray-900 px-3 py-2 text-xs font-medium text-white shadow-lg shadow-black/30 ring-1 ring-black/40 transition-all duration-150";
 var wrapperBaseClasses = "relative inline-flex max-w-full align-middle";
 var arrowBaseClasses = "pointer-events-none absolute h-2 w-2 rotate-45 border border-white/10 bg-gray-900 shadow-lg shadow-black/20";
-var resolveSizeValue2 = (value) => {
+var resolveSizeValue3 = (value) => {
   if (value === void 0) {
     return void 0;
   }
@@ -1534,7 +1643,7 @@ var ToolTip = React4__namespace.forwardRef((props, forwardedRef) => {
   const shouldRenderTooltip = hasRenderableContent && (shouldEnableTriggers || keepMounted);
   const resolvedStyle = { ...style };
   if (resolvedStyle.maxWidth === void 0) {
-    resolvedStyle.maxWidth = resolveSizeValue2(maxWidth);
+    resolvedStyle.maxWidth = resolveSizeValue3(maxWidth);
   }
   const baseVisibility = persistent ? "opacity-100 scale-100" : "opacity-0 scale-95";
   const hoverClasses = !persistent && showOnHover ? " group-hover/tooltip:opacity-100 group-hover/tooltip:scale-100" : "";
@@ -3391,118 +3500,141 @@ var resolveIconClassName5 = (icon) => {
   const classes = [...baseClasses, normalizedName];
   return Array.from(new Set(classes)).join(" ");
 };
-var Select = React4__namespace.default.forwardRef(({
-  options,
-  label,
-  placeholder,
-  variant = "outline",
-  size = "medium",
-  className,
-  wrapperClassName,
-  id,
-  name,
-  multiple,
-  value,
-  defaultValue,
-  error,
-  helperText,
-  disabled,
-  required,
-  onChange,
-  onBlur,
-  ...props
-}, ref) => {
-  const selectId = id || name || generateString();
-  const inputName = name || selectId;
-  const variantClass = variantClasses4[variant] ?? variantClasses4.outline;
-  const sizeConfig = sizeClasses3[size] ?? sizeClasses3.medium;
-  const sizeClass = `${sizeConfig.padding} ${sizeConfig.text}`;
-  const normalizedOptions = options.map(normalizeOption);
-  const selectedValueList = value !== void 0 ? (Array.isArray(value) ? value : [value]).map(String) : defaultValue !== void 0 ? (Array.isArray(defaultValue) ? defaultValue : [defaultValue]).map(String) : [];
-  const selectedLabels = normalizedOptions.filter((option) => selectedValueList.includes(String(option.value))).map((option) => option.label);
-  const hasSelection = selectedLabels.length > 0;
-  const summaryText = hasSelection ? multiple ? selectedLabels.join(", ") : selectedLabels[0] : placeholder || "\xA0";
-  const handleOptionChange = (event) => {
-    onChange?.(event);
-    if (multiple) return;
-    const detailsEl = event.currentTarget.closest("details");
-    detailsEl?.removeAttribute("open");
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-col gap-1", wrapperClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "group w-full", ...props, open: void 0, children: [
+var Select = React4__namespace.default.forwardRef(
+  ({
+    options,
+    label,
+    placeholder,
+    variant = "outline",
+    size = "medium",
+    className,
+    wrapperClassName,
+    id,
+    name,
+    multiple,
+    value,
+    defaultValue,
+    error,
+    helperText,
+    disabled,
+    required,
+    onChange,
+    onBlur,
+    onFocus,
+    ...props
+  }, ref) => {
+    const selectId = id || name || generateString();
+    const inputName = name || selectId;
+    const variantClass = variantClasses4[variant] ?? variantClasses4.outline;
+    const sizeConfig = sizeClasses3[size] ?? sizeClasses3.medium;
+    const sizeClass = `${sizeConfig.padding} ${sizeConfig.text}`;
+    const normalizedOptions = options.map(normalizeOption);
+    const selectedValueList = value !== void 0 ? (Array.isArray(value) ? value : [value]).map(String) : defaultValue !== void 0 ? (Array.isArray(defaultValue) ? defaultValue : [defaultValue]).map(String) : [];
+    const selectedLabels = normalizedOptions.filter((option) => selectedValueList.includes(String(option.value))).map((option) => option.label);
+    const hasSelection = selectedLabels.length > 0;
+    const summaryText = hasSelection ? multiple ? selectedLabels.join(", ") : selectedLabels[0] : placeholder || "\xA0";
+    const handleOptionChange = (event) => {
+      onChange?.(event);
+      if (multiple) return;
+      const detailsEl = event.currentTarget.closest("details");
+      detailsEl?.removeAttribute("open");
+    };
+    const handleDetailsBlur = (event) => {
+      const nextFocus = event.relatedTarget;
+      if (nextFocus && event.currentTarget.contains(nextFocus)) return;
+      event.currentTarget.removeAttribute("open");
+    };
+    const handleDetailsFocus = (event) => {
+      if (normalizedOptions.length === 0) {
+        onFocus?.(event);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-col gap-1", wrapperClassName), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
-          "summary",
+          "details",
           {
-            className: tailwindMerge.twMerge(
-              baseClass2,
-              variantClass,
-              sizeClass,
-              "list-none cursor-pointer flex items-center justify-between pr-10 relative [&::-webkit-details-marker]:hidden",
-              error && "border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500",
-              disabled && "pointer-events-none opacity-50 cursor-not-allowed",
-              className
-            ),
-            style: { minHeight: "2.75rem" },
-            onClick: (e) => disabled && e.preventDefault(),
+            className: "group w-full",
+            ...props,
+            onBlur: onBlur ? void 0 : handleDetailsBlur,
+            onFocus: onFocus ? handleDetailsFocus : void 0,
+            open: void 0,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("truncate", !hasSelection && "text-gray-500 dark:text-gray-400"), children: summaryText }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500 dark:text-gray-300", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-chevron-down text-base leading-none transition-transform duration-200 group-open:rotate-180", "aria-hidden": true }) })
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "summary",
+                {
+                  className: tailwindMerge.twMerge(
+                    baseClass2,
+                    variantClass,
+                    sizeClass,
+                    "list-none cursor-pointer flex items-center justify-between pr-10 relative [&::-webkit-details-marker]:hidden",
+                    error && "border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500",
+                    disabled && "pointer-events-none opacity-50 cursor-not-allowed",
+                    className
+                  ),
+                  style: { minHeight: "2.75rem" },
+                  onClick: (e) => disabled && e.preventDefault(),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("truncate", !hasSelection && "text-gray-500 dark:text-gray-400"), children: summaryText }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500 dark:text-gray-300", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-chevron-down text-base leading-none transition-transform duration-200 group-open:rotate-180", "aria-hidden": true }) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-gray-200 bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-slate-800 dark:border-slate-700", children: normalizedOptions.map((option, index) => {
+                const optionValueStr = String(option.value);
+                const isSelected = Array.isArray(value) ? value.map(String).includes(optionValueStr) : String(value) === optionValueStr;
+                const isDefaultSelected = Array.isArray(defaultValue) ? defaultValue.map(String).includes(optionValueStr) : String(defaultValue) === optionValueStr;
+                const iconClassName = resolveIconClassName5(option.icon);
+                const inputId = `${selectId}-${toIdSafe(optionValueStr)}-${index}`;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "label",
+                  {
+                    htmlFor: inputId,
+                    className: tailwindMerge.twMerge(
+                      "relative flex cursor-pointer select-none items-center gap-2 px-4 py-2 text-sm text-gray-900 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-slate-700",
+                      option.disabled && "cursor-not-allowed opacity-50"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "input",
+                        {
+                          type: multiple ? "checkbox" : "radio",
+                          id: inputId,
+                          name: inputName,
+                          value: option.value,
+                          disabled: option.disabled || disabled,
+                          checked: value !== void 0 ? isSelected : void 0,
+                          defaultChecked: defaultValue !== void 0 ? isDefaultSelected : void 0,
+                          onChange: handleOptionChange,
+                          onBlur,
+                          ref,
+                          required: required && !multiple,
+                          className: "peer sr-only"
+                        }
+                      ),
+                      iconClassName && /* @__PURE__ */ jsxRuntime.jsx("i", { className: tailwindMerge.twMerge(iconClassName, "text-lg text-gray-500 peer-checked:text-primary dark:text-gray-400") }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate peer-checked:font-medium peer-checked:text-primary", children: option.label }),
+                      /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-check invisible ml-auto text-primary peer-checked:visible" })
+                    ]
+                  },
+                  `${optionValueStr}-${index}`
+                );
+              }) })
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-gray-200 bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-slate-800 dark:border-slate-700", children: normalizedOptions.map((option, index) => {
-          const optionValueStr = String(option.value);
-          const isSelected = Array.isArray(value) ? value.map(String).includes(optionValueStr) : String(value) === optionValueStr;
-          const isDefaultSelected = Array.isArray(defaultValue) ? defaultValue.map(String).includes(optionValueStr) : String(defaultValue) === optionValueStr;
-          const iconClassName = resolveIconClassName5(option.icon);
-          const inputId = `${selectId}-${toIdSafe(optionValueStr)}-${index}`;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "label",
-            {
-              htmlFor: inputId,
-              className: tailwindMerge.twMerge(
-                "relative flex cursor-pointer select-none items-center gap-2 px-4 py-2 text-sm text-gray-900 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-slate-700",
-                option.disabled && "cursor-not-allowed opacity-50"
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    type: multiple ? "checkbox" : "radio",
-                    id: inputId,
-                    name: inputName,
-                    value: option.value,
-                    disabled: option.disabled || disabled,
-                    checked: value !== void 0 ? isSelected : void 0,
-                    defaultChecked: defaultValue !== void 0 ? isDefaultSelected : void 0,
-                    onChange: handleOptionChange,
-                    onBlur,
-                    ref,
-                    required: required && !multiple,
-                    className: "peer sr-only"
-                  }
-                ),
-                iconClassName && /* @__PURE__ */ jsxRuntime.jsx("i", { className: tailwindMerge.twMerge(iconClassName, "text-lg text-gray-500 peer-checked:text-primary dark:text-gray-400") }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate peer-checked:font-medium peer-checked:text-primary", children: option.label }),
-                /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-check invisible ml-auto text-primary peer-checked:visible" })
-              ]
-            },
-            `${optionValueStr}-${index}`
-          );
-        }) })
+        label && /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            className: tailwindMerge.twMerge("absolute left-3 -top-1.5 text-xs bg-white px-1 text-gray-500 transition-all dark:bg-slate-900 dark:text-gray-400"),
+            children: label
+          }
+        )
       ] }),
-      label && /* @__PURE__ */ jsxRuntime.jsx(
-        "label",
-        {
-          className: tailwindMerge.twMerge("absolute left-3 -top-1.5 text-xs bg-white px-1 text-gray-500 transition-all dark:bg-slate-900 dark:text-gray-400"),
-          children: label
-        }
-      )
-    ] }),
-    helperText && /* @__PURE__ */ jsxRuntime.jsx("p", { className: tailwindMerge.twMerge("mt-1 text-xs text-gray-500", error && "text-red-500"), children: helperText })
-  ] });
-});
+      helperText && /* @__PURE__ */ jsxRuntime.jsx("p", { className: tailwindMerge.twMerge("mt-1 text-xs text-gray-500", error && "text-red-500"), children: helperText })
+    ] });
+  }
+);
 Select.displayName = "Select";
 var Select_default = Select;
 var paletteValues = {
@@ -4638,6 +4770,7 @@ exports.Button = Button_default;
 exports.Card = Card_default;
 exports.Chip = Chip_default;
 exports.Dialog = Dialog_default;
+exports.Drawer = Drawer_default;
 exports.ExpansionPanel = ExpansionPanel_default;
 exports.ExpansionPanelItem = ExpansionPanelItem_default;
 exports.Hero = Hero_default;