@lindle/linoardo 1.0.38 → 1.0.39

package/dist/{chunk-GQVYBLWK.js → chunk-BDN4EDJQ.js}

@@ -27,6 +27,10 @@ var normalizeOption = (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;
@@ -77,6 +81,16 @@ var Select = ({
   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");
+  };
   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, open: void 0, children: [
@@ -95,7 +109,7 @@ var Select = ({
             style: { minHeight: "2.75rem" },
             onClick: (e) => disabled && e.preventDefault(),
             children: [
-              /* @__PURE__ */ jsx("span", { className: twMerge("truncate", !value && !defaultValue && "text-gray-500 dark:text-gray-400"), children: label || placeholder || "\xA0" }),
+              /* @__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 }) })
             ]
           }
@@ -105,7 +119,7 @@ var Select = ({
           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 = `-opt-`;
+          const inputId = `${selectId}-${toIdSafe(optionValueStr)}-${index}`;
           return /* @__PURE__ */ jsxs(
             "label",
             {
@@ -125,7 +139,7 @@ var Select = ({
                     disabled: option.disabled || disabled,
                     checked: value !== void 0 ? isSelected : void 0,
                     defaultChecked: defaultValue !== void 0 ? isDefaultSelected : void 0,
-                    onChange,
+                    onChange: handleOptionChange,
                     required: required && !multiple,
                     className: "peer sr-only"
                   }
@@ -135,7 +149,7 @@ var Select = ({
                 /* @__PURE__ */ jsx("i", { className: "mdi mdi-check invisible ml-auto text-primary peer-checked:visible" })
               ]
             },
-            `${option.value}-`
+            `${optionValueStr}-${index}`
           );
         }) })
       ] }),
@@ -153,5 +167,5 @@ var Select = ({
 var Select_default = Select;
 
 export { Select_default };
-//# sourceMappingURL=chunk-GQVYBLWK.js.map
-//# sourceMappingURL=chunk-GQVYBLWK.js.map
+//# sourceMappingURL=chunk-BDN4EDJQ.js.map
+//# sourceMappingURL=chunk-BDN4EDJQ.js.map

package/dist/chunk-BDN4EDJQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Form/Select/index.tsx"],"names":["normalizedName"],"mappings":"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","file":"chunk-BDN4EDJQ.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>, '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}\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.FC<SelectProps> = ({\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  ...props\n}) => {\n  const selectId = id || name || generateString();\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\n    .filter(option => selectedValueList.includes(String(option.value)))\n    .map(option => option.label);\n  const hasSelection = selectedLabels.length > 0;\n  const summaryText = hasSelection\n    ? multiple\n      ? selectedLabels.join(', ')\n      : selectedLabels[0]\n    : 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\n  return (\n    <div className={twMerge('flex flex-col gap-1', wrapperClassName)}>\n      <div className='relative'>\n        <details className='group w-full' {...props} open={undefined}>\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={name || selectId}\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                    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\nexport default Select;\n"]}

package/dist/index.cjs

@@ -2916,6 +2916,10 @@ var normalizeOption = (option) => {
   }
   return option;
 };
+var toIdSafe = (value) => {
+  const sanitized = value.replace(/\s+/g, "-").replace(/[^A-Za-z0-9_-]/g, "");
+  return sanitized || "opt";
+};
 var resolveIconClassName5 = (icon) => {
   if (!icon) {
     return void 0;
@@ -2966,6 +2970,16 @@ var Select = ({
   const sizeConfig = sizeClasses2[size] ?? sizeClasses2.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: [
@@ -2984,7 +2998,7 @@ var Select = ({
             style: { minHeight: "2.75rem" },
             onClick: (e) => disabled && e.preventDefault(),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("truncate", !value && !defaultValue && "text-gray-500 dark:text-gray-400"), children: label || placeholder || "\xA0" }),
+              /* @__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 }) })
             ]
           }
@@ -2994,7 +3008,7 @@ var Select = ({
           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 = `-opt-`;
+          const inputId = `${selectId}-${toIdSafe(optionValueStr)}-${index}`;
           return /* @__PURE__ */ jsxRuntime.jsxs(
             "label",
             {
@@ -3014,7 +3028,7 @@ var Select = ({
                     disabled: option.disabled || disabled,
                     checked: value !== void 0 ? isSelected : void 0,
                     defaultChecked: defaultValue !== void 0 ? isDefaultSelected : void 0,
-                    onChange,
+                    onChange: handleOptionChange,
                     required: required && !multiple,
                     className: "peer sr-only"
                   }
@@ -3024,7 +3038,7 @@ var Select = ({
                 /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-check invisible ml-auto text-primary peer-checked:visible" })
               ]
             },
-            `${option.value}-`
+            `${optionValueStr}-${index}`
           );
         }) })
       ] }),