@underverse-ui/underverse 0.1.20 → 0.1.21

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.
Files changed (7) hide show
  1. package/dist/index.cjs +184 -151
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +7 -1
  4. package/dist/index.d.ts +7 -1
  5. package/dist/index.js +184 -151
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.cts CHANGED
@@ -704,9 +704,13 @@ interface ComboboxProps {
704
704
  }
705
705
  declare const Combobox: React$1.FC<ComboboxProps>;
706
706
 
707
+ interface MultiComboboxOption {
708
+ value: string;
709
+ label: string;
710
+ }
707
711
  interface MultiComboboxProps {
708
712
  id?: string;
709
- options: string[];
713
+ options: Array<string | MultiComboboxOption>;
710
714
  value: string[];
711
715
  onChange: (value: string[]) => void;
712
716
  placeholder?: string;
@@ -718,7 +722,9 @@ interface MultiComboboxProps {
718
722
  disabled?: boolean;
719
723
  size?: 'sm' | 'md' | 'lg';
720
724
  label?: string;
725
+ title?: string;
721
726
  required?: boolean;
727
+ displayFormat?: (option: MultiComboboxOption) => string;
722
728
  }
723
729
  declare const MultiCombobox: React$1.FC<MultiComboboxProps>;
724
730
 
package/dist/index.d.ts CHANGED
@@ -704,9 +704,13 @@ interface ComboboxProps {
704
704
  }
705
705
  declare const Combobox: React$1.FC<ComboboxProps>;
706
706
 
707
+ interface MultiComboboxOption {
708
+ value: string;
709
+ label: string;
710
+ }
707
711
  interface MultiComboboxProps {
708
712
  id?: string;
709
- options: string[];
713
+ options: Array<string | MultiComboboxOption>;
710
714
  value: string[];
711
715
  onChange: (value: string[]) => void;
712
716
  placeholder?: string;
@@ -718,7 +722,9 @@ interface MultiComboboxProps {
718
722
  disabled?: boolean;
719
723
  size?: 'sm' | 'md' | 'lg';
720
724
  label?: string;
725
+ title?: string;
721
726
  required?: boolean;
727
+ displayFormat?: (option: MultiComboboxOption) => string;
722
728
  }
723
729
  declare const MultiCombobox: React$1.FC<MultiComboboxProps>;
724
730
 
package/dist/index.js CHANGED
@@ -3819,7 +3819,11 @@ var Combobox = ({
3819
3819
  const autoId = useId2();
3820
3820
  const resolvedId = id ? String(id) : `combobox-${autoId}`;
3821
3821
  const labelId = label ? `${resolvedId}-label` : void 0;
3822
- const filteredOptions = React18.useMemo(() => options.filter((o) => getOptionLabel(o).toLowerCase().includes(query.toLowerCase())), [options, query]);
3822
+ const enableSearch = options.length > 10;
3823
+ const filteredOptions = React18.useMemo(
3824
+ () => enableSearch ? options.filter((o) => getOptionLabel(o).toLowerCase().includes(query.toLowerCase())) : options,
3825
+ [options, query, enableSearch]
3826
+ );
3823
3827
  const [dropdownPosition, setDropdownPosition] = React18.useState(null);
3824
3828
  const triggerRef = React18.useRef(null);
3825
3829
  const calculatePosition = React18.useCallback(() => {
@@ -3886,12 +3890,12 @@ var Combobox = ({
3886
3890
  if (!open) {
3887
3891
  setQuery("");
3888
3892
  setActiveIndex(null);
3889
- } else {
3893
+ } else if (enableSearch) {
3890
3894
  setTimeout(() => {
3891
3895
  inputRef.current?.focus();
3892
3896
  }, 100);
3893
3897
  }
3894
- }, [open]);
3898
+ }, [open, enableSearch]);
3895
3899
  const selectedOption = findOptionByValue(options, value);
3896
3900
  const displayValue = selectedOption ? getOptionLabel(selectedOption) : "";
3897
3901
  const dropdownContent = /* @__PURE__ */ jsx23(
@@ -3914,7 +3918,7 @@ var Combobox = ({
3914
3918
  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
3915
3919
  ),
3916
3920
  children: /* @__PURE__ */ jsxs21("div", { className: cn("rounded-md border bg-popover text-popover-foreground shadow-md", "backdrop-blur-sm bg-popover/95 border-border/60"), children: [
3917
- /* @__PURE__ */ jsxs21("div", { className: "relative p-3 border-b border-border/50 bg-muted/20", children: [
3921
+ enableSearch && /* @__PURE__ */ jsxs21("div", { className: "relative p-3 border-b border-border/50 bg-muted/20", children: [
3918
3922
  /* @__PURE__ */ jsx23(Search2, { className: "absolute left-6 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground transition-colors" }),
3919
3923
  /* @__PURE__ */ jsx23(
3920
3924
  "input",
@@ -4043,11 +4047,12 @@ var Combobox = ({
4043
4047
  setOpen(next);
4044
4048
  },
4045
4049
  className: cn(
4046
- "flex w-full items-center justify-between border border-input bg-background px-3 vanh",
4050
+ "flex w-full items-center justify-between border border-input bg-background px-3",
4047
4051
  radiusClass,
4048
4052
  sizeStyles8[size],
4049
- "ring-offset-background placeholder:text-muted-foreground outline-none focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 focus:ring-offset-0",
4053
+ "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
4050
4054
  "disabled:cursor-not-allowed disabled:opacity-50",
4055
+ "hover:bg-accent/5 transition-colors hover:border-primary/40 focus:border-primary",
4051
4056
  className
4052
4057
  ),
4053
4058
  children: [
@@ -5048,7 +5053,9 @@ var MultiCombobox = ({
5048
5053
  disabled = false,
5049
5054
  size = "md",
5050
5055
  label,
5051
- required
5056
+ title,
5057
+ required,
5058
+ displayFormat = (option) => option.label
5052
5059
  }) => {
5053
5060
  const [query, setQuery] = React22.useState("");
5054
5061
  const [open, setOpen] = React22.useState(false);
@@ -5105,14 +5112,22 @@ var MultiCombobox = ({
5105
5112
  document.removeEventListener("keydown", handleEscape);
5106
5113
  };
5107
5114
  }, [open]);
5108
- const filtered = options.filter((o) => o.toLowerCase().includes(query.toLowerCase()));
5109
- const toggleSelect = (val) => {
5110
- if (disabledOptions.includes(val)) return;
5111
- if (value.includes(val)) {
5112
- onChange(value.filter((v) => v !== val));
5115
+ const normalizedOptions = React22.useMemo(
5116
+ () => options.map((o) => typeof o === "string" ? { value: o, label: o } : { value: o.value, label: o.label }),
5117
+ [options]
5118
+ );
5119
+ const enableSearch = normalizedOptions.length > 10;
5120
+ const filtered = React22.useMemo(
5121
+ () => enableSearch ? normalizedOptions.filter((opt) => opt.label.toLowerCase().includes(query.toLowerCase())) : normalizedOptions,
5122
+ [normalizedOptions, query, enableSearch]
5123
+ );
5124
+ const toggleSelect = (optionValue) => {
5125
+ if (disabledOptions.includes(optionValue)) return;
5126
+ if (value.includes(optionValue)) {
5127
+ onChange(value.filter((v) => v !== optionValue));
5113
5128
  } else {
5114
5129
  if (!maxSelected || value.length < maxSelected) {
5115
- onChange([...value, val]);
5130
+ onChange([...value, optionValue]);
5116
5131
  }
5117
5132
  }
5118
5133
  };
@@ -5124,7 +5139,7 @@ var MultiCombobox = ({
5124
5139
  if (e.key === "Enter") {
5125
5140
  e.preventDefault();
5126
5141
  if (activeIndex !== null && filtered[activeIndex]) {
5127
- toggleSelect(filtered[activeIndex]);
5142
+ toggleSelect(filtered[activeIndex].value);
5128
5143
  }
5129
5144
  }
5130
5145
  };
@@ -5132,12 +5147,12 @@ var MultiCombobox = ({
5132
5147
  onChange([]);
5133
5148
  };
5134
5149
  React22.useEffect(() => {
5135
- if (open) {
5150
+ if (open && enableSearch) {
5136
5151
  setTimeout(() => {
5137
5152
  inputRef.current?.focus();
5138
5153
  }, 100);
5139
5154
  }
5140
- }, [open]);
5155
+ }, [open, enableSearch]);
5141
5156
  const sizeStyles8 = {
5142
5157
  sm: {
5143
5158
  trigger: "h-8 px-3 py-1.5 text-sm md:h-7 md:text-xs",
@@ -5166,6 +5181,20 @@ var MultiCombobox = ({
5166
5181
  const labelId = label ? `${resolvedId}-label` : void 0;
5167
5182
  const labelSize = size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm";
5168
5183
  return /* @__PURE__ */ jsxs24("div", { className: cn("w-full space-y-2 group", className), children: [
5184
+ title && /* @__PURE__ */ jsx28("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs24(
5185
+ "label",
5186
+ {
5187
+ className: cn(
5188
+ size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm",
5189
+ "font-medium transition-colors duration-200",
5190
+ disabled ? "text-muted-foreground" : "text-foreground group-focus-within:text-primary"
5191
+ ),
5192
+ children: [
5193
+ title,
5194
+ required && /* @__PURE__ */ jsx28("span", { className: "text-destructive ml-1", children: "*" })
5195
+ ]
5196
+ }
5197
+ ) }),
5169
5198
  label && /* @__PURE__ */ jsxs24(
5170
5199
  "label",
5171
5200
  {
@@ -5182,148 +5211,152 @@ var MultiCombobox = ({
5182
5211
  ]
5183
5212
  }
5184
5213
  ),
5185
- /* @__PURE__ */ jsxs24("div", { className: "relative w-full", children: [
5186
- /* @__PURE__ */ jsxs24("div", { className: "flex flex-wrap gap-1", children: [
5187
- showTags && value.map((item) => /* @__PURE__ */ jsxs24("span", { className: cn("flex items-center gap-1 rounded bg-accent text-accent-foreground", sizeStyles8[size].tag), children: [
5188
- item,
5189
- /* @__PURE__ */ jsx28(
5190
- "button",
5191
- {
5192
- type: "button",
5193
- onClick: (e) => {
5194
- e.preventDefault();
5195
- e.stopPropagation();
5196
- handleRemove(item);
5197
- },
5198
- className: "text-xs hover:text-destructive",
5199
- children: "\xD7"
5200
- }
5201
- )
5202
- ] }, item)),
5203
- showClear && value.length > 0 && /* @__PURE__ */ jsx28(
5204
- "button",
5205
- {
5206
- type: "button",
5207
- onClick: (e) => {
5208
- e.preventDefault();
5209
- e.stopPropagation();
5210
- handleClearAll();
5211
- },
5212
- className: "ml-auto text-xs text-muted-foreground hover:underline",
5213
- children: "Clear all"
5214
+ /* @__PURE__ */ jsx28("div", { className: "relative w-full" }),
5215
+ /* @__PURE__ */ jsxs24(
5216
+ "button",
5217
+ {
5218
+ ref: triggerRef,
5219
+ type: "button",
5220
+ disabled,
5221
+ id: resolvedId,
5222
+ "aria-labelledby": labelId,
5223
+ onClick: () => {
5224
+ const next = !open;
5225
+ if (next) {
5226
+ const pos = calculatePosition();
5227
+ if (pos) setDropdownPosition(pos);
5214
5228
  }
5215
- )
5216
- ] }),
5217
- /* @__PURE__ */ jsxs24(
5218
- "button",
5229
+ setOpen(next);
5230
+ },
5231
+ className: cn(
5232
+ "flex w-full items-center gap-2 rounded-lg border border-input bg-background shadow-sm min-h-[2.5rem]",
5233
+ "px-3 py-2",
5234
+ "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
5235
+ "disabled:cursor-not-allowed disabled:opacity-50"
5236
+ ),
5237
+ children: [
5238
+ /* @__PURE__ */ jsx28("div", { className: "flex items-center gap-1 flex-wrap min-h-[1.5rem] flex-1", children: value.length > 0 ? showTags ? value.map((itemValue) => {
5239
+ const option = normalizedOptions.find((o) => o.value === itemValue);
5240
+ return /* @__PURE__ */ jsxs24("span", { className: "inline-flex items-center gap-1 bg-accent text-accent-foreground rounded px-2 py-1 text-xs", children: [
5241
+ /* @__PURE__ */ jsx28("span", { className: "truncate max-w-[120px]", children: option ? displayFormat(option) : itemValue }),
5242
+ /* @__PURE__ */ jsx28(
5243
+ "button",
5244
+ {
5245
+ type: "button",
5246
+ onClick: (e) => {
5247
+ e.preventDefault();
5248
+ e.stopPropagation();
5249
+ handleRemove(itemValue);
5250
+ },
5251
+ className: "hover:text-destructive transition-colors cursor-pointer",
5252
+ children: "\xD7"
5253
+ }
5254
+ )
5255
+ ] }, itemValue);
5256
+ }) : /* @__PURE__ */ jsxs24("span", { className: "truncate text-sm", children: [
5257
+ value.length,
5258
+ " selected"
5259
+ ] }) : /* @__PURE__ */ jsx28("span", { className: "text-muted-foreground", children: placeholder || "Select..." }) }),
5260
+ /* @__PURE__ */ jsx28(ChevronDown2, { className: cn("opacity-50 transition-transform", sizeStyles8[size].icon, open && "rotate-180") })
5261
+ ]
5262
+ }
5263
+ ),
5264
+ open && dropdownPosition && typeof window !== "undefined" ? createPortal8(
5265
+ /* @__PURE__ */ jsx28(
5266
+ "div",
5219
5267
  {
5220
- ref: triggerRef,
5221
- type: "button",
5222
- disabled,
5223
- id: resolvedId,
5224
- "aria-labelledby": labelId,
5225
- onClick: () => {
5226
- const next = !open;
5227
- if (next) {
5228
- const pos = calculatePosition();
5229
- if (pos) setDropdownPosition(pos);
5230
- }
5231
- setOpen(next);
5268
+ "data-dropdown": "multicombobox",
5269
+ style: {
5270
+ position: "absolute",
5271
+ top: dropdownPosition?.top || 0,
5272
+ left: dropdownPosition?.left || 0,
5273
+ width: dropdownPosition?.width || 200,
5274
+ zIndex: 9999
5232
5275
  },
5276
+ "data-state": open ? "open" : "closed",
5233
5277
  className: cn(
5234
- "flex w-full items-center justify-between rounded-lg border border-input bg-background shadow-sm",
5235
- sizeStyles8[size].trigger,
5236
- "outline-none focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 focus:ring-offset-0",
5237
- "disabled:cursor-not-allowed disabled:opacity-50"
5278
+ "z-[9999]",
5279
+ "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
5280
+ "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
5238
5281
  ),
5239
- children: [
5240
- /* @__PURE__ */ jsx28("span", { className: "truncate", children: value.length ? `${value.length} selected` : placeholder || "Select..." }),
5241
- /* @__PURE__ */ jsx28(ChevronDown2, { className: cn("opacity-50 transition-transform", sizeStyles8[size].icon, open && "rotate-180") })
5242
- ]
5282
+ children: /* @__PURE__ */ jsxs24(
5283
+ "div",
5284
+ {
5285
+ className: cn(
5286
+ "rounded-md border bg-popover text-popover-foreground shadow-md",
5287
+ "backdrop-blur-sm bg-popover/95 border-border/60"
5288
+ ),
5289
+ children: [
5290
+ showClear && value.length > 0 && /* @__PURE__ */ jsx28("div", { className: "px-3 py-2 border-b border-border/60 flex justify-end", children: /* @__PURE__ */ jsx28(
5291
+ "button",
5292
+ {
5293
+ type: "button",
5294
+ onClick: (e) => {
5295
+ e.preventDefault();
5296
+ e.stopPropagation();
5297
+ handleClearAll();
5298
+ },
5299
+ className: "text-xs text-muted-foreground hover:underline cursor-pointer",
5300
+ children: "Clear all"
5301
+ }
5302
+ ) }),
5303
+ enableSearch && /* @__PURE__ */ jsxs24("div", { className: "relative border-b border-border/60", children: [
5304
+ /* @__PURE__ */ jsx28(Search3, { className: cn("absolute left-2 top-2.5 text-muted-foreground", sizeStyles8[size].icon) }),
5305
+ /* @__PURE__ */ jsx28(
5306
+ "input",
5307
+ {
5308
+ ref: inputRef,
5309
+ value: query,
5310
+ onChange: (e) => {
5311
+ setQuery(e.target.value);
5312
+ setActiveIndex(null);
5313
+ },
5314
+ onKeyDown: handleKeyDown,
5315
+ placeholder,
5316
+ className: cn("w-full rounded-t-md bg-transparent focus:outline-none cursor-text", sizeStyles8[size].search)
5317
+ }
5318
+ )
5319
+ ] }),
5320
+ /* @__PURE__ */ jsx28("ul", { className: cn("max-h-60 overflow-y-auto p-1", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: filtered.length ? filtered.map((item, index) => {
5321
+ const isSelected = value.includes(item.value);
5322
+ const isDisabled = disabledOptions.includes(item.value);
5323
+ return /* @__PURE__ */ jsxs24(
5324
+ "li",
5325
+ {
5326
+ ref: (node) => {
5327
+ listRef.current[index] = node;
5328
+ },
5329
+ onClick: (e) => {
5330
+ e.preventDefault();
5331
+ e.stopPropagation();
5332
+ toggleSelect(item.value);
5333
+ inputRef.current?.focus();
5334
+ },
5335
+ style: {
5336
+ animationDelay: open ? `${index * 25}ms` : "0ms"
5337
+ },
5338
+ className: cn(
5339
+ "dropdown-item flex cursor-pointer items-center justify-between rounded-sm transition-colors",
5340
+ sizeStyles8[size].item,
5341
+ "hover:bg-accent hover:text-accent-foreground",
5342
+ index === activeIndex && "bg-accent text-accent-foreground",
5343
+ isDisabled && "opacity-50 cursor-not-allowed pointer-events-none"
5344
+ ),
5345
+ children: [
5346
+ item.label,
5347
+ isSelected && /* @__PURE__ */ jsx28(Check4, { className: sizeStyles8[size].icon })
5348
+ ]
5349
+ },
5350
+ item.value
5351
+ );
5352
+ }) : /* @__PURE__ */ jsx28("li", { className: cn("px-3 py-2 text-muted-foreground", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: "No result." }) })
5353
+ ]
5354
+ }
5355
+ )
5243
5356
  }
5244
5357
  ),
5245
- open && dropdownPosition && typeof window !== "undefined" && createPortal8(
5246
- /* @__PURE__ */ jsx28(
5247
- "div",
5248
- {
5249
- "data-dropdown": "multicombobox",
5250
- style: {
5251
- position: "absolute",
5252
- top: dropdownPosition?.top || 0,
5253
- left: dropdownPosition?.left || 0,
5254
- width: dropdownPosition?.width || 200,
5255
- zIndex: 9999
5256
- },
5257
- "data-state": open ? "open" : "closed",
5258
- className: cn(
5259
- "z-[9999]",
5260
- "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
5261
- "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
5262
- ),
5263
- children: /* @__PURE__ */ jsxs24(
5264
- "div",
5265
- {
5266
- className: cn(
5267
- "rounded-md border bg-popover text-popover-foreground shadow-md",
5268
- "backdrop-blur-sm bg-popover/95 border-border/60"
5269
- ),
5270
- children: [
5271
- /* @__PURE__ */ jsxs24("div", { className: "relative border-b border-border/60", children: [
5272
- /* @__PURE__ */ jsx28(Search3, { className: cn("absolute left-2 top-2.5 text-muted-foreground", sizeStyles8[size].icon) }),
5273
- /* @__PURE__ */ jsx28(
5274
- "input",
5275
- {
5276
- ref: inputRef,
5277
- value: query,
5278
- onChange: (e) => {
5279
- setQuery(e.target.value);
5280
- setActiveIndex(null);
5281
- },
5282
- onKeyDown: handleKeyDown,
5283
- placeholder,
5284
- className: cn("w-full rounded-t-md bg-transparent focus:outline-none", sizeStyles8[size].search)
5285
- }
5286
- )
5287
- ] }),
5288
- /* @__PURE__ */ jsx28("ul", { className: cn("max-h-60 overflow-y-auto p-1", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: filtered.length ? filtered.map((item, index) => {
5289
- const isSelected = value.includes(item);
5290
- const isDisabled = disabledOptions.includes(item);
5291
- return /* @__PURE__ */ jsxs24(
5292
- "li",
5293
- {
5294
- ref: (node) => {
5295
- listRef.current[index] = node;
5296
- },
5297
- onClick: () => {
5298
- toggleSelect(item);
5299
- inputRef.current?.focus();
5300
- },
5301
- style: {
5302
- animationDelay: open ? `${index * 25}ms` : "0ms"
5303
- },
5304
- className: cn(
5305
- "dropdown-item flex cursor-pointer items-center justify-between rounded-sm transition-colors",
5306
- sizeStyles8[size].item,
5307
- "hover:bg-accent hover:text-accent-foreground",
5308
- index === activeIndex && "bg-accent text-accent-foreground",
5309
- isDisabled && "opacity-50 cursor-not-allowed pointer-events-none"
5310
- ),
5311
- children: [
5312
- item,
5313
- isSelected && /* @__PURE__ */ jsx28(Check4, { className: sizeStyles8[size].icon })
5314
- ]
5315
- },
5316
- item
5317
- );
5318
- }) : /* @__PURE__ */ jsx28("li", { className: cn("px-3 py-2 text-muted-foreground", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: "No result." }) })
5319
- ]
5320
- }
5321
- )
5322
- }
5323
- ),
5324
- document.body
5325
- )
5326
- ] })
5358
+ document.body
5359
+ ) : null
5327
5360
  ] });
5328
5361
  };
5329
5362