@timeax/form-palette 0.0.26 → 0.0.27

package/dist/index.mjs

@@ -16302,6 +16302,8 @@ var ShadcnSelectVariant = React10.forwardRef(function ShadcnSelectVariant2(props
     contentClassName,
     renderOption,
     renderValue,
+    // Mode
+    mode = "default",
     // Icons & controls
     leadingIcons,
     trailingIcons,
@@ -16315,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(
@@ -16412,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,
@@ -16438,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) => {
@@ -16531,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,
@@ -16600,7 +16657,7 @@ var ShadcnSelectVariant = React10.forwardRef(function ShadcnSelectVariant2(props
       ]
     }
   );
-  if (!hasControls) {
+  if (isButtonMode || !hasControls) {
     return /* @__PURE__ */ jsx(
       "div",
       {