tembro 1.0.1 → 1.0.3

package/packages/cli/vendor/src/components/inputs/async-select.tsx

@@ -314,7 +314,7 @@ function AsyncStateMessage({
     <div
       data-slot="async-select-state"
       className={cn(
-        "rounded-[min(var(--radius-xl),16px)] border px-3 py-3 text-sm text-muted-foreground",
+        "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-3 text-sm leading-5 text-muted-foreground",
         className
       )}
     >
@@ -356,18 +356,18 @@ function AsyncOptionButton<
       data-selected={selected || undefined}
       data-disabled={option.disabled || undefined}
       className={cn(
-        "flex w-full items-start gap-2 rounded-[min(var(--radius-xl),16px)] border border-transparent px-3 py-2.5 text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] disabled:pointer-events-none disabled:opacity-50",
+        "flex w-full items-start gap-2.5 rounded-[var(--radius-md)] border border-transparent px-3 py-2.5 text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] hover:border-[color:color-mix(in_oklch,var(--primary),transparent_76%)] hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_93%)] focus-visible:border-[color:var(--aui-focus-ring,var(--ring))] focus-visible:shadow-[0_0_0_3px_var(--aui-focus-ring-soft,transparent)] 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%)] data-[selected=true]:text-foreground disabled:pointer-events-none disabled:opacity-50",
         optionClassName
       )}
       onClick={() => onSelect(option)}
     >
-      <span className="flex size-4 shrink-0 items-center justify-center">
-        {selected && <CheckIcon className="size-4" />}
+      <span className={cn("mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border border-border/70", selected && "border-primary bg-primary text-primary-foreground")}>
+        {selected && <CheckIcon className="size-3" />}
       </span>
       <span className="min-w-0 flex-1">
         {renderOption?.(option, { selected }) ?? (
           <span className="flex min-w-0 flex-col">
-            <span className="truncate">{option.label}</span>
+            <span className="truncate font-medium">{option.label}</span>
             {option.description && (
               <span className="truncate text-xs text-muted-foreground">{option.description}</span>
             )}
@@ -397,7 +397,7 @@ function AsyncCreateButton({
       type="button"
       disabled={isCreating}
       data-slot="async-select-create"
-      className="flex w-full items-center gap-2 rounded-[min(var(--radius-xl),16px)] border border-dashed px-3 py-2.5 text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] disabled:pointer-events-none disabled:opacity-50"
+      className="flex w-full items-center gap-2 rounded-[var(--radius-md)] border border-dashed border-[color:color-mix(in_oklch,var(--primary),transparent_55%)] bg-[color:color-mix(in_oklch,var(--primary),transparent_94%)] px-3 py-2.5 text-left text-sm font-medium text-foreground outline-none transition-[background-color,border-color,color,box-shadow] hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)] disabled:pointer-events-none disabled:opacity-50"
       onClick={onCreate}
     >
       <span className="flex size-4 shrink-0 items-center justify-center">
@@ -625,17 +625,17 @@ function AsyncSelect<
               aria-invalid={invalid || undefined}
               data-slot="async-select-trigger"
               className={cn(
-                "min-h-11 w-full justify-between",
+                "min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left",
                 triggerClassName
               )}
               onKeyDown={handleTriggerKeyDown}
             />
           }
         >
-          <span className="min-w-0 flex-1 text-left">
+          <span className="min-w-0 flex-1 text-left">
             {currentOption ? (
-              <span className="flex min-w-0 flex-col">
-                <span className="truncate">
+              <span className="flex min-w-0 flex-col gap-0.5">
+                <span className="truncate font-semibold">
                   {renderValue?.(currentOption) ?? currentOption.label}
                 </span>
                 {currentOption.disabled && currentOption.disabledReason && (
@@ -643,7 +643,7 @@ function AsyncSelect<
                 )}
               </span>
             ) : (
-              <span className="truncate">{labels?.placeholder ?? "Select"}</span>
+              <span className="truncate text-muted-foreground">{labels?.placeholder ?? "Select"}</span>
             )}
           </span>
           <span className="ml-2 flex shrink-0 items-center gap-1">
@@ -671,7 +671,7 @@ function AsyncSelect<
           align="start"
           data-slot="async-select-content"
           className={cn(
-            "w-(--anchor-width) gap-3 rounded-[var(--radius-2xl)] p-3.5",
+            "w-(--anchor-width) min-w-72 gap-3 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
           )}
         >
@@ -686,7 +686,7 @@ function AsyncSelect<
             />
           </div>
 
-          <div className="max-h-64 space-y-1 overflow-y-auto pr-1">
+          <div className="max-h-72 space-y-1 overflow-y-auto pr-1">
             {searchTooShort && flatOptions.length === 0 && (
               renderMinSearch?.(state) ?? (
                 <AsyncStateMessage>
@@ -1043,7 +1043,7 @@ function AsyncMultiSelect<
               aria-invalid={invalid || undefined}
               data-slot="async-select-trigger"
               className={cn(
-                "min-h-11 w-full justify-between",
+                "min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left",
                 triggerClassName
               )}
               onKeyDown={handleTriggerKeyDown}
@@ -1057,7 +1057,7 @@ function AsyncMultiSelect<
                   key={option.value}
                   data-slot="async-select-tag"
                   className={cn(
-                    "inline-flex max-w-full items-center gap-1 rounded-full border px-2 py-1 text-xs text-foreground",
+                    "inline-flex max-w-full items-center gap-1.5 rounded-[var(--radius-sm)] border border-[color:color-mix(in_oklch,var(--primary),transparent_70%)] bg-[color:color-mix(in_oklch,var(--primary),transparent_92%)] px-2 py-1 text-xs font-medium text-foreground",
                     tagClassName
                   )}
                 >
@@ -1076,7 +1076,7 @@ function AsyncMultiSelect<
                       role="button"
                       tabIndex={0}
                       data-slot="async-select-tag-remove"
-                      className="rounded-full text-muted-foreground transition-colors hover:text-foreground"
+                      className="rounded-full p-0.5 text-muted-foreground transition-colors hover:bg-background hover:text-foreground"
                       aria-label={`Remove ${getOptionLabelText(option)}`}
                       onClick={(event) => {
                         stopInteractivePropagation(event)
@@ -1101,7 +1101,7 @@ function AsyncMultiSelect<
                 role="button"
                 tabIndex={0}
                 data-slot="async-select-clear"
-                className="rounded-full border p-1 text-muted-foreground transition-colors hover:text-foreground"
+                className="rounded-full border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground"
                 aria-label={labels?.clearAll ?? labels?.clear ?? "Clear all"}
                 onClick={handleClear}
                 onKeyDown={(event) => {
@@ -1121,7 +1121,7 @@ function AsyncMultiSelect<
           align="start"
           data-slot="async-select-content"
           className={cn(
-            "w-(--anchor-width) gap-3 rounded-[var(--radius-2xl)] p-3.5",
+            "w-(--anchor-width) min-w-72 gap-3 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
           )}
         >
@@ -1136,7 +1136,7 @@ function AsyncMultiSelect<
             />
           </div>
 
-          <div data-slot="async-select-meta" className="flex flex-wrap items-center justify-between gap-2 rounded-[min(var(--radius-xl),16px)] border px-3 py-2 text-xs text-muted-foreground">
+          <div data-slot="async-select-meta" className="flex flex-wrap items-center justify-between gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_62%)] px-3 py-2 text-xs text-muted-foreground">
             {hasValue && labels?.selectedCount && <span>{labels.selectedCount(values.length)}</span>}
             {isMaxReached &&
               (renderMaxSelected?.(state) ?? (
@@ -1147,7 +1147,7 @@ function AsyncMultiSelect<
                 <button
                   type="button"
                   data-slot="async-select-meta-action"
-                  className="rounded-full border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background"
+                  className="rounded-[var(--radius-sm)] border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background"
                   onClick={handleSelectAllVisible}
                 >
                   {labels?.selectAll ?? "Select all"}
@@ -1157,7 +1157,7 @@ function AsyncMultiSelect<
                 <button
                   type="button"
                   data-slot="async-select-meta-action"
-                  className="rounded-full border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background"
+                  className="rounded-[var(--radius-sm)] border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background"
                   onClick={() => onValueChange?.([], [])}
                 >
                   {labels?.clearAll ?? labels?.clear ?? "Clear all"}
@@ -1166,7 +1166,7 @@ function AsyncMultiSelect<
             </div>
           </div>
 
-          <div className="max-h-64 space-y-1 overflow-y-auto pr-1">
+          <div className="max-h-72 space-y-1 overflow-y-auto pr-1">
             {searchTooShort && flatOptions.length === 0 && (
               renderMinSearch?.(state) ?? (
                 <AsyncStateMessage>

package/packages/cli/vendor/src/components/inputs/combobox.tsx

@@ -1,9 +1,10 @@
 import * as React from "react"
 import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react"
 
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { cn } from "@/lib/utils"
 
 export type ComboboxOption<TValue extends string = string> = {
   value: TValue
@@ -22,8 +23,12 @@ export type ComboboxProps<TValue extends string = string> = React.ComponentProps
   searchPlaceholder?: string
   emptyLabel?: React.ReactNode
   disabled?: boolean
-  invalid?: boolean
-}
+  invalid?: boolean
+  triggerClassName?: string
+  contentClassName?: string
+  optionClassName?: string
+  searchClassName?: string
+}
 
 function Combobox<TValue extends string = string>({
   value,
@@ -32,11 +37,15 @@ function Combobox<TValue extends string = string>({
   placeholder = "Select option",
   searchPlaceholder = "Search...",
   emptyLabel = "No option found",
-  disabled = false,
-  invalid,
-  className,
-  ...props
-}: ComboboxProps<TValue>) {
+  disabled = false,
+  invalid,
+  triggerClassName,
+  contentClassName,
+  optionClassName,
+  searchClassName,
+  className,
+  ...props
+}: ComboboxProps<TValue>) {
   const [open, setOpen] = React.useState(false)
   const [search, setSearch] = React.useState("")
   const selectedOption = options.find((option) => option.value === value)
@@ -47,45 +56,66 @@ function Combobox<TValue extends string = string>({
     return String(option.searchValue ?? option.label).toLowerCase().includes(normalizedSearch)
   })
 
-  return (
-    <div data-slot="combobox" className={cn("relative grid gap-2", className)} {...props}>
-      <Button type="button" variant="outline" disabled={disabled} aria-invalid={invalid || undefined} className="w-full justify-between" onClick={() => setOpen((value) => !value)}>
-        <span className={cn("truncate", !selectedOption && "text-muted-foreground")}>{selectedOption?.label ?? placeholder}</span>
-        <ChevronDownIcon className="size-4 opacity-60" />
-      </Button>
-      {open && (
-        <div className="absolute top-full z-30 mt-2 w-full rounded-md border bg-popover p-2 text-popover-foreground shadow-md">
-          <div className="relative mb-2">
-            <SearchIcon className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-            <Input value={search} onChange={(event) => setSearch(event.target.value)} placeholder={searchPlaceholder} className="h-9 pl-8" />
-          </div>
-          <div className="max-h-64 overflow-y-auto">
-            {filteredOptions.length ? filteredOptions.map((option) => {
+  return (
+    <div data-slot="combobox" className={cn("grid w-full gap-2", className)} {...props}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger
+          render={
+            <Button
+              type="button"
+              variant="outline"
+              disabled={disabled}
+              aria-expanded={open}
+              aria-invalid={invalid || undefined}
+              className={cn("min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left", triggerClassName)}
+            />
+          }
+        >
+          <span className={cn("min-w-0 flex-1 truncate font-medium", !selectedOption && "font-normal text-muted-foreground")}>
+            {selectedOption?.label ?? placeholder}
+          </span>
+          <ChevronDownIcon className="size-4 opacity-60" />
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          data-slot="combobox-content"
+          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)}
+        >
+          <div className="relative mb-2">
+            <SearchIcon className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input value={search} onChange={(event) => setSearch(event.target.value)} placeholder={searchPlaceholder} className={cn("h-9 pl-8", searchClassName)} />
+          </div>
+          <div className="max-h-64 overflow-y-auto">
+            {filteredOptions.length ? filteredOptions.map((option) => {
               const active = option.value === value
               return (
                 <button
-                  key={option.value}
-                  type="button"
-                  disabled={option.disabled}
-                  className={cn("flex w-full items-start gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-muted disabled:pointer-events-none disabled:opacity-50", active && "bg-muted")}
-                  onClick={() => {
-                    onValueChange?.(option.value, option)
-                    setOpen(false)
-                  }}
-                >
-                  <span className="mt-0.5 flex size-4 shrink-0 items-center justify-center">{active && <CheckIcon className="size-4" />}</span>
+                  key={option.value}
+                  type="button"
+                  disabled={option.disabled}
+                  data-selected={active || undefined}
+                  className={cn(
+                    "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%)]",
+                    optionClassName
+                  )}
+                  onClick={() => {
+                    onValueChange?.(option.value, option)
+                    setOpen(false)
+                  }}
+                >
+                  <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>
                   <span className="min-w-0">
                     <span className="block truncate font-medium">{option.label}</span>
                     {option.description && <span className="block text-xs text-muted-foreground">{option.description}</span>}
                   </span>
                 </button>
               )
-            }) : <div className="px-2 py-6 text-center text-sm text-muted-foreground">{emptyLabel}</div>}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
+            }) : <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>}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
 
 export { Combobox }

package/packages/cli/vendor/src/components/inputs/simple-select.tsx

@@ -29,7 +29,7 @@ export type SimpleSelectProps = Omit<
   searchPlaceholder?: string
   emptyLabel?: React.ReactNode
   clearLabel?: string
-  size?: "sm" | "default"
+  size?: "sm" | "default" | "lg"
   clearable?: boolean
   searchable?: boolean
   loading?: boolean
@@ -94,7 +94,7 @@ function SimpleSelect({
           <button
             type="button"
             aria-label={clearLabel}
-            className="ml-1 rounded-sm p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className="ml-1 rounded-[var(--radius-sm)] border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             onClick={(event) => {
               event.preventDefault()
               stopInteractivePropagation(event)
@@ -114,7 +114,7 @@ function SimpleSelect({
         )}
       >
         {searchable ? (
-          <div data-slot="select-search" className="sticky top-0 z-10 mb-1 flex items-center gap-2 rounded-[min(var(--radius-lg),14px)] border px-2.5 py-2 text-sm">
+          <div data-slot="select-search" className="sticky top-0 z-10 mb-1 flex items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-popover px-2.5 py-2 text-sm">
             <SearchIcon className="size-4 text-muted-foreground" />
             <input
               value={search}
@@ -126,12 +126,12 @@ function SimpleSelect({
         ) : null}
 
         {loading ? (
-          <div data-slot="select-state" className="flex items-center gap-2 rounded-[min(var(--radius-lg),14px)] px-3 py-2.5 text-sm text-muted-foreground">
+          <div data-slot="select-state" className="flex items-center gap-2 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-2.5 text-sm text-muted-foreground">
             <LoaderCircleIcon className="size-4 animate-spin" />
             {loadingLabel}
           </div>
         ) : filteredOptions.length === 0 ? (
-          <div data-slot="select-state" className="rounded-[min(var(--radius-lg),14px)] px-3 py-2.5 text-sm text-muted-foreground">{emptyLabel}</div>
+          <div data-slot="select-state" 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-2.5 text-sm text-muted-foreground">{emptyLabel}</div>
         ) : (
           filteredOptions.map((option) => {
             const selected = option.value === value
@@ -140,7 +140,7 @@ function SimpleSelect({
                 key={option.value}
                 value={option.value}
                 disabled={option.disabled}
-                className={cn("rounded-[min(var(--radius-lg),14px)]", itemClassName)}
+                className={cn("rounded-[var(--radius-md)]", itemClassName)}
               >
                 {renderOption ? (
                   renderOption(option, { selected })

package/packages/cli/vendor/src/components/ui/button.tsx

@@ -0,0 +1,2 @@
+export * from "./button/index"
+

package/packages/cli/vendor/src/components/ui/input.tsx

@@ -0,0 +1,2 @@
+export * from "./input/index"
+

package/packages/cli/vendor/src/components/ui/select/index.tsx

@@ -9,7 +9,7 @@ import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
 export type SelectRootProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>
 export type SelectGroupProps = SelectPrimitive.Group.Props
 export type SelectValueProps = SelectPrimitive.Value.Props
-export type SelectTriggerProps = SelectPrimitive.Trigger.Props & { size?: "sm" | "default" }
+export type SelectTriggerProps = SelectPrimitive.Trigger.Props & { size?: "sm" | "default" | "lg" }
 export type SelectContentProps = SelectPrimitive.Popup.Props &
   Pick<
     SelectPrimitive.Positioner.Props,
@@ -54,7 +54,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit min-w-36 items-center justify-between gap-2 rounded-[var(--aui-control-radius,var(--radius-lg))] border border-[color:var(--aui-control-border-strong,var(--input))] bg-[color:var(--aui-control-surface,var(--background))] py-2 pr-3 pl-3 text-sm whitespace-nowrap text-foreground shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))] transition-[background-color,border-color,box-shadow,color] outline-none select-none hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] hover:shadow-[var(--aui-control-shadow-hover,0_2px_6px_rgba(15,23,42,0.06))] focus-visible:border-[color:var(--ring)] focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)] disabled:cursor-not-allowed disabled:border-[color:color-mix(in_oklch,var(--border),transparent_18%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:opacity-100 aria-invalid:border-destructive aria-invalid:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-danger-ring,var(--destructive)),0_0_0_5px_var(--aui-danger-ring-soft,transparent)] data-placeholder:text-muted-foreground/74 data-[size=default]:h-10 data-[size=sm]:h-9 data-[size=sm]:rounded-[var(--radius-sm)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-full min-w-0 items-center justify-between gap-2 rounded-[var(--aui-control-radius,var(--radius-md))] border border-[color:var(--aui-control-border-strong,var(--input))] bg-[color:var(--aui-control-surface,var(--background))] pr-3 pl-3 text-sm whitespace-nowrap text-foreground shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))] transition-[background-color,border-color,box-shadow,color] outline-none select-none hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] hover:shadow-[var(--aui-control-shadow-hover,0_2px_6px_rgba(15,23,42,0.06))] focus-visible:border-[color:var(--ring)] focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_4px_var(--aui-focus-ring-soft,transparent)] disabled:cursor-not-allowed disabled:border-[color:color-mix(in_oklch,var(--border),transparent_18%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:opacity-100 aria-invalid:border-destructive aria-invalid:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-danger-ring,var(--destructive)),0_0_0_4px_var(--aui-danger-ring-soft,transparent)] data-placeholder:text-muted-foreground/74 data-[size=default]:h-10 data-[size=lg]:h-11 data-[size=sm]:h-9 data-[size=sm]:rounded-[var(--radius-sm)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:min-w-0 *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -92,7 +92,7 @@ function SelectContent({
         <SelectPrimitive.Popup
           data-slot="select-content"
           data-align-trigger={alignItemWithTrigger}
-          className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-44 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-popover p-1.5 text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className)}
+          className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-52 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-popover p-1.5 text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className)}
           {...props}
         >
           <SelectScrollUpButton />
@@ -126,7 +126,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "relative flex w-full cursor-default items-center gap-1.5 rounded-[var(--radius-md)] border border-transparent py-2.5 pr-9 pl-3 text-sm text-[color:var(--aui-page-muted-strong,var(--foreground))] outline-hidden select-none transition-[background-color,border-color,color,box-shadow,transform] data-[highlighted]:border-[color:var(--aui-control-hover-border,var(--ring))] data-[highlighted]:bg-[color:var(--aui-control-surface-hover,var(--muted))] data-[highlighted]:text-foreground data-[selected]:font-semibold data-[selected]:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "relative flex w-full cursor-default items-center gap-2 rounded-[var(--radius-md)] border border-transparent py-2.5 pr-9 pl-3 text-sm text-[color:var(--aui-page-muted-strong,var(--foreground))] outline-hidden select-none transition-[background-color,border-color,color,box-shadow,transform] data-[highlighted]:border-[color:color-mix(in_oklch,var(--primary),transparent_72%)] data-[highlighted]:bg-[color:color-mix(in_oklch,var(--primary),transparent_92%)] data-[highlighted]:text-foreground data-[selected]:border-[color:color-mix(in_oklch,var(--primary),transparent_70%)] data-[selected]:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)] data-[selected]:font-semibold data-[selected]:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:min-w-0 *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )}
       {...props}

package/packages/cli/vendor/src/showcase/tembro-registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://tembro.dev/registry.schema.json",
   "name": "tembro",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Reusable React + TypeScript UI kit registry",
   "groups": {
     "ui": [

package/registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://tembro.dev/registry.schema.json",
   "name": "tembro",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Reusable React + TypeScript UI kit registry",
   "groups": {
     "ui": [