azamat-ui-kit-cli 0.2.2 → 0.3.4

package/vendor/src/components/feedback/page-state.tsx

@@ -32,21 +32,25 @@ function defaultPageStateIcon(tone: PageStateTone) {
 
 function PageState({ tone = "empty", title, description, icon, action, compact = false, className, ...props }: PageStateProps) {
   return (
-    <div
-      data-slot="page-state"
-      role={tone === "error" ? "alert" : "status"}
-      className={cn("flex flex-col items-center justify-center rounded-lg border bg-card text-center", compact ? "gap-2 p-6" : "min-h-72 gap-4 p-10", className)}
-      {...props}
-    >
-      <div className="flex size-14 items-center justify-center rounded-full bg-muted text-muted-foreground">
-        {icon ?? defaultPageStateIcon(tone)}
-      </div>
-      <div className="grid gap-1">
-        {title && <div className="text-base font-semibold text-foreground">{title}</div>}
-        {description && <div className="max-w-md text-sm text-muted-foreground">{description}</div>}
-      </div>
-      {action && <div>{action}</div>}
-    </div>
+    <div
+      data-slot="page-state"
+      role={tone === "error" ? "alert" : "status"}
+      className={cn(
+        "flex flex-col items-center justify-center rounded-[var(--radius-3xl)] border border-border/75 bg-card/96 text-center shadow-sm ring-1 ring-foreground/4",
+        compact ? "gap-2 p-6" : "min-h-72 gap-4 p-10",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex size-14 items-center justify-center rounded-full border border-border/70 bg-muted/45 text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.05)]">
+        {icon ?? defaultPageStateIcon(tone)}
+      </div>
+      <div className="grid gap-1">
+        {title && <div className="text-base font-semibold tracking-tight text-foreground">{title}</div>}
+        {description && <div className="max-w-md text-sm leading-6 text-muted-foreground">{description}</div>}
+      </div>
+      {action && <div>{action}</div>}
+    </div>
   )
 }
 

package/vendor/src/components/feedback/status-badge.tsx

@@ -1,24 +1,24 @@
-import * as React from "react"
-
-import { Badge, badgeVariants } from "@/components/ui/badge"
-import { cn } from "@/lib/utils"
-
-type BadgeVariant = NonNullable<Parameters<typeof badgeVariants>[0]>["variant"]
-
-export type StatusBadgeTone =
-  | "default"
-  | "success"
-  | "warning"
-  | "danger"
-  | "info"
-  | "muted"
-  | "outline"
-
-export type StatusBadgeProps = React.ComponentProps<typeof Badge> & {
-  tone?: StatusBadgeTone
-  dot?: boolean
-}
-
+import * as React from "react"
+
+import { Badge, badgeVariants } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+type BadgeVariant = NonNullable<Parameters<typeof badgeVariants>[0]>["variant"]
+
+export type StatusBadgeTone =
+  | "default"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info"
+  | "muted"
+  | "outline"
+
+export type StatusBadgeProps = Omit<React.ComponentProps<typeof Badge>, "tone" | "dot"> & {
+  tone?: StatusBadgeTone
+  dot?: boolean
+}
+
 const toneClassName: Record<StatusBadgeTone, string> = {
   default: "border-primary/10 bg-primary/8 text-primary shadow-sm",
   success: "border-emerald-500/20 bg-emerald-500/12 text-emerald-700 shadow-sm dark:text-emerald-300",
@@ -28,26 +28,26 @@ const toneClassName: Record<StatusBadgeTone, string> = {
   muted: "border-border/70 bg-muted/80 text-muted-foreground",
   outline: "border-border/80 bg-background/90 text-foreground shadow-sm",
 }
-
-const toneVariant: Record<StatusBadgeTone, BadgeVariant> = {
-  default: "default",
-  success: "secondary",
-  warning: "secondary",
-  danger: "destructive",
-  info: "secondary",
-  muted: "secondary",
-  outline: "outline",
-}
-
-function StatusBadge({
-  className,
-  tone = "default",
-  dot = false,
-  children,
-  ...props
-}: StatusBadgeProps) {
-  return (
-    <Badge
+
+const toneVariant: Record<StatusBadgeTone, BadgeVariant> = {
+  default: "default",
+  success: "secondary",
+  warning: "secondary",
+  danger: "destructive",
+  info: "secondary",
+  muted: "secondary",
+  outline: "outline",
+}
+
+function StatusBadge({
+  className,
+  tone = "default",
+  dot = false,
+  children,
+  ...props
+}: StatusBadgeProps) {
+  return (
+    <Badge
       data-slot="status-badge"
       variant={toneVariant[tone]}
       className={cn("rounded-full px-2.5 py-1 text-[11px] font-semibold tracking-[0.01em]", toneClassName[tone], className)}
@@ -58,5 +58,5 @@ function StatusBadge({
     </Badge>
   )
 }
-
-export { StatusBadge }
+
+export { StatusBadge }

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

@@ -0,0 +1,147 @@
+import { type FieldPath, type FieldValues } from "react-hook-form"
+
+import { AppInputKind } from "@/components/inputs/app-input"
+import {
+  FormInput,
+  type FormInputDateVariantProps,
+  type FormInputDateRangeVariantProps,
+  type FormInputClearableVariantProps,
+  type FormInputMaskedVariantProps,
+  type FormInputMoneyVariantProps,
+  type FormInputQuantityVariantProps,
+  type FormInputNumberVariantProps,
+  type FormInputPasswordVariantProps,
+  type FormInputPhoneVariantProps,
+  type FormInputSearchVariantProps,
+  type FormTextInputProps,
+} from "@/components/form/form-input"
+
+export type FormAppInputPhoneValueMode = "raw" | "masked"
+type FormAppInputVariantProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> =
+  | Omit<FormTextInputProps<TFieldValues, TName>, "kind" | "onValueChange">
+  | Omit<FormInputSearchVariantProps<TFieldValues, TName>, "kind">
+  | Omit<FormInputPasswordVariantProps<TFieldValues, TName>, "kind">
+  | Omit<FormInputNumberVariantProps<TFieldValues, TName>, "kind">
+  | Omit<FormInputPhoneVariantProps<TFieldValues, TName>, "kind">
+  | Omit<FormInputDateVariantProps<TFieldValues, TName>, "kind">
+  | Omit<FormInputDateRangeVariantProps<TFieldValues, TName>, "kind">
+  | Omit<FormInputClearableVariantProps<TFieldValues, TName>, "kind">
+  | Omit<FormInputMaskedVariantProps<TFieldValues, TName>, "kind">
+  | Omit<FormInputMoneyVariantProps<TFieldValues, TName>, "kind">
+  | Omit<FormInputQuantityVariantProps<TFieldValues, TName>, "kind">
+
+export type FormAppInputProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = FormAppInputVariantProps<TFieldValues, TName> & {
+  kind?: AppInputKind
+  phoneValueMode?: FormAppInputPhoneValueMode
+}
+
+/**
+ * @deprecated Use {@link FormInput} directly.
+ */
+function FormAppInput<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(
+  props: FormAppInputProps<TFieldValues, TName>
+) {
+  const { phoneValueMode = "raw", kind = "text", ...rest } = props
+
+  const safeRest = rest as unknown as Record<string, unknown>
+
+  if (kind === "text") {
+    return <FormInput {...(safeRest as Omit<FormTextInputProps<TFieldValues, TName>, "kind">)} kind="text" />
+  }
+
+  if (kind === "search") {
+    return (
+      <FormInput
+        {...(safeRest as Omit<FormInputSearchVariantProps<TFieldValues, TName>, "kind">)}
+        kind="search"
+      />
+    )
+  }
+
+  if (kind === "password") {
+    return (
+      <FormInput
+        {...(safeRest as Omit<FormInputPasswordVariantProps<TFieldValues, TName>, "kind">)}
+        kind="password"
+      />
+    )
+  }
+
+  if (kind === "number") {
+    return (
+      <FormInput
+        {...(safeRest as Omit<FormInputNumberVariantProps<TFieldValues, TName>, "kind">)}
+        kind="number"
+      />
+    )
+  }
+
+  if (kind === "phone") {
+    return (
+      <FormInput
+        {...(safeRest as Omit<FormInputPhoneVariantProps<TFieldValues, TName>, "kind">)}
+        kind="phone"
+        valueMode={phoneValueMode}
+      />
+    )
+  }
+
+  if (kind === "date") {
+    return (
+      <FormInput
+        {...(safeRest as Omit<FormInputDateVariantProps<TFieldValues, TName>, "kind">)}
+        kind="date"
+      />
+    )
+  }
+
+  if (kind === "date-range") {
+    return (
+      <FormInput
+        {...(safeRest as Omit<FormInputDateRangeVariantProps<TFieldValues, TName>, "kind">)}
+        kind="date-range"
+      />
+    )
+  }
+
+  if (kind === "clearable") {
+    return (
+      <FormInput
+        {...(safeRest as Omit<FormInputClearableVariantProps<TFieldValues, TName>, "kind">)}
+        kind="clearable"
+      />
+    )
+  }
+
+  if (kind === "masked") {
+    return (
+      <FormInput
+        {...(safeRest as Omit<FormInputMaskedVariantProps<TFieldValues, TName>, "kind">)}
+        kind="masked"
+      />
+    )
+  }
+
+  if (kind === "money") {
+    return <FormInput {...(safeRest as Omit<FormInputMoneyVariantProps<TFieldValues, TName>, "kind">)} kind="money" />
+  }
+
+  if (kind === "quantity") {
+    return (
+      <FormInput
+        {...(safeRest as Omit<FormInputQuantityVariantProps<TFieldValues, TName>, "kind">)}
+        kind="quantity"
+      />
+    )
+  }
+
+  return <FormInput {...(safeRest as Omit<FormTextInputProps<TFieldValues, TName>, "kind">)} kind="text" />
+}
+
+export { FormAppInput }

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

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

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

@@ -96,7 +96,7 @@ function FormFieldShell({
           data-slot="form-field-label"
           htmlFor={htmlFor}
           className={cn(
-            "min-w-0 text-sm font-semibold leading-none text-foreground",
+            "min-w-0 text-sm font-semibold leading-none tracking-tight text-foreground",
             disabled && "cursor-not-allowed opacity-60",
             readOnly && "opacity-80",
             labelClassName
@@ -132,10 +132,13 @@ function FormFieldShell({
     </div>
   )
 
-  const errorNode = error ? (
+  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)}
+      className={cn(
+        "flex items-start gap-2 rounded-[min(var(--radius-xl),16px)] border border-destructive/18 bg-destructive/8 px-3 py-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>
@@ -146,11 +149,11 @@ function FormFieldShell({
     <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)}
+      data-invalid={Boolean(error) || undefined}
+      data-disabled={disabled || undefined}
+      data-readonly={readOnly || undefined}
+      aria-disabled={disabled || undefined}
+      className={cn(layoutClassName[layout], "rounded-[var(--radius-2xl)]", className)}
       {...props}
     >
       {layout === "horizontal" ? (

package/vendor/src/components/form/form-field-utils.ts

@@ -0,0 +1,76 @@
+import type { FieldPath, FieldValues, Control } from "react-hook-form"
+
+import type { FormFieldShellControlProps } from "@/components/form/form-field-shell"
+
+export type FormControlledFieldProps<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues>,
+> = FormFieldShellControlProps & {
+  control: Control<TFieldValues>
+  name: TName
+  fieldClassName?: string
+  id?: string
+}
+
+const formShellPropKeys = [
+  "label",
+  "description",
+  "required",
+  "className",
+  "layout",
+  "descriptionPosition",
+  "labelAction",
+  "requiredIndicator",
+  "errorIcon",
+  "showErrorIcon",
+  "disabled",
+  "readOnly",
+  "labelClassName",
+  "labelRowClassName",
+  "descriptionClassName",
+  "errorClassName",
+  "contentClassName",
+] as const
+
+const controlledFieldPropKeys = ["control", "name", "fieldClassName", "id", ...formShellPropKeys] as const
+
+export function pickFormFieldShellProps(props: FormFieldShellControlProps): FormFieldShellControlProps {
+  return {
+    label: props.label,
+    description: props.description,
+    required: props.required,
+    className: props.className,
+    layout: props.layout,
+    descriptionPosition: props.descriptionPosition,
+    labelAction: props.labelAction,
+    requiredIndicator: props.requiredIndicator,
+    errorIcon: props.errorIcon,
+    showErrorIcon: props.showErrorIcon,
+    disabled: props.disabled,
+    readOnly: props.readOnly,
+    labelClassName: props.labelClassName,
+    labelRowClassName: props.labelRowClassName,
+    descriptionClassName: props.descriptionClassName,
+    errorClassName: props.errorClassName,
+    contentClassName: props.contentClassName,
+  }
+}
+
+export function splitFormControlledProps<
+  TProps extends FormControlledFieldProps<FieldValues, FieldPath<FieldValues>>,
+>(props: TProps) {
+  const inputProps = { ...props } as Record<string, unknown>
+
+  controlledFieldPropKeys.forEach((key) => {
+    delete inputProps[key]
+  })
+
+  return {
+    control: props.control,
+    name: props.name,
+    id: props.id ?? props.name,
+    fieldClassName: props.fieldClassName,
+    shellProps: pickFormFieldShellProps(props),
+    inputProps,
+  }
+}