@wealthx/shadcn 0.0.1 → 1.0.0

package/src/components/ui/empty.tsx

@@ -0,0 +1,128 @@
+import { type ReactElement } from "react"
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+/**
+ * Empty — WealthX DS (shadcn registry base)
+ *
+ * Composable empty-state component for no-data / blank-state screens.
+ * WealthX overrides:
+ *   - `rounded-lg` removed — sharp corners per WealthX DS
+ */
+
+export type EmptyProps = React.ComponentProps<"div">
+
+function Empty({ className, ...props }: EmptyProps): ReactElement {
+  return (
+    <div
+      className={cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 border border-dashed p-6 text-center text-balance md:p-12",
+        className
+      )}
+      data-slot="empty"
+      {...props}
+    />
+  )
+}
+
+export type EmptyHeaderProps = React.ComponentProps<"div">
+
+function EmptyHeader({ className, ...props }: EmptyHeaderProps): ReactElement {
+  return (
+    <div
+      className={cn(
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        className
+      )}
+      data-slot="empty-header"
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "[&_svg:not([class*='size-'])]:size-10",
+        icon: "flex size-10 shrink-0 items-center justify-center text-muted-foreground [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export type EmptyMediaProps = React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: EmptyMediaProps): ReactElement {
+  return (
+    <div
+      className={cn(emptyMediaVariants({ variant, className }))}
+      data-slot="empty-icon"
+      data-variant={variant}
+      {...props}
+    />
+  )
+}
+
+export type EmptyTitleProps = React.ComponentProps<"div">
+
+function EmptyTitle({ className, ...props }: EmptyTitleProps): ReactElement {
+  return (
+    <div
+      className={cn("text-lg font-medium tracking-tight", className)}
+      data-slot="empty-title"
+      {...props}
+    />
+  )
+}
+
+export type EmptyDescriptionProps = React.ComponentProps<"div">
+
+function EmptyDescription({
+  className,
+  ...props
+}: EmptyDescriptionProps): ReactElement {
+  return (
+    <div
+      className={cn(
+        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      data-slot="empty-description"
+      {...props}
+    />
+  )
+}
+
+export type EmptyContentProps = React.ComponentProps<"div">
+
+function EmptyContent({ className, ...props }: EmptyContentProps): ReactElement {
+  return (
+    <div
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+        className
+      )}
+      data-slot="empty-content"
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}

package/src/components/ui/field.tsx

@@ -0,0 +1,273 @@
+import { type ReactElement, useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+
+/**
+ * Field — shadcn/WealthX
+ * Base: npx shadcn\@latest add field
+ * Figma: https://www.figma.com/design/9V9F0NGVsif8LGmEhVjOcT/Design-System---shadcn?node-id=1188-4205
+ *
+ * WealthX additions:
+ *   - FieldDescription/FieldError: text-xs (12px) per Figma helper text spec
+ *   - FieldError.uniqueErrors: Array.from() instead of spread on Map iterator (es5 compat)
+ */
+
+export type FieldSetProps = React.ComponentProps<"fieldset">
+
+function FieldSet({ className, ...props }: FieldSetProps): ReactElement {
+  return (
+    <fieldset
+      className={cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      data-slot="field-set"
+      {...props}
+    />
+  )
+}
+
+export type FieldLegendProps = React.ComponentProps<"legend"> & { variant?: "legend" | "label" }
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: FieldLegendProps): ReactElement {
+  return (
+    <legend
+      className={cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      )}
+      data-slot="field-legend"
+      data-variant={variant}
+      {...props}
+    />
+  )
+}
+
+export type FieldGroupProps = React.ComponentProps<"div">
+
+function FieldGroup({ className, ...props }: FieldGroupProps): ReactElement {
+  return (
+    <div
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      )}
+      data-slot="field-group"
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+        responsive: [
+          "flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+export type FieldProps = React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: FieldProps): ReactElement {
+  return (
+    <div
+      className={cn(fieldVariants({ orientation }), className)}
+      data-orientation={orientation}
+      data-slot="field"
+      role="group"
+      {...props}
+    />
+  )
+}
+
+export type FieldContentProps = React.ComponentProps<"div">
+
+function FieldContent({ className, ...props }: FieldContentProps): ReactElement {
+  return (
+    <div
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+      )}
+      data-slot="field-content"
+      {...props}
+    />
+  )
+}
+
+export type FieldLabelProps = React.ComponentProps<typeof Label>
+
+function FieldLabel({
+  className,
+  ...props
+}: FieldLabelProps): ReactElement {
+  return (
+    <Label
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+        "has-data-checked:border-primary has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10",
+        className
+      )}
+      data-slot="field-label"
+      {...props}
+    />
+  )
+}
+
+export type FieldTitleProps = React.ComponentProps<"div">
+
+function FieldTitle({ className, ...props }: FieldTitleProps): ReactElement {
+  return (
+    <div
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      data-slot="field-label"
+      {...props}
+    />
+  )
+}
+
+export type FieldDescriptionProps = React.ComponentProps<"p">
+
+function FieldDescription({ className, ...props }: FieldDescriptionProps): ReactElement {
+  return (
+    <p
+      className={cn(
+        "text-xs leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      data-slot="field-description"
+      {...props}
+    />
+  )
+}
+
+export type FieldSeparatorProps = React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: FieldSeparatorProps): ReactElement {
+  return (
+    <div
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      data-content={Boolean(children)}
+      data-slot="field-separator"
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children ? <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span> : null}
+    </div>
+  )
+}
+
+export type FieldErrorProps = React.ComponentProps<"div"> & {
+  errors?: ({ message?: string } | undefined)[]
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: FieldErrorProps): ReactElement | null {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = Array.from(
+      new Map(errors.map((error) => [error?.message, error])).values()
+    )
+
+    if (uniqueErrors.length === 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error) =>
+            error?.message && <li key={error.message}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn("text-xs font-normal text-destructive", className)}
+      data-slot="field-error"
+      role="alert"
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}

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

@@ -0,0 +1,190 @@
+import { type ReactElement } from "react"
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+/**
+ * InputGroup — shadcn/WealthX
+ * Base: npx shadcn\@latest add input-group
+ * WealthX: removed rounded-md (square corners per brand)
+ */
+export type InputGroupProps = React.ComponentProps<"div">
+
+function InputGroup({ className, ...props }: InputGroupProps): ReactElement {
+  return (
+    <div
+      className={cn(
+        "group/input-group relative flex w-full items-center border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30",
+        "h-9 min-w-0 has-[>textarea]:h-auto",
+
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:border-primary has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-primary/20",
+
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+
+        className
+      )}
+      data-slot="input-group"
+      role="group"
+      {...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 pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end":
+          "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start":
+          "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
+        "block-end":
+          "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+export type InputGroupAddonProps = React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: InputGroupAddonProps): ReactElement {
+  return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- click only forwards focus to the sibling input; the div is not truly interactive
+    <div
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      data-align={align}
+      data-slot="input-group-addon"
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.currentTarget.parentElement?.querySelector("input")?.focus()
+        }
+      }}
+      role="group"
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "h-8 gap-1.5 px-2.5 has-[>svg]:px-2.5",
+        "icon-xs": "size-6 p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+export type InputGroupButtonProps = Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: InputGroupButtonProps): ReactElement {
+  return (
+    <Button
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      data-size={size}
+      type={type}
+      variant={variant}
+      {...props}
+    />
+  )
+}
+
+export type InputGroupTextProps = React.ComponentProps<"span">
+
+function InputGroupText({ className, ...props }: InputGroupTextProps): ReactElement {
+  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}
+    />
+  )
+}
+
+export type InputGroupInputProps = React.ComponentProps<"input">
+
+function InputGroupInput({
+  className,
+  ...props
+}: InputGroupInputProps): ReactElement {
+  return (
+    <Input
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      )}
+      data-slot="input-group-control"
+      {...props}
+    />
+  )
+}
+
+export type InputGroupTextareaProps = React.ComponentProps<"textarea">
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: InputGroupTextareaProps): ReactElement {
+  return (
+    <Textarea
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      )}
+      data-slot="input-group-control"
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}

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

@@ -0,0 +1,90 @@
+/**
+ * InputOTP — shadcn/WealthX
+ * Base: npx shadcn\@latest add input-otp
+ * Figma: https://www.figma.com/design/9V9F0NGVsif8LGmEhVjOcT/Design-System---shadcn?node-id=101-698
+ *
+ * WealthX overrides:
+ *   - InputOTPSlot: removed first:rounded-l-md last:rounded-r-md — sharp corners (radius-none)
+ */
+
+import { type ReactElement } from "react"
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { MinusIcon } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+export type InputOTPProps = React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string
+}
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: InputOTPProps): ReactElement {
+  return (
+    <OTPInput
+      className={cn("disabled:cursor-not-allowed", className)}
+      containerClassName={cn(
+        "flex items-center gap-2 has-disabled:opacity-50",
+        containerClassName
+      )}
+      data-slot="input-otp"
+      {...props}
+    />
+  )
+}
+
+export type InputOTPGroupProps = React.ComponentProps<"div">
+
+function InputOTPGroup({ className, ...props }: InputOTPGroupProps): ReactElement {
+  return (
+    <div
+      className={cn("flex items-center", className)}
+      data-slot="input-otp-group"
+      {...props}
+    />
+  )
+}
+
+export type InputOTPSlotProps = React.ComponentProps<"div"> & {
+  index: number
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: InputOTPSlotProps): ReactElement {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] ?? {}
+
+  return (
+    <div
+      className={cn(
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all outline-none first:border-l aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
+        className
+      )}
+      data-active={isActive}
+      data-slot="input-otp-slot"
+      {...props}
+    >
+      {char}
+      {hasFakeCaret ? <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div> : null}
+    </div>
+  )
+}
+
+export type InputOTPSeparatorProps = React.ComponentProps<"div">
+
+function InputOTPSeparator({ ...props }: InputOTPSeparatorProps): ReactElement {
+  return (
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <MinusIcon />
+    </div>
+  )
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

package/src/components/ui/input.tsx

@@ -0,0 +1,28 @@
+import { type ReactElement } from "react"
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+/**
+ * Input — shadcn/WealthX
+ * Base: npx shadcn\@latest add input
+ * WealthX: removed rounded-md (square corners), added font-sans.
+ */
+export type InputProps = React.ComponentProps<"input">
+
+function Input({ className, type, ...props }: InputProps): ReactElement {
+  return (
+    <input
+      className={cn(
+        "h-9 w-full min-w-0 border border-input bg-transparent px-3 py-1 text-base font-sans shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/20",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      data-slot="input"
+      type={type}
+      {...props}
+    />
+  )
+}
+
+export { Input }