azamat-ui-kit-cli 0.2.2

package/vendor/src/components/form/form-date-range-input.tsx

@@ -0,0 +1,79 @@
+import { Controller, type Control, type FieldPath, type FieldValues } from "react-hook-form"
+
+import { FormFieldShell, type FormFieldShellProps } from "@/components/form/form-field-shell"
+import {
+  DateRangeInput,
+  type DateRangeInputProps,
+  type DateRangeValue,
+} from "@/components/inputs/date-range-input"
+
+export type FormDateRangeInputProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TFromName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TToName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = Omit<DateRangeInputProps, "value" | "onValueChange"> &
+  Pick<FormFieldShellProps, "label" | "description" | "required" | "className"> & {
+    control: Control<TFieldValues>
+    fromName: TFromName
+    toName: TToName
+    emptyValue?: unknown
+    onValueChange?: (value: DateRangeValue) => void
+  }
+
+function FormDateRangeInput<
+  TFieldValues extends FieldValues = FieldValues,
+  TFromName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TToName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  control,
+  fromName,
+  toName,
+  label,
+  description,
+  required,
+  className,
+  emptyValue = "",
+  onValueChange,
+  ...props
+}: FormDateRangeInputProps<TFieldValues, TFromName, TToName>) {
+  return (
+    <Controller
+      control={control}
+      name={fromName}
+      render={({ field: fromField, fieldState: fromState }) => (
+        <Controller
+          control={control}
+          name={toName}
+          render={({ field: toField, fieldState: toState }) => {
+            const error = fromState.error?.message ?? toState.error?.message
+
+            return (
+              <FormFieldShell
+                label={label}
+                description={description}
+                required={required}
+                error={error}
+                className={className}
+              >
+                <DateRangeInput
+                  value={{
+                    from: fromField.value ?? "",
+                    to: toField.value ?? "",
+                  }}
+                  onValueChange={(value) => {
+                    fromField.onChange(value.from || emptyValue)
+                    toField.onChange(value.to || emptyValue)
+                    onValueChange?.(value)
+                  }}
+                  {...props}
+                />
+              </FormFieldShell>
+            )
+          }}
+        />
+      )}
+    />
+  )
+}
+
+export { FormDateRangeInput }

package/vendor/src/components/form/form-date-range-picker.tsx

@@ -0,0 +1,57 @@
+import { Controller, type Control, type FieldPath, type FieldValues } from "react-hook-form"
+
+import { DateRangePicker, type DateRangePickerProps } from "@/components/calendar/date-range-picker"
+import { FormFieldShell, type FormFieldShellProps } from "@/components/form/form-field-shell"
+
+export type FormDateRangePickerProps<TFieldValues extends FieldValues = FieldValues> = Omit<
+  DateRangePickerProps,
+  "value" | "onValueChange"
+> &
+  Pick<FormFieldShellProps, "label" | "description" | "required" | "className"> & {
+    control: Control<TFieldValues>
+    fromName: FieldPath<TFieldValues>
+    toName: FieldPath<TFieldValues>
+    emptyValue?: unknown
+    onValueChange?: (value: { from?: string; to?: string }) => void
+  }
+
+function FormDateRangePicker<TFieldValues extends FieldValues = FieldValues>({
+  control,
+  fromName,
+  toName,
+  label,
+  description,
+  required,
+  className,
+  emptyValue = "",
+  onValueChange,
+  ...props
+}: FormDateRangePickerProps<TFieldValues>) {
+  return (
+    <Controller
+      control={control}
+      name={fromName}
+      render={({ field: fromField, fieldState: fromState }) => (
+        <Controller
+          control={control}
+          name={toName}
+          render={({ field: toField, fieldState: toState }) => (
+            <FormFieldShell label={label} description={description} required={required} error={fromState.error?.message ?? toState.error?.message} className={className}>
+              <DateRangePicker
+                value={{ from: fromField.value ?? "", to: toField.value ?? "" }}
+                onValueChange={(value) => {
+                  fromField.onChange(value.from || emptyValue)
+                  toField.onChange(value.to || emptyValue)
+                  onValueChange?.({ from: value.from || undefined, to: value.to || undefined })
+                }}
+                {...props}
+              />
+            </FormFieldShell>
+          )}
+        />
+      )}
+    />
+  )
+}
+
+export { FormDateRangePicker }

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

@@ -0,0 +1,191 @@
+import * as React from "react"
+import { AlertCircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type FormFieldLayout = "vertical" | "horizontal" | "inline"
+export type FormFieldDescriptionPosition = "top" | "bottom"
+
+export type FormFieldShellProps = React.ComponentProps<"div"> & {
+  label?: React.ReactNode
+  description?: React.ReactNode
+  error?: React.ReactNode
+  required?: boolean
+  htmlFor?: string
+  layout?: FormFieldLayout
+  descriptionPosition?: FormFieldDescriptionPosition
+  labelAction?: React.ReactNode
+  requiredIndicator?: React.ReactNode
+  errorIcon?: React.ReactNode
+  showErrorIcon?: boolean
+  disabled?: boolean
+  readOnly?: boolean
+  labelClassName?: string
+  labelRowClassName?: string
+  descriptionClassName?: string
+  errorClassName?: string
+  contentClassName?: string
+}
+
+export type FormFieldShellControlProps = Pick<
+  FormFieldShellProps,
+  | "label"
+  | "description"
+  | "required"
+  | "className"
+  | "layout"
+  | "descriptionPosition"
+  | "labelAction"
+  | "requiredIndicator"
+  | "errorIcon"
+  | "showErrorIcon"
+  | "disabled"
+  | "readOnly"
+  | "labelClassName"
+  | "labelRowClassName"
+  | "descriptionClassName"
+  | "errorClassName"
+  | "contentClassName"
+>
+
+const layoutClassName: Record<FormFieldLayout, string> = {
+  vertical: "grid gap-2",
+  horizontal: "grid gap-2 sm:grid-cols-[minmax(0,12rem)_1fr] sm:items-start sm:gap-5",
+  inline: "flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4",
+}
+
+function FormFieldShell({
+  className,
+  label,
+  description,
+  error,
+  required = false,
+  htmlFor,
+  layout = "vertical",
+  descriptionPosition = "top",
+  labelAction,
+  requiredIndicator = <span className="ml-1 text-destructive">*</span>,
+  errorIcon,
+  showErrorIcon = true,
+  disabled = false,
+  readOnly = false,
+  labelClassName,
+  labelRowClassName,
+  descriptionClassName,
+  errorClassName,
+  contentClassName,
+  children,
+  ...props
+}: FormFieldShellProps) {
+  const hasHeader = Boolean(label || labelAction)
+  const hasDescriptionTop = description && descriptionPosition === "top"
+  const hasDescriptionBottom = description && descriptionPosition === "bottom"
+  const resolvedErrorIcon = errorIcon ?? <AlertCircleIcon className="size-3.5" />
+
+  const header = hasHeader ? (
+    <div
+      data-slot="form-field-label-row"
+      className={cn(
+        "flex min-w-0 items-center justify-between gap-3",
+        layout === "inline" && "sm:w-auto",
+        labelRowClassName
+      )}
+    >
+      {label ? (
+        <label
+          data-slot="form-field-label"
+          htmlFor={htmlFor}
+          className={cn(
+            "min-w-0 text-sm font-semibold leading-none text-foreground",
+            disabled && "cursor-not-allowed opacity-60",
+            readOnly && "opacity-80",
+            labelClassName
+          )}
+        >
+          {label}
+          {required && requiredIndicator}
+        </label>
+      ) : (
+        <span />
+      )}
+
+      {labelAction && (
+        <div data-slot="form-field-label-action" className="shrink-0 text-sm">
+          {labelAction}
+        </div>
+      )}
+    </div>
+  ) : null
+
+  const descriptionNode = description ? (
+    <p
+      data-slot="form-field-description"
+      className={cn("text-sm leading-6 text-muted-foreground", disabled && "opacity-60", descriptionClassName)}
+    >
+      {description}
+    </p>
+  ) : null
+
+  const content = (
+    <div data-slot="form-field-content" className={cn("min-w-0 space-y-2", contentClassName)}>
+      {children}
+    </div>
+  )
+
+  const errorNode = error ? (
+    <p
+      data-slot="form-field-error"
+      className={cn("flex items-start gap-2 text-sm font-medium leading-6 text-destructive", errorClassName)}
+    >
+      {showErrorIcon && <span className="mt-1 shrink-0">{resolvedErrorIcon}</span>}
+      <span className="min-w-0">{error}</span>
+    </p>
+  ) : null
+
+  return (
+    <div
+      data-slot="form-field-shell"
+      data-layout={layout}
+      data-invalid={Boolean(error) || undefined}
+      data-disabled={disabled || undefined}
+      data-readonly={readOnly || undefined}
+      aria-disabled={disabled || undefined}
+      className={cn(layoutClassName[layout], className)}
+      {...props}
+    >
+      {layout === "horizontal" ? (
+        <>
+          <div className="grid gap-2 sm:pt-2.5">
+            {header}
+            {hasDescriptionTop && descriptionNode}
+          </div>
+          <div className="grid min-w-0 gap-2">
+            {content}
+            {hasDescriptionBottom && descriptionNode}
+            {errorNode}
+          </div>
+        </>
+      ) : layout === "inline" ? (
+        <>
+          {header}
+          <div className="grid min-w-0 flex-1 gap-2">
+            {hasDescriptionTop && descriptionNode}
+            {content}
+            {hasDescriptionBottom && descriptionNode}
+            {errorNode}
+          </div>
+        </>
+      ) : (
+        <>
+          {header}
+          {hasDescriptionTop && descriptionNode}
+          {content}
+          {hasDescriptionBottom && descriptionNode}
+          {errorNode}
+        </>
+      )}
+    </div>
+  )
+}
+
+export { FormFieldShell }