tembro 1.0.0

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

@@ -0,0 +1,141 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { InputPrimitive } from "@/components/ui/input-primitive"
+import { cn } from "@/lib/utils"
+
+const inputDecoratorVariants = cva("relative flex w-full items-center", {
+  variants: {
+    density: {
+      compact: "text-xs",
+      default: "text-sm",
+      comfortable: "text-base",
+    },
+    tone: {
+      neutral: "",
+      info: "[&_[data-slot=input]]:border-blue-500/30 [&_[data-slot=input]]:focus-visible:ring-blue-500/20",
+      success: "[&_[data-slot=input]]:border-emerald-500/30 [&_[data-slot=input]]:focus-visible:ring-emerald-500/20",
+      warning: "[&_[data-slot=input]]:border-amber-500/35 [&_[data-slot=input]]:focus-visible:ring-amber-500/20",
+      danger: "[&_[data-slot=input]]:border-destructive/40 [&_[data-slot=input]]:focus-visible:ring-destructive/20",
+    },
+  },
+  defaultVariants: {
+    density: "default",
+    tone: "neutral",
+  },
+})
+
+export type InputDecoratorProps = Omit<React.ComponentProps<typeof InputPrimitive>, "value"> &
+  VariantProps<typeof inputDecoratorVariants> & {
+    value?: string | number | readonly string[] | null
+    leading?: React.ReactNode
+    trailing?: React.ReactNode
+    trailingAction?: React.ReactNode
+    leadingPointerEvents?: boolean
+    trailingPointerEvents?: boolean
+    trailingActionPointerEvents?: boolean
+    wrapperClassName?: string
+    inputClassName?: string
+    leadingClassName?: string
+    trailingClassName?: string
+    trailingActionClassName?: string
+  }
+
+const InputDecorator = React.forwardRef<HTMLInputElement, InputDecoratorProps>(
+  (
+    {
+      className,
+      value,
+      leading,
+      trailing,
+      trailingAction,
+      leadingPointerEvents = false,
+      trailingPointerEvents = true,
+      trailingActionPointerEvents = true,
+      wrapperClassName,
+      inputClassName,
+      leadingClassName,
+      trailingClassName,
+      trailingActionClassName,
+      density,
+      tone,
+      ...props
+    },
+    ref
+    ) => {
+      const hasLeading = Boolean(leading)
+      const hasTrailing = Boolean(trailing)
+      const hasTrailingAction = Boolean(trailingAction)
+      const resolvedValue =
+        value == null
+        ? value === null
+          ? ""
+          : undefined
+        : Array.isArray(value)
+          ? value
+          : String(value)
+
+    return (
+      <div
+        data-slot="input-decorator"
+        data-has-leading={hasLeading || undefined}
+        data-has-trailing={hasTrailing || undefined}
+        className={cn(inputDecoratorVariants({ density, tone }), wrapperClassName)}
+      >
+        {hasLeading && (
+          <span
+            data-slot="input-leading"
+            className={cn(
+              "absolute left-4 z-10 flex items-center text-muted-foreground/74 [&_svg]:size-4",
+              !leadingPointerEvents && "pointer-events-none",
+              leadingClassName
+            )}
+          >
+            {leading}
+          </span>
+        )}
+
+        <InputPrimitive
+          ref={ref}
+          value={resolvedValue}
+          className={cn(
+            hasLeading && "pl-11",
+            hasTrailing && hasTrailingAction ? "pr-28" : hasTrailing || hasTrailingAction ? "pr-12" : undefined,
+            inputClassName,
+            className
+          )}
+          {...props}
+        />
+
+        {hasTrailing && (
+          <span
+            data-slot="input-trailing"
+            className={cn(
+              "absolute right-12 z-10 flex items-center gap-1.5 text-muted-foreground/74",
+              !trailingPointerEvents && "pointer-events-none",
+              trailingClassName
+            )}
+          >
+            {trailing}
+          </span>
+        )}
+
+        {hasTrailingAction && (
+          <span
+            data-slot="input-trailing-action"
+            className={cn(
+              "absolute right-3 z-10 flex items-center gap-1.5 text-muted-foreground/74",
+              !trailingActionPointerEvents && "pointer-events-none",
+              trailingActionClassName
+            )}
+          >
+            {trailingAction}
+          </span>
+        )}
+      </div>
+    )
+  }
+)
+InputDecorator.displayName = "InputDecorator"
+
+export { InputDecorator, inputDecoratorVariants }

package/packages/cli/vendor/src/components/inputs/input-value.ts

@@ -0,0 +1,42 @@
+import * as React from "react"
+
+type InputValue = string | number | null | undefined
+
+type CreateInputChangeHandlerOptions<TValue> = {
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  onValueChange?: (value: TValue) => void
+  mapValue?: (rawValue: string, event: React.ChangeEvent<HTMLInputElement>) => TValue
+}
+
+function getInputValue(value: InputValue) {
+  return value == null ? "" : String(value)
+}
+
+function setInputElementValue(
+  event: React.ChangeEvent<HTMLInputElement>,
+  value: string
+) {
+  event.target.value = value
+  event.currentTarget.value = value
+}
+
+function createInputChangeHandler<TValue = string>({
+  onChange,
+  onValueChange,
+  mapValue,
+}: CreateInputChangeHandlerOptions<TValue>) {
+  return (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange?.(event)
+
+    if (!onValueChange) return
+
+    const rawValue = event.target.value
+    const nextValue = mapValue
+      ? mapValue(rawValue, event)
+      : (rawValue as TValue)
+
+    onValueChange(nextValue)
+  }
+}
+
+export { createInputChangeHandler, getInputValue, setInputElementValue }

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

@@ -0,0 +1,44 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type JsonInputProps = React.ComponentProps<"textarea"> & {
+  value?: string
+  onValueChange?: (value: string, parsed: unknown | null, valid: boolean) => void
+  invalidText?: React.ReactNode
+}
+
+function parseJson(value: string) {
+  if (!value.trim()) return { parsed: null, valid: true }
+
+  try {
+    return { parsed: JSON.parse(value), valid: true }
+  } catch {
+    return { parsed: null, valid: false }
+  }
+}
+
+function JsonInput({ value = "", onValueChange, invalidText = "Invalid JSON", className, onChange, ...props }: JsonInputProps) {
+  const [valid, setValid] = React.useState(true)
+
+  React.useEffect(() => {
+    setValid(parseJson(value).valid)
+  }, [value])
+
+  function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
+    const nextValue = event.target.value
+    const result = parseJson(nextValue)
+    setValid(result.valid)
+    onValueChange?.(nextValue, result.parsed, result.valid)
+    onChange?.(event)
+  }
+
+  return (
+    <div data-slot="json-input" className="grid gap-1.5">
+      <textarea value={value} spellCheck={false} className={cn("min-h-32 rounded-md border bg-background p-3 font-mono text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring", !valid && "border-destructive", className)} onChange={handleChange} {...props} />
+      {!valid && <p className="text-sm text-destructive">{invalidText}</p>}
+    </div>
+  )
+}
+
+export { JsonInput }

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

@@ -0,0 +1,51 @@
+import * as React from "react"
+
+import { InputDecorator } from "@/components/inputs/input-decorator"
+import { getInputValue, setInputElementValue } from "@/components/inputs/input-value"
+
+export type MaskedInputProps = Omit<
+  React.ComponentProps<typeof InputDecorator>,
+  "value" | "onChange"
+> & {
+  value?: string
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  onValueChange?: (value: string, rawValue: string) => void
+  mask?: (rawValue: string) => string
+  unmask?: (maskedValue: string) => string
+}
+
+function defaultMask(value: string) {
+  return value
+}
+
+function defaultUnmask(value: string) {
+  return value
+}
+
+const MaskedInput = React.forwardRef<HTMLInputElement, MaskedInputProps>(
+  (
+    {
+      value,
+      onChange,
+      onValueChange,
+      mask = defaultMask,
+      unmask = defaultUnmask,
+      ...props
+    },
+    ref
+  ) => {
+    const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+      const rawValue = unmask(event.target.value)
+      const maskedValue = mask(rawValue)
+
+      setInputElementValue(event, maskedValue)
+      onChange?.(event)
+      onValueChange?.(maskedValue, rawValue)
+    }
+
+    return <InputDecorator ref={ref} value={getInputValue(value)} onChange={handleChange} {...props} />
+  }
+)
+MaskedInput.displayName = "MaskedInput"
+
+export { MaskedInput }

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

@@ -0,0 +1,162 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type MentionOption = {
+  label: React.ReactNode
+  value: string
+  searchText?: string
+  insertValue?: string
+}
+
+export type MentionInputProps = Omit<React.ComponentProps<"textarea">, "value" | "defaultValue"> & {
+  value?: string
+  defaultValue?: string
+  options?: MentionOption[]
+  onMentionSelect?: (value: string) => void
+  onValueChange?: (value: string) => void
+  trigger?: string
+  maxSuggestions?: number
+}
+
+function getTriggerMatch(value: string, selectionStart: number, trigger: string) {
+  const prefix = value.slice(0, selectionStart)
+  const triggerIndex = prefix.lastIndexOf(trigger)
+
+  if (triggerIndex < 0) return null
+
+  const previousCharacter = prefix[triggerIndex - 1]
+  if (previousCharacter && /\S/.test(previousCharacter)) return null
+
+  const query = prefix.slice(triggerIndex + trigger.length)
+  if (/\s/.test(query)) return null
+
+  return { triggerIndex, query }
+}
+
+function MentionInput({
+  value,
+  defaultValue = "",
+  options = [],
+  onMentionSelect,
+  onValueChange,
+  className,
+  trigger = "@",
+  maxSuggestions = 6,
+  onChange,
+  onKeyDown,
+  ...props
+}: MentionInputProps) {
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null)
+  const [internalValue, setInternalValue] = React.useState(defaultValue)
+  const [selectionStart, setSelectionStart] = React.useState(0)
+  const [activeIndex, setActiveIndex] = React.useState(0)
+  const currentValue = value ?? internalValue
+  const triggerMatch = getTriggerMatch(currentValue, selectionStart, trigger)
+  const filteredOptions = React.useMemo(() => {
+    if (!triggerMatch) return []
+    const normalizedQuery = triggerMatch.query.trim().toLowerCase()
+
+    return options
+      .filter((option) => {
+        if (!normalizedQuery) return true
+        const rawLabel = typeof option.label === "string" ? option.label : option.value
+        const haystack = `${option.value} ${option.searchText ?? ""} ${rawLabel}`.toLowerCase()
+        return haystack.includes(normalizedQuery)
+      })
+      .slice(0, maxSuggestions)
+  }, [maxSuggestions, options, triggerMatch])
+  const showSuggestions = filteredOptions.length > 0 && triggerMatch !== null
+
+  React.useEffect(() => {
+    if (!showSuggestions) setActiveIndex(0)
+  }, [showSuggestions])
+
+  function updateValue(nextValue: string, event?: React.ChangeEvent<HTMLTextAreaElement>) {
+    if (value === undefined) setInternalValue(nextValue)
+    onValueChange?.(nextValue)
+    if (event) onChange?.(event)
+  }
+
+  function insertMention(option: MentionOption) {
+    if (!triggerMatch) return
+
+    const mentionValue = option.insertValue ?? option.value
+    const nextValue = `${currentValue.slice(0, triggerMatch.triggerIndex)}${trigger}${mentionValue} ${currentValue.slice(selectionStart)}`
+    const nextCursor = triggerMatch.triggerIndex + trigger.length + mentionValue.length + 1
+
+    if (value === undefined) setInternalValue(nextValue)
+    onValueChange?.(nextValue)
+    onMentionSelect?.(option.value)
+
+    requestAnimationFrame(() => {
+      textareaRef.current?.focus()
+      textareaRef.current?.setSelectionRange(nextCursor, nextCursor)
+      setSelectionStart(nextCursor)
+    })
+  }
+
+  return (
+    <div data-slot="mention-input" className="grid gap-2">
+      <textarea
+        ref={textareaRef}
+        value={currentValue}
+        className={cn("min-h-24 rounded-md border bg-background p-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring", className)}
+        onChange={(event) => {
+          updateValue(event.target.value, event)
+          setSelectionStart(event.target.selectionStart ?? event.target.value.length)
+        }}
+        onClick={(event) => setSelectionStart(event.currentTarget.selectionStart ?? 0)}
+        onKeyUp={(event) => setSelectionStart(event.currentTarget.selectionStart ?? 0)}
+        onKeyDown={(event) => {
+          if (showSuggestions) {
+            if (event.key === "ArrowDown") {
+              event.preventDefault()
+              setActiveIndex((current) => (current + 1) % filteredOptions.length)
+              return
+            }
+            if (event.key === "ArrowUp") {
+              event.preventDefault()
+              setActiveIndex((current) => (current - 1 + filteredOptions.length) % filteredOptions.length)
+              return
+            }
+            if (event.key === "Enter" || event.key === "Tab") {
+              event.preventDefault()
+              insertMention(filteredOptions[activeIndex] ?? filteredOptions[0])
+              return
+            }
+            if (event.key === "Escape") {
+              event.preventDefault()
+              setSelectionStart(currentValue.length)
+              return
+            }
+          }
+
+          onKeyDown?.(event)
+        }}
+        {...props}
+      />
+      {showSuggestions ? (
+        <div className="grid gap-1 rounded-xl border bg-card p-2 shadow-sm">
+          {filteredOptions.map((option, index) => (
+            <button
+              key={option.value}
+              type="button"
+              className={cn(
+                "flex items-center justify-between rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-muted",
+                index === activeIndex && "bg-muted"
+              )}
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={() => insertMention(option)}
+            >
+              <span className="font-medium">{option.label}</span>
+              <span className="text-xs text-muted-foreground">{trigger}{option.insertValue ?? option.value}</span>
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export { MentionInput }

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

@@ -0,0 +1,73 @@
+import * as React from "react"
+
+import { InputChrome } from "@/components/inputs/input-chrome"
+import { getInputValue } from "@/components/inputs/input-value"
+import { parseMoneyLikeInput } from "@/components/inputs/numeric-value"
+import { InputPrimitive } from "@/components/ui/input-primitive"
+import { cn } from "@/lib/utils"
+
+export type MoneyInputProps = Omit<
+  React.ComponentProps<"input">,
+  "value" | "onChange" | "type"
+> & {
+  value?: number | string | null
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  onValueChange?: (value: number | null, rawValue: string) => void
+  prefix?: React.ReactNode
+  suffix?: React.ReactNode
+  wrapperClassName?: string
+  inputClassName?: string
+}
+
+function parseMoneyInput(value: string) {
+  return parseMoneyLikeInput(value)
+}
+
+function MoneyInput({
+  value,
+  onChange,
+  onValueChange,
+  prefix,
+  suffix,
+  wrapperClassName,
+  inputClassName,
+  className,
+  inputMode = "decimal",
+  ...props
+}: MoneyInputProps) {
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+    onChange?.(event)
+    onValueChange?.(parseMoneyInput(event.target.value), event.target.value)
+  }
+
+  return (
+    <InputChrome
+      data-slot="money-input"
+      className={cn("text-sm", wrapperClassName)}
+      start={
+        prefix ? (
+          <span className="pl-2.5 text-xs font-medium text-muted-foreground">{prefix}</span>
+        ) : null
+      }
+      end={
+        suffix ? (
+          <span className="pr-2.5 text-xs font-medium text-muted-foreground">{suffix}</span>
+        ) : null
+      }
+    >
+      <InputPrimitive
+        value={getInputValue(value)}
+        onChange={handleChange}
+        inputMode={inputMode}
+        className={cn(
+          "h-full border-0 bg-transparent px-2.5 shadow-none focus-visible:border-0 focus-visible:ring-0",
+          inputClassName,
+          className
+        )}
+        {...props}
+      />
+    </InputChrome>
+  )
+}
+
+export { MoneyInput, parseMoneyInput }

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

@@ -0,0 +1,97 @@
+import * as React from "react"
+
+import { InputDecorator } from "@/components/inputs/input-decorator"
+import { getInputValue } from "@/components/inputs/input-value"
+import { clampNumericValue, parseDecimalInput } from "@/components/inputs/numeric-value"
+
+export type NumberInputProps = Omit<
+  React.ComponentProps<typeof InputDecorator>,
+  "type" | "value" | "onChange" | "min" | "max" | "step"
+> & {
+  value?: number | string | null
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  onValueChange?: (value: string) => void
+  onNumberChange?: (value: number | null) => void
+  min?: number
+  max?: number
+  step?: number
+  allowEmpty?: boolean
+  prefix?: React.ReactNode
+  suffix?: React.ReactNode
+}
+
+function parseNumberInput(value: string) {
+  return parseDecimalInput(value)
+}
+
+function clampNumber(value: number, min?: number, max?: number) {
+  return clampNumericValue(value, min, max)
+}
+
+const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
+  (
+    {
+      value,
+      onChange,
+      onValueChange,
+      onNumberChange,
+      min,
+      max,
+      step,
+      allowEmpty = true,
+      prefix,
+      suffix,
+      leading,
+      trailing,
+      inputMode = "decimal",
+      onBlur,
+      ...props
+    },
+    ref
+  ) => {
+    const stringValue = getInputValue(value)
+
+    const emitValue = (rawValue: string) => {
+      const parsed = parseNumberInput(rawValue)
+      const clamped = parsed == null ? null : clampNumber(parsed, min, max)
+
+      onValueChange?.(rawValue)
+      onNumberChange?.(clamped)
+    }
+
+    const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+      onChange?.(event)
+      emitValue(event.target.value)
+    }
+
+    const handleBlur: React.FocusEventHandler<HTMLInputElement> = (event) => {
+      if (!allowEmpty && !event.target.value.trim()) {
+        const fallbackValue = String(min ?? 0)
+        event.currentTarget.value = fallbackValue
+        emitValue(fallbackValue)
+      }
+
+      onBlur?.(event)
+    }
+
+    return (
+      <InputDecorator
+        ref={ref}
+        type="text"
+        value={stringValue}
+        inputMode={inputMode}
+        min={min}
+        max={max}
+        step={step}
+        leading={prefix ?? leading}
+        trailing={suffix ?? trailing}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        {...props}
+      />
+    )
+  }
+)
+NumberInput.displayName = "NumberInput"
+
+export { NumberInput, parseNumberInput, clampNumber }

package/packages/cli/vendor/src/components/inputs/numeric-value.ts

@@ -0,0 +1,39 @@
+function clampNumericValue(value: number, min?: number, max?: number) {
+  let nextValue = value
+
+  if (typeof min === "number") nextValue = Math.max(nextValue, min)
+  if (typeof max === "number") nextValue = Math.min(nextValue, max)
+
+  return nextValue
+}
+
+function normalizeDecimalInput(value: string) {
+  return value.trim().replace(/\s/g, "").replace(/,/g, ".")
+}
+
+function parseNormalizedNumber(value: string) {
+  if (!value || value === "-" || value === "." || value === "-.") {
+    return null
+  }
+
+  const parsed = Number(value)
+  return Number.isFinite(parsed) ? parsed : null
+}
+
+function parseDecimalInput(value: string) {
+  return parseNormalizedNumber(normalizeDecimalInput(value))
+}
+
+function parseMoneyLikeInput(value: string) {
+  return parseNormalizedNumber(
+    normalizeDecimalInput(value).replace(/[^0-9.-]/g, "")
+  )
+}
+
+export {
+  clampNumericValue,
+  normalizeDecimalInput,
+  parseDecimalInput,
+  parseMoneyLikeInput,
+  parseNormalizedNumber,
+}