azamat-ui-kit-cli 0.2.2

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

@@ -0,0 +1,194 @@
+/* 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"
+
+  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}
+              />
+            </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)
+              }}
+              triggerClassName={fieldClassName}
+            />
+          </FormFieldShell>
+        )
+      }}
+    />
+  )
+}
+
+export { FormSelect }

package/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/vendor/src/components/form/form-textarea.tsx

@@ -0,0 +1,103 @@
+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 { 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
+    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,
+  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}
+      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/vendor/src/components/form/index.ts

@@ -0,0 +1,17 @@
+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 "./form-actions"
+export * from "./form-section"
+export * from "./smart-form-shell"

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

@@ -0,0 +1,14 @@
+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"

package/vendor/src/components/form/smart-form-shell.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+
+import { FormActions } from "@/components/form/form-actions"
+import { FormSection } from "@/components/form/form-section"
+import { cn } from "@/lib/utils"
+
+/** @deprecated Prefer `FormFamily.Section`/`FormFamily.Actions` composition or `FormFamily.Builder` for new public usage. */
+export type SmartFormSection = {
+  key: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  fields?: React.ReactNode
+  content?: React.ReactNode
+  columns?: 1 | 2 | 3
+  hidden?: boolean
+}
+
+/** @deprecated Prefer `FormFamily` entry members for new public usage. */
+export type SmartFormShellProps = React.ComponentProps<"form"> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  sections?: SmartFormSection[]
+  actions?: React.ReactNode
+  loading?: boolean
+  disabled?: boolean
+  submitLabel?: React.ReactNode
+  cancelLabel?: React.ReactNode
+  onCancel?: () => void
+  renderHeader?: () => React.ReactNode
+  renderSection?: (section: SmartFormSection) => React.ReactNode
+  contentClassName?: string
+}
+
+/** @deprecated Prefer `FormFamily.Shell` access and migrate new docs usage toward family-first form composition. */
+function SmartFormShell({ title, description, sections, actions, loading = false, disabled = false, submitLabel, cancelLabel, onCancel, renderHeader, renderSection, contentClassName, className, children, ...props }: SmartFormShellProps) {
+  const visibleSections = sections?.filter((section) => !section.hidden)
+
+  return (
+    <form data-slot="smart-form-shell" className={cn("grid gap-5", className)} {...props}>
+      {renderHeader?.() ?? ((title || description) && (
+        <div className="grid gap-1">
+          {title && <h2 className="text-xl font-semibold tracking-tight text-foreground">{title}</h2>}
+          {description && <p className="text-sm text-muted-foreground">{description}</p>}
+        </div>
+      ))}
+      <div className={cn("grid gap-4", contentClassName)}>
+        {visibleSections?.map((section) => renderSection?.(section) ?? (
+          <FormSection key={section.key} title={section.title} description={section.description} columns={section.columns}>
+            {section.content ?? section.fields}
+          </FormSection>
+        ))}
+        {children}
+      </div>
+      {actions ?? <FormActions loading={loading} disabled={disabled} submitLabel={submitLabel} cancelLabel={cancelLabel} onCancel={onCancel} />}
+    </form>
+  )
+}
+
+export { SmartFormShell }