@firecms/ui 3.0.0-canary.241 → 3.0.0-canary.244

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,6 +3,7 @@ export type AutocompleteProps = {
3
3
  children: React.ReactNode;
4
4
  open: boolean;
5
5
  setOpen: (open: boolean) => void;
6
+ className?: string;
6
7
  };
7
8
  export declare const useAutoComplete: ({ ref }: {
8
9
  ref: React.MutableRefObject<HTMLDivElement | null>;
@@ -11,9 +12,10 @@ export declare const useAutoComplete: ({ ref }: {
11
12
  autoCompleteOpen: boolean;
12
13
  setAutoCompleteOpen: React.Dispatch<React.SetStateAction<boolean>>;
13
14
  };
14
- export declare function Autocomplete({ children, open, setOpen }: AutocompleteProps): import("react/jsx-runtime").JSX.Element;
15
+ export declare function Autocomplete({ children, open, setOpen, className }: AutocompleteProps): import("react/jsx-runtime").JSX.Element;
15
16
  export type AutocompleteItemProps = {
16
17
  children: React.ReactNode;
17
18
  onClick?: () => void;
19
+ className?: string;
18
20
  };
19
- export declare function AutocompleteItem({ children, onClick }: AutocompleteItemProps): import("react/jsx-runtime").JSX.Element;
21
+ export declare function AutocompleteItem({ children, onClick, className }: AutocompleteItemProps): import("react/jsx-runtime").JSX.Element;
@@ -23,6 +23,7 @@ export type SelectProps<T extends SelectValue = string> = {
23
23
  padding?: boolean;
24
24
  invisible?: boolean;
25
25
  children?: React.ReactNode;
26
+ dataType?: "string" | "number" | "boolean";
26
27
  };
27
28
  export declare const Select: React.ForwardRefExoticComponent<SelectProps<string> & React.RefAttributes<HTMLDivElement>>;
28
29
  export type SelectItemProps<T extends SelectValue = string> = {
package/dist/index.es.js CHANGED
@@ -452,11 +452,12 @@ const useAutoComplete = ({
452
452
  };
453
453
  };
454
454
  function Autocomplete(t0) {
455
- const $ = c(13);
455
+ const $ = c(14);
456
456
  const {
457
457
  children,
458
458
  open,
459
- setOpen
459
+ setOpen,
460
+ className
460
461
  } = t0;
461
462
  const autocompleteRef = React__default.useRef(null);
462
463
  let t1;
@@ -479,50 +480,61 @@ function Autocomplete(t0) {
479
480
  }
480
481
  const t4 = open ? paperMixin : "";
481
482
  let t5;
482
- if ($[4] !== t4) {
483
- t5 = cls(t4, "bg-surface-50 dark:bg-surface-900 py-2");
484
- $[4] = t4;
485
- $[5] = t5;
483
+ if ($[4] !== className || $[5] !== t4) {
484
+ t5 = cls(t4, "bg-surface-50 dark:bg-surface-900", className);
485
+ $[4] = className;
486
+ $[5] = t4;
487
+ $[6] = t5;
486
488
  } else {
487
- t5 = $[5];
489
+ t5 = $[6];
488
490
  }
489
491
  let t6;
490
- if ($[6] !== children || $[7] !== t5) {
492
+ if ($[7] !== children || $[8] !== t5) {
491
493
  t6 = /* @__PURE__ */ jsx("div", { ref: autocompleteRef, className: t5, children });
492
- $[6] = children;
493
- $[7] = t5;
494
- $[8] = t6;
494
+ $[7] = children;
495
+ $[8] = t5;
496
+ $[9] = t6;
495
497
  } else {
496
- t6 = $[8];
498
+ t6 = $[9];
497
499
  }
498
500
  let t7;
499
- if ($[9] !== open || $[10] !== t3 || $[11] !== t6) {
500
- t7 = /* @__PURE__ */ jsx(Collapse, { in: open, duration: 50, className: t3, children: t6 });
501
- $[9] = open;
502
- $[10] = t3;
503
- $[11] = t6;
504
- $[12] = t7;
501
+ if ($[10] !== open || $[11] !== t3 || $[12] !== t6) {
502
+ t7 = /* @__PURE__ */ jsx(Collapse, { in: open, duration: 30, className: t3, children: t6 });
503
+ $[10] = open;
504
+ $[11] = t3;
505
+ $[12] = t6;
506
+ $[13] = t7;
505
507
  } else {
506
- t7 = $[12];
508
+ t7 = $[13];
507
509
  }
508
510
  return t7;
509
511
  }
510
512
  function AutocompleteItem(t0) {
511
- const $ = c(3);
513
+ const $ = c(6);
512
514
  const {
513
515
  children,
514
- onClick
516
+ onClick,
517
+ className
515
518
  } = t0;
516
519
  let t1;
517
- if ($[0] !== children || $[1] !== onClick) {
518
- t1 = /* @__PURE__ */ jsx("div", { className: "flex w-full items-center pr-6 pl-14 h-[48px] cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800", onClick, children });
519
- $[0] = children;
520
- $[1] = onClick;
521
- $[2] = t1;
520
+ if ($[0] !== className) {
521
+ t1 = cls("flex w-full items-center h-[48px] cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800", className);
522
+ $[0] = className;
523
+ $[1] = t1;
522
524
  } else {
523
- t1 = $[2];
525
+ t1 = $[1];
524
526
  }
525
- return t1;
527
+ let t2;
528
+ if ($[2] !== children || $[3] !== onClick || $[4] !== t1) {
529
+ t2 = /* @__PURE__ */ jsx("div", { className: t1, onClick, children });
530
+ $[2] = children;
531
+ $[3] = onClick;
532
+ $[4] = t1;
533
+ $[5] = t2;
534
+ } else {
535
+ t2 = $[5];
536
+ }
537
+ return t2;
526
538
  }
527
539
  const getSizeClasses = (size) => {
528
540
  switch (size) {
@@ -29655,7 +29667,7 @@ function SelectInputLabel(t0) {
29655
29667
  }
29656
29668
  const MultiSelectContext = React.createContext({});
29657
29669
  const MultiSelect = React.forwardRef((t0, ref) => {
29658
- const $ = c(102);
29670
+ const $ = c(103);
29659
29671
  const {
29660
29672
  value,
29661
29673
  size: t1,
@@ -29900,7 +29912,7 @@ const MultiSelect = React.forwardRef((t0, ref) => {
29900
29912
  t24 = $[48];
29901
29913
  }
29902
29914
  let t25;
29903
- if ($[49] !== children || $[50] !== handleClear || $[51] !== includeClear || $[52] !== isPopoverOpen || $[53] !== placeholder || $[54] !== renderValues || $[55] !== selectedValues || $[56] !== toggleOption || $[57] !== useChips) {
29915
+ if ($[49] !== children || $[50] !== handleClear || $[51] !== includeClear || $[52] !== isPopoverOpen || $[53] !== placeholder || $[54] !== renderValues || $[55] !== selectedValues || $[56] !== size || $[57] !== toggleOption || $[58] !== useChips) {
29904
29916
  t25 = selectedValues.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center w-full", children: [
29905
29917
  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5 text-start", children: [
29906
29918
  renderValues && renderValues(selectedValues),
@@ -29924,11 +29936,11 @@ const MultiSelect = React.forwardRef((t0, ref) => {
29924
29936
  event_1.stopPropagation();
29925
29937
  handleClear();
29926
29938
  } }),
29927
- /* @__PURE__ */ jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: "small", className: cls("transition", isPopoverOpen ? "rotate-180" : "") }) })
29939
+ /* @__PURE__ */ jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: size === "large" ? "medium" : "small", className: cls("transition", isPopoverOpen ? "rotate-180" : "") }) })
29928
29940
  ] })
29929
29941
  ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full mx-auto", children: [
29930
29942
  /* @__PURE__ */ jsx("span", { className: "text-sm", children: placeholder }),
29931
- /* @__PURE__ */ jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: "small", className: cls("transition", isPopoverOpen ? "rotate-180" : "") }) })
29943
+ /* @__PURE__ */ jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: size === "large" ? "medium" : "small", className: cls("transition", isPopoverOpen ? "rotate-180" : "") }) })
29932
29944
  ] });
29933
29945
  $[49] = children;
29934
29946
  $[50] = handleClear;
@@ -29937,104 +29949,105 @@ const MultiSelect = React.forwardRef((t0, ref) => {
29937
29949
  $[53] = placeholder;
29938
29950
  $[54] = renderValues;
29939
29951
  $[55] = selectedValues;
29940
- $[56] = toggleOption;
29941
- $[57] = useChips;
29942
- $[58] = t25;
29952
+ $[56] = size;
29953
+ $[57] = toggleOption;
29954
+ $[58] = useChips;
29955
+ $[59] = t25;
29943
29956
  } else {
29944
- t25 = $[58];
29957
+ t25 = $[59];
29945
29958
  }
29946
29959
  let t26;
29947
- if ($[59] !== handleTogglePopover || $[60] !== ref || $[61] !== t24 || $[62] !== t25) {
29960
+ if ($[60] !== handleTogglePopover || $[61] !== ref || $[62] !== t24 || $[63] !== t25) {
29948
29961
  t26 = /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { ref, onClick: handleTogglePopover, className: t24, children: t25 }) });
29949
- $[59] = handleTogglePopover;
29950
- $[60] = ref;
29951
- $[61] = t24;
29952
- $[62] = t25;
29953
- $[63] = t26;
29962
+ $[60] = handleTogglePopover;
29963
+ $[61] = ref;
29964
+ $[62] = t24;
29965
+ $[63] = t25;
29966
+ $[64] = t26;
29954
29967
  } else {
29955
- t26 = $[63];
29968
+ t26 = $[64];
29956
29969
  }
29957
29970
  let t27;
29958
- if ($[64] === Symbol.for("react.memo_cache_sentinel")) {
29971
+ if ($[65] === Symbol.for("react.memo_cache_sentinel")) {
29959
29972
  t27 = cls("z-50 relative overflow-hidden border bg-white dark:bg-surface-900 rounded-lg w-[400px]", defaultBorderMixin);
29960
- $[64] = t27;
29973
+ $[65] = t27;
29961
29974
  } else {
29962
- t27 = $[64];
29975
+ t27 = $[65];
29963
29976
  }
29964
29977
  let t28;
29965
- if ($[65] !== onPopoverOpenChange) {
29978
+ if ($[66] !== onPopoverOpenChange) {
29966
29979
  t28 = () => onPopoverOpenChange(false);
29967
- $[65] = onPopoverOpenChange;
29968
- $[66] = t28;
29980
+ $[66] = onPopoverOpenChange;
29981
+ $[67] = t28;
29969
29982
  } else {
29970
- t28 = $[66];
29983
+ t28 = $[67];
29971
29984
  }
29972
29985
  let t29;
29973
- if ($[67] === Symbol.for("react.memo_cache_sentinel")) {
29986
+ if ($[68] === Symbol.for("react.memo_cache_sentinel")) {
29974
29987
  t29 = cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4 flex-grow ");
29975
- $[67] = t29;
29988
+ $[68] = t29;
29976
29989
  } else {
29977
- t29 = $[67];
29990
+ t29 = $[68];
29978
29991
  }
29979
29992
  let t30;
29980
- if ($[68] !== handleInputKeyDown) {
29993
+ if ($[69] !== handleInputKeyDown) {
29981
29994
  t30 = /* @__PURE__ */ jsx(Command.Input, { className: t29, placeholder: "Search...", onKeyDown: handleInputKeyDown });
29982
- $[68] = handleInputKeyDown;
29983
- $[69] = t30;
29995
+ $[69] = handleInputKeyDown;
29996
+ $[70] = t30;
29984
29997
  } else {
29985
- t30 = $[69];
29998
+ t30 = $[70];
29986
29999
  }
29987
30000
  let t31;
29988
- if ($[70] !== handleClear || $[71] !== selectedValues.length) {
30001
+ if ($[71] !== handleClear || $[72] !== selectedValues.length) {
29989
30002
  t31 = selectedValues.length > 0 && /* @__PURE__ */ jsx("div", { onClick: handleClear, className: "text-sm justify-center cursor-pointer py-3 px-4 text-text-secondary dark:text-text-secondary-dark", children: "Clear" });
29990
- $[70] = handleClear;
29991
- $[71] = selectedValues.length;
29992
- $[72] = t31;
30003
+ $[71] = handleClear;
30004
+ $[72] = selectedValues.length;
30005
+ $[73] = t31;
29993
30006
  } else {
29994
- t31 = $[72];
30007
+ t31 = $[73];
29995
30008
  }
29996
30009
  let t32;
29997
- if ($[73] !== t30 || $[74] !== t31) {
30010
+ if ($[74] !== t30 || $[75] !== t31) {
29998
30011
  t32 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
29999
30012
  t30,
30000
30013
  t31
30001
30014
  ] });
30002
- $[73] = t30;
30003
- $[74] = t31;
30004
- $[75] = t32;
30015
+ $[74] = t30;
30016
+ $[75] = t31;
30017
+ $[76] = t32;
30005
30018
  } else {
30006
- t32 = $[75];
30019
+ t32 = $[76];
30007
30020
  }
30008
30021
  let t33;
30009
- if ($[76] === Symbol.for("react.memo_cache_sentinel")) {
30022
+ if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
30010
30023
  t33 = /* @__PURE__ */ jsx(Separator, { orientation: "horizontal", className: "my-0" });
30011
- $[76] = t33;
30024
+ $[77] = t33;
30012
30025
  } else {
30013
- t33 = $[76];
30026
+ t33 = $[77];
30014
30027
  }
30015
30028
  let t34;
30016
- if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
30029
+ if ($[78] === Symbol.for("react.memo_cache_sentinel")) {
30017
30030
  t34 = /* @__PURE__ */ jsx(Command.Empty, { className: "px-4 py-2", children: "No results found." });
30018
- $[77] = t34;
30031
+ $[78] = t34;
30019
30032
  } else {
30020
- t34 = $[77];
30033
+ t34 = $[78];
30021
30034
  }
30022
30035
  let t35;
30023
- if ($[78] !== allValues.length || $[79] !== includeSelectAll || $[80] !== selectedValues.length || $[81] !== toggleAll) {
30036
+ if ($[79] !== allValues.length || $[80] !== includeSelectAll || $[81] !== selectedValues.length || $[82] !== toggleAll) {
30024
30037
  t35 = includeSelectAll && /* @__PURE__ */ jsxs(Command.Item, { onSelect: toggleAll, className: cls("flex flex-row items-center gap-1.5", "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900"), children: [
30025
30038
  /* @__PURE__ */ jsx(InnerCheckBox, { checked: selectedValues.length === allValues.length }),
30026
30039
  /* @__PURE__ */ jsx("span", { className: "text-sm text-text-secondary dark:text-text-secondary-dark", children: "(Select All)" })
30027
30040
  ] }, "all");
30028
- $[78] = allValues.length;
30029
- $[79] = includeSelectAll;
30030
- $[80] = selectedValues.length;
30031
- $[81] = toggleAll;
30032
- $[82] = t35;
30041
+ $[79] = allValues.length;
30042
+ $[80] = includeSelectAll;
30043
+ $[81] = selectedValues.length;
30044
+ $[82] = toggleAll;
30045
+ $[83] = t35;
30033
30046
  } else {
30034
- t35 = $[82];
30047
+ t35 = $[83];
30035
30048
  }
30036
30049
  let t36;
30037
- if ($[83] !== children || $[84] !== t35) {
30050
+ if ($[84] !== children || $[85] !== t35) {
30038
30051
  t36 = /* @__PURE__ */ jsxs(Command.List, { children: [
30039
30052
  t34,
30040
30053
  /* @__PURE__ */ jsxs(Command.Group, { children: [
@@ -30042,61 +30055,61 @@ const MultiSelect = React.forwardRef((t0, ref) => {
30042
30055
  children
30043
30056
  ] })
30044
30057
  ] });
30045
- $[83] = children;
30046
- $[84] = t35;
30047
- $[85] = t36;
30058
+ $[84] = children;
30059
+ $[85] = t35;
30060
+ $[86] = t36;
30048
30061
  } else {
30049
- t36 = $[85];
30062
+ t36 = $[86];
30050
30063
  }
30051
30064
  let t37;
30052
- if ($[86] !== t32 || $[87] !== t36) {
30065
+ if ($[87] !== t32 || $[88] !== t36) {
30053
30066
  t37 = /* @__PURE__ */ jsxs(Command, { children: [
30054
30067
  t32,
30055
30068
  t33,
30056
30069
  t36
30057
30070
  ] });
30058
- $[86] = t32;
30059
- $[87] = t36;
30060
- $[88] = t37;
30071
+ $[87] = t32;
30072
+ $[88] = t36;
30073
+ $[89] = t37;
30061
30074
  } else {
30062
- t37 = $[88];
30075
+ t37 = $[89];
30063
30076
  }
30064
30077
  let t38;
30065
- if ($[89] !== t28 || $[90] !== t37) {
30078
+ if ($[90] !== t28 || $[91] !== t37) {
30066
30079
  t38 = /* @__PURE__ */ jsx(PopoverPrimitive.Content, { className: t27, align: "start", sideOffset: 8, onEscapeKeyDown: t28, children: t37 });
30067
- $[89] = t28;
30068
- $[90] = t37;
30069
- $[91] = t38;
30080
+ $[90] = t28;
30081
+ $[91] = t37;
30082
+ $[92] = t38;
30070
30083
  } else {
30071
- t38 = $[91];
30084
+ t38 = $[92];
30072
30085
  }
30073
30086
  let t39;
30074
- if ($[92] !== isPopoverOpen || $[93] !== modalPopover || $[94] !== onPopoverOpenChange || $[95] !== t26 || $[96] !== t38) {
30087
+ if ($[93] !== isPopoverOpen || $[94] !== modalPopover || $[95] !== onPopoverOpenChange || $[96] !== t26 || $[97] !== t38) {
30075
30088
  t39 = /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open: isPopoverOpen, onOpenChange: onPopoverOpenChange, modal: modalPopover, children: [
30076
30089
  t26,
30077
30090
  t38
30078
30091
  ] });
30079
- $[92] = isPopoverOpen;
30080
- $[93] = modalPopover;
30081
- $[94] = onPopoverOpenChange;
30082
- $[95] = t26;
30083
- $[96] = t38;
30084
- $[97] = t39;
30092
+ $[93] = isPopoverOpen;
30093
+ $[94] = modalPopover;
30094
+ $[95] = onPopoverOpenChange;
30095
+ $[96] = t26;
30096
+ $[97] = t38;
30097
+ $[98] = t39;
30085
30098
  } else {
30086
- t39 = $[97];
30099
+ t39 = $[98];
30087
30100
  }
30088
30101
  let t40;
30089
- if ($[98] !== t18 || $[99] !== t19 || $[100] !== t39) {
30102
+ if ($[99] !== t18 || $[100] !== t19 || $[101] !== t39) {
30090
30103
  t40 = /* @__PURE__ */ jsxs(MultiSelectContext.Provider, { value: t18, children: [
30091
30104
  t19,
30092
30105
  t39
30093
30106
  ] });
30094
- $[98] = t18;
30095
- $[99] = t19;
30096
- $[100] = t39;
30097
- $[101] = t40;
30107
+ $[99] = t18;
30108
+ $[100] = t19;
30109
+ $[101] = t39;
30110
+ $[102] = t40;
30098
30111
  } else {
30099
- t40 = $[101];
30112
+ t40 = $[102];
30100
30113
  }
30101
30114
  return t40;
30102
30115
  });
@@ -30538,6 +30551,7 @@ const Select = forwardRef(({
30538
30551
  endAdornment,
30539
30552
  invisible,
30540
30553
  children,
30554
+ dataType = "string",
30541
30555
  ...props
30542
30556
  }, ref) => {
30543
30557
  const [openInternal, setOpenInternal] = useState(open ?? false);
@@ -30546,9 +30560,12 @@ const Select = forwardRef(({
30546
30560
  }, [open]);
30547
30561
  const onValueChangeInternal = useCallback((newValue) => {
30548
30562
  let typedValue = newValue;
30549
- if (newValue === "true") typedValue = true;
30550
- else if (newValue === "false") typedValue = false;
30551
- else if (!isNaN(Number(newValue)) && newValue.trim() !== "") typedValue = Number(newValue);
30563
+ if (dataType === "boolean") {
30564
+ if (newValue === "true") typedValue = true;
30565
+ else if (newValue === "false") typedValue = false;
30566
+ } else if (dataType === "number") {
30567
+ if (!isNaN(Number(newValue)) && newValue.trim() !== "") typedValue = Number(newValue);
30568
+ }
30552
30569
  onValueChange?.(typedValue);
30553
30570
  if (onChange) {
30554
30571
  const event = {
@@ -30567,54 +30584,56 @@ const Select = forwardRef(({
30567
30584
  setOpenInternal(open_0);
30568
30585
  }, ...props, children: [
30569
30586
  typeof label === "string" ? /* @__PURE__ */ jsx(SelectInputLabel, { error, children: label }) : label,
30570
- /* @__PURE__ */ jsx("div", { className: cls("select-none rounded-md text-sm", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, "relative flex items-center", className, {
30587
+ /* @__PURE__ */ jsxs("div", { className: cls("select-none rounded-md text-sm", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, "relative flex items-center", className, {
30571
30588
  "min-h-[28px]": size === "smallest",
30572
30589
  "min-h-[32px]": size === "small",
30573
30590
  "min-h-[42px]": size === "medium",
30574
30591
  "min-h-[64px]": size === "large",
30575
30592
  "w-fit": !fullWidth,
30576
30593
  "w-full": fullWidth
30577
- }), children: /* @__PURE__ */ jsx(SelectPrimitive.Trigger, { ref: inputRef, id, asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cls("h-full", padding ? {
30578
- "px-4": size === "large",
30579
- "px-3": size === "medium",
30580
- "px-2": size === "small" || size === "smallest"
30581
- } : "", "outline-none focus:outline-none", "select-none rounded-md text-sm", error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark", error ? "border border-red-500 dark:border-red-600" : "", disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white", "relative flex flex-row items-center", {
30582
- "min-h-[28px]": size === "smallest",
30583
- "min-h-[32px]": size === "small",
30584
- "min-h-[42px]": size === "medium",
30585
- "min-h-[64px]": size === "large",
30586
- "w-full": fullWidth,
30587
- "w-fit": !fullWidth
30588
- }, inputClassName), children: [
30589
- /* @__PURE__ */ jsx("div", { ref, className: cls("flex-grow max-w-full flex flex-row gap-2 items-center", "overflow-visible", {
30594
+ }), children: [
30595
+ /* @__PURE__ */ jsx(SelectPrimitive.Trigger, { ref: inputRef, id, asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cls("h-full", padding ? {
30596
+ "px-4": size === "large",
30597
+ "px-3": size === "medium",
30598
+ "px-2": size === "small" || size === "smallest"
30599
+ } : "", "outline-none focus:outline-none", "select-none rounded-md text-sm", error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark", error ? "border border-red-500 dark:border-red-600" : "", disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white", "relative flex flex-row items-center", {
30590
30600
  "min-h-[28px]": size === "smallest",
30591
30601
  "min-h-[32px]": size === "small",
30592
30602
  "min-h-[42px]": size === "medium",
30593
- "min-h-[64px]": size === "large"
30594
- }), children: /* @__PURE__ */ jsxs(SelectPrimitive.Value, { onClick: (e) => {
30595
- e.preventDefault();
30596
- e.stopPropagation();
30597
- }, placeholder, className: "w-full", children: [
30598
- hasValue && value !== void 0 && renderValue ? renderValue(value) : placeholder,
30599
- hasValue && !renderValue && (() => {
30600
- const childrenProps = Children.map(children, (child) => {
30601
- if (React__default.isValidElement(child)) {
30602
- return child.props;
30603
- }
30604
- }).filter(Boolean);
30605
- const option = childrenProps.find((o) => String(o.value) === String(value));
30606
- return option?.children;
30607
- })()
30603
+ "min-h-[64px]": size === "large",
30604
+ "w-full": fullWidth,
30605
+ "w-fit": !fullWidth
30606
+ }, inputClassName), children: [
30607
+ /* @__PURE__ */ jsx("div", { ref, className: cls("flex-grow max-w-full flex flex-row gap-2 items-center", "overflow-visible", {
30608
+ "min-h-[28px]": size === "smallest",
30609
+ "min-h-[32px]": size === "small",
30610
+ "min-h-[42px]": size === "medium",
30611
+ "min-h-[64px]": size === "large"
30612
+ }), children: /* @__PURE__ */ jsxs(SelectPrimitive.Value, { onClick: (e) => {
30613
+ e.preventDefault();
30614
+ e.stopPropagation();
30615
+ }, placeholder, className: "w-full", children: [
30616
+ hasValue && value !== void 0 && renderValue ? renderValue(value) : placeholder,
30617
+ hasValue && !renderValue && (() => {
30618
+ const childrenProps = Children.map(children, (child) => {
30619
+ if (React__default.isValidElement(child)) {
30620
+ return child.props;
30621
+ }
30622
+ }).filter(Boolean);
30623
+ const option = childrenProps.find((o) => String(o.value) === String(value));
30624
+ return option?.children;
30625
+ })()
30626
+ ] }) }),
30627
+ /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: size === "large" ? "medium" : "small", className: cls("transition", open ? "rotate-180" : "", {
30628
+ "px-2": size === "large",
30629
+ "px-1": size === "medium" || size === "small"
30630
+ }) }) })
30608
30631
  ] }) }),
30609
- endAdornment && /* @__PURE__ */ jsx("div", { className: cls("h-full flex items-center"), onClick: (e_0) => {
30632
+ endAdornment && /* @__PURE__ */ jsx("div", { className: cls("h-full flex items-center absolute right-0 pr-12"), onClick: (e_0) => {
30610
30633
  e_0.preventDefault();
30611
30634
  e_0.stopPropagation();
30612
- }, children: endAdornment }),
30613
- /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: "medium", className: cls("transition", open ? "rotate-180" : "", {
30614
- "px-2": size === "large",
30615
- "px-1": size === "medium" || size === "small"
30616
- }) }) })
30617
- ] }) }) }),
30635
+ }, children: endAdornment })
30636
+ ] }),
30618
30637
  /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(SelectPrimitive.Content, { position, className: cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-900 p-2 rounded-lg", defaultBorderMixin), children: /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { className: "p-1", style: {
30619
30638
  maxHeight: "var(--radix-select-content-available-height)"
30620
30639
  }, children }) }) })