@timeax/form-palette 0.0.26 → 0.0.27

package/dist/index.d.mts

@@ -3014,7 +3014,7 @@ type NormalizedSelectItem = {
 /**
  * Shadcn-based Select variant.
  */
-interface ShadcnSelectVariantProps extends Pick<VariantBaseProps<SelectPrimitive | undefined>, "value" | "onValue" | "error" | "disabled" | "readOnly" | "size" | "density"> {
+interface SelectBaseProps extends Pick<VariantBaseProps<SelectPrimitive | undefined>, "value" | "onValue" | "error" | "disabled" | "readOnly" | "size" | "density"> {
     /**
      * Options for the select.
      *
@@ -3119,13 +3119,6 @@ interface ShadcnSelectVariantProps extends Pick<VariantBaseProps<SelectPrimitive
         selectedItem: NormalizedSelectItem | null;
         placeholder?: React.ReactNode;
     }) => React.ReactNode;
-    /**
-     * One or more icons displayed inside the trigger, on the left.
-     *
-     * If not provided and `icon` is set, that single icon
-     * is treated as `leadingIcons[0]`.
-     */
-    leadingIcons?: React.ReactNode[];
     /**
      * Icons displayed on the right side of the trigger,
      * near the clear button / chevron area.
@@ -3192,6 +3185,51 @@ interface ShadcnSelectVariantProps extends Pick<VariantBaseProps<SelectPrimitive
      */
     virtualScrollThreshold?: number;
 }
+type SelectDefaultModeProps = {
+    mode?: "default";
+    leadingIcons?: React.ReactNode[];
+    trailingIcons?: React.ReactNode[];
+    icon?: React.ReactNode;
+    iconGap?: number;
+    leadingIconSpacing?: number;
+    trailingIconSpacing?: number;
+    leadingControl?: React.ReactNode;
+    trailingControl?: React.ReactNode;
+    leadingControlClassName?: string;
+    trailingControlClassName?: string;
+    joinControls?: boolean;
+    extendBoxToControls?: boolean;
+    button?: never;
+    children?: never;
+};
+type SelectButtonModeButton = React.ReactNode | ((ctx: {
+    open: boolean;
+    selectedItem: NormalizedSelectItem | null;
+    selectedValue: SelectPrimitive | undefined;
+    placeholder?: React.ReactNode;
+}) => React.ReactNode);
+type SelectButtonModeProps = {
+    mode: "button";
+    /**
+     * Used when mode="button". If provided, this is the trigger.
+     * If not provided, `children` is used.
+     */
+    button?: SelectButtonModeButton;
+    children?: SelectButtonModeButton;
+    leadingIcons?: never;
+    trailingIcons?: never;
+    icon?: never;
+    iconGap?: never;
+    leadingIconSpacing?: never;
+    trailingIconSpacing?: never;
+    leadingControl?: never;
+    trailingControl?: never;
+    leadingControlClassName?: never;
+    trailingControlClassName?: never;
+    joinControls?: never;
+    extendBoxToControls?: never;
+};
+type ShadcnSelectVariantProps = SelectBaseProps & (SelectDefaultModeProps | SelectButtonModeProps);
 
 type SelectVariantProps = ShadcnSelectVariantProps;
 

package/dist/index.d.ts

@@ -3014,7 +3014,7 @@ type NormalizedSelectItem = {
 /**
  * Shadcn-based Select variant.
  */
-interface ShadcnSelectVariantProps extends Pick<VariantBaseProps<SelectPrimitive | undefined>, "value" | "onValue" | "error" | "disabled" | "readOnly" | "size" | "density"> {
+interface SelectBaseProps extends Pick<VariantBaseProps<SelectPrimitive | undefined>, "value" | "onValue" | "error" | "disabled" | "readOnly" | "size" | "density"> {
     /**
      * Options for the select.
      *
@@ -3119,13 +3119,6 @@ interface ShadcnSelectVariantProps extends Pick<VariantBaseProps<SelectPrimitive
         selectedItem: NormalizedSelectItem | null;
         placeholder?: React.ReactNode;
     }) => React.ReactNode;
-    /**
-     * One or more icons displayed inside the trigger, on the left.
-     *
-     * If not provided and `icon` is set, that single icon
-     * is treated as `leadingIcons[0]`.
-     */
-    leadingIcons?: React.ReactNode[];
     /**
      * Icons displayed on the right side of the trigger,
      * near the clear button / chevron area.
@@ -3192,6 +3185,51 @@ interface ShadcnSelectVariantProps extends Pick<VariantBaseProps<SelectPrimitive
      */
     virtualScrollThreshold?: number;
 }
+type SelectDefaultModeProps = {
+    mode?: "default";
+    leadingIcons?: React.ReactNode[];
+    trailingIcons?: React.ReactNode[];
+    icon?: React.ReactNode;
+    iconGap?: number;
+    leadingIconSpacing?: number;
+    trailingIconSpacing?: number;
+    leadingControl?: React.ReactNode;
+    trailingControl?: React.ReactNode;
+    leadingControlClassName?: string;
+    trailingControlClassName?: string;
+    joinControls?: boolean;
+    extendBoxToControls?: boolean;
+    button?: never;
+    children?: never;
+};
+type SelectButtonModeButton = React.ReactNode | ((ctx: {
+    open: boolean;
+    selectedItem: NormalizedSelectItem | null;
+    selectedValue: SelectPrimitive | undefined;
+    placeholder?: React.ReactNode;
+}) => React.ReactNode);
+type SelectButtonModeProps = {
+    mode: "button";
+    /**
+     * Used when mode="button". If provided, this is the trigger.
+     * If not provided, `children` is used.
+     */
+    button?: SelectButtonModeButton;
+    children?: SelectButtonModeButton;
+    leadingIcons?: never;
+    trailingIcons?: never;
+    icon?: never;
+    iconGap?: never;
+    leadingIconSpacing?: never;
+    trailingIconSpacing?: never;
+    leadingControl?: never;
+    trailingControl?: never;
+    leadingControlClassName?: never;
+    trailingControlClassName?: never;
+    joinControls?: never;
+    extendBoxToControls?: never;
+};
+type ShadcnSelectVariantProps = SelectBaseProps & (SelectDefaultModeProps | SelectButtonModeProps);
 
 type SelectVariantProps = ShadcnSelectVariantProps;
 

package/dist/index.js

@@ -16337,6 +16337,8 @@ var ShadcnSelectVariant = React10__namespace.forwardRef(function ShadcnSelectVar
     contentClassName,
     renderOption,
     renderValue,
+    // Mode
+    mode = "default",
     // Icons & controls
     leadingIcons,
     trailingIcons,
@@ -16350,11 +16352,15 @@ var ShadcnSelectVariant = React10__namespace.forwardRef(function ShadcnSelectVar
     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__namespace.useState(false);
   const [query, setQuery] = React10__namespace.useState("");
   const items = React10__namespace.useMemo(
@@ -16447,18 +16453,19 @@ var ShadcnSelectVariant = React10__namespace.forwardRef(function ShadcnSelectVar
   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,
@@ -16473,7 +16480,57 @@ var ShadcnSelectVariant = React10__namespace.forwardRef(function ShadcnSelectVar
     "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__ */ jsxRuntime.jsx(
+  const ButtonModeTrigger = React10__namespace.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__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center", children: iconNode });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: (_d = selectedItem == null ? void 0 : selectedItem.labelNode) != null ? _d : placeholder != null ? placeholder : "Select..." });
+    })();
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SelectTrigger, { asChild: true, children: ButtonModeTrigger }) : /* @__PURE__ */ jsxRuntime.jsx(
     SelectTrigger,
     {
       onPointerDown: (e) => {
@@ -16566,7 +16623,7 @@ var ShadcnSelectVariant = React10__namespace.forwardRef(function ShadcnSelectVar
         /* @__PURE__ */ jsxRuntime.jsxs(
           SelectContent,
           {
-            className: cn("min-w-[8rem]", contentClassName),
+            className: cn("min-w-32", contentClassName),
             children: [
               searchable && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-1", children: /* @__PURE__ */ jsxRuntime.jsx(
                 Input,
@@ -16635,7 +16692,7 @@ var ShadcnSelectVariant = React10__namespace.forwardRef(function ShadcnSelectVar
       ]
     }
   );
-  if (!hasControls) {
+  if (isButtonMode || !hasControls) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {