tembro 1.0.0

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

@@ -0,0 +1,29 @@
+import { type FormInputNumberVariantProps } from "@/components/form/form-input"
+import { renderDeprecatedFormInputAlias } from "@/components/form/deprecated-compat"
+import type { FieldPath, FieldValues } from "react-hook-form"
+
+export type FormNumberInputProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = Omit<FormInputNumberVariantProps<TFieldValues, TName>, "kind" | "step" | "max" | "min"> & {
+  step?: number
+  min?: number
+  max?: number
+}
+
+/**
+ * @deprecated Use {@link FormInput} with `kind="number"` instead.
+ */
+function FormNumberInput<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(props: FormNumberInputProps<TFieldValues, TName>) {
+  return renderDeprecatedFormInputAlias({
+    componentName: "FormNumberInput",
+    replacement: "FormInput with kind=\"number\"",
+    kind: "number",
+    props,
+  })
+}
+
+export { FormNumberInput }

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

@@ -0,0 +1,25 @@
+import { type FormInputPasswordVariantProps as BaseFormPasswordInputProps } from "@/components/form/form-input"
+import { renderDeprecatedFormInputAlias } from "@/components/form/deprecated-compat"
+import type { FieldPath, FieldValues } from "react-hook-form"
+
+export type FormPasswordInputProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = Omit<BaseFormPasswordInputProps<TFieldValues, TName>, "kind">
+
+/**
+ * @deprecated Use {@link FormInput} with `kind="password"` instead.
+ */
+function FormPasswordInput<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(props: FormPasswordInputProps<TFieldValues, TName>) {
+  return renderDeprecatedFormInputAlias({
+    componentName: "FormPasswordInput",
+    replacement: "FormInput with kind=\"password\"",
+    kind: "password",
+    props,
+  })
+}
+
+export { FormPasswordInput }

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

@@ -0,0 +1,32 @@
+import { type FormInputPhoneInputValueMode, type FormInputPhoneVariantProps } from "@/components/form/form-input"
+import { renderDeprecatedFormInputAlias } from "@/components/form/deprecated-compat"
+import type { FieldPath, FieldValues } from "react-hook-form"
+
+export type FormPhoneInputValueMode = FormInputPhoneInputValueMode
+export type { FormInputPhoneInputValueMode }
+
+export type FormPhoneInputProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = Omit<FormInputPhoneVariantProps<TFieldValues, TName>, "kind" | "valueMode"> & {
+  valueMode?: FormInputPhoneInputValueMode
+}
+
+/**
+ * @deprecated Use {@link FormInput} with `kind="phone"` instead.
+ */
+function FormPhoneInput<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(props: FormPhoneInputProps<TFieldValues, TName>) {
+  const { valueMode, ...rest } = props
+  return renderDeprecatedFormInputAlias({
+    componentName: "FormPhoneInput",
+    replacement: "FormInput with kind=\"phone\"",
+    kind: "phone",
+    props: rest,
+    extraProps: { valueMode },
+  })
+}
+
+export { FormPhoneInput }

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

@@ -0,0 +1,25 @@
+import { type FormInputSearchVariantProps } from "@/components/form/form-input"
+import { renderDeprecatedFormInputAlias } from "@/components/form/deprecated-compat"
+import type { FieldPath, FieldValues } from "react-hook-form"
+
+export type FormSearchInputProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = Omit<FormInputSearchVariantProps<TFieldValues, TName>, "kind">
+
+/**
+ * @deprecated Use {@link FormInput} with `kind="search"` instead.
+ */
+function FormSearchInput<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(props: FormSearchInputProps<TFieldValues, TName>) {
+  return renderDeprecatedFormInputAlias({
+    componentName: "FormSearchInput",
+    replacement: "FormInput with kind=\"search\"",
+    kind: "search",
+    props,
+  })
+}
+
+export { FormSearchInput }

package/packages/cli/vendor/src/components/form/form-select.tsx

@@ -0,0 +1,195 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { Controller, type Control, type FieldPath, type FieldValues } from "react-hook-form"
+
+import {
+  AsyncSelect,
+  type AsyncSelectOption,
+  type AsyncSelectProps,
+} from "@/components/inputs/async-select"
+import { SimpleSelect, type SimpleSelectProps } from "@/components/inputs/simple-select"
+import {
+  FormFieldShell,
+  type FormFieldShellControlProps,
+} from "@/components/form/form-field-shell"
+
+export type FormSelectKind = "simple" | "async"
+
+type FormSelectBaseProps<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues>,
+> = FormFieldShellControlProps & {
+  control: Control<TFieldValues>
+  name: TName
+  fieldClassName?: string
+}
+
+export type FormSimpleSelectProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = Omit<SimpleSelectProps, "value" | "onValueChange" | "disabled"> &
+  FormSelectBaseProps<TFieldValues, TName> & {
+    kind?: "simple"
+    emptyValue?: unknown
+    onValueChange?: (value: string) => void
+  }
+
+export type FormSelectAsyncVariantProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TValue extends string = string,
+  TData = unknown,
+  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
+> = Omit<AsyncSelectProps<TValue, TData, TOption>, "value" | "onValueChange" | "disabled"> &
+  FormSelectBaseProps<TFieldValues, TName> & {
+    kind: "async"
+    emptyValue?: unknown
+    onValueChange?: (value: TValue | undefined, option?: TOption) => void
+  }
+
+export type FormSelectProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TValue extends string = string,
+  TData = unknown,
+  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
+> =
+  | FormSimpleSelectProps<TFieldValues, TName>
+  | FormSelectAsyncVariantProps<TFieldValues, TName, TValue, TData, TOption>
+
+function buildShellProps<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues>,
+  TValue extends string,
+  TData,
+  TOption extends AsyncSelectOption<TValue, TData>,
+>(props: FormSelectProps<TFieldValues, TName, TValue, TData, TOption>) {
+  return {
+    label: props.label,
+    description: props.description,
+    required: props.required,
+    className: props.className,
+    layout: props.layout,
+    descriptionPosition: props.descriptionPosition,
+    labelAction: props.labelAction,
+    requiredIndicator: props.requiredIndicator,
+    errorIcon: props.errorIcon,
+    showErrorIcon: props.showErrorIcon,
+    disabled: props.disabled,
+    readOnly: props.readOnly,
+    labelClassName: props.labelClassName,
+    labelRowClassName: props.labelRowClassName,
+    descriptionClassName: props.descriptionClassName,
+    errorClassName: props.errorClassName,
+    contentClassName: props.contentClassName,
+  } satisfies FormFieldShellControlProps
+}
+
+function FormSelect<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TValue extends string = string,
+  TData = unknown,
+  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
+>(props: FormSelectProps<TFieldValues, TName, TValue, TData, TOption>) {
+  const shellProps = buildShellProps(props)
+  const kind = props.kind ?? "simple"
+  const resolvedFieldClassName = props.fieldClassName ?? "w-full"
+
+  return (
+    <Controller
+      control={props.control}
+      name={props.name}
+      render={({ field, fieldState }) => {
+        const error = fieldState.error?.message
+
+        if (kind === "async") {
+          const {
+            control: _control,
+            name: _name,
+            label: _label,
+            description: _description,
+            required: _required,
+            className: _className,
+            layout: _layout,
+            descriptionPosition: _descriptionPosition,
+            labelAction: _labelAction,
+            requiredIndicator: _requiredIndicator,
+            errorIcon: _errorIcon,
+            showErrorIcon: _showErrorIcon,
+            disabled,
+            readOnly,
+            labelClassName: _labelClassName,
+            labelRowClassName: _labelRowClassName,
+            descriptionClassName: _descriptionClassName,
+            errorClassName: _errorClassName,
+            contentClassName: _contentClassName,
+            fieldClassName,
+            emptyValue,
+            kind: _kind,
+            onValueChange,
+            ...asyncProps
+          } = props as FormSelectAsyncVariantProps<TFieldValues, TName, TValue, TData, TOption>
+
+          return (
+            <FormFieldShell {...shellProps} error={error}>
+            <AsyncSelect<TValue, TData, TOption>
+                {...asyncProps}
+                value={field.value == null || field.value === "" ? undefined : (String(field.value) as TValue)}
+                disabled={disabled || readOnly}
+                onValueChange={(nextValue, option) => {
+                  field.onChange(nextValue ?? emptyValue)
+                  onValueChange?.(nextValue, option)
+                }}
+                triggerClassName={fieldClassName ?? resolvedFieldClassName}
+              />
+            </FormFieldShell>
+          )
+        }
+
+        const {
+          control: _control,
+          name: _name,
+          label: _label,
+          description: _description,
+          required: _required,
+          className: _className,
+          layout: _layout,
+          descriptionPosition: _descriptionPosition,
+          labelAction: _labelAction,
+          requiredIndicator: _requiredIndicator,
+          errorIcon: _errorIcon,
+          showErrorIcon: _showErrorIcon,
+          disabled,
+          readOnly,
+          labelClassName: _labelClassName,
+          labelRowClassName: _labelRowClassName,
+          descriptionClassName: _descriptionClassName,
+          errorClassName: _errorClassName,
+          contentClassName: _contentClassName,
+          fieldClassName,
+          emptyValue,
+          kind: _kind,
+          onValueChange,
+          ...simpleProps
+        } = props as FormSimpleSelectProps<TFieldValues, TName>
+
+        return (
+          <FormFieldShell {...shellProps} error={error}>
+            <SimpleSelect
+              {...simpleProps}
+              value={field.value == null ? "" : String(field.value)}
+              disabled={disabled || readOnly}
+              onValueChange={(nextValue) => {
+                field.onChange(nextValue || emptyValue)
+                onValueChange?.(nextValue as string)
+              }}
+              triggerClassName={fieldClassName ?? resolvedFieldClassName}
+            />
+          </FormFieldShell>
+        )
+      }}
+    />
+  )
+}
+
+export { FormSelect }

package/packages/cli/vendor/src/components/form/form-switch.tsx

@@ -0,0 +1,145 @@
+import * as React from "react"
+import { Controller, type Control, type FieldPath, type FieldValues } from "react-hook-form"
+
+import { FormFieldShell, type FormFieldShellControlProps } from "@/components/form/form-field-shell"
+import { Switch } from "@/components/ui/switch"
+import { cn } from "@/lib/utils"
+
+export type FormSwitchLabelPlacement = "start" | "end"
+
+export type FormSwitchProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = Omit<React.ComponentProps<typeof Switch>, "name" | "checked" | "defaultChecked" | "disabled"> &
+  FormFieldShellControlProps & {
+    control: Control<TFieldValues>
+    name: TName
+    fieldClassName?: string
+    labelPlacement?: FormSwitchLabelPlacement
+    onCheckedChange?: (checked: boolean) => void
+  }
+
+function FormSwitch<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  control,
+  name,
+  label,
+  description,
+  required,
+  className,
+  layout,
+  descriptionPosition,
+  labelAction,
+  requiredIndicator,
+  errorIcon,
+  showErrorIcon,
+  disabled,
+  readOnly,
+  labelClassName,
+  labelRowClassName,
+  descriptionClassName,
+  errorClassName,
+  contentClassName,
+  fieldClassName,
+  labelPlacement = "end",
+  id,
+  onCheckedChange,
+  ...props
+}: FormSwitchProps<TFieldValues, TName>) {
+  const switchId = id ?? name
+  const labelContent = label ? (
+    <label
+      htmlFor={switchId}
+      className={cn("text-sm font-medium leading-none", disabled && "opacity-60", labelClassName)}
+    >
+      {label}
+      {required && (requiredIndicator ?? <span className="ml-1 text-destructive">*</span>)}
+    </label>
+  ) : null
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field, fieldState }) => {
+        const switchControl = (
+          <Switch
+            id={switchId}
+            ref={field.ref}
+            checked={Boolean(field.value)}
+            disabled={disabled || readOnly}
+            aria-invalid={fieldState.invalid || undefined}
+            className={fieldClassName}
+            onBlur={field.onBlur}
+            onCheckedChange={(checked) => {
+              field.onChange(checked)
+              onCheckedChange?.(checked)
+            }}
+            {...props}
+          />
+        )
+
+        return labelPlacement === "start" ? (
+          <FormFieldShell
+            label={label}
+            description={description}
+            required={required}
+            error={fieldState.error?.message}
+            htmlFor={switchId}
+            className={className}
+            layout={layout}
+            descriptionPosition={descriptionPosition}
+            labelAction={labelAction}
+            requiredIndicator={requiredIndicator}
+            errorIcon={errorIcon}
+            showErrorIcon={showErrorIcon}
+            disabled={disabled}
+            readOnly={readOnly}
+            labelClassName={labelClassName}
+            labelRowClassName={labelRowClassName}
+            descriptionClassName={descriptionClassName}
+            errorClassName={errorClassName}
+            contentClassName={contentClassName}
+          >
+            {switchControl}
+          </FormFieldShell>
+        ) : (
+          <FormFieldShell
+            error={fieldState.error?.message}
+            className={className}
+            errorIcon={errorIcon}
+            showErrorIcon={showErrorIcon}
+            disabled={disabled}
+            readOnly={readOnly}
+            errorClassName={errorClassName}
+            contentClassName={contentClassName}
+          >
+            <div className="flex items-start gap-3">
+              {switchControl}
+
+              {(label || description || labelAction) && (
+                <div className="grid min-w-0 gap-1">
+                  {(label || labelAction) && (
+                    <div className={cn("flex items-center justify-between gap-2", labelRowClassName)}>
+                      {labelContent}
+                      {labelAction && <div className="shrink-0 text-sm">{labelAction}</div>}
+                    </div>
+                  )}
+                  {description && (
+                    <p className={cn("text-xs text-muted-foreground", descriptionClassName)}>
+                      {description}
+                    </p>
+                  )}
+                </div>
+              )}
+            </div>
+          </FormFieldShell>
+        )
+      }}
+    />
+  )
+}
+
+export { FormSwitch }

package/packages/cli/vendor/src/components/form/form-textarea.tsx

@@ -0,0 +1,106 @@
+import * as React from "react"
+import { Controller, type Control, type FieldPath, type FieldValues, type RegisterOptions } from "react-hook-form"
+
+import { FormFieldShell, type FormFieldShellControlProps } from "@/components/form/form-field-shell"
+import { Textarea } from "@/components/ui/textarea"
+
+export type FormTextareaProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = Omit<React.ComponentProps<typeof Textarea>, "name" | "value" | "defaultValue"> &
+  FormFieldShellControlProps & {
+    control: Control<TFieldValues>
+    name: TName
+    rules?: RegisterOptions<TFieldValues, TName>
+    fieldClassName?: string
+    transformIn?: (value: unknown) => string | number | readonly string[] | undefined
+    transformOut?: (event: React.ChangeEvent<HTMLTextAreaElement>) => unknown
+  }
+
+function FormTextarea<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  control,
+  name,
+  rules,
+  label,
+  description,
+  required,
+  className,
+  layout,
+  descriptionPosition,
+  labelAction,
+  requiredIndicator,
+  errorIcon,
+  showErrorIcon,
+  disabled,
+  readOnly,
+  labelClassName,
+  labelRowClassName,
+  descriptionClassName,
+  errorClassName,
+  contentClassName,
+  fieldClassName,
+  transformIn,
+  transformOut,
+  id,
+  onChange,
+  onBlur,
+  ...props
+}: FormTextareaProps<TFieldValues, TName>) {
+  const textareaId = id ?? name
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      rules={rules}
+      render={({ field, fieldState }) => (
+        <FormFieldShell
+          label={label}
+          description={description}
+          required={required}
+          error={fieldState.error?.message}
+          htmlFor={textareaId}
+          className={className}
+          layout={layout}
+          descriptionPosition={descriptionPosition}
+          labelAction={labelAction}
+          requiredIndicator={requiredIndicator}
+          errorIcon={errorIcon}
+          showErrorIcon={showErrorIcon}
+          disabled={disabled}
+          readOnly={readOnly}
+          labelClassName={labelClassName}
+          labelRowClassName={labelRowClassName}
+          descriptionClassName={descriptionClassName}
+          errorClassName={errorClassName}
+          contentClassName={contentClassName}
+        >
+          <Textarea
+            id={textareaId}
+            ref={field.ref}
+            name={field.name}
+            value={transformIn ? transformIn(field.value) : field.value ?? ""}
+            disabled={disabled}
+            readOnly={readOnly}
+            onBlur={(event) => {
+              field.onBlur()
+              onBlur?.(event)
+            }}
+            onChange={(event) => {
+              field.onChange(transformOut ? transformOut(event) : event)
+              onChange?.(event)
+            }}
+            aria-invalid={fieldState.invalid || undefined}
+            className={fieldClassName}
+            {...props}
+          />
+        </FormFieldShell>
+      )}
+    />
+  )
+}
+
+export { FormTextarea }

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

@@ -0,0 +1,15 @@
+export * from "./form-field-shell"
+export * from "./form-input"
+export * from "./form-select"
+export * from "./form-async-select"
+export * from "./form-textarea"
+export * from "./form-switch"
+export * from "./form-search-input"
+export * from "./form-password-input"
+export * from "./form-number-input"
+export * from "./form-phone-input"
+export * from "./form-date-input"
+export * from "./form-date-range-input"
+export * from "./form-date-picker"
+export * from "./form-date-range-picker"
+export * from "./repeater-field"

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

@@ -0,0 +1,18 @@
+// Canonical form surface
+export * from "./form-field-shell"
+export * from "./form-input"
+export * from "./form-select"
+export * from "./form-switch"
+export * from "./form-textarea"
+export * from "./form-date-picker"
+export * from "./form-date-range-picker"
+export * from "./repeater-field"
+
+// Compatibility aliases
+export * from "./form-async-select"
+export * from "./form-date-input"
+export * from "./form-date-range-input"
+export * from "./form-number-input"
+export * from "./form-password-input"
+export * from "./form-phone-input"
+export * from "./form-search-input"

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

@@ -0,0 +1,93 @@
+import * as React from "react"
+import { PlusIcon, Trash2Icon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type RepeaterFieldProps<T> = Omit<React.ComponentProps<"div">, "value" | "onChange"> & {
+  value: T[]
+  onValueChange: (value: T[]) => void
+  renderItem: (item: T, index: number, helpers: { remove: () => void; update: (item: T) => void }) => React.ReactNode
+  createItem: () => T
+  addLabel?: React.ReactNode
+  max?: number
+  min?: number
+  disabled?: boolean
+}
+
+function RepeaterField<T>({
+  value,
+  onValueChange,
+  renderItem,
+  createItem,
+  addLabel = "Add item",
+  max = Infinity,
+  min = 0,
+  disabled = false,
+  className,
+  ...props
+}: RepeaterFieldProps<T>) {
+  const handleAdd = () => {
+    if (value.length < max) {
+      onValueChange([...value, createItem()])
+    }
+  }
+
+  const handleRemove = (indexToRemove: number) => {
+    if (value.length > min) {
+      onValueChange(value.filter((_, index) => index !== indexToRemove))
+    }
+  }
+
+  const handleUpdate = (indexToUpdate: number, newItem: T) => {
+    const newItems = [...value]
+    newItems[indexToUpdate] = newItem
+    onValueChange(newItems)
+  }
+
+  const canAdd = value.length < max && !disabled
+  const canRemove = value.length > min && !disabled
+
+  return (
+    <div data-slot="repeater-field" className={cn("flex flex-col gap-4", className)} {...props}>
+      {value.map((item, index) => (
+        <div key={index} className="flex items-start gap-2">
+          <div className="flex-1 min-w-0">
+            {renderItem(item, index, {
+              remove: () => handleRemove(index),
+              update: (newItem: T) => handleUpdate(index, newItem),
+            })}
+          </div>
+          {canRemove && (
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              className="shrink-0 text-muted-foreground hover:text-destructive"
+              onClick={() => handleRemove(index)}
+              aria-label="Remove item"
+            >
+              <Trash2Icon className="size-4" />
+            </Button>
+          )}
+        </div>
+      ))}
+      {canAdd && (
+        <div>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={handleAdd}
+            className="w-full sm:w-auto"
+          >
+            <PlusIcon className="mr-2 size-4" />
+            {addLabel}
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { RepeaterField }