tembro 1.0.0

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

@@ -0,0 +1,41 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type CascaderOption = {
+  label: React.ReactNode
+  value: string
+  children?: CascaderOption[]
+}
+
+export type CascaderProps = React.ComponentProps<"div"> & {
+  options: CascaderOption[]
+  value?: string[]
+  onValueChange?: (value: string[]) => void
+}
+
+function Cascader({ options, value = [], onValueChange, className, ...props }: CascaderProps) {
+  const firstValue = value[0] ?? ""
+  const secondOptions = options.find((item) => item.value === firstValue)?.children ?? []
+  const secondValue = value[1] ?? ""
+  const thirdOptions = secondOptions.find((item) => item.value === secondValue)?.children ?? []
+
+  return (
+    <div data-slot="cascader" className={cn("grid gap-2 sm:grid-cols-3", className)} {...props}>
+      <select className="h-10 rounded-md border bg-background px-3 text-sm" value={firstValue} onChange={(event) => onValueChange?.([event.target.value])}>
+        <option value="">Select</option>
+        {options.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
+      </select>
+      <select className="h-10 rounded-md border bg-background px-3 text-sm" value={secondValue} disabled={!secondOptions.length} onChange={(event) => onValueChange?.([firstValue, event.target.value])}>
+        <option value="">Select</option>
+        {secondOptions.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
+      </select>
+      <select className="h-10 rounded-md border bg-background px-3 text-sm" value={value[2] ?? ""} disabled={!thirdOptions.length} onChange={(event) => onValueChange?.([firstValue, secondValue, event.target.value])}>
+        <option value="">Select</option>
+        {thirdOptions.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
+      </select>
+    </div>
+  )
+}
+
+export { Cascader }

package/packages/cli/vendor/src/components/inputs/clearable-input.tsx

@@ -0,0 +1,116 @@
+import * as React from "react"
+import { XIcon } from "lucide-react"
+
+import { InputDecorator } from "@/components/inputs/input-decorator"
+import { createInputChangeHandler, getInputValue } from "@/components/inputs/input-value"
+import { stopInteractivePropagation } from "@/lib/utils"
+
+export type ClearableInputProps = Omit<
+  React.ComponentProps<typeof InputDecorator>,
+  "value" | "onChange"
+> & {
+  value?: string | number | null
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  onValueChange?: (value: string) => void
+  onClear?: () => void
+  clearable?: boolean
+  clearLabel?: string
+  clearOnEscape?: boolean
+  focusAfterClear?: boolean
+  replaceTrailingWhenClear?: boolean
+  leadingIcon?: React.ReactNode
+  trailing?: React.ReactNode
+  trailingAction?: React.ReactNode
+  wrapperClassName?: string
+  inputClassName?: string
+}
+
+const ClearableInput = React.forwardRef<HTMLInputElement, ClearableInputProps>(
+  (
+    {
+      value,
+      onChange,
+      onValueChange,
+      onClear,
+      clearable = true,
+      clearLabel = "Clear",
+      clearOnEscape = true,
+      focusAfterClear = true,
+      replaceTrailingWhenClear = true,
+      leadingIcon,
+      trailing,
+      trailingAction,
+      disabled,
+      onKeyDown,
+      ...props
+    },
+    ref
+  ) => {
+    const inputRef = React.useRef<HTMLInputElement | null>(null)
+    const stringValue = getInputValue(value)
+    const canClear = clearable && stringValue.length > 0 && !disabled && !props.readOnly
+    const handleChange = createInputChangeHandler({ onChange, onValueChange })
+
+    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)
+
+    const clearValue = () => {
+      if (!canClear) return
+      onValueChange?.("")
+      onClear?.()
+      if (focusAfterClear) inputRef.current?.focus()
+    }
+
+    const handleClearClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+      stopInteractivePropagation(event)
+      clearValue()
+    }
+
+    const handleClearMouseDown: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+      stopInteractivePropagation(event)
+    }
+
+    const handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
+      onKeyDown?.(event)
+      if (event.defaultPrevented) return
+      if (clearOnEscape && event.key === "Escape" && canClear) {
+        event.preventDefault()
+        clearValue()
+      }
+    }
+
+    return (
+      <InputDecorator
+        data-slot="clearable-input"
+        ref={inputRef}
+        value={stringValue}
+        disabled={disabled}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        leading={leadingIcon}
+        trailing={canClear && replaceTrailingWhenClear ? null : trailing}
+        trailingAction={
+          <>
+            {trailingAction}
+            {canClear && (
+              <button
+                type="button"
+                data-slot="clearable-input-clear"
+                aria-label={clearLabel}
+                className="inline-flex size-7 items-center justify-center rounded-full border border-transparent bg-transparent text-muted-foreground/74 transition hover:border-border/60 hover:bg-muted/58 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
+                onClick={handleClearClick}
+                onMouseDown={handleClearMouseDown}
+                onDoubleClick={handleClearMouseDown}
+              >
+                <XIcon className="size-4" />
+              </button>
+            )}
+          </>
+        }
+        {...props}
+      />
+    )
+  }
+)
+ClearableInput.displayName = "ClearableInput"
+
+export { ClearableInput }

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

@@ -0,0 +1,47 @@
+import * as React from "react"
+
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+
+export type ColorInputProps = Omit<React.ComponentProps<"input">, "type" | "value" | "defaultValue" | "onChange"> & {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  label?: React.ReactNode
+  description?: React.ReactNode
+  swatchClassName?: string
+}
+
+function ColorInput({ value, defaultValue = "#000000", onValueChange, label, description, swatchClassName, className, disabled, ...props }: ColorInputProps) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue)
+  const currentValue = value ?? internalValue
+
+  const updateValue = (nextValue: string) => {
+    if (value === undefined) setInternalValue(nextValue)
+    onValueChange?.(nextValue)
+  }
+
+  return (
+    <div data-slot="color-input" className={cn("grid gap-2", className)}>
+      {(label || description) && (
+        <div className="grid gap-0.5">
+          {label && <label className="text-sm font-medium text-foreground">{label}</label>}
+          {description && <div className="text-xs text-muted-foreground">{description}</div>}
+        </div>
+      )}
+      <div className="flex items-center gap-2">
+        <input
+          type="color"
+          value={currentValue}
+          disabled={disabled}
+          className={cn("size-9 cursor-pointer rounded-md border bg-background p-1 disabled:cursor-not-allowed disabled:opacity-50", swatchClassName)}
+          onChange={(event) => updateValue(event.currentTarget.value)}
+          {...props}
+        />
+        <Input value={currentValue} disabled={disabled} onChange={(event) => updateValue(event.currentTarget.value)} className="font-mono" />
+      </div>
+    </div>
+  )
+}
+
+export { ColorInput }

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

@@ -0,0 +1,91 @@
+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"
+
+export type ComboboxOption<TValue extends string = string> = {
+  value: TValue
+  label: React.ReactNode
+  searchValue?: string
+  description?: React.ReactNode
+  disabled?: boolean
+  hidden?: boolean
+}
+
+export type ComboboxProps<TValue extends string = string> = React.ComponentProps<"div"> & {
+  value?: TValue
+  options: ComboboxOption<TValue>[]
+  onValueChange?: (value: TValue | undefined, option?: ComboboxOption<TValue>) => void
+  placeholder?: React.ReactNode
+  searchPlaceholder?: string
+  emptyLabel?: React.ReactNode
+  disabled?: boolean
+  invalid?: boolean
+}
+
+function Combobox<TValue extends string = string>({
+  value,
+  options,
+  onValueChange,
+  placeholder = "Select option",
+  searchPlaceholder = "Search...",
+  emptyLabel = "No option found",
+  disabled = false,
+  invalid,
+  className,
+  ...props
+}: ComboboxProps<TValue>) {
+  const [open, setOpen] = React.useState(false)
+  const [search, setSearch] = React.useState("")
+  const selectedOption = options.find((option) => option.value === value)
+  const normalizedSearch = search.trim().toLowerCase()
+  const filteredOptions = options.filter((option) => {
+    if (option.hidden) return false
+    if (!normalizedSearch) return true
+    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) => {
+              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>
+                  <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>
+  )
+}
+
+export { Combobox }

package/packages/cli/vendor/src/components/inputs/date-input.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { CalendarDaysIcon } from "lucide-react"
+
+import { InputDecorator } from "@/components/inputs/input-decorator"
+import { createInputChangeHandler, getInputValue } from "@/components/inputs/input-value"
+
+export type DateInputProps = Omit<
+  React.ComponentProps<typeof InputDecorator>,
+  "type" | "value" | "onChange"
+> & {
+  value?: string | null
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  onValueChange?: (value: string) => void
+  showIcon?: boolean
+  icon?: React.ReactNode
+}
+
+const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
+  ({ value, onChange, onValueChange, showIcon = true, icon, leading, ...props }, ref) => {
+    const handleChange = createInputChangeHandler({ onChange, onValueChange })
+
+    return (
+      <InputDecorator
+        ref={ref}
+        type="date"
+        value={getInputValue(value)}
+        leading={showIcon ? icon ?? leading ?? <CalendarDaysIcon /> : leading}
+        onChange={handleChange}
+        {...props}
+      />
+    )
+  }
+)
+DateInput.displayName = "DateInput"
+
+export { DateInput }

package/packages/cli/vendor/src/components/inputs/date-range-input.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+
+import { DateInput, type DateInputProps } from "@/components/inputs/date-input"
+import { cn } from "@/lib/utils"
+
+export type DateRangeValue = {
+  from?: string
+  to?: string
+}
+
+export type DateRangeInputProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+  value?: DateRangeValue
+  onValueChange?: (value: DateRangeValue) => void
+  fromPlaceholder?: string
+  toPlaceholder?: string
+  fromInputProps?: Omit<DateInputProps, "value" | "onValueChange">
+  toInputProps?: Omit<DateInputProps, "value" | "onValueChange">
+  separator?: React.ReactNode
+  inputClassName?: string
+}
+
+function DateRangeInput({
+  className,
+  value,
+  onValueChange,
+  fromPlaceholder = "From",
+  toPlaceholder = "To",
+  fromInputProps,
+  toInputProps,
+  separator = "—",
+  inputClassName,
+  ...props
+}: DateRangeInputProps) {
+  const nextValue = (patch: DateRangeValue) => {
+    onValueChange?.({
+      from: value?.from ?? "",
+      to: value?.to ?? "",
+      ...patch,
+    })
+  }
+
+  return (
+    <div
+      data-slot="date-range-input"
+      className={cn("flex w-full flex-col gap-2 sm:flex-row sm:items-center", className)}
+      {...props}
+    >
+      <DateInput
+        value={value?.from ?? ""}
+        placeholder={fromPlaceholder}
+        className={inputClassName}
+        onValueChange={(from: string) => nextValue({ from })}
+        {...fromInputProps}
+      />
+      <span className="hidden text-sm text-muted-foreground sm:inline-flex">{separator}</span>
+      <DateInput
+        value={value?.to ?? ""}
+        placeholder={toPlaceholder}
+        className={inputClassName}
+        onValueChange={(to: string) => nextValue({ to })}
+        {...toInputProps}
+      />
+    </div>
+  )
+}
+
+export { DateRangeInput }

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

@@ -0,0 +1,20 @@
+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."),
+  component("otp-input", "OtpInput", "inputs", "One-time code entry with fixed-length slots."),
+  component("color-input", "ColorInput", "inputs", "Theme and accent color field with native color selection."),
+  component("inline-editable", "InlineEditable", "inputs", "Inline text editing for compact dashboards and settings tables."),
+  component("tag-input", "TagInput", "inputs", "Tokenized text input for labels, skills, and quick filters."),
+])

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

@@ -0,0 +1,24 @@
+export * from "./async-select"
+export * from "./clearable-input"
+export * from "./combobox"
+export * from "./color-input"
+export * from "./date-input"
+export * from "./date-range-input"
+export * from "./masked-input"
+export * from "./money-input"
+export * from "./number-input"
+export * from "./otp-input"
+export * from "./password-input"
+export * from "./phone-input"
+export * from "./quantity-input"
+export * from "./quantity-stepper"
+export * from "./rating"
+export * from "./search-input"
+export * from "./simple-select"
+export * from "./cascader"
+export * from "./json-input"
+export * from "./mention-input"
+export * from "./time-picker"
+export * from "./slider"
+export * from "./tag-input"
+export * from "./inline-editable"

package/packages/cli/vendor/src/components/inputs/inline-editable.tsx

@@ -0,0 +1,113 @@
+import * as React from "react"
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+
+export type InlineEditableProps = Omit<React.ComponentProps<"div">, "value" | "onChange"> & {
+  value: string
+  onValueChange: (value: string) => void
+  placeholder?: string
+  disabled?: boolean
+  inputClassName?: string
+  displayClassName?: string
+}
+
+function InlineEditable({
+  value,
+  onValueChange,
+  placeholder = "Click to edit",
+  disabled,
+  className,
+  inputClassName,
+  displayClassName,
+  ...props
+}: InlineEditableProps) {
+  const [isEditing, setIsEditing] = React.useState(false)
+  const [editValue, setEditValue] = React.useState(value)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  React.useEffect(() => {
+    setEditValue(value)
+  }, [value])
+
+  React.useEffect(() => {
+    if (isEditing) {
+      inputRef.current?.focus()
+    }
+  }, [isEditing])
+
+  const handleCommit = () => {
+    if (!disabled) {
+      onValueChange(editValue)
+      setIsEditing(false)
+    }
+  }
+
+  const handleCancel = () => {
+    setEditValue(value)
+    setIsEditing(false)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault()
+      handleCommit()
+    } else if (e.key === "Escape") {
+      e.preventDefault()
+      handleCancel()
+    }
+  }
+
+  if (isEditing) {
+    return (
+      <div data-slot="inline-editable-input-mode" className={cn("flex items-center gap-1", className)} {...props}>
+        <Input
+          ref={inputRef}
+          value={editValue}
+          onChange={(e) => setEditValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onBlur={handleCommit}
+          disabled={disabled}
+          placeholder={placeholder}
+          className={cn("h-8 text-sm", inputClassName)}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div
+      data-slot="inline-editable"
+      className={cn(
+        "group flex items-center gap-1.5 rounded-md border border-transparent px-1.5 py-1 -ml-1.5 transition-colors",
+        !disabled && "cursor-pointer hover:bg-muted/50",
+        className
+      )}
+      onClick={() => {
+        if (!disabled) {
+          setIsEditing(true)
+        }
+      }}
+      tabIndex={disabled ? undefined : 0}
+      onKeyDown={(e) => {
+        if (!disabled && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault()
+          setIsEditing(true)
+        }
+      }}
+      {...props}
+    >
+      <span
+        className={cn(
+          "truncate text-sm",
+          !value && "text-muted-foreground italic",
+          disabled && "opacity-50",
+          displayClassName
+        )}
+      >
+        {value || placeholder}
+      </span>
+    </div>
+  )
+}
+
+export { InlineEditable }

package/packages/cli/vendor/src/components/inputs/input-chrome.tsx

@@ -0,0 +1,37 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+type InputChromeProps = React.ComponentProps<"div"> & {
+  start?: React.ReactNode
+  end?: React.ReactNode
+  startClassName?: string
+  endClassName?: string
+}
+
+function InputChrome({
+  start,
+  end,
+  startClassName,
+  endClassName,
+  className,
+  children,
+  ...props
+}: InputChromeProps) {
+  return (
+    <div
+      data-slot="input-chrome"
+      className={cn(
+        "flex h-10 w-full min-w-0 items-center 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))] shadow-[var(--aui-control-shadow,none)] transition-[background-color,border-color,box-shadow] hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] focus-within:border-[color:var(--ring)] focus-within:shadow-[var(--aui-control-shadow,none),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)]",
+        className
+      )}
+      {...props}
+    >
+      {start && <span className={cn("shrink-0", startClassName)}>{start}</span>}
+      {children}
+      {end && <span className={cn("shrink-0", endClassName)}>{end}</span>}
+    </div>
+  )
+}
+
+export { InputChrome }