tembro 3.1.1 → 3.1.6

package/packages/cli/vendor/src/components/form/form-field-shell.tsx

@@ -103,7 +103,7 @@ function FormFieldShell({
   layout = "vertical",
   descriptionPosition = "top",
   labelAction,
-  requiredIndicator = <span className="ml-1 text-destructive">*</span>,
+  requiredIndicator = <span data-slot="form-field-required">*</span>,
   errorIcon,
   showErrorIcon = true,
   disabled = false,
@@ -119,7 +119,7 @@ function FormFieldShell({
   const hasHeader = Boolean(label || labelAction)
   const hasDescriptionTop = description && descriptionPosition === "top"
   const hasDescriptionBottom = description && descriptionPosition === "bottom"
-  const resolvedErrorIcon = errorIcon ?? <AlertCircleIcon className="size-3.5" />
+  const resolvedErrorIcon = errorIcon ?? <AlertCircleIcon data-icon="error" />
 
   const header = hasHeader ? (
     <div
@@ -136,9 +136,7 @@ function FormFieldShell({
           htmlFor={htmlFor}
           id={labelId}
           className={cn(
-            "min-w-0 text-sm font-semibold leading-none tracking-tight text-foreground",
-            disabled && "cursor-not-allowed opacity-60",
-            readOnly && "opacity-80",
+            "min-w-0",
             labelClassName
           )}
         >
@@ -161,14 +159,14 @@ function FormFieldShell({
     <p
       data-slot="form-field-description"
       id={descriptionId}
-      className={cn("text-sm leading-6 text-muted-foreground", disabled && "opacity-60", descriptionClassName)}
+      className={descriptionClassName}
     >
       {description}
     </p>
   ) : null
 
   const content = (
-    <div data-slot="form-field-content" className={cn("min-w-0 space-y-2", contentClassName)}>
+    <div data-slot="form-field-content" className={cn("flex min-w-0 flex-col gap-2", contentClassName)}>
       {children}
     </div>
   )
@@ -180,11 +178,11 @@ function FormFieldShell({
       role="alert"
       aria-live="polite"
       className={cn(
-        "flex items-start gap-2 rounded-[min(var(--radius-xl),16px)] border border-destructive/18 bg-destructive/8 px-3 py-2 text-sm font-medium leading-6 text-destructive",
+        "flex items-start gap-2",
         errorClassName
       )}
     >
-      {showErrorIcon && <span className="mt-1 shrink-0">{resolvedErrorIcon}</span>}
+      {showErrorIcon && <span data-slot="form-field-error-icon" className="shrink-0">{resolvedErrorIcon}</span>}
       <span className="min-w-0">{error}</span>
     </p>
   ) : null
@@ -192,14 +190,13 @@ function FormFieldShell({
   const successNode = success && !error ? (
     <p
       data-slot="form-field-success"
-      className="rounded-[min(var(--radius-xl),16px)] border border-emerald-500/18 bg-emerald-500/8 px-3 py-2 text-sm font-medium leading-6 text-emerald-700 dark:text-emerald-300"
     >
       {success}
     </p>
   ) : null
 
   const loadingNode = loading ? (
-    <p data-slot="form-field-loading" className="text-sm leading-6 text-muted-foreground">
+    <p data-slot="form-field-loading">
       Loading...
     </p>
   ) : null
@@ -214,7 +211,7 @@ function FormFieldShell({
       data-disabled={disabled || undefined}
       data-readonly={readOnly || undefined}
       aria-disabled={disabled || undefined}
-      className={cn(layoutClassName[layout], "rounded-[var(--radius-2xl)]", className)}
+      className={cn(layoutClassName[layout], className)}
       {...props}
     >
       {layout === "horizontal" ? (

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

@@ -328,11 +328,8 @@ function AsyncStateMessage({
 }) {
   return (
     <div
-      data-slot="async-select-state"
-      className={cn(
-        "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
-      )}
+      data-slot="async-select-state"
+      className={className}
     >
       {children}
     </div>
@@ -371,14 +368,14 @@ function AsyncOptionButton<
       data-slot="async-select-option"
       data-selected={selected || undefined}
       data-disabled={option.disabled || 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 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",
+      className={cn(
+        "flex w-full items-start gap-2.5 text-left outline-none disabled:pointer-events-none",
         optionClassName
       )}
       onClick={() => onSelect(option)}
     >
-      <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 data-slot="async-select-option-indicator" data-selected={selected || undefined} className="mt-0.5 shrink-0">
+        {selected && <CheckIcon data-icon="selected" />}
       </span>
       <span className="min-w-0 flex-1">
         {renderOption?.(option, { selected }) ?? (
@@ -412,8 +409,8 @@ function AsyncCreateButton({
     <button
       type="button"
       disabled={isCreating}
-      data-slot="async-select-create"
-      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"
+      data-slot="async-select-create"
+      className="flex w-full items-center gap-2 text-left outline-none disabled:pointer-events-none"
       onClick={onCreate}
     >
       <span className="flex size-4 shrink-0 items-center justify-center">
@@ -641,11 +638,8 @@ function AsyncSingleSelect<
               disabled={disabled}
               aria-expanded={open}
               aria-invalid={invalid || undefined}
-              data-slot="async-select-trigger"
-              className={cn(
-                "min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left",
-                triggerClassName
-              )}
+              data-slot="async-select-trigger"
+              className={cn("w-full justify-between text-left", triggerClassName)}
               onKeyDown={handleTriggerKeyDown}
             />
           }
@@ -668,10 +662,10 @@ function AsyncSingleSelect<
           </span>
           <span className="ml-2 flex shrink-0 items-center gap-1">
             {canClear && (
-              <span
-                role="button"
-                tabIndex={0}
-                className="rounded-full border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground"
+              <span
+                role="button"
+                tabIndex={0}
+                data-slot="async-select-clear"
                 aria-label={labels?.clear ?? "Clear"}
                 onClick={handleClear}
                 onKeyDown={(event) => {
@@ -681,7 +675,7 @@ function AsyncSingleSelect<
                   clearSelection()
                 }}
               >
-                <XIcon className="size-3.5" />
+                <XIcon data-icon="clear" />
               </span>
             )}
             <ChevronsUpDownIcon className="size-4 opacity-60" />
@@ -689,14 +683,11 @@ function AsyncSingleSelect<
         </PopoverTrigger>
         <PopoverContent
           align="start"
-          data-slot="async-select-content"
-          className={cn(
-            "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
-          )}
+          data-slot="async-select-content"
+          className={cn("w-(--anchor-width) min-w-72 gap-3", contentClassName)}
         >
           <div data-slot="async-select-search-wrap" className="relative">
-            <SearchIcon className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <SearchIcon data-slot="async-select-search-icon" />
             <Input
               data-slot="async-select-search"
               value={search}
@@ -706,7 +697,7 @@ function AsyncSingleSelect<
             />
           </div>
 
-          <div className="max-h-72 space-y-1 overflow-y-auto pr-1">
+          <div className="flex max-h-72 flex-col gap-1 overflow-y-auto pr-1">
             {searchTooShort && flatOptions.length === 0 && (
               renderMinSearch?.(state) ?? (
                 <AsyncStateMessage>
@@ -727,7 +718,7 @@ function AsyncSingleSelect<
 
             {!isLoading && hasError &&
               (renderError?.(state) ?? (
-                <AsyncStateMessage className="text-destructive">
+                <AsyncStateMessage data-tone="danger">
                   {labels?.error ?? "Could not load options"}
                 </AsyncStateMessage>
               ))}
@@ -751,9 +742,7 @@ function AsyncSingleSelect<
               optionGroups.map((group, groupIndex) => (
                 <div key={groupIndex}>
                   {group.label && (
-                    <div className="sticky top-0 z-10 bg-popover px-2 py-1 text-xs font-medium text-muted-foreground">
-                      {group.label}
-                    </div>
+                    <div data-slot="async-select-group-label" className="sticky top-0">{group.label}</div>
                   )}
                   {group.options.map((option) => (
                     <AsyncOptionButton
@@ -816,9 +805,9 @@ function AsyncMultiSelect<
   contentClassName,
   searchClassName,
   optionClassName,
-  tagClassName,
-  invalid,
-  ...props
+  tagClassName,
+  invalid,
+  ...props
 }: AsyncMultiSelectProps<TValue, TData, TOption>) {
   const values = React.useMemo(() => value ?? [], [value])
   const selectedValueKey = values.join("|")
@@ -1059,7 +1048,7 @@ function AsyncMultiSelect<
   }
 
   return (
-    <div data-slot="async-multi-select" className={cn("w-full", className)} {...props}>
+    <div data-slot="async-multi-select" className={cn("w-full", className)} {...props}>
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger
           render={
@@ -1069,11 +1058,8 @@ function AsyncMultiSelect<
               disabled={disabled}
               aria-expanded={open}
               aria-invalid={invalid || undefined}
-              data-slot="async-select-trigger"
-              className={cn(
-                "min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left",
-                triggerClassName
-              )}
+              data-slot="async-select-trigger"
+              className={cn("w-full justify-between text-left", triggerClassName)}
               onKeyDown={handleTriggerKeyDown}
             />
           }
@@ -1084,11 +1070,8 @@ function AsyncMultiSelect<
               {visibleTagOptions.map((option) => (
                 <span
                   key={option.value}
-                  data-slot="async-select-tag"
-                  className={cn(
-                    "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
-                  )}
+                  data-slot="async-select-tag"
+                  className={cn("inline-flex max-w-full items-center gap-1.5", tagClassName)}
                 >
                   <span className="flex min-w-0 flex-col">
                     <span className="truncate">
@@ -1106,8 +1089,7 @@ function AsyncMultiSelect<
                     <span
                       role="button"
                       tabIndex={0}
-                      data-slot="async-select-tag-remove"
-                      className="rounded-full p-0.5 text-muted-foreground transition-colors hover:bg-background hover:text-foreground"
+                      data-slot="async-select-tag-remove"
                       aria-label={`Remove ${getOptionLabelText(option)}`}
                       onClick={(event) => {
                         stopInteractivePropagation(event)
@@ -1115,18 +1097,15 @@ function AsyncMultiSelect<
                       }}
                       onKeyDown={(event) => handleTagRemoveKeyDown(event, option)}
                     >
-                      <XIcon className="size-3" />
+                      <XIcon data-icon="remove" />
                     </span>
                   )}
                 </span>
               ))}
               {hiddenTagCount > 0 ? (
                 <span
-                  data-slot="async-select-tag-overflow"
-                  className={cn(
-                    "inline-flex max-w-full items-center rounded-[var(--radius-sm)] border border-dashed border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_58%)] px-2 py-1 text-xs font-medium text-muted-foreground",
-                    tagClassName
-                  )}
+                  data-slot="async-select-tag-overflow"
+                  className={cn("inline-flex max-w-full items-center", tagClassName)}
                 >
                   {labels?.hiddenSelected?.(hiddenTagCount) ?? `+${hiddenTagCount} more`}
                 </span>
@@ -1143,8 +1122,7 @@ function AsyncMultiSelect<
               <span
                 role="button"
                 tabIndex={0}
-                data-slot="async-select-clear"
-                className="rounded-full border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground"
+              data-slot="async-select-clear"
                 aria-label={labels?.clearAll ?? labels?.clear ?? "Clear all"}
                 onClick={handleClear}
                 onKeyDown={(event) => {
@@ -1154,7 +1132,7 @@ function AsyncMultiSelect<
                   clearAllSelection()
                 }}
               >
-                <XIcon className="size-3.5" />
+              <XIcon data-icon="clear" />
               </span>
             )}
             <ChevronsUpDownIcon className="size-4 opacity-60" />
@@ -1162,14 +1140,11 @@ function AsyncMultiSelect<
         </PopoverTrigger>
         <PopoverContent
           align="start"
-          data-slot="async-select-content"
-          className={cn(
-            "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
-          )}
+          data-slot="async-select-content"
+          className={cn("w-(--anchor-width) min-w-72 gap-3", contentClassName)}
         >
           <div data-slot="async-select-search-wrap" className="relative">
-            <SearchIcon className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <SearchIcon data-slot="async-select-search-icon" />
             <Input
               data-slot="async-select-search"
               value={search}
@@ -1179,7 +1154,7 @@ function AsyncMultiSelect<
             />
           </div>
 
-          <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">
+          <div data-slot="async-select-meta" className="flex flex-wrap items-center justify-between gap-2">
             {hasValue && labels?.selectedCount && <span>{labels.selectedCount(values.length)}</span>}
             {isMaxReached &&
               (renderMaxSelected?.(state) ?? (
@@ -1189,8 +1164,7 @@ function AsyncMultiSelect<
               {canSelectAll && (
                 <button
                   type="button"
-                  data-slot="async-select-meta-action"
-                  className="rounded-[var(--radius-sm)] border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background"
+                  data-slot="async-select-meta-action"
                   onClick={handleSelectAllVisible}
                 >
                   {labels?.selectAll ?? "Select all"}
@@ -1199,8 +1173,7 @@ function AsyncMultiSelect<
               {canClear && (
                 <button
                   type="button"
-                  data-slot="async-select-meta-action"
-                  className="rounded-[var(--radius-sm)] border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background"
+                  data-slot="async-select-meta-action"
                   onClick={() => onValueChange?.([], [])}
                 >
                   {labels?.clearAll ?? labels?.clear ?? "Clear all"}
@@ -1209,7 +1182,7 @@ function AsyncMultiSelect<
             </div>
           </div>
 
-          <div className="max-h-72 space-y-1 overflow-y-auto pr-1">
+          <div className="flex max-h-72 flex-col gap-1 overflow-y-auto pr-1">
             {searchTooShort && flatOptions.length === 0 && (
               renderMinSearch?.(state) ?? (
                 <AsyncStateMessage>
@@ -1230,7 +1203,7 @@ function AsyncMultiSelect<
 
             {!isLoading && hasError &&
               (renderError?.(state) ?? (
-                <AsyncStateMessage className="text-destructive">
+                <AsyncStateMessage data-tone="danger">
                   {labels?.error ?? "Could not load options"}
                 </AsyncStateMessage>
               ))}
@@ -1282,9 +1255,10 @@ function AsyncSelect<
   TData = unknown,
   TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
 >(props: AsyncSelectProps<TValue, TData, TOption> | AsyncSelectMultiModeProps<TValue, TData, TOption>) {
-  if (props.isMulti) {
-    return <AsyncMultiSelect {...props} />
-  }
+  if (props.isMulti) {
+    const { isMulti, ...multiProps } = props
+    return <AsyncMultiSelect data-multi={isMulti} {...multiProps} />
+  }
 
   return <AsyncSingleSelect {...props} />
 }

package/packages/cli/vendor/src/components/inputs/color-picker.tsx

@@ -0,0 +1,154 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const HEX_COLOR_PATTERN = /^#?([0-9a-f]{6})([0-9a-f]{2})?$/i
+
+function normalizeHexColor(value: string, fallback = "#000000") {
+  const match = value.trim().match(HEX_COLOR_PATTERN)
+  if (!match) return fallback
+  return `#${match[1].toLowerCase()}${match[2]?.toLowerCase() ?? ""}`
+}
+
+function getOpaqueColor(value: string) {
+  return normalizeHexColor(value).slice(0, 7)
+}
+
+function getAlphaPercent(value: string) {
+  const normalized = normalizeHexColor(value)
+  if (normalized.length !== 9) return 100
+  return Math.round((Number.parseInt(normalized.slice(7, 9), 16) / 255) * 100)
+}
+
+function withAlpha(value: string, alpha: number, includeAlpha: boolean) {
+  const opaque = getOpaqueColor(value)
+  if (!includeAlpha) return opaque
+  const channel = Math.round((Math.min(100, Math.max(0, alpha)) / 100) * 255)
+    .toString(16)
+    .padStart(2, "0")
+  return `${opaque}${channel}`
+}
+
+export type ColorPickerProps = Omit<React.ComponentProps<"div">, "defaultValue" | "onChange"> & {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  swatches?: string[]
+  showAlpha?: boolean
+  disabled?: boolean
+  label?: React.ReactNode
+  labels?: {
+    color?: string
+    hex?: string
+    alpha?: string
+  }
+}
+
+function ColorPicker({
+  value,
+  defaultValue = "#2563eb",
+  onValueChange,
+  swatches = ["#0f172a", "#2563eb", "#059669", "#d97706", "#dc2626", "#7c3aed"],
+  showAlpha = false,
+  disabled = false,
+  label,
+  labels,
+  className,
+  ...props
+}: ColorPickerProps) {
+  const [internalValue, setInternalValue] = React.useState(() => withAlpha(defaultValue, getAlphaPercent(defaultValue), showAlpha))
+  const currentValue = withAlpha(value ?? internalValue, getAlphaPercent(value ?? internalValue), showAlpha)
+  const [draft, setDraft] = React.useState(currentValue)
+
+  React.useEffect(() => setDraft(currentValue), [currentValue])
+
+  const updateValue = (nextValue: string) => {
+    const normalized = withAlpha(nextValue, getAlphaPercent(nextValue), showAlpha)
+    if (value === undefined) setInternalValue(normalized)
+    onValueChange?.(normalized)
+  }
+
+  const commitDraft = () => {
+    if (!HEX_COLOR_PATTERN.test(draft.trim())) {
+      setDraft(currentValue)
+      return
+    }
+    updateValue(draft)
+  }
+
+  return (
+    <div data-slot="color-picker" className={cn("grid gap-3", className)} {...props}>
+      {label ? <div className="text-sm font-medium text-foreground">{label}</div> : null}
+      <div className="flex min-w-0 items-center gap-2">
+        <label className="relative size-10 shrink-0 overflow-hidden rounded-md border bg-background shadow-sm focus-within:ring-2 focus-within:ring-ring">
+          <span className="sr-only">{labels?.color ?? "Choose color"}</span>
+          <input
+            type="color"
+            aria-label={labels?.color ?? "Choose color"}
+            value={getOpaqueColor(currentValue)}
+            disabled={disabled}
+            className="absolute -inset-2 size-14 cursor-pointer border-0 bg-transparent p-0 disabled:cursor-not-allowed"
+            onChange={(event) => updateValue(withAlpha(event.target.value, getAlphaPercent(currentValue), showAlpha))}
+          />
+        </label>
+        <input
+          aria-label={labels?.hex ?? "Hex color"}
+          value={draft}
+          disabled={disabled}
+          spellCheck={false}
+          className="h-10 min-w-0 flex-1 rounded-md border bg-background px-3 font-mono text-sm uppercase outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+          onChange={(event) => setDraft(event.target.value)}
+          onBlur={commitDraft}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              event.preventDefault()
+              commitDraft()
+            }
+            if (event.key === "Escape") setDraft(currentValue)
+          }}
+        />
+      </div>
+      {showAlpha ? (
+        <label className="grid grid-cols-[1fr_auto] items-center gap-3 text-xs text-muted-foreground">
+          <span className="sr-only">{labels?.alpha ?? "Opacity"}</span>
+          <input
+            type="range"
+            min="0"
+            max="100"
+            value={getAlphaPercent(currentValue)}
+            disabled={disabled}
+            aria-label={labels?.alpha ?? "Opacity"}
+            className="w-full accent-foreground disabled:cursor-not-allowed"
+            onChange={(event) => updateValue(withAlpha(currentValue, Number(event.target.value), true))}
+          />
+          <span className="w-10 text-right tabular-nums">{getAlphaPercent(currentValue)}%</span>
+        </label>
+      ) : null}
+      {swatches.length > 0 ? (
+        <div role="list" aria-label="Color swatches" className="flex flex-wrap gap-2">
+          {swatches.map((swatch) => {
+            const normalizedSwatch = withAlpha(swatch, getAlphaPercent(currentValue), showAlpha)
+            const selected = getOpaqueColor(normalizedSwatch) === getOpaqueColor(currentValue)
+            return (
+              <button
+                key={swatch}
+                type="button"
+                role="listitem"
+                aria-label={`Use ${swatch}`}
+                aria-pressed={selected}
+                disabled={disabled}
+                className="size-7 rounded-md border border-black/10 shadow-sm outline-none ring-offset-2 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                style={{ backgroundColor: getOpaqueColor(normalizedSwatch) }}
+                onClick={() => updateValue(normalizedSwatch)}
+              />
+            )
+          })}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export { ColorPicker, getAlphaPercent, normalizeHexColor, withAlpha }

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

@@ -1,15 +1,7 @@
 import { component, createShowcaseDemoRegistry } from "@/showcase/create-demo"
 
 export const inputsShowcaseDemoRegistry = createShowcaseDemoRegistry([
-  component("password-input", "PasswordInput", "inputs", "Password field with visibility toggle and secure autocomplete defaults."),
-  component("number-input", "NumberInput", "inputs", "Numeric entry surface for counts, thresholds and dashboard filters."),
-  component("phone-input", "PhoneInput", "inputs", "Masked phone entry that preserves stable value handling in forms."),
-  component("money-input", "MoneyInput", "inputs", "Currency-focused value entry for invoices, pricing and finance screens."),
-  component("date-input", "DateInput", "inputs", "Single-date entry with normalized string value handling."),
-  component("date-range-input", "DateRangeInput", "inputs", "Range-based date entry for reporting, booking and filter flows."),
-  component("simple-select", "SimpleSelect", "inputs", "Static select member for local option sets and lightweight filter panels."),
   component("async-select", "AsyncSelect", "inputs", "Remote select member for server search, hydration and large datasets."),
-  component("combobox", "Combobox", "inputs", "Local searchable choice input for reassignment and command-like selection."),
   component("slider", "Slider", "inputs", "Single value range control for density, threshold, and score tuning."),
   component("range-slider", "RangeSlider", "inputs", "Two-handle slider for min/max filtering."),
   component("rating", "Rating", "inputs", "Compact score input for feedback and review flows."),

package/packages/cli/vendor/src/components/inputs/index.ts

@@ -6,3 +6,5 @@ export * from "./time-picker"
 export * from "./slider"
 export * from "./tag-input"
 export * from "./inline-editable"
+export * from "./color-picker"
+export * from "./signature-pad"

package/packages/cli/vendor/src/components/inputs/public.ts

@@ -6,3 +6,5 @@ export * from "./tag-input"
 export * from "./inline-editable"
 export * from "./json-input"
 export * from "./time-picker"
+export * from "./color-picker"
+export * from "./signature-pad"