azamat-ui-kit-cli 0.2.2

package/vendor/src/components/inputs/clearable-input.tsx

@@ -0,0 +1,78 @@
+import * as React from "react"
+import { XIcon } from "lucide-react"
+
+import { InputDecorator } from "@/components/inputs/input-decorator"
+import { createInputChangeHandler, getInputValue } from "@/components/inputs/input-value"
+
+export type ClearableInputProps = Omit<
+  React.ComponentProps<typeof InputDecorator>,
+  "value" | "onChange"
+> & {
+  value?: string | number | null
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  onValueChange?: (value: string) => void
+  onClear?: () => void
+  clearable?: boolean
+  clearLabel?: string
+  leadingIcon?: React.ReactNode
+  trailing?: React.ReactNode
+  wrapperClassName?: string
+  inputClassName?: string
+}
+
+const ClearableInput = React.forwardRef<HTMLInputElement, ClearableInputProps>(
+  (
+    {
+      value,
+      onChange,
+      onValueChange,
+      onClear,
+      clearable = true,
+      clearLabel = "Clear",
+      leadingIcon,
+      trailing,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const stringValue = getInputValue(value)
+    const canClear = clearable && stringValue.length > 0 && !disabled
+    const handleChange = createInputChangeHandler({ onChange, onValueChange })
+
+    const handleClear = () => {
+      onValueChange?.("")
+      onClear?.()
+    }
+
+    return (
+      <InputDecorator
+        data-slot="clearable-input"
+        ref={ref}
+        value={stringValue}
+        disabled={disabled}
+        onChange={handleChange}
+        leading={leadingIcon}
+        trailing={
+          <>
+            {trailing}
+            {canClear && (
+              <button
+                type="button"
+                aria-label={clearLabel}
+                className="rounded-sm p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                onClick={handleClear}
+              >
+                <XIcon className="size-4" />
+              </button>
+            )}
+          </>
+        }
+        {...props}
+      />
+    )
+  }
+)
+ClearableInput.displayName = "ClearableInput"
+
+export { ClearableInput }

package/vendor/src/components/inputs/color-input.tsx

@@ -0,0 +1,47 @@
+import * as React from "react"
+
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+
+export type ColorInputProps = Omit<React.ComponentProps<"input">, "type" | "value" | "defaultValue" | "onChange"> & {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  label?: React.ReactNode
+  description?: React.ReactNode
+  swatchClassName?: string
+}
+
+function ColorInput({ value, defaultValue = "#000000", onValueChange, label, description, swatchClassName, className, disabled, ...props }: ColorInputProps) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue)
+  const currentValue = value ?? internalValue
+
+  const updateValue = (nextValue: string) => {
+    if (value === undefined) setInternalValue(nextValue)
+    onValueChange?.(nextValue)
+  }
+
+  return (
+    <div data-slot="color-input" className={cn("grid gap-2", className)}>
+      {(label || description) && (
+        <div className="grid gap-0.5">
+          {label && <label className="text-sm font-medium text-foreground">{label}</label>}
+          {description && <div className="text-xs text-muted-foreground">{description}</div>}
+        </div>
+      )}
+      <div className="flex items-center gap-2">
+        <input
+          type="color"
+          value={currentValue}
+          disabled={disabled}
+          className={cn("size-9 cursor-pointer rounded-md border bg-background p-1 disabled:cursor-not-allowed disabled:opacity-50", swatchClassName)}
+          onChange={(event) => updateValue(event.currentTarget.value)}
+          {...props}
+        />
+        <Input value={currentValue} disabled={disabled} onChange={(event) => updateValue(event.currentTarget.value)} className="font-mono" />
+      </div>
+    </div>
+  )
+}
+
+export { ColorInput }

package/vendor/src/components/inputs/combobox.tsx

@@ -0,0 +1,89 @@
+import * as React from "react"
+import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+
+export type ComboboxOption<TValue extends string = string> = {
+  value: TValue
+  label: React.ReactNode
+  searchValue?: string
+  description?: React.ReactNode
+  disabled?: boolean
+  hidden?: boolean
+}
+
+export type ComboboxProps<TValue extends string = string> = React.ComponentProps<"div"> & {
+  value?: TValue
+  options: ComboboxOption<TValue>[]
+  onValueChange?: (value: TValue | undefined, option?: ComboboxOption<TValue>) => void
+  placeholder?: React.ReactNode
+  searchPlaceholder?: string
+  emptyLabel?: React.ReactNode
+  disabled?: boolean
+}
+
+function Combobox<TValue extends string = string>({
+  value,
+  options,
+  onValueChange,
+  placeholder = "Select option",
+  searchPlaceholder = "Search...",
+  emptyLabel = "No option found",
+  disabled = false,
+  className,
+  ...props
+}: ComboboxProps<TValue>) {
+  const [open, setOpen] = React.useState(false)
+  const [search, setSearch] = React.useState("")
+  const selectedOption = options.find((option) => option.value === value)
+  const normalizedSearch = search.trim().toLowerCase()
+  const filteredOptions = options.filter((option) => {
+    if (option.hidden) return false
+    if (!normalizedSearch) return true
+    return String(option.searchValue ?? option.label).toLowerCase().includes(normalizedSearch)
+  })
+
+  return (
+    <div data-slot="combobox" className={cn("relative grid gap-2", className)} {...props}>
+      <Button type="button" variant="outline" disabled={disabled} className="w-full justify-between" onClick={() => setOpen((value) => !value)}>
+        <span className={cn("truncate", !selectedOption && "text-muted-foreground")}>{selectedOption?.label ?? placeholder}</span>
+        <ChevronDownIcon className="size-4 opacity-60" />
+      </Button>
+      {open && (
+        <div className="absolute top-full z-30 mt-2 w-full rounded-md border bg-popover p-2 text-popover-foreground shadow-md">
+          <div className="relative mb-2">
+            <SearchIcon className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input value={search} onChange={(event) => setSearch(event.target.value)} placeholder={searchPlaceholder} className="h-9 pl-8" />
+          </div>
+          <div className="max-h-64 overflow-y-auto">
+            {filteredOptions.length ? filteredOptions.map((option) => {
+              const active = option.value === value
+              return (
+                <button
+                  key={option.value}
+                  type="button"
+                  disabled={option.disabled}
+                  className={cn("flex w-full items-start gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-muted disabled:pointer-events-none disabled:opacity-50", active && "bg-muted")}
+                  onClick={() => {
+                    onValueChange?.(option.value, option)
+                    setOpen(false)
+                  }}
+                >
+                  <span className="mt-0.5 flex size-4 shrink-0 items-center justify-center">{active && <CheckIcon className="size-4" />}</span>
+                  <span className="min-w-0">
+                    <span className="block truncate font-medium">{option.label}</span>
+                    {option.description && <span className="block text-xs text-muted-foreground">{option.description}</span>}
+                  </span>
+                </button>
+              )
+            }) : <div className="px-2 py-6 text-center text-sm text-muted-foreground">{emptyLabel}</div>}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { Combobox }

package/vendor/src/components/inputs/date-input.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+
+import { createInputChangeHandler, getInputValue } from "@/components/inputs/input-value"
+import { Input } from "@/components/ui/input"
+
+export type DateInputProps = Omit<
+  React.ComponentProps<typeof Input>,
+  "type" | "value" | "onChange"
+> & {
+  value?: string | null
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  onValueChange?: (value: string) => void
+}
+
+const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
+  ({ value, onChange, onValueChange, ...props }, ref) => {
+    const handleChange = createInputChangeHandler({ onChange, onValueChange })
+
+    return (
+      <Input
+        ref={ref}
+        type="date"
+        value={getInputValue(value)}
+        onChange={handleChange}
+        {...props}
+      />
+    )
+  }
+)
+DateInput.displayName = "DateInput"
+
+export { DateInput }

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

@@ -0,0 +1,67 @@
+import * as React from "react"
+
+import { DateInput, type DateInputProps } from "@/components/inputs/date-input"
+import { cn } from "@/lib/utils"
+
+export type DateRangeValue = {
+  from?: string
+  to?: string
+}
+
+export type DateRangeInputProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+  value?: DateRangeValue
+  onValueChange?: (value: DateRangeValue) => void
+  fromPlaceholder?: string
+  toPlaceholder?: string
+  fromInputProps?: Omit<DateInputProps, "value" | "onValueChange">
+  toInputProps?: Omit<DateInputProps, "value" | "onValueChange">
+  separator?: React.ReactNode
+  inputClassName?: string
+}
+
+function DateRangeInput({
+  className,
+  value,
+  onValueChange,
+  fromPlaceholder = "From",
+  toPlaceholder = "To",
+  fromInputProps,
+  toInputProps,
+  separator = "—",
+  inputClassName,
+  ...props
+}: DateRangeInputProps) {
+  const nextValue = (patch: DateRangeValue) => {
+    onValueChange?.({
+      from: value?.from ?? "",
+      to: value?.to ?? "",
+      ...patch,
+    })
+  }
+
+  return (
+    <div
+      data-slot="date-range-input"
+      className={cn("flex w-full flex-col gap-2 sm:flex-row sm:items-center", className)}
+      {...props}
+    >
+      <DateInput
+        value={value?.from ?? ""}
+        placeholder={fromPlaceholder}
+        className={inputClassName}
+        onValueChange={(from) => nextValue({ from })}
+        {...fromInputProps}
+      />
+      <span className="hidden text-sm text-muted-foreground sm:inline-flex">{separator}</span>
+      <DateInput
+        value={value?.to ?? ""}
+        placeholder={toPlaceholder}
+        className={inputClassName}
+        onValueChange={(to) => nextValue({ to })}
+        {...toInputProps}
+      />
+    </div>
+  )
+}
+
+export { DateRangeInput }

package/vendor/src/components/inputs/index.ts

@@ -0,0 +1,19 @@
+export * from './simple-select'
+export * from './async-select'
+export * from './clearable-input'
+export * from './search-input'
+export * from './password-input'
+export * from './number-input'
+export * from './date-input'
+export * from './date-range-input'
+export * from './money-input'
+export * from './quantity-input'
+export * from './masked-input'
+export * from './phone-input'
+export * from './tag-input'
+export * from './combobox'
+export * from './rating'
+export * from './slider'
+export * from './otp-input'
+export * from './color-input'
+export * from './quantity-stepper'

package/vendor/src/components/inputs/input-chrome.tsx

@@ -0,0 +1,37 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+type InputChromeProps = React.ComponentProps<"div"> & {
+  start?: React.ReactNode
+  end?: React.ReactNode
+  startClassName?: string
+  endClassName?: string
+}
+
+function InputChrome({
+  start,
+  end,
+  startClassName,
+  endClassName,
+  className,
+  children,
+  ...props
+}: InputChromeProps) {
+  return (
+    <div
+      data-slot="input-chrome"
+      className={cn(
+        "flex h-8 w-full min-w-0 items-center rounded-lg border border-input bg-transparent transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50",
+        className
+      )}
+      {...props}
+    >
+      {start && <span className={cn("shrink-0", startClassName)}>{start}</span>}
+      {children}
+      {end && <span className={cn("shrink-0", endClassName)}>{end}</span>}
+    </div>
+  )
+}
+
+export { InputChrome }

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

@@ -0,0 +1,64 @@
+import * as React from "react"
+
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+
+type InputDecoratorProps = Omit<React.ComponentProps<typeof Input>, "value"> & {
+  value?: string | number | null
+  leading?: React.ReactNode
+  trailing?: React.ReactNode
+  wrapperClassName?: string
+  inputClassName?: string
+}
+
+const InputDecorator = React.forwardRef<HTMLInputElement, InputDecoratorProps>(
+  (
+    {
+      className,
+      value,
+      leading,
+      trailing,
+      wrapperClassName,
+      inputClassName,
+      ...props
+    },
+    ref
+  ) => {
+    const hasLeading = Boolean(leading)
+    const hasTrailing = Boolean(trailing)
+
+    return (
+      <div
+        data-slot="input-decorator"
+        className={cn("relative flex w-full items-center", wrapperClassName)}
+      >
+        {hasLeading && (
+          <span className="pointer-events-none absolute left-2.5 flex text-muted-foreground [&_svg]:size-4">
+            {leading}
+          </span>
+        )}
+
+        <Input
+          ref={ref}
+          value={value == null ? "" : String(value)}
+          className={cn(
+            hasLeading && "pl-8",
+            hasTrailing && "pr-9",
+            inputClassName,
+            className
+          )}
+          {...props}
+        />
+
+        {hasTrailing && (
+          <span className="absolute right-2 flex items-center gap-1">
+            {trailing}
+          </span>
+        )}
+      </div>
+    )
+  }
+)
+InputDecorator.displayName = "InputDecorator"
+
+export { InputDecorator }

package/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/vendor/src/components/inputs/masked-input.tsx

@@ -0,0 +1,51 @@
+import * as React from "react"
+
+import { getInputValue, setInputElementValue } from "@/components/inputs/input-value"
+import { Input } from "@/components/ui/input"
+
+export type MaskedInputProps = Omit<
+  React.ComponentProps<typeof Input>,
+  "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 <Input ref={ref} value={getInputValue(value)} onChange={handleChange} {...props} />
+  }
+)
+MaskedInput.displayName = "MaskedInput"
+
+export { MaskedInput }

package/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 { Input } from "@/components/ui/input"
+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
+      }
+    >
+      <Input
+        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/vendor/src/components/inputs/number-input.tsx

@@ -0,0 +1,87 @@
+import * as React from "react"
+
+import { getInputValue } from "@/components/inputs/input-value"
+import { clampNumericValue, parseDecimalInput } from "@/components/inputs/numeric-value"
+import { Input } from "@/components/ui/input"
+
+export type NumberInputProps = Omit<
+  React.ComponentProps<typeof Input>,
+  "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
+}
+
+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,
+      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()) {
+        emitValue(String(min ?? 0))
+      }
+
+      onBlur?.(event)
+    }
+
+    return (
+      <Input
+        ref={ref}
+        type="text"
+        value={stringValue}
+        inputMode={inputMode}
+        min={min}
+        max={max}
+        step={step}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        {...props}
+      />
+    )
+  }
+)
+NumberInput.displayName = "NumberInput"
+
+export { NumberInput, parseNumberInput, clampNumber }