tembro 1.0.0

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

@@ -0,0 +1,102 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type OtpInputProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  length?: number
+  disabled?: boolean
+  inputMode?: React.HTMLAttributes<HTMLInputElement>["inputMode"]
+  pattern?: string
+  mask?: boolean
+  labels?: {
+    group?: string
+    cell?: (index: number) => string
+  }
+}
+
+function OtpInput({
+  value,
+  defaultValue = "",
+  onValueChange,
+  length = 6,
+  disabled = false,
+  inputMode = "numeric",
+  pattern = "[0-9]*",
+  mask = false,
+  labels,
+  className,
+  ...props
+}: OtpInputProps) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue.slice(0, length))
+  const currentValue = (value ?? internalValue).slice(0, length)
+  const inputRefs = React.useRef<Array<HTMLInputElement | null>>([])
+
+  const updateValue = (nextValue: string) => {
+    const trimmedValue = nextValue.slice(0, length)
+    if (value === undefined) setInternalValue(trimmedValue)
+    onValueChange?.(trimmedValue)
+  }
+
+  const setCharAt = (index: number, nextChar: string) => {
+    const chars = String(Array.isArray(currentValue) ? currentValue.join("") : currentValue).padEnd(length, " ").split("")
+    chars[index] = nextChar.slice(-1)
+    updateValue(chars.join("").replace(/\s+$/g, ""))
+  }
+
+  const focusIndex = (index: number) => {
+    inputRefs.current[Math.max(0, Math.min(index, length - 1))]?.focus()
+  }
+
+  return (
+    <div
+      data-slot="otp-input"
+      role="group"
+      aria-label={labels?.group ?? "One-time password"}
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    >
+      {Array.from({ length }, (_, index) => (
+        <input
+          key={index}
+          ref={(node) => {
+            inputRefs.current[index] = node
+          }}
+          aria-label={labels?.cell?.(index) ?? `Digit ${index + 1}`}
+          inputMode={inputMode}
+          pattern={pattern}
+          type={mask ? "password" : "text"}
+          autoComplete="one-time-code"
+          maxLength={1}
+          disabled={disabled}
+          value={currentValue[index] ?? ""}
+          className="flex size-10 rounded-md border bg-background text-center text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+          onChange={(event) => {
+            const nextChar = event.currentTarget.value
+            setCharAt(index, nextChar)
+            if (nextChar) focusIndex(index + 1)
+          }}
+          onKeyDown={(event) => {
+            if (event.key === "Backspace" && !currentValue[index]) {
+              event.preventDefault()
+              focusIndex(index - 1)
+              setCharAt(index - 1, "")
+            }
+            if (event.key === "ArrowLeft") focusIndex(index - 1)
+            if (event.key === "ArrowRight") focusIndex(index + 1)
+          }}
+          onPaste={(event) => {
+            event.preventDefault()
+            const pasted = event.clipboardData.getData("text").trim()
+            updateValue(pasted)
+            focusIndex(Math.min(pasted.length, length - 1))
+          }}
+        />
+      ))}
+    </div>
+  )
+}
+
+export { OtpInput }

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

@@ -0,0 +1,122 @@
+import * as React from "react"
+import { EyeIcon, EyeOffIcon } from "lucide-react"
+
+import { InputDecorator } from "@/components/inputs/input-decorator"
+
+export type PasswordInputProps = Omit<
+  React.ComponentProps<typeof InputDecorator>,
+  "type" | "value" | "onChange"
+> & {
+  value?: string | null
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  onValueChange?: (value: string) => void
+  visible?: boolean
+  defaultVisible?: boolean
+  onVisibleChange?: (visible: boolean) => void
+  showToggle?: boolean
+  showCapsLockWarning?: boolean
+  capsLockLabel?: string
+  wrapperClassName?: string
+  inputClassName?: string
+  showLabel?: string
+  hideLabel?: string
+}
+
+const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+  (
+    {
+      value,
+      onChange,
+      onValueChange,
+      visible,
+      defaultVisible = false,
+      onVisibleChange,
+      showToggle = true,
+      showCapsLockWarning = true,
+      capsLockLabel = "Caps Lock is on",
+      showLabel = "Show password",
+      hideLabel = "Hide password",
+      disabled,
+      autoComplete = "current-password",
+      trailing,
+      onKeyDown,
+      onKeyUp,
+      ...props
+    },
+    ref
+  ) => {
+    const isControlled = visible !== undefined
+    const [internalVisible, setInternalVisible] = React.useState(defaultVisible)
+    const [capsLockOn, setCapsLockOn] = React.useState(false)
+    const currentVisible = isControlled ? visible : internalVisible
+
+    const setVisibleState = (nextVisible: boolean) => {
+      if (!isControlled) {
+        setInternalVisible(nextVisible)
+      }
+
+      onVisibleChange?.(nextVisible)
+    }
+
+    const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+      onChange?.(event)
+      onValueChange?.(event.target.value)
+    }
+
+    const updateCapsLock = (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (!showCapsLockWarning) return
+      setCapsLockOn(event.getModifierState("CapsLock"))
+    }
+
+    const handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
+      updateCapsLock(event)
+      onKeyDown?.(event)
+    }
+
+    const handleKeyUp: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
+      updateCapsLock(event)
+      onKeyUp?.(event)
+    }
+
+    const trailingContent = (
+      <>
+        {trailing}
+        {showCapsLockWarning && capsLockOn ? (
+          <span data-slot="password-caps-lock" className="hidden text-xs text-amber-600 sm:inline" aria-live="polite">
+            {capsLockLabel}
+          </span>
+        ) : null}
+        {showToggle ? (
+          <button
+            type="button"
+            disabled={disabled}
+            aria-label={currentVisible ? hideLabel : showLabel}
+            className="rounded-sm p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+            onClick={() => setVisibleState(!currentVisible)}
+          >
+            {currentVisible ? <EyeOffIcon className="size-4" /> : <EyeIcon className="size-4" />}
+          </button>
+        ) : null}
+      </>
+    )
+
+    return (
+      <InputDecorator
+        data-slot="password-input"
+        ref={ref}
+        type={currentVisible ? "text" : "password"}
+        value={value ?? ""}
+        disabled={disabled}
+        autoComplete={autoComplete}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        onKeyUp={handleKeyUp}
+        trailingAction={trailingContent}
+        {...props}
+      />
+    )
+  }
+)
+PasswordInput.displayName = "PasswordInput"
+
+export { PasswordInput }

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

@@ -0,0 +1,68 @@
+import * as React from "react"
+import { PhoneIcon } from "lucide-react"
+
+import { MaskedInput, type MaskedInputProps } from "@/components/inputs/masked-input"
+
+export type PhoneInputProps = Omit<MaskedInputProps, "mask" | "unmask" | "inputMode"> & {
+  countryCode?: string
+  maxDigits?: number
+  showCountryCode?: boolean
+  showIcon?: boolean
+  icon?: React.ReactNode
+}
+
+function onlyDigits(value: string) {
+  return value.replace(/\D/g, "")
+}
+
+function formatPhoneDigits(digits: string, countryCode = "+998", maxDigits = 12) {
+  const normalized = onlyDigits(digits).slice(0, maxDigits)
+  const countryDigits = countryCode.replace(/\D/g, "")
+  const withoutCountry = normalized.startsWith(countryDigits)
+    ? normalized.slice(countryDigits.length)
+    : normalized
+
+  const part1 = withoutCountry.slice(0, 2)
+  const part2 = withoutCountry.slice(2, 5)
+  const part3 = withoutCountry.slice(5, 7)
+  const part4 = withoutCountry.slice(7, 9)
+  const parts = [part1, part2, part3, part4].filter(Boolean)
+
+  return [countryCode, ...parts].join(" ").trim()
+}
+
+const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
+  (
+    {
+      countryCode = "+998",
+      maxDigits = 12,
+      showCountryCode = false,
+      showIcon = false,
+      icon,
+      leading,
+      trailing,
+      onValueChange,
+      ...props
+    },
+    ref
+  ) => {
+    const leadingContent = showIcon ? icon ?? leading ?? <PhoneIcon /> : leading
+    const trailingContent = showCountryCode ? <span className="font-mono text-xs">{countryCode}</span> : trailing
+
+    return (
+      <MaskedInput
+        ref={ref}
+        inputMode="tel"
+        leading={leadingContent}
+        trailing={trailingContent}
+        mask={(rawValue) => formatPhoneDigits(rawValue, countryCode, maxDigits)}
+        unmask={onlyDigits}
+        onValueChange={(maskedValue: string, rawValue: string) => onValueChange?.(maskedValue, rawValue)}
+        {...props}
+      />
+    )
+  }
+)
+PhoneInput.displayName = "PhoneInput"
+
+export { PhoneInput, formatPhoneDigits, onlyDigits }

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

@@ -0,0 +1,29 @@
+// Select-family members
+export * from "./async-select"
+export * from "./combobox"
+export * from "./simple-select"
+
+// Input-family members
+export * from "./clearable-input"
+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 "./slider"
+export * from "./tag-input"
+export * from "./inline-editable"
+
+// Advanced / modern inputs
+export * from "./cascader"
+export * from "./json-input"
+export * from "./mention-input"
+export * from "./time-picker"

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

@@ -0,0 +1,116 @@
+import * as React from "react"
+import { MinusIcon, PlusIcon } from "lucide-react"
+
+import { InputChrome } from "@/components/inputs/input-chrome"
+import { getInputValue } from "@/components/inputs/input-value"
+import { clampNumericValue, parseDecimalInput } from "@/components/inputs/numeric-value"
+import { Button } from "@/components/ui/button"
+import { InputPrimitive } from "@/components/ui/input-primitive"
+import { cn } from "@/lib/utils"
+
+export type QuantityInputProps = Omit<
+  React.ComponentProps<"input">,
+  "value" | "onChange" | "type"
+> & {
+  value?: number | null
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  onValueChange?: (value: number | null) => void
+  min?: number
+  max?: number
+  step?: number
+  showControls?: boolean
+  wrapperClassName?: string
+  inputClassName?: string
+}
+
+function clampQuantity(value: number, min?: number, max?: number) {
+  return clampNumericValue(value, min, max)
+}
+
+function QuantityInput({
+  value,
+  onChange,
+  onValueChange,
+  min,
+  max,
+  step = 1,
+  showControls = true,
+  wrapperClassName,
+  inputClassName,
+  className,
+  inputMode = "decimal",
+  ...props
+}: QuantityInputProps) {
+  const canDecrease = typeof value !== "number" || typeof min !== "number" || value > min
+  const canIncrease = typeof value !== "number" || typeof max !== "number" || value < max
+
+  const setNextValue = (nextValue: number | null) => {
+    onValueChange?.(nextValue)
+  }
+
+    const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+      onChange?.(event)
+
+      const parsed = parseDecimalInput(event.target.value)
+      if (parsed == null) {
+        setNextValue(null)
+        return
+      }
+
+      setNextValue(clampQuantity(parsed, min, max))
+    }
+
+  const handleStep = (direction: 1 | -1) => {
+    const baseValue = typeof value === "number" ? value : min ?? 0
+    setNextValue(clampQuantity(baseValue + step * direction, min, max))
+  }
+
+  return (
+    <InputChrome
+      data-slot="quantity-input"
+      className={cn("overflow-hidden", wrapperClassName)}
+      start={
+        showControls ? (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            className="h-full rounded-none"
+            disabled={!canDecrease || props.disabled || props.readOnly}
+            onClick={() => handleStep(-1)}
+          >
+            <MinusIcon />
+          </Button>
+        ) : null
+      }
+      end={
+        showControls ? (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            className="h-full rounded-none"
+            disabled={!canIncrease || props.disabled || props.readOnly}
+            onClick={() => handleStep(1)}
+          >
+            <PlusIcon />
+          </Button>
+        ) : null
+      }
+    >
+      <InputPrimitive
+        value={getInputValue(value)}
+        onChange={handleInputChange}
+        inputMode={inputMode}
+        className={cn(
+          "h-full border-0 bg-transparent text-center shadow-none focus-visible:border-0 focus-visible:ring-0",
+          inputClassName,
+          className
+        )}
+        {...props}
+      />
+    </InputChrome>
+  )
+}
+
+export { QuantityInput, clampQuantity }

package/packages/cli/vendor/src/components/inputs/quantity-stepper.tsx

@@ -0,0 +1,49 @@
+import * as React from "react"
+import { MinusIcon, PlusIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+
+export type QuantityStepperProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+  value?: number
+  defaultValue?: number
+  onValueChange?: (value: number) => void
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+}
+
+function QuantityStepper({ value, defaultValue = 0, onValueChange, min = 0, max, step = 1, disabled = false, className, ...props }: QuantityStepperProps) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue)
+  const currentValue = value ?? internalValue
+
+  const updateValue = (nextValue: number) => {
+    const normalized = Math.max(min, Math.min(max ?? nextValue, Number.isFinite(nextValue) ? nextValue : min))
+    if (value === undefined) setInternalValue(normalized)
+    onValueChange?.(normalized)
+  }
+
+  return (
+    <div data-slot="quantity-stepper" className={cn("inline-flex items-center rounded-lg border bg-background", className)} {...props}>
+      <Button type="button" variant="ghost" size="icon-sm" disabled={disabled || currentValue <= min} onClick={() => updateValue(currentValue - step)}>
+        <MinusIcon />
+        <span className="sr-only">Decrease</span>
+      </Button>
+      <Input
+        value={currentValue}
+        disabled={disabled}
+        inputMode="numeric"
+        className="h-8 w-14 border-0 text-center shadow-none focus-visible:ring-0"
+        onChange={(event) => updateValue(Number(event.currentTarget.value))}
+      />
+      <Button type="button" variant="ghost" size="icon-sm" disabled={disabled || (max !== undefined && currentValue >= max)} onClick={() => updateValue(currentValue + step)}>
+        <PlusIcon />
+        <span className="sr-only">Increase</span>
+      </Button>
+    </div>
+  )
+}
+
+export { QuantityStepper }

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

@@ -0,0 +1,105 @@
+import * as React from "react"
+import { StarIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type RatingProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+  value?: number
+  defaultValue?: number
+  onValueChange?: (value: number) => void
+  count?: number
+  allowClear?: boolean
+  disabled?: boolean
+  readOnly?: boolean
+  labels?: {
+    rate?: (value: number) => string
+    clear?: string
+  }
+  icon?: React.ReactNode
+}
+
+function Rating({
+  value,
+  defaultValue = 0,
+  onValueChange,
+  count = 5,
+  allowClear = true,
+  disabled = false,
+  readOnly = false,
+  labels,
+  icon,
+  className,
+  ...props
+}: RatingProps) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue)
+  const [hoverValue, setHoverValue] = React.useState<number | null>(null)
+  const currentValue = value ?? internalValue
+  const displayValue = hoverValue ?? currentValue
+  const interactive = !disabled && !readOnly
+
+  const setRating = (nextValue: number) => {
+    if (!interactive) return
+    const resolvedValue = allowClear && nextValue === currentValue ? 0 : nextValue
+    if (value === undefined) setInternalValue(resolvedValue)
+    onValueChange?.(resolvedValue)
+  }
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, nextValue: number) => {
+    if (!interactive) return
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault()
+      setRating(nextValue)
+    }
+  }
+
+  return (
+    <div
+      data-slot="rating"
+      role="radiogroup"
+      aria-disabled={disabled || undefined}
+      className={cn(
+        "inline-flex min-h-11 items-center gap-1.5 rounded-full border border-[color:var(--aui-surface-border)] bg-[color:color-mix(in_srgb,var(--aui-control-bg)_82%,white_18%)] px-2 py-1.5 shadow-sm dark:bg-[color:color-mix(in_srgb,var(--aui-control-bg)_90%,black_10%)]",
+        className
+      )}
+      onMouseLeave={() => setHoverValue(null)}
+      {...props}
+    >
+      {Array.from({ length: count }, (_, index) => {
+        const nextValue = index + 1
+        const selected = nextValue <= displayValue
+        return (
+          <button
+            key={nextValue}
+            type="button"
+            role="radio"
+            aria-checked={nextValue === currentValue}
+            aria-label={labels?.rate?.(nextValue) ?? `Rate ${nextValue}`}
+            disabled={disabled}
+            tabIndex={readOnly ? -1 : 0}
+            className={cn(
+              "inline-flex size-8 items-center justify-center rounded-full text-[color:var(--aui-text-muted)] outline-none transition duration-150 focus-visible:ring-2 focus-visible:ring-[color:var(--aui-brand-strong)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--aui-page-bg)] disabled:pointer-events-none disabled:opacity-50",
+              interactive && "hover:bg-[color:var(--aui-control-bg)] hover:text-[color:var(--aui-brand-strong)]",
+              selected && "bg-[color:color-mix(in_srgb,var(--aui-brand-strong)_16%,transparent)] text-[color:var(--aui-brand-strong)]"
+            )}
+            onMouseEnter={() => interactive && setHoverValue(nextValue)}
+            onClick={() => setRating(nextValue)}
+            onKeyDown={(event) => handleKeyDown(event, nextValue)}
+          >
+            {icon ?? <StarIcon className={cn("size-4.5", selected && "fill-current")} />}
+          </button>
+        )
+      })}
+      {allowClear && currentValue > 0 && interactive && (
+        <button
+          type="button"
+          className="ml-1 inline-flex h-8 items-center rounded-full border border-[color:var(--aui-surface-border)] px-3 text-xs font-semibold text-muted-foreground transition hover:bg-[color:var(--aui-control-bg)] hover:text-foreground"
+          onClick={() => setRating(0)}
+        >
+          {labels?.clear ?? "Clear"}
+        </button>
+      )}
+    </div>
+  )
+}
+
+export { Rating }

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

@@ -0,0 +1,80 @@
+import * as React from "react"
+import { LoaderCircleIcon, SearchIcon } from "lucide-react"
+
+import { ClearableInput, type ClearableInputProps } from "@/components/inputs/clearable-input"
+
+export type SearchInputProps = Omit<ClearableInputProps, "leadingIcon" | "type" | "onValueChange"> & {
+  searchIcon?: React.ReactNode
+  loading?: boolean
+  loadingLabel?: string
+  resultCount?: number
+  shortcut?: React.ReactNode
+  debounceMs?: number
+  showMetaOnClear?: boolean
+  onValueChange?: (value: string) => void
+  onDebouncedValueChange?: (value: string) => void
+}
+
+const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
+  (
+    {
+      searchIcon,
+      loading = false,
+      loadingLabel = "Searching",
+      resultCount,
+      shortcut,
+      debounceMs,
+      value,
+      onValueChange,
+      onDebouncedValueChange,
+      placeholder = "Search...",
+      inputMode = "search",
+      trailing,
+      showMetaOnClear = false,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const stringValue = value == null ? "" : String(value)
+
+    React.useEffect(() => {
+      if (debounceMs == null || !onDebouncedValueChange) return
+      const timeoutId = window.setTimeout(() => onDebouncedValueChange(stringValue), debounceMs)
+      return () => window.clearTimeout(timeoutId)
+    }, [debounceMs, onDebouncedValueChange, stringValue])
+
+    const meta = (
+      <span data-slot="search-input-meta" className="inline-flex shrink-0 items-center gap-2 text-xs text-muted-foreground">
+        {loading ? (
+          <span aria-live="polite" className="inline-flex items-center gap-1.5">
+            <LoaderCircleIcon className="size-3.5 animate-spin" aria-hidden="true" />
+            <span className="sr-only">{loadingLabel}</span>
+          </span>
+        ) : null}
+        {typeof resultCount === "number" ? <span>{resultCount}</span> : null}
+        {shortcut ? <span className="rounded-md border border-border/80 bg-muted/60 px-1.5 py-0.5 font-mono">{shortcut}</span> : null}
+        {trailing}
+      </span>
+    )
+
+    return (
+      <ClearableInput
+        ref={ref}
+        type="search"
+        inputMode={inputMode}
+        placeholder={placeholder}
+        value={value}
+        disabled={disabled || loading}
+        leadingIcon={searchIcon ?? <SearchIcon />}
+        trailing={meta}
+        replaceTrailingWhenClear={!showMetaOnClear}
+        onValueChange={onValueChange}
+        {...props}
+      />
+    )
+  }
+)
+SearchInput.displayName = "SearchInput"
+
+export { SearchInput }