tembro 2.1.8 → 2.1.10

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 (192) hide show
  1. package/dist/components/actions/button-group.cjs +1 -1
  2. package/dist/components/actions/button-group.js +0 -1
  3. package/dist/components/form/form-date-range-input.cjs +1 -1
  4. package/dist/components/form/form-date-range-input.d.ts +1 -1
  5. package/dist/components/form/form-date-range-input.js +1 -1
  6. package/dist/components/form/form-input.cjs +1 -1
  7. package/dist/components/form/form-input.d.ts +7 -7
  8. package/dist/components/form/form-input.js +11 -11
  9. package/dist/components/inputs/index.cjs +1 -1
  10. package/dist/components/inputs/index.d.ts +0 -14
  11. package/dist/components/inputs/index.js +9 -23
  12. package/dist/components/inputs/public.cjs +1 -1
  13. package/dist/components/inputs/public.d.ts +0 -14
  14. package/dist/components/inputs/public.js +9 -23
  15. package/dist/components/ui/input/chrome.cjs +1 -0
  16. package/dist/components/{inputs/input-chrome.js → ui/input/chrome.js} +2 -2
  17. package/dist/components/ui/input/clearable.cjs +1 -0
  18. package/dist/components/{inputs/clearable-input.d.ts → ui/input/clearable.d.ts} +1 -1
  19. package/dist/components/{inputs/clearable-input.js → ui/input/clearable.js} +4 -4
  20. package/dist/components/{inputs/date-range-input.cjs → ui/input/date-range.cjs} +1 -1
  21. package/dist/components/{inputs/date-range-input.d.ts → ui/input/date-range.d.ts} +1 -1
  22. package/dist/components/{inputs/date-range-input.js → ui/input/date-range.js} +3 -3
  23. package/dist/components/ui/input/date.cjs +1 -0
  24. package/dist/components/{inputs/date-input.d.ts → ui/input/date.d.ts} +1 -1
  25. package/dist/components/{inputs/date-input.js → ui/input/date.js} +3 -3
  26. package/dist/components/ui/input/decorator.cjs +1 -0
  27. package/dist/components/{inputs/input-decorator.js → ui/input/decorator.js} +3 -3
  28. package/dist/components/ui/input/index.cjs +1 -1
  29. package/dist/components/ui/input/index.d.ts +10 -10
  30. package/dist/components/ui/input/index.js +13 -13
  31. package/dist/components/ui/input/masked.cjs +1 -0
  32. package/dist/components/{inputs/masked-input.d.ts → ui/input/masked.d.ts} +1 -1
  33. package/dist/components/{inputs/masked-input.js → ui/input/masked.js} +3 -3
  34. package/dist/components/ui/input/money.cjs +1 -0
  35. package/dist/components/{inputs/money-input.js → ui/input/money.js} +5 -5
  36. package/dist/components/ui/input/number.cjs +1 -0
  37. package/dist/components/{inputs/number-input.d.ts → ui/input/number.d.ts} +1 -1
  38. package/dist/components/{inputs/number-input.js → ui/input/number.js} +3 -3
  39. package/dist/components/{inputs → ui/input}/numeric-value.js +1 -1
  40. package/dist/components/ui/input/password.cjs +1 -0
  41. package/dist/components/{inputs/password-input.d.ts → ui/input/password.d.ts} +1 -1
  42. package/dist/components/{inputs/password-input.js → ui/input/password.js} +2 -2
  43. package/dist/components/ui/input/phone.cjs +1 -0
  44. package/dist/components/{inputs/phone-input.d.ts → ui/input/phone.d.ts} +1 -1
  45. package/dist/components/{inputs/phone-input.js → ui/input/phone.js} +2 -2
  46. package/dist/components/ui/input/quantity.cjs +1 -0
  47. package/dist/components/{inputs/quantity-input.js → ui/input/quantity.js} +6 -6
  48. package/dist/components/ui/input/search.cjs +1 -0
  49. package/dist/components/{inputs/search-input.d.ts → ui/input/search.d.ts} +1 -1
  50. package/dist/components/{inputs/search-input.js → ui/input/search.js} +2 -2
  51. package/dist/components/{inputs/input-value.js → ui/input/value.js} +1 -1
  52. package/dist/index.cjs +1 -1
  53. package/dist/index.js +124 -138
  54. package/dist/public-component-surface.cjs +1 -1
  55. package/dist/public-component-surface.js +0 -5
  56. package/dist/showcase/fallback.cjs +3 -3
  57. package/dist/showcase/fallback.js +119 -118
  58. package/dist/showcase/premium/combobox/mock.cjs +4 -3
  59. package/dist/showcase/premium/combobox/mock.js +2 -2
  60. package/dist/showcase/premium/combobox/showcase.cjs +1 -1
  61. package/dist/showcase/premium/combobox/showcase.js +2 -2
  62. package/dist/showcase/premium/date-input/mock.cjs +4 -3
  63. package/dist/showcase/premium/date-input/mock.js +2 -2
  64. package/dist/showcase/premium/date-input/showcase.cjs +1 -1
  65. package/dist/showcase/premium/date-input/showcase.js +2 -1
  66. package/dist/showcase/premium/date-range-input/mock.cjs +4 -3
  67. package/dist/showcase/premium/date-range-input/mock.js +2 -2
  68. package/dist/showcase/premium/date-range-input/showcase.cjs +1 -1
  69. package/dist/showcase/premium/date-range-input/showcase.js +2 -1
  70. package/dist/showcase/premium/masked-input/mock.cjs +4 -3
  71. package/dist/showcase/premium/masked-input/mock.js +2 -2
  72. package/dist/showcase/premium/masked-input/showcase.cjs +1 -1
  73. package/dist/showcase/premium/masked-input/showcase.js +2 -1
  74. package/dist/showcase/premium/money-input/mock.cjs +4 -3
  75. package/dist/showcase/premium/money-input/mock.js +2 -2
  76. package/dist/showcase/premium/money-input/showcase.cjs +1 -1
  77. package/dist/showcase/premium/money-input/showcase.js +2 -1
  78. package/dist/showcase/premium/number-input/mock.cjs +5 -7
  79. package/dist/showcase/premium/number-input/mock.js +2 -2
  80. package/dist/showcase/premium/number-input/showcase.cjs +1 -1
  81. package/dist/showcase/premium/number-input/showcase.js +2 -1
  82. package/dist/showcase/premium/password-input/mock.cjs +3 -2
  83. package/dist/showcase/premium/password-input/mock.js +1 -1
  84. package/dist/showcase/premium/password-input/showcase.cjs +1 -1
  85. package/dist/showcase/premium/password-input/showcase.js +2 -1
  86. package/dist/showcase/premium/phone-input/mock.cjs +5 -4
  87. package/dist/showcase/premium/phone-input/mock.js +2 -2
  88. package/dist/showcase/premium/phone-input/showcase.cjs +1 -1
  89. package/dist/showcase/premium/phone-input/showcase.js +2 -1
  90. package/dist/showcase/premium/quantity-input/mock.cjs +4 -3
  91. package/dist/showcase/premium/quantity-input/mock.js +2 -2
  92. package/dist/showcase/premium/quantity-input/showcase.cjs +1 -1
  93. package/dist/showcase/premium/quantity-input/showcase.js +2 -1
  94. package/dist/showcase/premium/search-input/mock.cjs +3 -2
  95. package/dist/showcase/premium/search-input/mock.js +1 -1
  96. package/dist/showcase/premium/search-input/showcase.cjs +1 -1
  97. package/dist/showcase/premium/search-input/showcase.js +2 -1
  98. package/dist/showcase/premium/simple-select/mock.cjs +3 -3
  99. package/dist/showcase/premium/simple-select/mock.js +2 -2
  100. package/dist/showcase/premium/simple-select/showcase.cjs +1 -1
  101. package/dist/showcase/premium/simple-select/showcase.js +1 -1
  102. package/dist/showcase/registry-specific.cjs +1 -1
  103. package/dist/showcase/registry-specific.js +92 -92
  104. package/dist/showcase/render-registry-preview.cjs +1 -1
  105. package/dist/showcase/render-registry-preview.js +214 -215
  106. package/dist/showcase/tembro-registry.json.cjs +1 -1
  107. package/dist/showcase/tembro-registry.json.js +2 -3
  108. package/package.json +1 -1
  109. package/packages/cli/dist/index.cjs +18 -18
  110. package/packages/cli/vendor/src/components/actions/button-group.tsx +0 -1
  111. package/packages/cli/vendor/src/components/form/form-date-range-input.tsx +5 -5
  112. package/packages/cli/vendor/src/components/form/form-input.tsx +7 -7
  113. package/packages/cli/vendor/src/components/inputs/index.ts +0 -14
  114. package/packages/cli/vendor/src/components/inputs/public.ts +0 -19
  115. package/packages/cli/vendor/src/components/{inputs/clearable-input.tsx → ui/input/clearable.tsx} +2 -2
  116. package/packages/cli/vendor/src/components/{inputs/date-range-input.tsx → ui/input/date-range.tsx} +1 -1
  117. package/packages/cli/vendor/src/components/{inputs/date-input.tsx → ui/input/date.tsx} +2 -2
  118. package/packages/cli/vendor/src/components/ui/input/index.tsx +11 -11
  119. package/packages/cli/vendor/src/components/{inputs/masked-input.tsx → ui/input/masked.tsx} +2 -2
  120. package/packages/cli/vendor/src/components/{inputs/money-input.tsx → ui/input/money.tsx} +3 -3
  121. package/packages/cli/vendor/src/components/{inputs/number-input.tsx → ui/input/number.tsx} +3 -3
  122. package/packages/cli/vendor/src/components/{inputs/password-input.tsx → ui/input/password.tsx} +1 -1
  123. package/packages/cli/vendor/src/components/{inputs/phone-input.tsx → ui/input/phone.tsx} +1 -1
  124. package/packages/cli/vendor/src/components/{inputs/quantity-input.tsx → ui/input/quantity.tsx} +3 -3
  125. package/packages/cli/vendor/src/components/{inputs/search-input.tsx → ui/input/search.tsx} +1 -1
  126. package/packages/cli/vendor/src/public-component-surface.ts +0 -1
  127. package/packages/cli/vendor/src/showcase/fallback.tsx +4 -6
  128. package/packages/cli/vendor/src/showcase/premium/combobox/mock.ts +4 -3
  129. package/packages/cli/vendor/src/showcase/premium/combobox/showcase.tsx +3 -3
  130. package/packages/cli/vendor/src/showcase/premium/date-input/mock.ts +4 -3
  131. package/packages/cli/vendor/src/showcase/premium/date-input/showcase.tsx +3 -2
  132. package/packages/cli/vendor/src/showcase/premium/date-range-input/mock.ts +4 -3
  133. package/packages/cli/vendor/src/showcase/premium/date-range-input/showcase.tsx +3 -2
  134. package/packages/cli/vendor/src/showcase/premium/masked-input/mock.ts +4 -3
  135. package/packages/cli/vendor/src/showcase/premium/masked-input/showcase.tsx +3 -2
  136. package/packages/cli/vendor/src/showcase/premium/money-input/mock.ts +4 -3
  137. package/packages/cli/vendor/src/showcase/premium/money-input/showcase.tsx +3 -2
  138. package/packages/cli/vendor/src/showcase/premium/number-input/mock.ts +5 -7
  139. package/packages/cli/vendor/src/showcase/premium/number-input/showcase.tsx +2 -2
  140. package/packages/cli/vendor/src/showcase/premium/password-input/mock.ts +3 -2
  141. package/packages/cli/vendor/src/showcase/premium/password-input/showcase.tsx +3 -2
  142. package/packages/cli/vendor/src/showcase/premium/phone-input/mock.ts +5 -4
  143. package/packages/cli/vendor/src/showcase/premium/phone-input/showcase.tsx +4 -3
  144. package/packages/cli/vendor/src/showcase/premium/quantity-input/mock.ts +4 -3
  145. package/packages/cli/vendor/src/showcase/premium/quantity-input/showcase.tsx +3 -2
  146. package/packages/cli/vendor/src/showcase/premium/search-input/mock.ts +3 -2
  147. package/packages/cli/vendor/src/showcase/premium/search-input/showcase.tsx +3 -2
  148. package/packages/cli/vendor/src/showcase/premium/simple-select/mock.ts +3 -3
  149. package/packages/cli/vendor/src/showcase/premium/simple-select/showcase.tsx +3 -3
  150. package/packages/cli/vendor/src/showcase/registry-specific.tsx +1 -2
  151. package/packages/cli/vendor/src/showcase/render-registry-preview.tsx +2 -4
  152. package/packages/cli/vendor/src/showcase/tembro-registry.json +1 -3
  153. package/registry.json +1 -3
  154. package/dist/components/inputs/clearable-input.cjs +0 -1
  155. package/dist/components/inputs/color-input.cjs +0 -1
  156. package/dist/components/inputs/color-input.d.ts +0 -11
  157. package/dist/components/inputs/color-input.js +0 -42
  158. package/dist/components/inputs/combobox.cjs +0 -1
  159. package/dist/components/inputs/combobox.d.ts +0 -29
  160. package/dist/components/inputs/combobox.js +0 -113
  161. package/dist/components/inputs/date-input.cjs +0 -1
  162. package/dist/components/inputs/input-chrome.cjs +0 -1
  163. package/dist/components/inputs/input-decorator.cjs +0 -1
  164. package/dist/components/inputs/masked-input.cjs +0 -1
  165. package/dist/components/inputs/money-input.cjs +0 -1
  166. package/dist/components/inputs/number-input.cjs +0 -1
  167. package/dist/components/inputs/password-input.cjs +0 -1
  168. package/dist/components/inputs/phone-input.cjs +0 -1
  169. package/dist/components/inputs/quantity-input.cjs +0 -1
  170. package/dist/components/inputs/quantity-stepper.cjs +0 -1
  171. package/dist/components/inputs/quantity-stepper.d.ts +0 -12
  172. package/dist/components/inputs/quantity-stepper.js +0 -52
  173. package/dist/components/inputs/search-input.cjs +0 -1
  174. package/dist/components/inputs/simple-select.cjs +0 -1
  175. package/dist/components/inputs/simple-select.d.ts +0 -13
  176. package/dist/components/inputs/simple-select.js +0 -8
  177. package/packages/cli/vendor/src/components/inputs/color-input.tsx +0 -49
  178. package/packages/cli/vendor/src/components/inputs/combobox.tsx +0 -180
  179. package/packages/cli/vendor/src/components/inputs/quantity-stepper.tsx +0 -51
  180. package/packages/cli/vendor/src/components/inputs/simple-select.tsx +0 -23
  181. /package/dist/components/{inputs/input-chrome.d.ts → ui/input/chrome.d.ts} +0 -0
  182. /package/dist/components/{inputs/input-decorator.d.ts → ui/input/decorator.d.ts} +0 -0
  183. /package/dist/components/{inputs/money-input.d.ts → ui/input/money.d.ts} +0 -0
  184. /package/dist/components/{inputs → ui/input}/numeric-value.cjs +0 -0
  185. /package/dist/components/{inputs → ui/input}/numeric-value.d.ts +0 -0
  186. /package/dist/components/{inputs/quantity-input.d.ts → ui/input/quantity.d.ts} +0 -0
  187. /package/dist/components/{inputs/input-value.cjs → ui/input/value.cjs} +0 -0
  188. /package/dist/components/{inputs/input-value.d.ts → ui/input/value.d.ts} +0 -0
  189. /package/packages/cli/vendor/src/components/{inputs/input-chrome.tsx → ui/input/chrome.tsx} +0 -0
  190. /package/packages/cli/vendor/src/components/{inputs/input-decorator.tsx → ui/input/decorator.tsx} +0 -0
  191. /package/packages/cli/vendor/src/components/{inputs → ui/input}/numeric-value.ts +0 -0
  192. /package/packages/cli/vendor/src/components/{inputs/input-value.ts → ui/input/value.ts} +0 -0
@@ -1 +0,0 @@
1
- "use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("./clearable-input.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime");var a=n.forwardRef(({searchIcon:e,loading:a=!1,loadingLabel:o=`Searching`,resultCount:s,shortcut:c,debounceMs:l,value:u,onValueChange:d,onDebouncedValueChange:f,placeholder:p=`Search...`,inputMode:m=`search`,trailing:h,showMetaOnClear:g=!1,disabled:_,...v},y)=>{let b=u==null?``:String(u);return n.useEffect(()=>{if(l==null||!f)return;let e=window.setTimeout(()=>f(b),l);return()=>window.clearTimeout(e)},[l,f,b]),(0,i.jsx)(t.ClearableInput,{ref:y,type:`search`,inputMode:m,placeholder:p,value:u,disabled:_||a,leadingIcon:e??(0,i.jsx)(r.SearchIcon,{}),trailing:(0,i.jsxs)(`span`,{"data-slot":`search-input-meta`,className:`inline-flex shrink-0 items-center gap-2 text-xs text-muted-foreground`,children:[a?(0,i.jsxs)(`span`,{"aria-live":`polite`,className:`inline-flex items-center gap-1.5`,children:[(0,i.jsx)(r.LoaderCircleIcon,{className:`size-3.5 animate-spin`,"aria-hidden":`true`}),(0,i.jsx)(`span`,{className:`sr-only`,children:o})]}):null,typeof s==`number`?(0,i.jsx)(`span`,{children:s}):null,c?(0,i.jsx)(`span`,{className:`rounded-md border border-border/80 bg-muted/60 px-1.5 py-0.5 font-mono`,children:c}):null,h]}),replaceTrailingWhenClear:!g,onValueChange:d,...v})});a.displayName=`SearchInput`,exports.SearchInput=a;
@@ -1 +0,0 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../ui/select/index.cjs");let t=require("react/jsx-runtime");function n(n){return(0,t.jsx)(e.Select,{...n})}exports.SimpleSelect=n;
@@ -1,13 +0,0 @@
1
- import { type SelectOption, type SelectProps } from "@/components/ui/select";
2
- export type SimpleSelectOption = SelectOption;
3
- /**
4
- * @deprecated Prefer `Select` with `options` for new usage.
5
- */
6
- export type SimpleSelectProps = Omit<SelectProps, "children"> & {
7
- options: SimpleSelectOption[];
8
- };
9
- /**
10
- * @deprecated Prefer `Select` with `options` for new usage.
11
- */
12
- declare function SimpleSelect(props: SimpleSelectProps): import("react").JSX.Element;
13
- export { SimpleSelect };
@@ -1,8 +0,0 @@
1
- import { Select as e } from "../ui/select/index.js";
2
- import { jsx as t } from "react/jsx-runtime";
3
- //#region src/components/inputs/simple-select.tsx
4
- function n(n) {
5
- return /* @__PURE__ */ t(e, { ...n });
6
- }
7
- //#endregion
8
- export { n as SimpleSelect };
@@ -1,49 +0,0 @@
1
- "use client"
2
-
3
- import * as React from "react"
4
-
5
- import { Input } from "@/components/ui/input"
6
- import { cn } from "@/lib/utils"
7
-
8
- export type ColorInputProps = Omit<React.ComponentProps<"input">, "type" | "value" | "defaultValue" | "onChange"> & {
9
- value?: string
10
- defaultValue?: string
11
- onValueChange?: (value: string) => void
12
- label?: React.ReactNode
13
- description?: React.ReactNode
14
- swatchClassName?: string
15
- }
16
-
17
- function ColorInput({ value, defaultValue = "#000000", onValueChange, label, description, swatchClassName, className, disabled, ...props }: ColorInputProps) {
18
- const [internalValue, setInternalValue] = React.useState(defaultValue)
19
- const currentValue = value ?? internalValue
20
-
21
- const updateValue = (nextValue: string) => {
22
- if (value === undefined) setInternalValue(nextValue)
23
- onValueChange?.(nextValue)
24
- }
25
-
26
- return (
27
- <div data-slot="color-input" className={cn("grid gap-2", className)}>
28
- {(label || description) && (
29
- <div className="grid gap-0.5">
30
- {label && <label className="text-sm font-medium text-foreground">{label}</label>}
31
- {description && <div className="text-xs text-muted-foreground">{description}</div>}
32
- </div>
33
- )}
34
- <div className="flex items-center gap-2">
35
- <input
36
- type="color"
37
- value={currentValue}
38
- disabled={disabled}
39
- className={cn("size-9 cursor-pointer rounded-md border bg-background p-1 disabled:cursor-not-allowed disabled:opacity-50", swatchClassName)}
40
- onChange={(event) => updateValue(event.currentTarget.value)}
41
- {...props}
42
- />
43
- <Input value={currentValue} disabled={disabled} onChange={(event) => updateValue(event.currentTarget.value)} className="font-mono" />
44
- </div>
45
- </div>
46
- )
47
- }
48
-
49
- export { ColorInput }
@@ -1,180 +0,0 @@
1
- "use client"
2
-
3
- import * as React from "react"
4
- import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react"
5
-
6
- import { Button } from "@/components/ui/button"
7
- import { Input } from "@/components/ui/input"
8
- import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
9
- import { cn } from "@/lib/utils"
10
-
11
- export type ComboboxOption<TValue extends string = string> = {
12
- value: TValue
13
- label: React.ReactNode
14
- searchValue?: string
15
- description?: React.ReactNode
16
- disabled?: boolean
17
- hidden?: boolean
18
- }
19
-
20
- export type ComboboxProps<TValue extends string = string> = React.ComponentProps<"div"> & {
21
- value?: TValue
22
- options: ComboboxOption<TValue>[]
23
- onValueChange?: (value: TValue | undefined, option?: ComboboxOption<TValue>) => void
24
- placeholder?: React.ReactNode
25
- searchPlaceholder?: string
26
- emptyLabel?: React.ReactNode
27
- disabled?: boolean
28
- invalid?: boolean
29
- clearable?: boolean
30
- allowDeselect?: boolean
31
- showSelectedDescription?: boolean
32
- onSearchChange?: (value: string) => void
33
- triggerClassName?: string
34
- contentClassName?: string
35
- optionClassName?: string
36
- searchClassName?: string
37
- }
38
-
39
- function Combobox<TValue extends string = string>({
40
- value,
41
- options,
42
- onValueChange,
43
- placeholder = "Select option",
44
- searchPlaceholder = "Search...",
45
- emptyLabel = "No option found",
46
- disabled = false,
47
- invalid,
48
- clearable = false,
49
- allowDeselect = false,
50
- showSelectedDescription = true,
51
- onSearchChange,
52
- triggerClassName,
53
- contentClassName,
54
- optionClassName,
55
- searchClassName,
56
- className,
57
- ...props
58
- }: ComboboxProps<TValue>) {
59
- const [open, setOpen] = React.useState(false)
60
- const [search, setSearch] = React.useState("")
61
- const selectedOption = options.find((option) => option.value === value)
62
- const normalizedSearch = search.trim().toLowerCase()
63
- const filteredOptions = options.filter((option) => {
64
- if (option.hidden) return false
65
- if (!normalizedSearch) return true
66
- return String(option.searchValue ?? option.label).toLowerCase().includes(normalizedSearch)
67
- })
68
-
69
- return (
70
- <div data-slot="combobox" className={cn("grid w-full gap-2", className)} {...props}>
71
- <Popover
72
- open={open}
73
- onOpenChange={(nextOpen) => {
74
- setOpen(nextOpen)
75
- if (!nextOpen) {
76
- setSearch("")
77
- onSearchChange?.("")
78
- }
79
- }}
80
- >
81
- <PopoverTrigger
82
- render={
83
- <Button
84
- type="button"
85
- variant="outline"
86
- disabled={disabled}
87
- aria-expanded={open}
88
- aria-invalid={invalid || undefined}
89
- className={cn("min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left", triggerClassName)}
90
- />
91
- }
92
- >
93
- <span className={cn("min-w-0 flex-1", !selectedOption && "text-muted-foreground")}>
94
- {selectedOption ? (
95
- <span className="flex min-w-0 flex-col items-start">
96
- <span className="truncate font-medium">{selectedOption.label}</span>
97
- {showSelectedDescription && selectedOption.description ? (
98
- <span className="truncate text-[11px] text-muted-foreground">{selectedOption.description}</span>
99
- ) : null}
100
- </span>
101
- ) : (
102
- <span className="truncate font-normal">{placeholder}</span>
103
- )}
104
- </span>
105
- {clearable && selectedOption && !disabled ? (
106
- <span
107
- role="button"
108
- tabIndex={0}
109
- aria-label="Clear value"
110
- className="inline-flex size-6 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted/55 hover:text-foreground"
111
- onClick={(event) => {
112
- event.preventDefault()
113
- event.stopPropagation()
114
- onValueChange?.(undefined, undefined)
115
- }}
116
- onKeyDown={(event) => {
117
- if (event.key === "Enter" || event.key === " ") {
118
- event.preventDefault()
119
- event.stopPropagation()
120
- onValueChange?.(undefined, undefined)
121
- }
122
- }}
123
- >
124
- ×
125
- </span>
126
- ) : null}
127
- <ChevronDownIcon className="size-4 opacity-60" />
128
- </PopoverTrigger>
129
- <PopoverContent
130
- align="start"
131
- data-slot="combobox-content"
132
- className={cn("w-(--anchor-width) min-w-72 rounded-[var(--aui-card-radius,var(--radius-lg))] border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]", contentClassName)}
133
- >
134
- <div className="relative mb-2">
135
- <SearchIcon className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
136
- <Input
137
- value={search}
138
- onChange={(event) => {
139
- setSearch(event.target.value)
140
- onSearchChange?.(event.target.value)
141
- }}
142
- placeholder={searchPlaceholder}
143
- className={cn("h-9 pl-8", searchClassName)}
144
- />
145
- </div>
146
- <div className="max-h-64 overflow-y-auto">
147
- {filteredOptions.length ? filteredOptions.map((option) => {
148
- const active = option.value === value
149
- return (
150
- <button
151
- key={option.value}
152
- type="button"
153
- disabled={option.disabled}
154
- data-selected={active || undefined}
155
- className={cn(
156
- "flex w-full items-start gap-2.5 rounded-[var(--radius-md)] border border-transparent px-3 py-2.5 text-left text-sm transition-colors hover:border-[color:color-mix(in_oklch,var(--primary),transparent_76%)] hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_93%)] disabled:pointer-events-none disabled:opacity-50 data-[selected=true]:border-[color:color-mix(in_oklch,var(--primary),transparent_68%)] data-[selected=true]:bg-[color:color-mix(in_oklch,var(--primary),transparent_89%)]",
157
- optionClassName
158
- )}
159
- onClick={() => {
160
- const nextValue = allowDeselect && active ? undefined : option.value
161
- onValueChange?.(nextValue, nextValue ? option : undefined)
162
- setOpen(false)
163
- }}
164
- >
165
- <span className={cn("mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border border-border/70", active && "border-primary bg-primary text-primary-foreground")}>{active && <CheckIcon className="size-3" />}</span>
166
- <span className="min-w-0">
167
- <span className="block truncate font-medium">{option.label}</span>
168
- {option.description && <span className="block text-xs text-muted-foreground">{option.description}</span>}
169
- </span>
170
- </button>
171
- )
172
- }) : <div className="rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-6 text-center text-sm text-muted-foreground">{emptyLabel}</div>}
173
- </div>
174
- </PopoverContent>
175
- </Popover>
176
- </div>
177
- )
178
- }
179
-
180
- export { Combobox }
@@ -1,51 +0,0 @@
1
- "use client"
2
-
3
- import * as React from "react"
4
- import { MinusIcon, PlusIcon } from "lucide-react"
5
-
6
- import { Button } from "@/components/ui/button"
7
- import { Input } from "@/components/ui/input"
8
- import { cn } from "@/lib/utils"
9
-
10
- export type QuantityStepperProps = Omit<React.ComponentProps<"div">, "onChange"> & {
11
- value?: number
12
- defaultValue?: number
13
- onValueChange?: (value: number) => void
14
- min?: number
15
- max?: number
16
- step?: number
17
- disabled?: boolean
18
- }
19
-
20
- function QuantityStepper({ value, defaultValue = 0, onValueChange, min = 0, max, step = 1, disabled = false, className, ...props }: QuantityStepperProps) {
21
- const [internalValue, setInternalValue] = React.useState(defaultValue)
22
- const currentValue = value ?? internalValue
23
-
24
- const updateValue = (nextValue: number) => {
25
- const normalized = Math.max(min, Math.min(max ?? nextValue, Number.isFinite(nextValue) ? nextValue : min))
26
- if (value === undefined) setInternalValue(normalized)
27
- onValueChange?.(normalized)
28
- }
29
-
30
- return (
31
- <div data-slot="quantity-stepper" className={cn("inline-flex items-center rounded-lg border bg-background", className)} {...props}>
32
- <Button type="button" variant="ghost" size="icon-sm" disabled={disabled || currentValue <= min} onClick={() => updateValue(currentValue - step)}>
33
- <MinusIcon />
34
- <span className="sr-only">Decrease</span>
35
- </Button>
36
- <Input
37
- value={currentValue}
38
- disabled={disabled}
39
- inputMode="numeric"
40
- className="h-8 w-14 border-0 text-center shadow-none focus-visible:ring-0"
41
- onChange={(event) => updateValue(Number(event.currentTarget.value))}
42
- />
43
- <Button type="button" variant="ghost" size="icon-sm" disabled={disabled || (max !== undefined && currentValue >= max)} onClick={() => updateValue(currentValue + step)}>
44
- <PlusIcon />
45
- <span className="sr-only">Increase</span>
46
- </Button>
47
- </div>
48
- )
49
- }
50
-
51
- export { QuantityStepper }
@@ -1,23 +0,0 @@
1
- import {
2
- Select,
3
- type SelectOption,
4
- type SelectProps,
5
- } from "@/components/ui/select"
6
-
7
- export type SimpleSelectOption = SelectOption
8
-
9
- /**
10
- * @deprecated Prefer `Select` with `options` for new usage.
11
- */
12
- export type SimpleSelectProps = Omit<SelectProps, "children"> & {
13
- options: SimpleSelectOption[]
14
- }
15
-
16
- /**
17
- * @deprecated Prefer `Select` with `options` for new usage.
18
- */
19
- function SimpleSelect(props: SimpleSelectProps) {
20
- return <Select {...props} />
21
- }
22
-
23
- export { SimpleSelect }