azamat-ui-kit-cli 0.2.2 → 0.3.3

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

@@ -1,29 +1,33 @@
-import * as React from "react"
-
-import { createInputChangeHandler, getInputValue } from "@/components/inputs/input-value"
-import { Input } from "@/components/ui/input"
+import * as React from "react"
+import { CalendarDaysIcon } from "lucide-react"
+
+import { InputDecorator } from "@/components/inputs/input-decorator"
+import { createInputChangeHandler, getInputValue } from "@/components/inputs/input-value"
 
 export type DateInputProps = Omit<
-  React.ComponentProps<typeof Input>,
+  React.ComponentProps<typeof InputDecorator>,
   "type" | "value" | "onChange"
 > & {
   value?: string | null
   onChange?: React.ChangeEventHandler<HTMLInputElement>
   onValueChange?: (value: string) => void
+  showIcon?: boolean
+  icon?: React.ReactNode
 }
 
-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}
-      />
+const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
+  ({ value, onChange, onValueChange, showIcon = true, icon, leading, ...props }, ref) => {
+    const handleChange = createInputChangeHandler({ onChange, onValueChange })
+
+    return (
+      <InputDecorator
+        ref={ref}
+        type="date"
+        value={getInputValue(value)}
+        leading={showIcon ? icon ?? leading ?? <CalendarDaysIcon /> : leading}
+        onChange={handleChange}
+        {...props}
+      />
     )
   }
 )

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

@@ -46,20 +46,20 @@ function DateRangeInput({
       {...props}
     >
       <DateInput
-        value={value?.from ?? ""}
-        placeholder={fromPlaceholder}
-        className={inputClassName}
-        onValueChange={(from) => nextValue({ from })}
+        value={value?.from ?? ""}
+        placeholder={fromPlaceholder}
+        className={inputClassName}
+        onValueChange={(from: string) => 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}
-      />
+        value={value?.to ?? ""}
+        placeholder={toPlaceholder}
+        className={inputClassName}
+        onValueChange={(to: string) => nextValue({ to })}
+        {...toInputProps}
+      />
     </div>
   )
 }

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

@@ -1,3 +1,4 @@
+export * from './app-input'
 export * from './simple-select'
 export * from './async-select'
 export * from './clearable-input'

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

@@ -1,64 +1,108 @@
 import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { Input } from "@/components/ui/input"
+import { InputPrimitive } from "@/components/ui/input-primitive"
 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
+
+const inputDecoratorVariants = cva("relative flex w-full items-center", {
+  variants: {
+    density: {
+      compact: "text-xs",
+      default: "text-sm",
+      comfortable: "text-base",
+    },
+    tone: {
+      neutral: "",
+      info: "[&_[data-slot=input]]:border-blue-500/30 [&_[data-slot=input]]:focus-visible:ring-blue-500/20",
+      success: "[&_[data-slot=input]]:border-emerald-500/30 [&_[data-slot=input]]:focus-visible:ring-emerald-500/20",
+      warning: "[&_[data-slot=input]]:border-amber-500/35 [&_[data-slot=input]]:focus-visible:ring-amber-500/20",
+      danger: "[&_[data-slot=input]]:border-destructive/40 [&_[data-slot=input]]:focus-visible:ring-destructive/20",
+    },
+  },
+  defaultVariants: {
+    density: "default",
+    tone: "neutral",
+  },
+})
+
+export type InputDecoratorProps = Omit<React.ComponentProps<typeof InputPrimitive>, "value"> &
+  VariantProps<typeof inputDecoratorVariants> & {
+    value?: string | number | null
+    leading?: React.ReactNode
+    trailing?: React.ReactNode
+    leadingPointerEvents?: boolean
+    trailingPointerEvents?: boolean
+    wrapperClassName?: string
+    inputClassName?: string
+    leadingClassName?: string
+    trailingClassName?: string
+  }
+
+const InputDecorator = React.forwardRef<HTMLInputElement, InputDecoratorProps>(
+  (
+    {
+      className,
+      value,
+      leading,
+      trailing,
+      leadingPointerEvents = false,
+      trailingPointerEvents = true,
+      wrapperClassName,
+      inputClassName,
+      leadingClassName,
+      trailingClassName,
+      density,
+      tone,
+      ...props
+    },
+    ref
+  ) => {
+    const hasLeading = Boolean(leading)
+    const hasTrailing = Boolean(trailing)
+
+    return (
+      <div
+        data-slot="input-decorator"
+        data-has-leading={hasLeading || undefined}
+        data-has-trailing={hasTrailing || undefined}
+        className={cn(inputDecoratorVariants({ density, tone }), wrapperClassName)}
+      >
+        {hasLeading && (
+          <span
+            data-slot="input-leading"
+            className={cn(
+              "absolute left-2.5 z-10 flex items-center text-muted-foreground [&_svg]:size-4",
+              !leadingPointerEvents && "pointer-events-none",
+              leadingClassName
+            )}
+          >
+            {leading}
+          </span>
+        )}
+
+        <InputPrimitive
           ref={ref}
           value={value == null ? "" : String(value)}
-          className={cn(
-            hasLeading && "pl-8",
-            hasTrailing && "pr-9",
-            inputClassName,
-            className
-          )}
+          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 }
+
+        {hasTrailing && (
+          <span
+            data-slot="input-trailing"
+            className={cn(
+              "absolute right-2 z-10 flex items-center gap-1 text-muted-foreground",
+              !trailingPointerEvents && "pointer-events-none",
+              trailingClassName
+            )}
+          >
+            {trailing}
+          </span>
+        )}
+      </div>
+    )
+  }
+)
+InputDecorator.displayName = "InputDecorator"
+
+export { InputDecorator, inputDecoratorVariants }

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

@@ -1,10 +1,10 @@
-import * as React from "react"
-
-import { getInputValue, setInputElementValue } from "@/components/inputs/input-value"
-import { Input } from "@/components/ui/input"
+import * as React from "react"
+
+import { InputDecorator } from "@/components/inputs/input-decorator"
+import { getInputValue, setInputElementValue } from "@/components/inputs/input-value"
 
 export type MaskedInputProps = Omit<
-  React.ComponentProps<typeof Input>,
+  React.ComponentProps<typeof InputDecorator>,
   "value" | "onChange"
 > & {
   value?: string
@@ -31,21 +31,21 @@ const MaskedInput = React.forwardRef<HTMLInputElement, MaskedInputProps>(
       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} />
-  }
-)
+    },
+    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 <InputDecorator ref={ref} value={getInputValue(value)} onChange={handleChange} {...props} />
+  }
+)
 MaskedInput.displayName = "MaskedInput"
 
 export { MaskedInput }

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

@@ -3,7 +3,7 @@ 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 { InputPrimitive } from "@/components/ui/input-primitive"
 import { cn } from "@/lib/utils"
 
 export type MoneyInputProps = Omit<
@@ -55,7 +55,7 @@ function MoneyInput({
         ) : null
       }
     >
-      <Input
+      <InputPrimitive
         value={getInputValue(value)}
         onChange={handleChange}
         inputMode={inputMode}

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

@@ -1,11 +1,11 @@
-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"
+import * as React from "react"
+
+import { InputDecorator } from "@/components/inputs/input-decorator"
+import { getInputValue } from "@/components/inputs/input-value"
+import { clampNumericValue, parseDecimalInput } from "@/components/inputs/numeric-value"
 
 export type NumberInputProps = Omit<
-  React.ComponentProps<typeof Input>,
+  React.ComponentProps<typeof InputDecorator>,
   "type" | "value" | "onChange" | "min" | "max" | "step"
 > & {
   value?: number | string | null
@@ -16,15 +16,17 @@ export type NumberInputProps = Omit<
   max?: number
   step?: number
   allowEmpty?: boolean
+  prefix?: React.ReactNode
+  suffix?: React.ReactNode
+}
+
+function parseNumberInput(value: string) {
+  return parseDecimalInput(value)
 }
 
-function parseNumberInput(value: string) {
-  return parseDecimalInput(value)
-}
-
-function clampNumber(value: number, min?: number, max?: number) {
-  return clampNumericValue(value, min, max)
-}
+function clampNumber(value: number, min?: number, max?: number) {
+  return clampNumericValue(value, min, max)
+}
 
 const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
   (
@@ -37,13 +39,17 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
       max,
       step,
       allowEmpty = true,
+      prefix,
+      suffix,
+      leading,
+      trailing,
       inputMode = "decimal",
       onBlur,
       ...props
-    },
-    ref
-  ) => {
-    const stringValue = getInputValue(value)
+    },
+    ref
+  ) => {
+    const stringValue = getInputValue(value)
 
     const emitValue = (rawValue: string) => {
       const parsed = parseNumberInput(rawValue)
@@ -60,14 +66,16 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
 
     const handleBlur: React.FocusEventHandler<HTMLInputElement> = (event) => {
       if (!allowEmpty && !event.target.value.trim()) {
-        emitValue(String(min ?? 0))
+        const fallbackValue = String(min ?? 0)
+        event.currentTarget.value = fallbackValue
+        emitValue(fallbackValue)
       }
 
       onBlur?.(event)
     }
 
     return (
-      <Input
+      <InputDecorator
         ref={ref}
         type="text"
         value={stringValue}
@@ -75,6 +83,8 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
         min={min}
         max={max}
         step={step}
+        leading={prefix ?? leading}
+        trailing={suffix ?? trailing}
         onChange={handleChange}
         onBlur={handleBlur}
         {...props}

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

@@ -1,19 +1,21 @@
-import * as React from "react"
-import { EyeIcon, EyeOffIcon } from "lucide-react"
-
-import { InputDecorator } from "@/components/inputs/input-decorator"
+import * as React from "react"
+import { EyeIcon, EyeOffIcon } from "lucide-react"
 
-export type PasswordInputProps = Omit<
-  React.ComponentProps<typeof InputDecorator>,
-  "type" | "value" | "onChange"
-> & {
-  value?: string | null
+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
+  showCapsLockWarning?: boolean
+  capsLockLabel?: string
   wrapperClassName?: string
   inputClassName?: string
   showLabel?: string
@@ -22,23 +24,30 @@ export type PasswordInputProps = Omit<
 
 const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
   (
-    {
-      value,
-      onChange,
-      onValueChange,
+    {
+      value,
+      onChange,
+      onValueChange,
       visible,
       defaultVisible = false,
-      onVisibleChange,
-      showToggle = true,
-      showLabel = "Show password",
-      hideLabel = "Hide password",
-      disabled,
+      onVisibleChange,
+      showToggle = true,
+      showCapsLockWarning = true,
+      capsLockLabel = "Caps Lock is on",
+      showLabel = "Show password",
+      hideLabel = "Hide password",
+      disabled,
+      autoComplete = "current-password",
+      trailing,
+      onKeyDown,
+      onKeyUp,
       ...props
     },
     ref
   ) => {
     const isControlled = visible !== undefined
     const [internalVisible, setInternalVisible] = React.useState(defaultVisible)
+    const [capsLockOn, setCapsLockOn] = React.useState(false)
     const currentVisible = isControlled ? visible : internalVisible
 
     const setVisibleState = (nextVisible: boolean) => {
@@ -53,33 +62,61 @@ const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
       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}
-      />
-    )
-  }
-)
+
+    const updateCapsLock = (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (!showCapsLockWarning) return
+      setCapsLockOn(event.getModifierState("CapsLock"))
+    }
+
+    const handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
+      updateCapsLock(event)
+      onKeyDown?.(event)
+    }
+
+    const handleKeyUp: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
+      updateCapsLock(event)
+      onKeyUp?.(event)
+    }
+
+    const trailingContent = (
+      <>
+        {trailing}
+        {showCapsLockWarning && capsLockOn ? (
+          <span data-slot="password-caps-lock" className="hidden text-xs text-amber-600 sm:inline" aria-live="polite">
+            {capsLockLabel}
+          </span>
+        ) : null}
+        {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}
+      </>
+    )
+
+    return (
+      <InputDecorator
+        data-slot="password-input"
+        ref={ref}
+        type={currentVisible ? "text" : "password"}
+        value={value ?? ""}
+        disabled={disabled}
+        autoComplete={autoComplete}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        onKeyUp={handleKeyUp}
+        trailing={trailingContent}
+        {...props}
+      />
+    )
+  }
+)
 PasswordInput.displayName = "PasswordInput"
 
 export { PasswordInput }

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

@@ -1,10 +1,14 @@
 import * as React from "react"
+import { PhoneIcon } from "lucide-react"
 
 import { MaskedInput, type MaskedInputProps } from "@/components/inputs/masked-input"
 
 export type PhoneInputProps = Omit<MaskedInputProps, "mask" | "unmask" | "inputMode"> & {
   countryCode?: string
   maxDigits?: number
+  showCountryCode?: boolean
+  showIcon?: boolean
+  icon?: React.ReactNode
 }
 
 function onlyDigits(value: string) {
@@ -28,14 +32,32 @@ function formatPhoneDigits(digits: string, countryCode = "+998", maxDigits = 12)
 }
 
 const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
-  ({ countryCode = "+998", maxDigits = 12, onValueChange, ...props }, ref) => {
+  (
+    {
+      countryCode = "+998",
+      maxDigits = 12,
+      showCountryCode = false,
+      showIcon = false,
+      icon,
+      leading,
+      trailing,
+      onValueChange,
+      ...props
+    },
+    ref
+  ) => {
+    const leadingContent = showIcon ? icon ?? leading ?? <PhoneIcon /> : leading
+    const trailingContent = showCountryCode ? <span className="font-mono text-xs">{countryCode}</span> : trailing
+
     return (
       <MaskedInput
         ref={ref}
         inputMode="tel"
+        leading={leadingContent}
+        trailing={trailingContent}
         mask={(rawValue) => formatPhoneDigits(rawValue, countryCode, maxDigits)}
         unmask={onlyDigits}
-        onValueChange={(maskedValue, rawValue) => onValueChange?.(maskedValue, rawValue)}
+        onValueChange={(maskedValue: string, rawValue: string) => onValueChange?.(maskedValue, rawValue)}
         {...props}
       />
     )

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

@@ -5,7 +5,7 @@ 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 { InputPrimitive } from "@/components/ui/input-primitive"
 import { cn } from "@/lib/utils"
 
 export type QuantityInputProps = Omit<
@@ -98,7 +98,7 @@ function QuantityInput({
         ) : null
       }
     >
-      <Input
+      <InputPrimitive
         value={getInputValue(value)}
         onChange={handleInputChange}
         inputMode={inputMode}