azamat-ui-kit-cli 0.2.2 → 0.3.4

package/vendor/src/components/ui/input.tsx

@@ -1,20 +1,191 @@
-import * as React from "react"
-import { Input as InputPrimitive } from "@base-ui/react/input"
-
-import { cn } from "@/lib/utils"
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <InputPrimitive
-      type={type}
-      data-slot="input"
-      className={cn(
-        "h-9 w-full min-w-0 rounded-xl border border-input/85 bg-background/92 px-3 py-2 text-base shadow-sm transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/95 hover:border-border focus-visible:border-ring focus-visible:bg-background focus-visible:ring-3 focus-visible:ring-ring/45 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/55 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:hover:bg-input/45 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Input }
+import * as React from "react"
+
+import { InputPrimitive, type InputPrimitiveProps } from "@/components/ui/input-primitive"
+import { ClearableInput, type ClearableInputProps } from "@/components/inputs/clearable-input"
+import { DateInput, type DateInputProps } from "@/components/inputs/date-input"
+import { DateRangeInput, type DateRangeInputProps } from "@/components/inputs/date-range-input"
+import { MoneyInput, type MoneyInputProps } from "@/components/inputs/money-input"
+import { MaskedInput, type MaskedInputProps } from "@/components/inputs/masked-input"
+import { NumberInput, type NumberInputProps } from "@/components/inputs/number-input"
+import { PasswordInput, type PasswordInputProps } from "@/components/inputs/password-input"
+import { PhoneInput, type PhoneInputProps } from "@/components/inputs/phone-input"
+import { QuantityInput, type QuantityInputProps } from "@/components/inputs/quantity-input"
+import { SearchInput, type SearchInputProps } from "@/components/inputs/search-input"
+
+export type InputKind =
+  | "text"
+  | "clearable"
+  | "search"
+  | "password"
+  | "number"
+  | "phone"
+  | "money"
+  | "quantity"
+  | "masked"
+  | "date"
+  | "date-range"
+
+export type InputTextProps = Omit<InputPrimitiveProps, "value"> & {
+  kind?: "text"
+  value?: string | number | readonly string[] | null
+}
+
+export type InputClearableProps = Omit<ClearableInputProps, "kind"> & {
+  kind: "clearable"
+}
+
+export type InputSearchProps = Omit<SearchInputProps, "kind"> & {
+  kind: "search"
+}
+
+export type InputPasswordProps = Omit<PasswordInputProps, "kind"> & {
+  kind: "password"
+}
+
+export type InputNumberProps = Omit<NumberInputProps, "kind"> & {
+  kind: "number"
+}
+
+export type InputPhoneProps = Omit<PhoneInputProps, "kind"> & {
+  kind: "phone"
+}
+
+export type InputMoneyProps = Omit<MoneyInputProps, "kind"> & {
+  kind: "money"
+}
+
+export type InputQuantityProps = Omit<QuantityInputProps, "kind"> & {
+  kind: "quantity"
+}
+
+export type InputMaskedProps = Omit<MaskedInputProps, "kind"> & {
+  kind: "masked"
+}
+
+export type InputDateProps = Omit<DateInputProps, "kind"> & {
+  kind: "date"
+}
+
+export type InputDateRangeProps = Omit<DateRangeInputProps, "onChange" | "onValueChange" | "value"> & {
+  kind: "date-range"
+  onValueChange?: (value: { from?: string; to?: string }) => void
+  value?: DateRangeInputProps["value"]
+}
+
+export type InputProps =
+  | InputTextProps
+  | InputClearableProps
+  | InputSearchProps
+  | InputPasswordProps
+  | InputNumberProps
+  | InputPhoneProps
+  | InputMoneyProps
+  | InputQuantityProps
+  | InputMaskedProps
+  | InputDateProps
+  | InputDateRangeProps
+
+const Input = React.forwardRef<HTMLInputElement | HTMLDivElement, InputProps>((props, ref) => {
+  const kind = props.kind ?? "text"
+
+  if (kind === "search") {
+    return (
+      <SearchInput
+        ref={ref as React.ForwardedRef<HTMLInputElement>}
+        {...(props as Omit<SearchInputProps, "kind">)}
+      />
+    )
+  }
+
+  if (kind === "password") {
+    return (
+      <PasswordInput
+        ref={ref as React.ForwardedRef<HTMLInputElement>}
+        {...(props as Omit<PasswordInputProps, "kind">)}
+      />
+    )
+  }
+
+  if (kind === "number") {
+    return (
+      <NumberInput
+        ref={ref as React.ForwardedRef<HTMLInputElement>}
+        {...(props as Omit<NumberInputProps, "kind">)}
+      />
+    )
+  }
+
+  if (kind === "phone") {
+    return (
+      <PhoneInput
+        ref={ref as React.ForwardedRef<HTMLInputElement>}
+        {...(props as Omit<PhoneInputProps, "kind">)}
+      />
+    )
+  }
+
+  if (kind === "money") {
+    return (
+      <MoneyInput
+        ref={ref as React.ForwardedRef<HTMLInputElement>}
+        {...(props as Omit<MoneyInputProps, "kind">)}
+      />
+    )
+  }
+
+  if (kind === "quantity") {
+    return (
+      <QuantityInput
+        ref={ref as React.ForwardedRef<HTMLInputElement>}
+        {...(props as Omit<QuantityInputProps, "kind">)}
+      />
+    )
+  }
+
+  if (kind === "masked") {
+    return (
+      <MaskedInput
+        ref={ref as React.ForwardedRef<HTMLInputElement>}
+        {...(props as Omit<MaskedInputProps, "kind">)}
+      />
+    )
+  }
+
+  if (kind === "date") {
+    return (
+      <DateInput
+        ref={ref as React.ForwardedRef<HTMLInputElement>}
+        {...(props as Omit<DateInputProps, "kind">)}
+      />
+    )
+  }
+
+  if (kind === "date-range") {
+    return <DateRangeInput {...(props as Omit<InputDateRangeProps, "kind">)} />
+  }
+
+  if (kind === "clearable") {
+    return (
+      <ClearableInput
+        ref={ref as React.ForwardedRef<HTMLInputElement>}
+        {...(props as Omit<ClearableInputProps, "kind">)}
+      />
+    )
+  }
+
+  const inputProps = props as Omit<InputTextProps, "kind">
+  const { value, defaultValue, ...restInputProps } = inputProps
+
+  return (
+    <InputPrimitive
+      ref={ref as React.ForwardedRef<HTMLInputElement>}
+      value={value ?? undefined}
+      defaultValue={value === undefined ? defaultValue : undefined}
+      type={restInputProps.type ?? "text"}
+      {...(restInputProps as React.ComponentProps<typeof InputPrimitive>)}
+    />
+  )
+})
+Input.displayName = "Input"
+
+export { Input }

package/vendor/src/components/ui/kbd.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type KbdProps = React.ComponentProps<"kbd"> & {
+  size?: "sm" | "default" | "lg"
+  variant?: "default" | "outline" | "ghost"
+}
+
+const sizeClassName = {
+  sm: "h-5 px-1.5 text-[10px]",
+  default: "h-6 px-2 text-xs",
+  lg: "h-7 px-2.5 text-sm",
+}
+
+const variantClassName = {
+  default: "border-border/80 bg-muted text-muted-foreground shadow-[inset_0_-1px_0_rgba(0,0,0,0.08)]",
+  outline: "border-border bg-background text-foreground shadow-sm",
+  ghost: "border-transparent bg-transparent text-muted-foreground shadow-none",
+}
+
+function Kbd({ className, size = "default", variant = "default", ...props }: KbdProps) {
+  return (
+    <kbd
+      data-slot="kbd"
+      data-size={size}
+      className={cn("inline-flex shrink-0 items-center justify-center rounded-md border font-mono font-medium leading-none", sizeClassName[size], variantClassName[variant], className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd }

package/vendor/src/components/ui/popover.tsx

@@ -37,7 +37,7 @@ function PopoverContent({
         <PopoverPrimitive.Popup
           data-slot="popover-content"
           className={cn(
-            "z-50 flex w-80 origin-(--transform-origin) flex-col gap-3 rounded-[var(--radius-2xl)] border border-border/75 bg-popover/98 p-3.5 text-sm text-popover-foreground shadow-[0_24px_70px_color-mix(in_oklch,var(--foreground),transparent_84%)] ring-1 ring-foreground/8 backdrop-blur outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "z-50 flex w-80 origin-(--transform-origin) flex-col gap-3 rounded-[var(--radius-2xl)] border border-border/80 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--popover),white_10%),var(--popover))] p-4 text-sm text-popover-foreground shadow-[0_24px_70px_color-mix(in_oklch,var(--foreground),transparent_84%)] ring-1 ring-foreground/8 backdrop-blur outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
@@ -49,12 +49,12 @@ function PopoverContent({
 
 function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div
-      data-slot="popover-header"
+    <div
+      data-slot="popover-header"
       className={cn("flex flex-col gap-1 text-sm", className)}
-      {...props}
-    />
-  )
+      {...props}
+    />
+  )
 }
 
 function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
@@ -72,12 +72,12 @@ function PopoverDescription({
   ...props
 }: PopoverPrimitive.Description.Props) {
   return (
-    <PopoverPrimitive.Description
-      data-slot="popover-description"
+    <PopoverPrimitive.Description
+      data-slot="popover-description"
       className={cn("leading-6 text-muted-foreground", className)}
-      {...props}
-    />
-  )
+      {...props}
+    />
+  )
 }
 
 export {

package/vendor/src/components/ui/radio-group.tsx

@@ -0,0 +1,102 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type RadioGroupOption = {
+  label: React.ReactNode
+  value: string
+  description?: React.ReactNode
+  disabled?: boolean
+}
+
+export type RadioGroupProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+  name?: string
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  options: RadioGroupOption[]
+  orientation?: "vertical" | "horizontal"
+  size?: "sm" | "default" | "lg"
+  itemClassName?: string
+}
+
+const sizeClassName = {
+  sm: "size-3.5",
+  default: "size-4",
+  lg: "size-5",
+}
+
+function RadioGroup({
+  name,
+  value,
+  defaultValue,
+  onValueChange,
+  options,
+  orientation = "vertical",
+  size = "default",
+  className,
+  itemClassName,
+  ...props
+}: RadioGroupProps) {
+  const generatedName = React.useId()
+  const resolvedName = name ?? generatedName
+  const [internalValue, setInternalValue] = React.useState(defaultValue ?? "")
+  const isControlled = value !== undefined
+  const currentValue = isControlled ? value : internalValue
+
+  const setValue = (nextValue: string) => {
+    if (!isControlled) setInternalValue(nextValue)
+    onValueChange?.(nextValue)
+  }
+
+  return (
+    <div
+      role="radiogroup"
+      data-slot="radio-group"
+      data-orientation={orientation}
+      className={cn("grid gap-2", orientation === "horizontal" && "sm:flex sm:flex-wrap sm:items-center", className)}
+      {...props}
+    >
+      {options.map((option) => {
+        const checked = option.value === currentValue
+        return (
+          <label
+            key={option.value}
+            data-slot="radio-group-item"
+            data-checked={checked || undefined}
+            data-disabled={option.disabled || undefined}
+            className={cn(
+              "group flex cursor-pointer items-start gap-3 rounded-[min(var(--radius-xl),16px)] border border-border/80 bg-background/88 px-3 py-2.5 text-sm transition hover:border-ring/35 hover:bg-accent/60 data-[checked=true]:border-primary/35 data-[checked=true]:bg-primary/8 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-55",
+              itemClassName
+            )}
+          >
+            <input
+              type="radio"
+              name={resolvedName}
+              value={option.value}
+              checked={checked}
+              disabled={option.disabled}
+              className="sr-only"
+              onChange={() => setValue(option.value)}
+            />
+            <span
+              aria-hidden="true"
+              className={cn(
+                "mt-0.5 inline-flex shrink-0 items-center justify-center rounded-full border border-input bg-background shadow-sm transition group-data-[checked=true]:border-primary group-data-[checked=true]:bg-primary",
+                sizeClassName[size]
+              )}
+            >
+              <span className="size-1.5 rounded-full bg-primary-foreground opacity-0 transition group-data-[checked=true]:opacity-100" />
+            </span>
+            <span className="min-w-0">
+              <span className="block font-medium text-foreground">{option.label}</span>
+              {option.description ? <span className="mt-1 block text-sm leading-6 text-muted-foreground">{option.description}</span> : null}
+            </span>
+          </label>
+        )
+      })}
+    </div>
+  )
+}
+
+export { RadioGroup }

package/vendor/src/components/ui/right-click-menu.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type RightClickMenuItem = {
+  label: React.ReactNode
+  onSelect?: () => void
+  disabled?: boolean
+}
+
+export type RightClickMenuProps = React.ComponentProps<"div"> & {
+  items: RightClickMenuItem[]
+}
+
+function RightClickMenu({ items, children, className, ...props }: RightClickMenuProps) {
+  const [open, setOpen] = React.useState(false)
+  const [point, setPoint] = React.useState({ x: 0, y: 0 })
+
+  React.useEffect(() => {
+    if (!open) return
+    const close = () => setOpen(false)
+    window.addEventListener("click", close)
+    return () => window.removeEventListener("click", close)
+  }, [open])
+
+  return (
+    <div
+      data-slot="right-click-menu"
+      className={cn("contents", className)}
+      onContextMenu={(event) => {
+        event.preventDefault()
+        setPoint({ x: event.clientX, y: event.clientY })
+        setOpen(true)
+      }}
+      {...props}
+    >
+      {children}
+      {open ? (
+        <div className="fixed z-50 min-w-40 rounded-xl border border-border bg-popover p-1.5 text-sm text-popover-foreground shadow-xl" style={{ left: point.x, top: point.y }}>
+          {items.map((item, index) => (
+            <button
+              key={index}
+              type="button"
+              disabled={item.disabled}
+              className="block w-full rounded-lg px-3 py-2 text-left hover:bg-accent disabled:pointer-events-none disabled:opacity-50"
+              onClick={() => {
+                item.onSelect?.()
+                setOpen(false)
+              }}
+            >
+              {item.label}
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export { RightClickMenu }

package/vendor/src/components/ui/scroll-box.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type ScrollBoxProps = React.ComponentProps<"div"> & {
+  maxHeight?: string | number
+  axis?: "y" | "x" | "both"
+}
+
+function ScrollBox({ className, maxHeight, axis = "y", style, ...props }: ScrollBoxProps) {
+  return (
+    <div
+      data-slot="scroll-box"
+      className={cn(
+        "min-h-0 overscroll-contain",
+        axis === "y" && "overflow-y-auto overflow-x-hidden",
+        axis === "x" && "overflow-x-auto overflow-y-hidden",
+        axis === "both" && "overflow-auto",
+        className
+      )}
+      style={{ maxHeight, ...style }}
+      {...props}
+    />
+  )
+}
+
+export { ScrollBox }

package/vendor/src/components/ui/segmented-control.tsx

@@ -18,11 +18,11 @@ export type SegmentedControlProps<TValue extends string = string> = Omit<React.C
   fullWidth?: boolean
 }
 
-const sizeClassName = {
-  sm: "h-8 px-2 text-xs",
-  md: "h-9 px-3 text-sm",
-  lg: "h-10 px-4 text-sm",
-}
+const sizeClassName = {
+  sm: "min-h-8 px-2.5 text-xs",
+  md: "min-h-9 px-3.5 text-sm",
+  lg: "min-h-10 px-4 text-sm",
+}
 
 function SegmentedControl<TValue extends string = string>({
   value,
@@ -43,12 +43,16 @@ function SegmentedControl<TValue extends string = string>({
   }
 
   return (
-    <div
-      data-slot="segmented-control"
-      role="radiogroup"
-      className={cn("inline-flex rounded-lg border bg-muted p-1", fullWidth && "flex w-full", className)}
-      {...props}
-    >
+    <div
+      data-slot="segmented-control"
+      role="radiogroup"
+      className={cn(
+        "inline-flex gap-1 rounded-[var(--radius-2xl)] border border-border/80 bg-muted/72 p-1 text-muted-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.06),0_10px_26px_rgba(15,23,42,0.05)] backdrop-blur",
+        fullWidth && "flex w-full",
+        className
+      )}
+      {...props}
+    >
       {options.map((option) => {
         const selected = option.value === currentValue
         return (
@@ -58,12 +62,12 @@ function SegmentedControl<TValue extends string = string>({
             role="radio"
             aria-checked={selected}
             disabled={option.disabled}
-            data-selected={selected || undefined}
-            className={cn(
-              "inline-flex items-center justify-center gap-1.5 rounded-md font-medium text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[selected=true]:bg-background data-[selected=true]:text-foreground data-[selected=true]:shadow-sm",
-              sizeClassName[size],
-              fullWidth && "flex-1"
-            )}
+            data-selected={selected || undefined}
+            className={cn(
+              "inline-flex items-center justify-center gap-1.5 rounded-[calc(var(--radius-xl)-2px)] border border-transparent font-medium text-muted-foreground outline-none transition-[background-color,color,border-color,box-shadow,transform] hover:bg-background/58 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[selected=true]:-translate-y-px data-[selected=true]:border-border/85 data-[selected=true]:bg-background data-[selected=true]:text-foreground data-[selected=true]:shadow-[0_1px_0_rgba(255,255,255,0.24),0_12px_24px_rgba(15,23,42,0.12)]",
+              sizeClassName[size],
+              fullWidth && "flex-1"
+            )}
             onClick={() => selectValue(option.value)}
           >
             {option.icon}