azamat-ui-kit-cli 0.2.2 → 0.3.3

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

@@ -1,19 +1,16 @@
-import {
-  FormInput,
-  type FormInputSearchVariantProps as BaseFormSearchInputProps,
-} from "@/components/form/form-input"
-import type { FieldPath, FieldValues } from "react-hook-form"
-
-export type FormSearchInputProps<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = Omit<BaseFormSearchInputProps<TFieldValues, TName>, "kind">
-
-function FormSearchInput<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->(props: FormSearchInputProps<TFieldValues, TName>) {
-  return <FormInput {...props} kind="search" />
-}
-
-export { FormSearchInput }
+import { FormAppInput, type FormAppInputProps } from "@/components/form/form-app-input"
+import type { FieldPath, FieldValues } from "react-hook-form"
+
+export type FormSearchInputProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = Omit<FormAppInputProps<TFieldValues, TName>, "kind">
+
+function FormSearchInput<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(props: FormSearchInputProps<TFieldValues, TName>) {
+  return <FormAppInput {...props} kind="search" />
+}
+
+export { FormSearchInput }

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

@@ -93,6 +93,7 @@ function FormSelect<
 >(props: FormSelectProps<TFieldValues, TName, TValue, TData, TOption>) {
   const shellProps = buildShellProps(props)
   const kind = props.kind ?? "simple"
+  const resolvedFieldClassName = props.fieldClassName ?? "w-full"
 
   return (
     <Controller
@@ -139,7 +140,7 @@ function FormSelect<
                   field.onChange(nextValue ?? emptyValue)
                   onValueChange?.(nextValue, option)
                 }}
-                triggerClassName={fieldClassName}
+                triggerClassName={fieldClassName ?? resolvedFieldClassName}
               />
             </FormFieldShell>
           )
@@ -180,9 +181,9 @@ function FormSelect<
               disabled={disabled || readOnly}
               onValueChange={(nextValue) => {
                 field.onChange(nextValue || emptyValue)
-                onValueChange?.(nextValue)
+                onValueChange?.(nextValue as string)
               }}
-              triggerClassName={fieldClassName}
+              triggerClassName={fieldClassName ?? resolvedFieldClassName}
             />
           </FormFieldShell>
         )

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

@@ -1,14 +1,16 @@
-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-field-shell"
+export * from "./form-field-utils"
+export * from "./form-app-input"
+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

@@ -6,14 +6,15 @@ 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
-}
+  key: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  content?: React.ReactNode
+  fields?: React.ReactNode
+  children?: React.ReactNode
+  columns?: 1 | 2 | 3
+  hidden?: boolean
+}
 
 /** @deprecated Prefer `FormFamily` entry members for new public usage. */
 export type SmartFormShellProps = React.ComponentProps<"form"> & {
@@ -45,10 +46,10 @@ function SmartFormShell({ title, description, sections, actions, loading = false
       ))}
       <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>
-        ))}
+          <FormSection key={section.key} title={section.title} description={section.description} columns={section.columns}>
+            {section.children ?? section.content ?? section.fields}
+          </FormSection>
+        ))}
         {children}
       </div>
       {actions ?? <FormActions loading={loading} disabled={disabled} submitLabel={submitLabel} cancelLabel={cancelLabel} onCancel={onCancel} />}

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

@@ -0,0 +1,27 @@
+import * as React from "react"
+
+import {
+  Input,
+  type InputKind,
+  type InputProps,
+} from "@/components/ui/input"
+
+export type AppInputKind = InputKind
+export type AppInputProps = InputProps
+export type UniversalInputProps = InputProps
+
+/**
+ * @deprecated Use {@link Input} with `kind` instead.
+ */
+const AppInput = React.forwardRef<HTMLInputElement | HTMLDivElement, AppInputProps>((props, ref) => {
+  return <Input ref={ref as React.ForwardedRef<HTMLInputElement | HTMLDivElement>} {...props} />
+})
+AppInput.displayName = "AppInput"
+
+/**
+ * @deprecated Use {@link Input} with `kind` instead.
+ */
+const UniversalInput = AppInput
+
+export { AppInput, UniversalInput }
+

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

@@ -304,7 +304,16 @@ function AsyncStateMessage({
   className?: string
   children: React.ReactNode
 }) {
-  return <div className={cn("px-2 py-3 text-sm text-muted-foreground", className)}>{children}</div>
+  return (
+    <div
+      className={cn(
+        "rounded-[min(var(--radius-xl),16px)] border border-border/70 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--muted),white_10%),color-mix(in_oklch,var(--muted),transparent_8%))] px-3 py-3 text-sm text-muted-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]",
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
 }
 
 function getOptionLabelText<TValue extends string, TData>(option: AsyncSelectOption<TValue, TData>) {
@@ -334,14 +343,14 @@ function AsyncOptionButton<
 }) {
   return (
     <button
-      type="button"
-      disabled={option.disabled}
-      className={cn(
-        "flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm outline-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50",
-        selected && "bg-accent text-accent-foreground",
-        optionClassName
-      )}
-      onClick={() => onSelect(option)}
+      type="button"
+      disabled={option.disabled}
+      className={cn(
+        "flex w-full items-start gap-2 rounded-[min(var(--radius-xl),16px)] border border-transparent px-3 py-2.5 text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] hover:border-border/70 hover:bg-accent/60 hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50",
+        selected && "border-primary/18 bg-primary/8 text-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.12)]",
+        optionClassName
+      )}
+      onClick={() => onSelect(option)}
     >
       <span className="flex size-4 shrink-0 items-center justify-center">
         {selected && <CheckIcon className="size-4" />}
@@ -375,12 +384,12 @@ function AsyncCreateButton({
   onCreate: () => void
 }) {
   return (
-    <button
-      type="button"
-      disabled={isCreating}
-      className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm outline-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
-      onClick={onCreate}
-    >
+    <button
+      type="button"
+      disabled={isCreating}
+      className="flex w-full items-center gap-2 rounded-[min(var(--radius-xl),16px)] border border-dashed border-border/80 px-3 py-2.5 text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] hover:border-primary/25 hover:bg-primary/6 hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+      onClick={onCreate}
+    >
       <span className="flex size-4 shrink-0 items-center justify-center">
         {isCreating ? <Loader2Icon className="size-4 animate-spin" /> : <PlusIcon className="size-4" />}
       </span>
@@ -575,14 +584,17 @@ function AsyncSelect<
         <PopoverTrigger
           render={
             <Button
-              type="button"
-              variant="outline"
-              disabled={disabled}
-              aria-expanded={open}
-              className={cn("w-full justify-between", triggerClassName)}
-            />
-          }
-        >
+              type="button"
+              variant="outline"
+              disabled={disabled}
+              aria-expanded={open}
+              className={cn(
+                "min-h-11 w-full justify-between border-border/80 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--background),white_12%),var(--background))] shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_1px_0_rgba(255,255,255,0.06)]",
+                triggerClassName
+              )}
+            />
+          }
+        >
           <span className="min-w-0 flex-1 text-left">
             {currentOption ? (
               <span className="flex min-w-0 flex-col">
@@ -602,7 +614,7 @@ function AsyncSelect<
               <span
                 role="button"
                 tabIndex={0}
-                className="rounded-sm p-0.5 text-muted-foreground hover:text-foreground"
+                className="rounded-full border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground"
                 aria-label={labels?.clear ?? "Clear"}
                 onClick={handleClear}
                 onKeyDown={(event) => {
@@ -618,21 +630,24 @@ function AsyncSelect<
             <ChevronsUpDownIcon className="size-4 opacity-60" />
           </span>
         </PopoverTrigger>
-        <PopoverContent
-          align="start"
-          className={cn("w-(--anchor-width) gap-2 p-2", contentClassName)}
-        >
-          <div className="relative">
-            <SearchIcon className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-            <Input
-              value={search}
-              onChange={(event) => setSearch(event.target.value)}
-              placeholder={labels?.searchPlaceholder ?? "Search..."}
-              className={cn("pl-8", searchClassName)}
-            />
-          </div>
-
-          <div className="max-h-64 overflow-y-auto">
+        <PopoverContent
+          align="start"
+          className={cn(
+            "w-(--anchor-width) gap-3 rounded-[var(--radius-2xl)] border-border/80 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--popover),white_10%),var(--popover))] p-3.5 shadow-[0_24px_80px_rgba(15,23,42,0.18)] backdrop-blur",
+            contentClassName
+          )}
+        >
+          <div className="relative">
+            <SearchIcon className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+              placeholder={labels?.searchPlaceholder ?? "Search..."}
+              className={cn("border-border/75 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--background),white_12%),var(--background))] pl-8 shadow-[inset_0_1px_0_rgba(255,255,255,0.12),0_1px_0_rgba(255,255,255,0.05)]", searchClassName)}
+            />
+          </div>
+
+          <div className="max-h-64 space-y-1 overflow-y-auto pr-1">
             {searchTooShort && flatOptions.length === 0 && (
               renderMinSearch?.(state) ?? (
                 <AsyncStateMessage>
@@ -677,9 +692,9 @@ function AsyncSelect<
               optionGroups.map((group, groupIndex) => (
                 <div key={groupIndex}>
                   {group.label && (
-                    <div className="sticky top-0 z-10 bg-popover px-2 py-1 text-xs font-medium text-muted-foreground">
-                      {group.label}
-                    </div>
+                    <div className="sticky top-0 z-10 bg-popover px-2 py-1 text-xs font-medium text-muted-foreground">
+                      {group.label}
+                    </div>
                   )}
                   {group.options.map((option) => (
                     <AsyncOptionButton
@@ -969,7 +984,10 @@ function AsyncMultiSelect<
               variant="outline"
               disabled={disabled}
               aria-expanded={open}
-              className={cn("min-h-8 w-full justify-between", triggerClassName)}
+              className={cn(
+                "min-h-11 w-full justify-between border-border/80 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--background),white_12%),var(--background))] shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_1px_0_rgba(255,255,255,0.06)]",
+                triggerClassName
+              )}
               onKeyDown={handleTriggerKeyDown}
             />
           }
@@ -978,12 +996,12 @@ function AsyncMultiSelect<
             {currentOptions.length > 0 ? (
               currentOptions.map((option) => (
                 <span
-                  key={option.value}
-                  className={cn(
-                    "inline-flex max-w-full items-center gap-1 rounded-md bg-muted px-1.5 py-0.5 text-xs text-foreground",
-                    tagClassName
-                  )}
-                >
+                  key={option.value}
+                  className={cn(
+                    "inline-flex max-w-full items-center gap-1 rounded-full border border-border/70 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--muted),white_10%),color-mix(in_oklch,var(--muted),transparent_8%))] px-2 py-1 text-xs text-foreground shadow-[0_1px_0_rgba(255,255,255,0.04)]",
+                    tagClassName
+                  )}
+                >
                   <span className="flex min-w-0 flex-col">
                     <span className="truncate">
                       {renderTag?.(option, { remove: () => removeOption(option) }) ??
@@ -998,7 +1016,7 @@ function AsyncMultiSelect<
                     <span
                       role="button"
                       tabIndex={0}
-                      className="rounded-sm text-muted-foreground hover:text-foreground"
+                      className="rounded-full text-muted-foreground transition-colors hover:text-foreground"
                       aria-label={`Remove ${getOptionLabelText(option)}`}
                       onClick={(event) => {
                         event.stopPropagation()
@@ -1022,7 +1040,7 @@ function AsyncMultiSelect<
               <span
                 role="button"
                 tabIndex={0}
-                className="rounded-sm p-0.5 text-muted-foreground hover:text-foreground"
+                className="rounded-full border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground"
                 aria-label={labels?.clearAll ?? labels?.clear ?? "Clear all"}
                 onClick={handleClear}
                 onKeyDown={(event) => {
@@ -1038,41 +1056,52 @@ function AsyncMultiSelect<
             <ChevronsUpDownIcon className="size-4 opacity-60" />
           </span>
         </PopoverTrigger>
-        <PopoverContent
-          align="start"
-          className={cn("w-(--anchor-width) gap-2 p-2", contentClassName)}
-        >
-          <div className="relative">
-            <SearchIcon className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-            <Input
-              value={search}
-              onChange={(event) => setSearch(event.target.value)}
-              placeholder={labels?.searchPlaceholder ?? "Search..."}
-              className={cn("pl-8", searchClassName)}
-            />
-          </div>
-
-          <div className="flex flex-wrap items-center justify-between gap-2 px-1 text-xs text-muted-foreground">
-            {hasValue && labels?.selectedCount && <span>{labels.selectedCount(values.length)}</span>}
-            {isMaxReached &&
-              (renderMaxSelected?.(state) ?? (
+        <PopoverContent
+          align="start"
+          className={cn(
+            "w-(--anchor-width) gap-3 rounded-[var(--radius-2xl)] border-border/80 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--popover),white_10%),var(--popover))] p-3.5 shadow-[0_24px_80px_rgba(15,23,42,0.18)] backdrop-blur",
+            contentClassName
+          )}
+        >
+          <div className="relative">
+            <SearchIcon className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+              placeholder={labels?.searchPlaceholder ?? "Search..."}
+              className={cn("border-border/75 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--background),white_12%),var(--background))] pl-8 shadow-[inset_0_1px_0_rgba(255,255,255,0.12),0_1px_0_rgba(255,255,255,0.05)]", searchClassName)}
+            />
+          </div>
+
+          <div className="flex flex-wrap items-center justify-between gap-2 rounded-[min(var(--radius-xl),16px)] border border-border/70 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--muted),white_10%),color-mix(in_oklch,var(--muted),transparent_8%))] px-3 py-2 text-xs text-muted-foreground">
+            {hasValue && labels?.selectedCount && <span>{labels.selectedCount(values.length)}</span>}
+            {isMaxReached &&
+              (renderMaxSelected?.(state) ?? (
                 <span>{labels?.maxSelected?.(maxSelected ?? values.length) ?? `Maximum ${maxSelected} selected`}</span>
               ))}
-            <div className="ml-auto flex items-center gap-2">
-              {canSelectAll && (
-                <button type="button" className="font-medium text-foreground hover:underline" onClick={handleSelectAllVisible}>
-                  {labels?.selectAll ?? "Select all"}
-                </button>
-              )}
-              {canClear && (
-                <button type="button" className="font-medium text-foreground hover:underline" onClick={() => onValueChange?.([], [])}>
-                  {labels?.clearAll ?? labels?.clear ?? "Clear all"}
-                </button>
-              )}
-            </div>
-          </div>
-
-          <div className="max-h-64 overflow-y-auto">
+            <div className="ml-auto flex items-center gap-2">
+              {canSelectAll && (
+                <button
+                  type="button"
+                  className="rounded-full border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background"
+                  onClick={handleSelectAllVisible}
+                >
+                  {labels?.selectAll ?? "Select all"}
+                </button>
+              )}
+              {canClear && (
+                <button
+                  type="button"
+                  className="rounded-full border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background"
+                  onClick={() => onValueChange?.([], [])}
+                >
+                  {labels?.clearAll ?? labels?.clear ?? "Clear all"}
+                </button>
+              )}
+            </div>
+          </div>
+
+          <div className="max-h-64 space-y-1 overflow-y-auto pr-1">
             {searchTooShort && flatOptions.length === 0 && (
               renderMinSearch?.(state) ?? (
                 <AsyncStateMessage>

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

@@ -1,19 +1,21 @@
-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"
+import * as React from "react"
+import { XIcon } from "lucide-react"
 
-export type ClearableInputProps = Omit<
-  React.ComponentProps<typeof InputDecorator>,
-  "value" | "onChange"
-> & {
-  value?: string | number | null
+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
+  clearOnEscape?: boolean
+  focusAfterClear?: boolean
   leadingIcon?: React.ReactNode
   trailing?: React.ReactNode
   wrapperClassName?: string
@@ -22,57 +24,75 @@ export type ClearableInputProps = Omit<
 
 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}
-      />
-    )
-  }
-)
+    {
+      value,
+      onChange,
+      onValueChange,
+      onClear,
+      clearable = true,
+      clearLabel = "Clear",
+      clearOnEscape = true,
+      focusAfterClear = true,
+      leadingIcon,
+      trailing,
+      disabled,
+      onKeyDown,
+      ...props
+    },
+    ref
+  ) => {
+    const inputRef = React.useRef<HTMLInputElement | null>(null)
+    const stringValue = getInputValue(value)
+    const canClear = clearable && stringValue.length > 0 && !disabled
+    const handleChange = createInputChangeHandler({ onChange, onValueChange })
+
+    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)
+
+    const clearValue = () => {
+      if (!canClear) return
+      onValueChange?.("")
+      onClear?.()
+      if (focusAfterClear) inputRef.current?.focus()
+    }
+
+    const handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
+      onKeyDown?.(event)
+      if (event.defaultPrevented) return
+      if (clearOnEscape && event.key === "Escape" && canClear) {
+        event.preventDefault()
+        clearValue()
+      }
+    }
+
+    return (
+      <InputDecorator
+        data-slot="clearable-input"
+        ref={inputRef}
+        value={stringValue}
+        disabled={disabled}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        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={clearValue}
+              >
+                <XIcon className="size-4" />
+              </button>
+            )}
+          </>
+        }
+        {...props}
+      />
+    )
+  }
+)
 ClearableInput.displayName = "ClearableInput"
 
 export { ClearableInput }