@exxatdesignux/ui 0.0.5

package/src/components/ui/form.tsx

@@ -0,0 +1,137 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "radix-ui"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "../../lib/utils"
+import { Label } from "./label"
+
+const Form = FormProvider
+
+interface FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+function FormField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({ ...props }: ControllerProps<TFieldValues, TName>) {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+function useFormField() {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext  = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) throw new Error("useFormField must be used inside <FormField>")
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name:          fieldContext.name,
+    formItemId:    `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+interface FormItemContextValue { id: string }
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId()
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div data-slot="form-item" className={cn("flex flex-col gap-1.5", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
+  const { error, formItemId } = useFormField()
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+  return (
+    <Slot.Root
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={!error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`}
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField()
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, children, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : children
+  if (!body) return null
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

package/src/components/ui/input-group.tsx

@@ -0,0 +1,156 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+import { Button } from "./button"
+import { Input } from "./input"
+import { Textarea } from "./textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first ps-2 has-[>button]:ms-[-0.3rem] has-[>kbd]:ms-[-0.15rem]",
+        "inline-end":
+          "order-last pe-2 has-[>button]:me-[-0.3rem] has-[>kbd]:me-[-0.15rem]",
+        "block-start":
+          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+        "block-end":
+          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}

package/src/components/ui/input-mask.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+/**
+ * Input masking — aligned with [Shadcn Studio input-mask](https://shadcnstudio.com/docs/components/input-mask):
+ * `use-mask-input` for phone / date / time / custom / zip; use `PaymentCardFields` for card flows.
+ */
+
+import * as React from "react"
+import {
+  useMaskInput,
+  withMask,
+  useHookFormMask,
+  withHookFormMask,
+  useTanStackFormMask,
+  withTanStackFormMask,
+} from "use-mask-input"
+import type { Mask, Options } from "use-mask-input"
+
+import { composeRefs } from "../../lib/compose-refs"
+
+export { composeRefs } from "../../lib/compose-refs"
+import { cn } from "../../lib/utils"
+import { Input } from "./input"
+
+/** Default mask UX per Shadcn Studio demos (underscore placeholder, no hover mask). */
+export const exxatInputMaskDefaults: Options = {
+  placeholder: "_",
+  showMaskOnHover: false,
+}
+
+/** Common patterns (Inputmask `9` = digit, `a` = letter, `*` = alnum). */
+export const exxatMaskPatterns = {
+  /** US NANP 10-digit display */
+  phoneUS: "(999) 999-9999",
+  /** US ZIP or ZIP+4 */
+  zipUS: "99999[-9999]",
+  /** Calendar-style date (validate separately). */
+  dateMDY: "99/99/9999",
+  /** Studio input-mask-01 style — UK-style plate-ish token; adjust per product. */
+  customReference: "AA99 AAA",
+} as const satisfies Record<string, Mask>
+
+export function exxatTimeMaskOptions(): Options & {
+  inputFormat: string
+  outputFormat: string
+} {
+  return {
+    ...exxatInputMaskDefaults,
+    inputFormat: "HH:MM:ss",
+    outputFormat: "HH:MM:ss",
+  }
+}
+
+export function useExxatPhoneMask(options?: Options) {
+  return useMaskInput({
+    mask: exxatMaskPatterns.phoneUS,
+    options: { ...exxatInputMaskDefaults, ...options },
+  })
+}
+
+export function useExxatZipMask(options?: Options) {
+  return useMaskInput({
+    mask: exxatMaskPatterns.zipUS,
+    options: { ...exxatInputMaskDefaults, ...options },
+  })
+}
+
+export function useExxatDateMDYMask(options?: Options) {
+  return useMaskInput({
+    mask: exxatMaskPatterns.dateMDY,
+    options: { ...exxatInputMaskDefaults, ...options },
+  })
+}
+
+export function useExxatTimeMask(options?: Options) {
+  return useMaskInput({
+    mask: "datetime",
+    options: { ...exxatTimeMaskOptions(), ...options },
+  })
+}
+
+export function useExxatCustomMask(mask: Mask, options?: Options) {
+  return useMaskInput({
+    mask,
+    options: { ...exxatInputMaskDefaults, ...options },
+  })
+}
+
+/** Merge React Hook Form Controller `field.ref` with a mask ref. */
+export function useExxatMaskedFieldRef(
+  fieldRef: React.Ref<HTMLInputElement>,
+  mask: Mask,
+  options?: Options
+): React.RefCallback<HTMLInputElement> {
+  const maskRef = useMaskInput({
+    mask,
+    options: { ...exxatInputMaskDefaults, ...options },
+  })
+  return React.useMemo(() => composeRefs(fieldRef, maskRef), [fieldRef, maskRef])
+}
+
+export type MaskedInputProps = React.ComponentProps<typeof Input> & {
+  mask: Mask
+  maskOptions?: Options
+}
+
+/** Standalone masked `Input` (forwardRef + merged mask ref). */
+const MaskedInput = React.forwardRef<HTMLInputElement, MaskedInputProps>(function MaskedInput(
+  { mask, maskOptions, className, type = "text", ...props },
+  ref
+) {
+  const maskRef = useMaskInput({
+    mask,
+    options: { ...exxatInputMaskDefaults, ...maskOptions },
+  })
+  return (
+    <Input
+      ref={composeRefs(ref, maskRef)}
+      type={type}
+      className={cn(className)}
+      {...props}
+    />
+  )
+})
+
+export {
+  MaskedInput,
+  useMaskInput,
+  withMask,
+  useHookFormMask,
+  withHookFormMask,
+  useTanStackFormMask,
+  withTanStackFormMask,
+}
+export type { Mask, Options }

package/src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  function Input({ className, type, ...props }, ref) {
+    return (
+      <input
+        ref={ref}
+        type={type}
+        data-slot="input"
+        className={cn(
+          "h-8 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base transition-colors 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 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/15 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+          className
+        )}
+        {...props}
+      />
+    )
+  },
+)
+
+export { Input }

package/src/components/ui/kbd.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+/**
+ * Kbd — display keyboard keys and shortcuts (shadcn/ui).
+ * @see https://ui.shadcn.com/docs/components/radix/kbd
+ *
+ * Variants:
+ *  - "tile" (default) — filled tile with border; use in tooltips, menus, docs,
+ *    or any surface where the Kbd sits on neutral background.
+ *  - "bare" — no background, no border; inherits `currentColor` at 70% opacity.
+ *    Use **inside buttons** (primary/secondary workflow actions) so the hint
+ *    does not look like a pasted-on patch against the button fill.
+ */
+function Kbd({
+  className,
+  variant = "tile",
+  "aria-hidden": ariaHidden,
+  ...props
+}: React.ComponentProps<"kbd"> & { variant?: "tile" | "bare" }) {
+  // Bare variant lives inside buttons — the button already carries the
+  // accessible name, so the inline kbd is redundant noise for screen readers.
+  // Default to aria-hidden unless a consumer explicitly opts in.
+  const hidden = ariaHidden ?? (variant === "bare" ? true : undefined)
+  return (
+    <kbd
+      data-slot="kbd"
+      data-variant={variant}
+      aria-hidden={hidden}
+      className={cn(
+        "pointer-events-none inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 px-1 font-sans text-xs font-medium",
+        variant === "tile" &&
+          "bg-muted text-muted-foreground rounded-sm border",
+        variant === "bare" && "text-current/70 px-0",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }

package/src/components/ui/label.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(function Label({ className, ...props }, ref) {
+  return (
+    <LabelPrimitive.Root
+      ref={ref}
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+export { Label }

package/src/components/ui/payment-card-fields.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+/**
+ * Credit card inputs — matches Shadcn Studio input-mask 03–06 (`react-payment-inputs` + `Input`).
+ * One `usePaymentInputs()` instance drives number + expiry + CVC; use this group (or `usePaymentInputs` yourself in a parent).
+ */
+
+import * as React from "react"
+import { CreditCard } from "lucide-react"
+import { usePaymentInputs } from "react-payment-inputs"
+import images, { type CardImages } from "react-payment-inputs/images"
+
+import { cn } from "../../lib/utils"
+import { Input } from "./input"
+
+export { usePaymentInputs } from "react-payment-inputs"
+export type { CardImages }
+
+/** Stacked number + expiry/CVC (Studio 06). Single hook — do not split across separate roots. */
+export function PaymentCardFieldsGroup({ className }: { className?: string }) {
+  const id = React.useId()
+  const { meta, getCardNumberProps, getExpiryDateProps, getCVCProps, getCardImageProps } =
+    usePaymentInputs()
+
+  return (
+    <div className={cn("w-full max-w-xs space-y-0", className)}>
+      <div className="relative focus-within:z-1">
+        <Input
+          {...getCardNumberProps()}
+          id={`card-number-${id}`}
+          className="peer rounded-b-none pe-11 shadow-none"
+        />
+        <div className="text-muted-foreground pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 peer-disabled:opacity-50">
+          {meta.cardType ? (
+            <svg
+              className="w-6 overflow-hidden"
+              {...getCardImageProps({
+                images: images as unknown as CardImages,
+              })}
+            />
+          ) : (
+            <CreditCard className="size-4" aria-hidden />
+          )}
+          <span className="sr-only">Card network</span>
+        </div>
+      </div>
+      <div className="-mt-px flex">
+        <div className="min-w-0 flex-1 focus-within:z-1">
+          <Input
+            {...getExpiryDateProps()}
+            id={`card-expiry-${id}`}
+            className="rounded-t-none rounded-r-none shadow-none"
+          />
+        </div>
+        <div className="-ms-px min-w-0 flex-1 focus-within:z-1">
+          <Input
+            {...getCVCProps()}
+            id={`card-cvc-${id}`}
+            className="rounded-t-none rounded-l-none shadow-none"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/ui/popover.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "radix-ui"
+import { cn } from "../../lib/utils"
+
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root {...props} />
+}
+
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger {...props} />
+}
+
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 rounded-lg border border-border bg-popover shadow-md outline-none",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+          "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger }