@timeax/form-palette 0.0.25 → 0.0.27

package/dist/index.mjs

@@ -15213,6 +15213,65 @@ var ToggleVariantModule = {
   }
 };
 var toggle_default2 = ToggleVariantModule;
+
+// src/lib/group-layout.ts
+function buildGroupLayoutClasses(opts) {
+  const {
+    layout,
+    columns,
+    itemGapPx,
+    groupClassName,
+    className,
+    optionClassName,
+    labelClassName,
+    descriptionClassName,
+    densityPaddingClass,
+    labelTextSizeClass,
+    descriptionTextSizeClass
+  } = opts;
+  let groupStyle;
+  if (!itemGapPx) {
+    if (layout === "grid") {
+      groupStyle = {
+        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`
+      };
+    }
+  } else if (layout === "list") {
+    groupStyle = { rowGap: itemGapPx };
+  } else {
+    groupStyle = {
+      gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+      gap: itemGapPx
+    };
+  }
+  const groupClasses = cn(
+    layout === "grid" ? "grid" : "flex flex-col",
+    groupClassName != null ? groupClassName : className
+  );
+  const baseOptionClass = cn(
+    "relative flex items-start",
+    "data-[disabled=true]:opacity-60 data-[disabled=true]:cursor-not-allowed",
+    densityPaddingClass,
+    optionClassName
+  );
+  const labelClassesBase = cn(
+    "font-medium text-foreground",
+    labelTextSizeClass,
+    labelClassName
+  );
+  const descriptionClassesBase = cn(
+    "mt-0.5 text-muted-foreground",
+    descriptionTextSizeClass,
+    descriptionClassName
+  );
+  return {
+    groupStyle,
+    groupClasses,
+    baseOptionClass,
+    labelClassesBase,
+    descriptionClassesBase
+  };
+}
 function RadioGroup({
   className,
   ...props
@@ -15250,6 +15309,139 @@ function RadioGroupItem({
     }
   );
 }
+
+// src/lib/normalise-options.ts
+function isPrimitiveOption(raw) {
+  return typeof raw === "string" || typeof raw === "number";
+}
+function asObject(raw) {
+  return isPrimitiveOption(raw) ? { label: String(raw), value: raw } : raw;
+}
+var RENDER_KEYS = [
+  "render",
+  "renderOption",
+  "renderItem",
+  "renderLabel",
+  "renderer"
+];
+function resolveRender(obj) {
+  if (!obj) return void 0;
+  for (const k of RENDER_KEYS) {
+    const maybe = obj[k];
+    if (typeof maybe === "function") return maybe;
+  }
+  return void 0;
+}
+function resolveValue(raw, obj, index, optionValue) {
+  var _a, _b, _c;
+  return typeof optionValue === "function" ? optionValue(raw) : typeof optionValue === "string" ? obj[optionValue] : (_c = (_b = (_a = obj.value) != null ? _a : obj.id) != null ? _b : obj.key) != null ? _c : String(index);
+}
+function resolveLabelNode(raw, obj, value, optionLabel) {
+  var _a, _b, _c;
+  return typeof optionLabel === "function" ? optionLabel(raw) : typeof optionLabel === "string" ? (_b = (_a = obj[optionLabel]) != null ? _a : obj.label) != null ? _b : String(value) : (_c = obj.label) != null ? _c : String(value);
+}
+function resolveDescription(raw, obj, optionDescription) {
+  return typeof optionDescription === "function" ? optionDescription(raw) : typeof optionDescription === "string" ? obj[optionDescription] : obj.description;
+}
+function resolveDisabled(raw, obj, optionDisabled) {
+  return typeof optionDisabled === "function" ? optionDisabled(raw) : typeof optionDisabled === "string" ? !!obj[optionDisabled] : !!obj.disabled;
+}
+function resolveIcon(raw, obj, optionIcon) {
+  return typeof optionIcon === "function" ? optionIcon(raw) : typeof optionIcon === "string" ? obj[optionIcon] : obj.icon;
+}
+function resolveKey(raw, obj, index, value, optionKey) {
+  var _a, _b, _c, _d;
+  return typeof optionKey === "function" ? optionKey(raw, index) : typeof optionKey === "string" ? (_b = (_a = obj[optionKey]) != null ? _a : value) != null ? _b : index : (_d = (_c = obj.key) != null ? _c : value) != null ? _d : index;
+}
+function resolveLabelText(labelNode, obj, value) {
+  var _a;
+  return typeof labelNode === "string" ? labelNode : typeof labelNode === "number" ? String(labelNode) : (_a = obj.labelText) != null ? _a : String(value);
+}
+function normalizeOne(raw, index, config) {
+  const obj = asObject(raw);
+  const value = resolveValue(raw, obj, index, config.optionValue);
+  let labelNode = resolveLabelNode(raw, obj, value, config.optionLabel);
+  if (config.autoCap && typeof labelNode === "string") {
+    labelNode = capitalizeFirst(labelNode);
+  }
+  const labelText = resolveLabelText(labelNode, obj, value);
+  const description = resolveDescription(raw, obj, config.optionDescription);
+  const disabled = resolveDisabled(raw, obj, config.optionDisabled);
+  const icon = resolveIcon(raw, obj, config.optionIcon);
+  const key = resolveKey(raw, obj, index, value, config.optionKey);
+  const render = resolveRender(obj);
+  return {
+    key: String(key),
+    value,
+    labelNode,
+    labelText,
+    description,
+    disabled,
+    icon,
+    render,
+    raw
+  };
+}
+function globalNormalizeOptions(opts, config) {
+  if (!opts || !opts.length) return [];
+  return opts.map(
+    (raw, index) => normalizeOne(raw, index, config)
+  );
+}
+function globalNormalizeCheckBasedOptions(item, index, optionLabelKey, optionValueKey) {
+  var _a, _b;
+  const anyItem = item;
+  const rawValue = optionValueKey != null ? anyItem[optionValueKey] : anyItem.value;
+  const value = rawValue;
+  const rawLabel = optionLabelKey != null ? anyItem[optionLabelKey] : (_a = anyItem.label) != null ? _a : String(rawValue != null ? rawValue : index);
+  const description = anyItem.description;
+  const disabled = !!anyItem.disabled;
+  const key = (_b = anyItem.key) != null ? _b : index;
+  const render = resolveRender(anyItem);
+  return {
+    key: String(key),
+    value,
+    label: rawLabel,
+    description,
+    disabled,
+    render,
+    raw: item
+  };
+}
+function normalizeTree(opts, config, level = 0, parentValue, path = []) {
+  if (!opts || !opts.length) return [];
+  return opts.map((raw, index) => {
+    const obj = asObject(raw);
+    const base = normalizeOne(
+      raw,
+      index,
+      config
+      // (config shape matches; this avoids duplicating the resolver types)
+    );
+    const childrenRaw = obj.children;
+    const nextPath = [...path, base.value];
+    const children = normalizeTree(
+      childrenRaw != null ? childrenRaw : [],
+      config,
+      level + 1,
+      base.value,
+      nextPath
+    );
+    return {
+      ...base,
+      level,
+      parentValue,
+      path,
+      // ancestors only (EXACT behaviour preserved)
+      hasChildren: !!children.length,
+      children
+    };
+  });
+}
+function capitalizeFirst(label) {
+  if (!label) return label;
+  return label.charAt(0).toUpperCase() + label.slice(1);
+}
 function paddingForDensity(density) {
   switch (density) {
     case "compact":
@@ -15283,7 +15475,7 @@ function descriptionTextSize(size) {
       return "text-xs";
   }
 }
-function capitalizeFirst(label) {
+function capitalizeFirst2(label) {
   if (!label) return label;
   return label.charAt(0).toUpperCase() + label.slice(1);
 }
@@ -15299,21 +15491,12 @@ function normalizeItems(items, mappers, optionValueKey, optionLabelKey) {
   }
   if (optionValueKey || optionLabelKey) {
     return items.map((item, index) => {
-      var _a, _b;
-      const anyItem = item;
-      const rawValue = optionValueKey != null ? anyItem[optionValueKey] : anyItem.value;
-      const value = rawValue;
-      const rawLabel = optionLabelKey != null ? anyItem[optionLabelKey] : (_a = anyItem.label) != null ? _a : String(rawValue != null ? rawValue : index);
-      const description = anyItem.description;
-      const disabled = !!anyItem.disabled;
-      const key = (_b = anyItem.key) != null ? _b : index;
-      return {
-        value,
-        label: rawLabel,
-        description,
-        disabled,
-        key
-      };
+      return globalNormalizeCheckBasedOptions(
+        item,
+        index,
+        optionLabelKey,
+        optionValueKey
+      );
     });
   }
   return items.map((item, index) => {
@@ -15400,54 +15583,31 @@ var InnerShadcnRadioVariant = (props, ref) => {
   );
   const handleRadioChange = React10.useCallback(
     (raw) => {
-      const found = normalized.find(
-        (item) => String(item.value) === raw
-      );
+      const found = normalized.find((item) => String(item.value) === raw);
       if (!found) return;
       handleSelect(found.value);
     },
     [normalized, handleSelect]
   );
-  const groupStyle = React10.useMemo(() => {
-    if (!itemGapPx) {
-      if (layout === "grid") {
-        return {
-          gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`
-        };
-      }
-      return void 0;
-    }
-    if (layout === "list") {
-      return { rowGap: itemGapPx };
-    }
-    return {
-      gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-      gap: itemGapPx
-    };
-  }, [layout, columns, itemGapPx]);
-  const groupClasses = cn(
-    layout === "grid" ? "grid" : "flex flex-col",
-    groupClassName != null ? groupClassName : className
-  );
-  const baseOptionClass = cn(
-    // layout container for each option row
-    "relative flex items-start",
-    // keep disabled styles
-    "data-[disabled=true]:opacity-60 data-[disabled=true]:cursor-not-allowed",
-    // vertical padding from density
-    paddingForDensity(density),
-    optionClassName
-  );
-  const labelClassesBase = cn(
-    "font-medium text-foreground",
-    labelTextSize(size),
-    labelClassName
-  );
-  const descriptionClassesBase = cn(
-    "mt-0.5 text-muted-foreground",
-    descriptionTextSize(size),
-    descriptionClassName
-  );
+  const {
+    groupStyle,
+    groupClasses,
+    baseOptionClass,
+    labelClassesBase,
+    descriptionClassesBase
+  } = buildGroupLayoutClasses({
+    layout,
+    columns,
+    itemGapPx,
+    groupClassName,
+    className,
+    optionClassName,
+    labelClassName,
+    descriptionClassName,
+    densityPaddingClass: paddingForDensity(density),
+    labelTextSizeClass: labelTextSize(size),
+    descriptionTextSizeClass: descriptionTextSize(size)
+  });
   return /* @__PURE__ */ jsx(
     RadioGroup,
     {
@@ -15467,7 +15627,7 @@ var InnerShadcnRadioVariant = (props, ref) => {
       "data-slot": "radio-group",
       ...restGroupProps,
       children: normalized.map((item, index) => {
-        var _a;
+        var _a, _b;
         const itemString = String(item.value);
         const selected = selectedString === itemString;
         const optionDisabled = !!disabled || !!item.disabled;
@@ -15477,7 +15637,7 @@ var InnerShadcnRadioVariant = (props, ref) => {
         if (autoCap && typeof item.label === "string") {
           displayItem = {
             ...item,
-            label: capitalizeFirst(item.label)
+            label: capitalizeFirst2(item.label)
           };
         }
         const radioNode = /* @__PURE__ */ jsx(
@@ -15489,7 +15649,8 @@ var InnerShadcnRadioVariant = (props, ref) => {
             className: "mt-1"
           }
         );
-        if (renderOption) {
+        const renderer = (_b = item.render) != null ? _b : renderOption;
+        if (renderer) {
           return /* @__PURE__ */ jsx(
             "div",
             {
@@ -15497,7 +15658,7 @@ var InnerShadcnRadioVariant = (props, ref) => {
               "data-checked": selected ? "true" : "false",
               "data-disabled": optionDisabled ? "true" : "false",
               className: baseOptionClass,
-              children: renderOption({
+              children: renderer({
                 item: displayItem,
                 index,
                 selected,
@@ -15543,7 +15704,9 @@ var InnerShadcnRadioVariant = (props, ref) => {
     }
   );
 };
-var ShadcnRadioVariant = React10.forwardRef(InnerShadcnRadioVariant);
+var ShadcnRadioVariant = React10.forwardRef(
+  InnerShadcnRadioVariant
+);
 
 // src/variants/core/radio.tsx
 var radioVariantModule = {
@@ -15655,7 +15818,7 @@ function descriptionTextSize2(size) {
       return "text-xs";
   }
 }
-function capitalizeFirst2(label) {
+function capitalizeFirst3(label) {
   if (!label) return label;
   return label.charAt(0).toUpperCase() + label.slice(1);
 }
@@ -15673,21 +15836,16 @@ function normalizeItems2(items, mappers, optionValueKey, optionLabelKey) {
   }
   if (optionValueKey || optionLabelKey) {
     return items.map((item, index) => {
-      var _a, _b;
       const anyItem = item;
-      const rawValue = optionValueKey != null ? anyItem[optionValueKey] : anyItem.value;
-      const value = rawValue;
-      const rawLabel = optionLabelKey != null ? anyItem[optionLabelKey] : (_a = anyItem.label) != null ? _a : String(rawValue != null ? rawValue : index);
-      const description = anyItem.description;
-      const disabled = !!anyItem.disabled;
-      const key = (_b = anyItem.key) != null ? _b : index;
+      const normalised = globalNormalizeCheckBasedOptions(
+        item,
+        index,
+        optionLabelKey,
+        optionValueKey
+      );
       const tristate = anyItem.tristate;
       return {
-        value,
-        label: rawLabel,
-        description,
-        disabled,
-        key,
+        ...normalised,
         tristate
       };
     });
@@ -15782,7 +15940,7 @@ var InnerShadcnCheckboxVariant = (props, ref) => {
     };
     let labelText = singleLabel != null ? singleLabel : void 0;
     if (autoCap && typeof labelText === "string") {
-      labelText = capitalizeFirst2(labelText);
+      labelText = capitalizeFirst3(labelText);
     }
     const descriptionText = singleDescription != null ? singleDescription : void 0;
     const labelCls = cn(
@@ -15842,43 +16000,25 @@ var InnerShadcnCheckboxVariant = (props, ref) => {
     ),
     [items, mappers, optionValue, optionLabel]
   );
-  const groupStyle = React10.useMemo(() => {
-    if (!itemGapPx) {
-      if (layout === "grid") {
-        return {
-          gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`
-        };
-      }
-      return void 0;
-    }
-    if (layout === "list") {
-      return { rowGap: itemGapPx };
-    }
-    return {
-      gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-      gap: itemGapPx
-    };
-  }, [layout, columns, itemGapPx]);
-  const groupClasses = cn(
-    layout === "grid" ? "grid" : "flex flex-col",
-    groupClassName != null ? groupClassName : className
-  );
-  const baseOptionClass = cn(
-    "relative flex items-start",
-    "data-[disabled=true]:opacity-60 data-[disabled=true]:cursor-not-allowed",
-    paddingForDensity2(density),
-    optionClassName
-  );
-  const labelClassesBase = cn(
-    "font-medium text-foreground",
-    labelTextSize2(size),
-    labelClassName
-  );
-  const descriptionClassesBase = cn(
-    "mt-0.5 text-muted-foreground",
-    descriptionTextSize2(size),
-    descriptionClassName
-  );
+  const {
+    groupStyle,
+    groupClasses,
+    baseOptionClass,
+    labelClassesBase,
+    descriptionClassesBase
+  } = buildGroupLayoutClasses({
+    layout,
+    columns,
+    itemGapPx,
+    groupClassName,
+    className,
+    optionClassName,
+    labelClassName,
+    descriptionClassName,
+    densityPaddingClass: paddingForDensity2(density),
+    labelTextSizeClass: labelTextSize2(size),
+    descriptionTextSizeClass: descriptionTextSize2(size)
+  });
   const findEntryIndex = React10.useCallback(
     (val) => {
       if (!groupValue) return -1;
@@ -15974,7 +16114,7 @@ var InnerShadcnCheckboxVariant = (props, ref) => {
       style: groupStyle,
       ...restProps,
       children: normalized.map((item, index) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const effectiveTristate = (_b = (_a = item.tristate) != null ? _a : tristateDefault) != null ? _b : false;
         const currentState = getEntryState(item.value);
         const internalState = effectiveTristate ? currentState : currentState === "none" ? false : currentState;
@@ -15985,7 +16125,7 @@ var InnerShadcnCheckboxVariant = (props, ref) => {
         if (autoCap && typeof item.label === "string") {
           displayItem = {
             ...item,
-            label: capitalizeFirst2(item.label)
+            label: capitalizeFirst3(item.label)
           };
         }
         const checkboxNode = /* @__PURE__ */ jsx(
@@ -16012,7 +16152,8 @@ var InnerShadcnCheckboxVariant = (props, ref) => {
             disabled: getEntryState(item.value) === "none"
           }
         ) : null;
-        if (renderOption) {
+        const renderer = (_d = item.render) != null ? _d : renderOption;
+        if (renderer) {
           return /* @__PURE__ */ jsxs(
             "div",
             {
@@ -16020,7 +16161,7 @@ var InnerShadcnCheckboxVariant = (props, ref) => {
               "data-disabled": optionDisabled ? "true" : "false",
               className: baseOptionClass,
               children: [
-                renderOption({
+                renderer({
                   item: displayItem,
                   index,
                   state: internalState,
@@ -16032,7 +16173,11 @@ var InnerShadcnCheckboxVariant = (props, ref) => {
                   click() {
                     if (optionDisabled) return;
                     const nextInternal = effectiveTristate ? internalState === "none" ? true : internalState === true ? false : "none" : internalState === true ? false : true;
-                    updateGroupValue(item.value, nextInternal, effectiveTristate);
+                    updateGroupValue(
+                      item.value,
+                      nextInternal,
+                      effectiveTristate
+                    );
                   },
                   checkbox: checkboxNode
                 }),
@@ -16057,14 +16202,17 @@ var InnerShadcnCheckboxVariant = (props, ref) => {
                   children: [
                     checkboxNode,
                     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
-                      /* @__PURE__ */ jsx("span", { className: cn(labelClassesBase, optionLabelClassName), children: displayItem.label }),
-                      displayItem.description != null && /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx(
                         "span",
                         {
-                          className: descriptionClassesBase,
-                          children: displayItem.description
+                          className: cn(
+                            labelClassesBase,
+                            optionLabelClassName
+                          ),
+                          children: displayItem.label
                         }
-                      )
+                      ),
+                      displayItem.description != null && /* @__PURE__ */ jsx("span", { className: descriptionClassesBase, children: displayItem.description })
                     ] })
                   ]
                 }
@@ -16078,7 +16226,9 @@ var InnerShadcnCheckboxVariant = (props, ref) => {
     }
   );
 };
-var ShadcnCheckboxVariant = React10.forwardRef(InnerShadcnCheckboxVariant);
+var ShadcnCheckboxVariant = React10.forwardRef(
+  InnerShadcnCheckboxVariant
+);
 
 // src/variants/core/checkbox.tsx
 var checkboxModule = {
@@ -16099,39 +16249,6 @@ var checkboxModule = {
     tags: ["checkbox", "group", "boolean", "tri-state"]
   }
 };
-
-// src/lib/normalise-selects.ts
-function globalNormalizeOptions(opts, config) {
-  if (!opts || !opts.length) return [];
-  return opts.map((raw, index) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
-    const asObj = typeof raw === "string" || typeof raw === "number" ? { label: String(raw), value: raw } : raw;
-    const value = typeof config.optionValue === "function" ? config.optionValue(raw) : typeof config.optionValue === "string" ? asObj[config.optionValue] : (_c = (_b = (_a = asObj.value) != null ? _a : asObj.id) != null ? _b : asObj.key) != null ? _c : String(index);
-    let labelNode = typeof config.optionLabel === "function" ? config.optionLabel(raw) : typeof config.optionLabel === "string" ? (_e = (_d = asObj[config.optionLabel]) != null ? _d : asObj.label) != null ? _e : String(value) : (_f = asObj.label) != null ? _f : String(value);
-    if (config.autoCap && typeof labelNode === "string") {
-      labelNode = capitalizeFirst3(labelNode);
-    }
-    const labelText = typeof labelNode === "string" ? labelNode : typeof labelNode === "number" ? String(labelNode) : (_g = asObj.labelText) != null ? _g : String(value);
-    const description = typeof config.optionDescription === "function" ? config.optionDescription(raw) : typeof config.optionDescription === "string" ? asObj[config.optionDescription] : asObj.description;
-    const disabled = typeof config.optionDisabled === "function" ? config.optionDisabled(raw) : typeof config.optionDisabled === "string" ? !!asObj[config.optionDisabled] : !!asObj.disabled;
-    const icon = typeof config.optionIcon === "function" ? config.optionIcon(raw) : typeof config.optionIcon === "string" ? asObj[config.optionIcon] : asObj.icon;
-    const key = typeof config.optionKey === "function" ? config.optionKey(raw, index) : typeof config.optionKey === "string" ? (_i = (_h = asObj[config.optionKey]) != null ? _h : value) != null ? _i : index : (_k = (_j = asObj.key) != null ? _j : value) != null ? _k : index;
-    return {
-      key: String(key),
-      value,
-      labelNode,
-      labelText,
-      description,
-      disabled,
-      icon,
-      raw
-    };
-  });
-}
-function capitalizeFirst3(label) {
-  if (!label) return label;
-  return label.charAt(0).toUpperCase() + label.slice(1);
-}
 function normalizeOptions(opts, config) {
   return globalNormalizeOptions(opts, config);
 }
@@ -16185,6 +16302,8 @@ var ShadcnSelectVariant = React10.forwardRef(function ShadcnSelectVariant2(props
     contentClassName,
     renderOption,
     renderValue,
+    // Mode
+    mode = "default",
     // Icons & controls
     leadingIcons,
     trailingIcons,
@@ -16198,11 +16317,15 @@ var ShadcnSelectVariant = React10.forwardRef(function ShadcnSelectVariant2(props
     trailingControlClassName,
     joinControls = true,
     extendBoxToControls = true,
+    // Button mode only
+    button,
+    children,
     // Virtual scroll / incremental render
     virtualScroll = false,
     virtualScrollPageSize = 50,
     virtualScrollThreshold = 48
   } = props;
+  const isButtonMode = mode === "button";
   const [open, setOpen] = React10.useState(false);
   const [query, setQuery] = React10.useState("");
   const items = React10.useMemo(
@@ -16295,18 +16418,19 @@ var ShadcnSelectVariant = React10.forwardRef(function ShadcnSelectVariant2(props
   const padCls = triggerPadding(density);
   const showClear = clearable && value != null;
   const resolvedLeadingIcons = (() => {
+    if (isButtonMode) return [];
     if (leadingIcons && leadingIcons.length) return leadingIcons;
     if (icon) return [icon];
     return [];
   })();
-  const resolvedTrailingIcons = trailingIcons != null ? trailingIcons : [];
+  const resolvedTrailingIcons = isButtonMode ? [] : trailingIcons != null ? trailingIcons : [];
   const baseIconGap = iconGap != null ? iconGap : 4;
   const leadingGap = leadingIconSpacing != null ? leadingIconSpacing : baseIconGap;
   const trailingGap = trailingIconSpacing != null ? trailingIconSpacing : baseIconGap;
   const hasLeadingIcons = resolvedLeadingIcons.length > 0;
   const hasTrailingIcons = resolvedTrailingIcons.length > 0;
-  const hasLeadingControl = !!leadingControl;
-  const hasTrailingControl = !!trailingControl;
+  const hasLeadingControl = !isButtonMode && !!leadingControl;
+  const hasTrailingControl = !isButtonMode && !!trailingControl;
   const hasControls = hasLeadingControl || hasTrailingControl;
   const triggerInner = renderValue ? renderValue({
     selectedItem,
@@ -16321,7 +16445,57 @@ var ShadcnSelectVariant = React10.forwardRef(function ShadcnSelectVariant2(props
     "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
     "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
   );
-  const TriggerBody = /* @__PURE__ */ jsx(
+  const ButtonModeTrigger = React10.useMemo(() => {
+    if (!isButtonMode) return null;
+    const selectedValue = value;
+    const renderable = button != null ? button : children;
+    const content = (() => {
+      var _a2, _b2, _c, _d;
+      if (typeof renderable === "function") {
+        return renderable({
+          open,
+          selectedItem,
+          selectedValue,
+          placeholder
+        });
+      }
+      if (renderable != null) return renderable;
+      const iconNode = (_c = (_b2 = selectedItem == null ? void 0 : selectedItem.icon) != null ? _b2 : (_a2 = items.find((it) => it.icon)) == null ? void 0 : _a2.icon) != null ? _c : null;
+      if (iconNode) {
+        return /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center", children: iconNode });
+      }
+      return /* @__PURE__ */ jsx("span", { className: "truncate", children: (_d = selectedItem == null ? void 0 : selectedItem.labelNode) != null ? _d : placeholder != null ? placeholder : "Select..." });
+    })();
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: _ref,
+        type: "button",
+        disabled: disabled || readOnly,
+        className: cn(
+          "inline-flex items-center justify-center",
+          "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
+          triggerClassName
+        ),
+        "aria-label": (selectedItem == null ? void 0 : selectedItem.labelText) ? `Selected: ${selectedItem.labelText}` : "Select",
+        children: content
+      }
+    );
+  }, [
+    isButtonMode,
+    button,
+    children,
+    open,
+    selectedItem,
+    value,
+    placeholder,
+    items,
+    disabled,
+    readOnly,
+    triggerClassName,
+    _ref
+  ]);
+  const TriggerBody = isButtonMode ? /* @__PURE__ */ jsx(SelectTrigger, { asChild: true, children: ButtonModeTrigger }) : /* @__PURE__ */ jsx(
     SelectTrigger,
     {
       onPointerDown: (e) => {
@@ -16414,7 +16588,7 @@ var ShadcnSelectVariant = React10.forwardRef(function ShadcnSelectVariant2(props
         /* @__PURE__ */ jsxs(
           SelectContent,
           {
-            className: cn("min-w-[8rem]", contentClassName),
+            className: cn("min-w-32", contentClassName),
             children: [
               searchable && /* @__PURE__ */ jsx("div", { className: "p-1", children: /* @__PURE__ */ jsx(
                 Input,
@@ -16440,6 +16614,7 @@ var ShadcnSelectVariant = React10.forwardRef(function ShadcnSelectVariant2(props
                       onScroll: handleListScroll,
                       children: [
                         renderedItems.map((item, index) => {
+                          var _a2;
                           const optionNode = /* @__PURE__ */ jsx(
                             SelectItem,
                             {
@@ -16455,8 +16630,9 @@ var ShadcnSelectVariant = React10.forwardRef(function ShadcnSelectVariant2(props
                             },
                             item.key
                           );
-                          if (!renderOption) return optionNode;
-                          return renderOption({
+                          const renderer = (_a2 = item.render) != null ? _a2 : renderOption;
+                          if (!renderer) return optionNode;
+                          return renderer({
                             item,
                             selected: selectedItem != null && String(selectedItem.value) === String(item.value),
                             index,
@@ -16481,7 +16657,7 @@ var ShadcnSelectVariant = React10.forwardRef(function ShadcnSelectVariant2(props
       ]
     }
   );
-  if (!hasControls) {
+  if (isButtonMode || !hasControls) {
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -17252,6 +17428,7 @@ var ShadcnMultiSelectVariant = React10.forwardRef(function ShadcnMultiSelectVari
                       }
                     ),
                     filteredItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-xs text-muted-foreground", children: emptySearchText != null ? emptySearchText : "No results found" }) : filteredItems.map((item, index) => {
+                      var _a2;
                       const selected = selectedValues.has(item.value);
                       const row = /* @__PURE__ */ jsxs(
                         "button",
@@ -17284,8 +17461,9 @@ var ShadcnMultiSelectVariant = React10.forwardRef(function ShadcnMultiSelectVari
                         },
                         item.key
                       );
-                      if (!renderOption) return row;
-                      return renderOption({
+                      const renderer = (_a2 = item.render) != null ? _a2 : renderOption;
+                      if (!renderer) return row;
+                      return renderer({
                         item,
                         selected,
                         index,
@@ -18504,52 +18682,6 @@ var customVariant = {
   Variant: ShadcnCustomVariant
 };
 var custom_default = customVariant;
-function capitalizeFirst4(label) {
-  if (!label) return label;
-  return label.charAt(0).toUpperCase() + label.slice(1);
-}
-function normalizeTree(opts, config, level = 0, parentValue, path = []) {
-  if (!opts || !opts.length) return [];
-  return opts.map((raw, index) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
-    const asObj = typeof raw === "string" || typeof raw === "number" ? { label: String(raw), value: raw } : raw;
-    const value = typeof config.optionValue === "function" ? config.optionValue(raw) : typeof config.optionValue === "string" ? asObj[config.optionValue] : (_c = (_b = (_a = asObj.value) != null ? _a : asObj.id) != null ? _b : asObj.key) != null ? _c : String(index);
-    let labelNode = typeof config.optionLabel === "function" ? config.optionLabel(raw) : typeof config.optionLabel === "string" ? (_e = (_d = asObj[config.optionLabel]) != null ? _d : asObj.label) != null ? _e : String(value) : (_f = asObj.label) != null ? _f : String(value);
-    if (config.autoCap && typeof labelNode === "string") {
-      labelNode = capitalizeFirst4(labelNode);
-    }
-    const labelText = typeof labelNode === "string" ? labelNode : typeof labelNode === "number" ? String(labelNode) : (_g = asObj.labelText) != null ? _g : String(value);
-    const description = typeof config.optionDescription === "function" ? config.optionDescription(raw) : typeof config.optionDescription === "string" ? asObj[config.optionDescription] : asObj.description;
-    const disabled = typeof config.optionDisabled === "function" ? config.optionDisabled(raw) : typeof config.optionDisabled === "string" ? !!asObj[config.optionDisabled] : !!asObj.disabled;
-    const icon = typeof config.optionIcon === "function" ? config.optionIcon(raw) : typeof config.optionIcon === "string" ? asObj[config.optionIcon] : asObj.icon;
-    const key = typeof config.optionKey === "function" ? config.optionKey(raw, index) : typeof config.optionKey === "string" ? (_i = (_h = asObj[config.optionKey]) != null ? _h : value) != null ? _i : index : (_k = (_j = asObj.key) != null ? _j : value) != null ? _k : index;
-    const childrenRaw = asObj.children;
-    const nextPath = [...path, value];
-    const children = normalizeTree(
-      childrenRaw != null ? childrenRaw : [],
-      config,
-      level + 1,
-      value,
-      nextPath
-    );
-    return {
-      key: String(key),
-      value,
-      labelNode,
-      labelText,
-      description,
-      disabled,
-      icon,
-      level,
-      parentValue,
-      path,
-      // ancestors only
-      hasChildren: !!children.length,
-      children,
-      raw
-    };
-  });
-}
 function flattenTree(nodes) {
   const result = [];
   function recurse(list) {
@@ -18954,6 +19086,7 @@ var ShadcnTreeSelectVariant = React10.forwardRef(function ShadcnTreeSelectVarian
     emptyLabel && tree.length === 0 && !query && /* @__PURE__ */ jsx("div", { className: "px-4 py-3 text-sm text-center text-muted-foreground", children: emptyLabel }),
     tree.length > 0 && displayedNodes.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-4 py-3 text-sm text-center text-muted-foreground", children: emptySearchText != null ? emptySearchText : "No results found" }),
     displayedNodes.map((item, index) => {
+      var _a;
       const selected = selectedValues.includes(item.value);
       const isExpanded = expanded.has(item.value);
       const parentInLeafOnly = leafOnly && item.hasChildren;
@@ -19017,10 +19150,11 @@ var ShadcnTreeSelectVariant = React10.forwardRef(function ShadcnTreeSelectVarian
           ]
         }
       );
-      if (!renderOption) {
+      const renderer = (_a = item.render) != null ? _a : renderOption;
+      if (!renderer) {
         return /* @__PURE__ */ jsx(React10.Fragment, { children: optionNode }, item.key);
       }
-      const rendered = renderOption({
+      const rendered = renderer({
         item,
         selected,
         index,
@@ -20378,7 +20512,7 @@ function normalizeValue(val, multiple) {
   if (Array.isArray(val)) return val[0] || "";
   return val || "";
 }
-function capitalizeFirst5(label) {
+function capitalizeFirst4(label) {
   if (!label) return label;
   return label.charAt(0).toUpperCase() + label.slice(1);
 }
@@ -20404,7 +20538,7 @@ function normalizeOption(input, {
       label2 = String(rawValue != null ? rawValue : value2);
     }
     if (autoCap && typeof label2 === "string") {
-      label2 = capitalizeFirst5(label2);
+      label2 = capitalizeFirst4(label2);
     }
     const icon = optionIcon != null ? anyInput[optionIcon] : (_b = anyInput.icon) != null ? _b : void 0;
     const disabled = optionDisabled != null ? !!anyInput[optionDisabled] : !!anyInput.disabled;
@@ -20426,7 +20560,7 @@ function normalizeOption(input, {
     const value2 = String(input);
     let label2 = value2;
     if (autoCap && typeof label2 === "string") {
-      label2 = capitalizeFirst5(label2);
+      label2 = capitalizeFirst4(label2);
     }
     return {
       ui: {
@@ -20440,7 +20574,7 @@ function normalizeOption(input, {
   const value = String(baseValue);
   let label = anyInput.label != null ? anyInput.label : String(value);
   if (autoCap && typeof label === "string") {
-    label = capitalizeFirst5(label);
+    label = capitalizeFirst4(label);
   }
   return {
     ui: {