@lindle/linoardo 1.0.50 → 1.0.51

package/dist/index.cjs

@@ -46,7 +46,7 @@ var iconBaseClasses = {
 };
 
 // src/Containment/Button/states.button.ts
-var base = "btn-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 rounded-lg transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed";
+var base = "btn-base  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 rounded-lg transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed";
 var blackAndWhitePaletteClasses = {
   solid: "bg-black text-white hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white dark:bg-white dark:text-black dark:hover:bg-white/90 dark:focus-visible:ring-white/40 dark:focus-visible:ring-offset-gray-900",
   outline: "border-2 border-black text-black bg-white hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white dark:border-white dark:text-white dark:bg-transparent dark:hover:bg-white dark:hover:text-black dark:focus-visible:ring-white/40 dark:focus-visible:ring-offset-gray-900",
@@ -143,9 +143,7 @@ var resolveIconClassName = (icon) => {
   }
   const [library, providedName] = icon;
   const normalizedLibrary = library.trim();
-  const baseClasses = iconBaseClasses[normalizedLibrary] ?? [
-    normalizedLibrary
-  ];
+  const baseClasses = iconBaseClasses[normalizedLibrary] ?? [normalizedLibrary];
   const iconName = providedName.trim();
   if (!iconName) {
     return baseClasses.join(" ");
@@ -3555,6 +3553,7 @@ var Select = React15__namespace.default.forwardRef(
     onChange,
     onBlur,
     onFocus,
+    addOptionAction,
     ...props
   }, ref) => {
     const selectId = id || name || generateString();
@@ -3583,6 +3582,13 @@ var Select = React15__namespace.default.forwardRef(
         onFocus?.(event);
       }
     };
+    const handleAddOptionActionClick = (event) => {
+      event.preventDefault();
+      if (disabled || !addOptionAction) return;
+      addOptionAction.onClick();
+      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(
@@ -3614,46 +3620,61 @@ var Select = React15__namespace.default.forwardRef(
                   ]
                 }
               ),
-              /* @__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 = resolveIconClassName4(option.icon);
-                const inputId = `${selectId}-${toIdSafe(optionValueStr)}-${index}`;
-                return /* @__PURE__ */ jsxRuntime.jsxs(
-                  "label",
+              /* @__PURE__ */ jsxRuntime.jsxs("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 = resolveIconClassName4(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}`
+                  );
+                }),
+                addOptionAction && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 border-t border-gray-100 pt-1 dark:border-slate-700", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
                   {
-                    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"
-                    ),
+                    type: "button",
+                    className: "flex w-full cursor-pointer items-center gap-2 px-4 py-2 text-left text-sm font-medium text-primary hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-slate-700",
+                    onClick: handleAddOptionActionClick,
+                    disabled,
                     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" })
+                      /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-plus", "aria-hidden": true }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: addOptionAction.label })
                     ]
-                  },
-                  `${optionValueStr}-${index}`
-                );
-              }) })
+                  }
+                ) })
+              ] })
             ]
           }
         ),