azamat-ui-kit-cli 0.2.2

package/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,
+}

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

@@ -0,0 +1,102 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type OtpInputProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  length?: number
+  disabled?: boolean
+  inputMode?: React.HTMLAttributes<HTMLInputElement>["inputMode"]
+  pattern?: string
+  mask?: boolean
+  labels?: {
+    group?: string
+    cell?: (index: number) => string
+  }
+}
+
+function OtpInput({
+  value,
+  defaultValue = "",
+  onValueChange,
+  length = 6,
+  disabled = false,
+  inputMode = "numeric",
+  pattern = "[0-9]*",
+  mask = false,
+  labels,
+  className,
+  ...props
+}: OtpInputProps) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue.slice(0, length))
+  const currentValue = (value ?? internalValue).slice(0, length)
+  const inputRefs = React.useRef<Array<HTMLInputElement | null>>([])
+
+  const updateValue = (nextValue: string) => {
+    const trimmedValue = nextValue.slice(0, length)
+    if (value === undefined) setInternalValue(trimmedValue)
+    onValueChange?.(trimmedValue)
+  }
+
+  const setCharAt = (index: number, nextChar: string) => {
+    const chars = String(Array.isArray(currentValue) ? currentValue.join("") : currentValue).padEnd(length, " ").split("")
+    chars[index] = nextChar.slice(-1)
+    updateValue(chars.join("").replace(/\s+$/g, ""))
+  }
+
+  const focusIndex = (index: number) => {
+    inputRefs.current[Math.max(0, Math.min(index, length - 1))]?.focus()
+  }
+
+  return (
+    <div
+      data-slot="otp-input"
+      role="group"
+      aria-label={labels?.group ?? "One-time password"}
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    >
+      {Array.from({ length }, (_, index) => (
+        <input
+          key={index}
+          ref={(node) => {
+            inputRefs.current[index] = node
+          }}
+          aria-label={labels?.cell?.(index) ?? `Digit ${index + 1}`}
+          inputMode={inputMode}
+          pattern={pattern}
+          type={mask ? "password" : "text"}
+          autoComplete="one-time-code"
+          maxLength={1}
+          disabled={disabled}
+          value={currentValue[index] ?? ""}
+          className="flex size-10 rounded-md border bg-background text-center text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+          onChange={(event) => {
+            const nextChar = event.currentTarget.value
+            setCharAt(index, nextChar)
+            if (nextChar) focusIndex(index + 1)
+          }}
+          onKeyDown={(event) => {
+            if (event.key === "Backspace" && !currentValue[index]) {
+              event.preventDefault()
+              focusIndex(index - 1)
+              setCharAt(index - 1, "")
+            }
+            if (event.key === "ArrowLeft") focusIndex(index - 1)
+            if (event.key === "ArrowRight") focusIndex(index + 1)
+          }}
+          onPaste={(event) => {
+            event.preventDefault()
+            const pasted = event.clipboardData.getData("text").trim()
+            updateValue(pasted)
+            focusIndex(Math.min(pasted.length, length - 1))
+          }}
+        />
+      ))}
+    </div>
+  )
+}
+
+export { OtpInput }

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

@@ -0,0 +1,85 @@
+import * as React from "react"
+import { EyeIcon, EyeOffIcon } from "lucide-react"
+
+import { InputDecorator } from "@/components/inputs/input-decorator"
+
+export type PasswordInputProps = Omit<
+  React.ComponentProps<typeof InputDecorator>,
+  "type" | "value" | "onChange"
+> & {
+  value?: string | null
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  onValueChange?: (value: string) => void
+  visible?: boolean
+  defaultVisible?: boolean
+  onVisibleChange?: (visible: boolean) => void
+  showToggle?: boolean
+  wrapperClassName?: string
+  inputClassName?: string
+  showLabel?: string
+  hideLabel?: string
+}
+
+const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+  (
+    {
+      value,
+      onChange,
+      onValueChange,
+      visible,
+      defaultVisible = false,
+      onVisibleChange,
+      showToggle = true,
+      showLabel = "Show password",
+      hideLabel = "Hide password",
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const isControlled = visible !== undefined
+    const [internalVisible, setInternalVisible] = React.useState(defaultVisible)
+    const currentVisible = isControlled ? visible : internalVisible
+
+    const setVisibleState = (nextVisible: boolean) => {
+      if (!isControlled) {
+        setInternalVisible(nextVisible)
+      }
+
+      onVisibleChange?.(nextVisible)
+    }
+
+    const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+      onChange?.(event)
+      onValueChange?.(event.target.value)
+    }
+
+    return (
+      <InputDecorator
+        data-slot="password-input"
+        ref={ref}
+        type={currentVisible ? "text" : "password"}
+        value={value ?? ""}
+        disabled={disabled}
+        onChange={handleChange}
+        trailing={
+          showToggle ? (
+            <button
+              type="button"
+              disabled={disabled}
+              aria-label={currentVisible ? hideLabel : showLabel}
+              className="rounded-sm p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+              onClick={() => setVisibleState(!currentVisible)}
+            >
+              {currentVisible ? <EyeOffIcon className="size-4" /> : <EyeIcon className="size-4" />}
+            </button>
+          ) : null
+        }
+        {...props}
+      />
+    )
+  }
+)
+PasswordInput.displayName = "PasswordInput"
+
+export { PasswordInput }

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

@@ -0,0 +1,46 @@
+import * as React from "react"
+
+import { MaskedInput, type MaskedInputProps } from "@/components/inputs/masked-input"
+
+export type PhoneInputProps = Omit<MaskedInputProps, "mask" | "unmask" | "inputMode"> & {
+  countryCode?: string
+  maxDigits?: number
+}
+
+function onlyDigits(value: string) {
+  return value.replace(/\D/g, "")
+}
+
+function formatPhoneDigits(digits: string, countryCode = "+998", maxDigits = 12) {
+  const normalized = onlyDigits(digits).slice(0, maxDigits)
+  const countryDigits = countryCode.replace(/\D/g, "")
+  const withoutCountry = normalized.startsWith(countryDigits)
+    ? normalized.slice(countryDigits.length)
+    : normalized
+
+  const part1 = withoutCountry.slice(0, 2)
+  const part2 = withoutCountry.slice(2, 5)
+  const part3 = withoutCountry.slice(5, 7)
+  const part4 = withoutCountry.slice(7, 9)
+  const parts = [part1, part2, part3, part4].filter(Boolean)
+
+  return [countryCode, ...parts].join(" ").trim()
+}
+
+const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
+  ({ countryCode = "+998", maxDigits = 12, onValueChange, ...props }, ref) => {
+    return (
+      <MaskedInput
+        ref={ref}
+        inputMode="tel"
+        mask={(rawValue) => formatPhoneDigits(rawValue, countryCode, maxDigits)}
+        unmask={onlyDigits}
+        onValueChange={(maskedValue, rawValue) => onValueChange?.(maskedValue, rawValue)}
+        {...props}
+      />
+    )
+  }
+)
+PhoneInput.displayName = "PhoneInput"
+
+export { PhoneInput, formatPhoneDigits, onlyDigits }

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

@@ -0,0 +1,116 @@
+import * as React from "react"
+import { MinusIcon, PlusIcon } from "lucide-react"
+
+import { InputChrome } from "@/components/inputs/input-chrome"
+import { getInputValue } from "@/components/inputs/input-value"
+import { clampNumericValue, parseDecimalInput } from "@/components/inputs/numeric-value"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+
+export type QuantityInputProps = Omit<
+  React.ComponentProps<"input">,
+  "value" | "onChange" | "type"
+> & {
+  value?: number | null
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  onValueChange?: (value: number | null) => void
+  min?: number
+  max?: number
+  step?: number
+  showControls?: boolean
+  wrapperClassName?: string
+  inputClassName?: string
+}
+
+function clampQuantity(value: number, min?: number, max?: number) {
+  return clampNumericValue(value, min, max)
+}
+
+function QuantityInput({
+  value,
+  onChange,
+  onValueChange,
+  min,
+  max,
+  step = 1,
+  showControls = true,
+  wrapperClassName,
+  inputClassName,
+  className,
+  inputMode = "decimal",
+  ...props
+}: QuantityInputProps) {
+  const canDecrease = typeof value !== "number" || typeof min !== "number" || value > min
+  const canIncrease = typeof value !== "number" || typeof max !== "number" || value < max
+
+  const setNextValue = (nextValue: number | null) => {
+    onValueChange?.(nextValue)
+  }
+
+    const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+      onChange?.(event)
+
+      const parsed = parseDecimalInput(event.target.value)
+      if (parsed == null) {
+        setNextValue(null)
+        return
+      }
+
+      setNextValue(clampQuantity(parsed, min, max))
+    }
+
+  const handleStep = (direction: 1 | -1) => {
+    const baseValue = typeof value === "number" ? value : min ?? 0
+    setNextValue(clampQuantity(baseValue + step * direction, min, max))
+  }
+
+  return (
+    <InputChrome
+      data-slot="quantity-input"
+      className={cn("overflow-hidden", wrapperClassName)}
+      start={
+        showControls ? (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            className="h-full rounded-none"
+            disabled={!canDecrease || props.disabled}
+            onClick={() => handleStep(-1)}
+          >
+            <MinusIcon />
+          </Button>
+        ) : null
+      }
+      end={
+        showControls ? (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            className="h-full rounded-none"
+            disabled={!canIncrease || props.disabled}
+            onClick={() => handleStep(1)}
+          >
+            <PlusIcon />
+          </Button>
+        ) : null
+      }
+    >
+      <Input
+        value={getInputValue(value)}
+        onChange={handleInputChange}
+        inputMode={inputMode}
+        className={cn(
+          "h-full border-0 bg-transparent text-center shadow-none focus-visible:border-0 focus-visible:ring-0",
+          inputClassName,
+          className
+        )}
+        {...props}
+      />
+    </InputChrome>
+  )
+}
+
+export { QuantityInput, clampQuantity }

package/vendor/src/components/inputs/quantity-stepper.tsx

@@ -0,0 +1,49 @@
+import * as React from "react"
+import { MinusIcon, PlusIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+
+export type QuantityStepperProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+  value?: number
+  defaultValue?: number
+  onValueChange?: (value: number) => void
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+}
+
+function QuantityStepper({ value, defaultValue = 0, onValueChange, min = 0, max, step = 1, disabled = false, className, ...props }: QuantityStepperProps) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue)
+  const currentValue = value ?? internalValue
+
+  const updateValue = (nextValue: number) => {
+    const normalized = Math.max(min, Math.min(max ?? nextValue, Number.isFinite(nextValue) ? nextValue : min))
+    if (value === undefined) setInternalValue(normalized)
+    onValueChange?.(normalized)
+  }
+
+  return (
+    <div data-slot="quantity-stepper" className={cn("inline-flex items-center rounded-lg border bg-background", className)} {...props}>
+      <Button type="button" variant="ghost" size="icon-sm" disabled={disabled || currentValue <= min} onClick={() => updateValue(currentValue - step)}>
+        <MinusIcon />
+        <span className="sr-only">Decrease</span>
+      </Button>
+      <Input
+        value={currentValue}
+        disabled={disabled}
+        inputMode="numeric"
+        className="h-8 w-14 border-0 text-center shadow-none focus-visible:ring-0"
+        onChange={(event) => updateValue(Number(event.currentTarget.value))}
+      />
+      <Button type="button" variant="ghost" size="icon-sm" disabled={disabled || (max !== undefined && currentValue >= max)} onClick={() => updateValue(currentValue + step)}>
+        <PlusIcon />
+        <span className="sr-only">Increase</span>
+      </Button>
+    </div>
+  )
+}
+
+export { QuantityStepper }

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

@@ -0,0 +1,98 @@
+import * as React from "react"
+import { StarIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type RatingProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+  value?: number
+  defaultValue?: number
+  onValueChange?: (value: number) => void
+  count?: number
+  allowClear?: boolean
+  disabled?: boolean
+  readOnly?: boolean
+  labels?: {
+    rate?: (value: number) => string
+    clear?: string
+  }
+  icon?: React.ReactNode
+}
+
+function Rating({
+  value,
+  defaultValue = 0,
+  onValueChange,
+  count = 5,
+  allowClear = true,
+  disabled = false,
+  readOnly = false,
+  labels,
+  icon,
+  className,
+  ...props
+}: RatingProps) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue)
+  const [hoverValue, setHoverValue] = React.useState<number | null>(null)
+  const currentValue = value ?? internalValue
+  const displayValue = hoverValue ?? currentValue
+  const interactive = !disabled && !readOnly
+
+  const setRating = (nextValue: number) => {
+    if (!interactive) return
+    const resolvedValue = allowClear && nextValue === currentValue ? 0 : nextValue
+    if (value === undefined) setInternalValue(resolvedValue)
+    onValueChange?.(resolvedValue)
+  }
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, nextValue: number) => {
+    if (!interactive) return
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault()
+      setRating(nextValue)
+    }
+  }
+
+  return (
+    <div
+      data-slot="rating"
+      role="radiogroup"
+      aria-disabled={disabled || undefined}
+      className={cn("inline-flex items-center gap-1", className)}
+      onMouseLeave={() => setHoverValue(null)}
+      {...props}
+    >
+      {Array.from({ length: count }, (_, index) => {
+        const nextValue = index + 1
+        const selected = nextValue <= displayValue
+        return (
+          <button
+            key={nextValue}
+            type="button"
+            role="radio"
+            aria-checked={nextValue === currentValue}
+            aria-label={labels?.rate?.(nextValue) ?? `Rate ${nextValue}`}
+            disabled={disabled}
+            tabIndex={readOnly ? -1 : 0}
+            className={cn(
+              "rounded-sm text-muted-foreground outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+              interactive && "hover:text-primary",
+              selected && "text-primary"
+            )}
+            onMouseEnter={() => interactive && setHoverValue(nextValue)}
+            onClick={() => setRating(nextValue)}
+            onKeyDown={(event) => handleKeyDown(event, nextValue)}
+          >
+            {icon ?? <StarIcon className={cn("size-5", selected && "fill-current")} />}
+          </button>
+        )
+      })}
+      {allowClear && currentValue > 0 && interactive && (
+        <button type="button" className="ml-1 text-xs text-muted-foreground hover:text-foreground" onClick={() => setRating(0)}>
+          {labels?.clear ?? "Clear"}
+        </button>
+      )}
+    </div>
+  )
+}
+
+export { Rating }

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

@@ -0,0 +1,26 @@
+import * as React from "react"
+import { SearchIcon } from "lucide-react"
+
+import { ClearableInput, type ClearableInputProps } from "@/components/inputs/clearable-input"
+
+export type SearchInputProps = Omit<ClearableInputProps, "leadingIcon" | "type"> & {
+  searchIcon?: React.ReactNode
+}
+
+const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
+  ({ searchIcon, placeholder = "Search...", inputMode = "search", ...props }, ref) => {
+    return (
+      <ClearableInput
+        ref={ref}
+        type="search"
+        inputMode={inputMode}
+        placeholder={placeholder}
+        leadingIcon={searchIcon ?? <SearchIcon />}
+        {...props}
+      />
+    )
+  }
+)
+SearchInput.displayName = "SearchInput"
+
+export { SearchInput }

package/vendor/src/components/inputs/simple-select.tsx

@@ -0,0 +1,72 @@
+import * as React from "react"
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { cn } from "@/lib/utils"
+
+export type SimpleSelectOption = {
+  label: React.ReactNode
+  value: string
+  disabled?: boolean
+  description?: React.ReactNode
+}
+
+export type SimpleSelectProps = Omit<
+  React.ComponentProps<typeof Select>,
+  "value" | "onValueChange"
+> & {
+  value?: string
+  onValueChange?: (value: string) => void
+  options: SimpleSelectOption[]
+  placeholder?: string
+  size?: "sm" | "default"
+  triggerClassName?: string
+  contentClassName?: string
+  itemClassName?: string
+}
+
+function SimpleSelect({
+  value,
+  onValueChange,
+  options,
+  placeholder = "Select",
+  size = "default",
+  triggerClassName,
+  contentClassName,
+  itemClassName,
+  ...props
+}: SimpleSelectProps) {
+  return (
+    <Select value={value} onValueChange={(val) => onValueChange?.(val as string)} {...props}>
+      <SelectTrigger size={size} className={cn("w-full", triggerClassName)}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent className={contentClassName}>
+        {options.map((option) => (
+          <SelectItem
+            key={option.value}
+            value={option.value}
+            disabled={option.disabled}
+            className={itemClassName}
+          >
+            <span className="flex min-w-0 flex-col">
+              <span className="truncate">{option.label}</span>
+              {option.description && (
+                <span className="truncate text-xs text-muted-foreground">
+                  {option.description}
+                </span>
+              )}
+            </span>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
+
+export { SimpleSelect }