@wealthx/shadcn 0.0.2 → 1.0.0

package/src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+import { type ReactElement } from "react"
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export type LabelProps = React.ComponentProps<"label">
+
+function Label({
+  className,
+  ...props
+}: LabelProps): ReactElement {
+  return (
+    // eslint-disable-next-line jsx-a11y/label-has-associated-control -- htmlFor is passed by the consumer
+    <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
+      )}
+      data-slot="label"
+      {...props}
+    />
+  )
+}
+
+export { Label }

package/src/components/ui/pagination.tsx

@@ -0,0 +1,148 @@
+import { type ReactElement } from "react"
+import * as React from "react"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react"
+import { cn } from "@/lib/utils"
+import { buttonVariants, type Button } from "@/components/ui/button"
+
+/**
+ * Pagination — WealthX Design System
+ * Figma: https://www.figma.com/design/9V9F0NGVsif8LGmEhVjOcT/Design-System---shadcn?node-id=73-1981
+ *
+ * Base: official shadcn pagination (npx shadcn\@latest add pagination)
+ * WealthX overrides: none — ghost/outline variants match design system
+ */
+
+export type PaginationProps = React.ComponentProps<"nav">
+
+function Pagination({ className, ...props }: PaginationProps): ReactElement {
+  return (
+    <nav
+      aria-label="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      data-slot="pagination"
+      role="navigation"
+      {...props}
+    />
+  )
+}
+
+export type PaginationContentProps = React.ComponentProps<"ul">
+
+function PaginationContent({
+  className,
+  ...props
+}: PaginationContentProps): ReactElement {
+  return (
+    <ul
+      className={cn("flex flex-row items-center gap-1", className)}
+      data-slot="pagination-content"
+      {...props}
+    />
+  )
+}
+
+export type PaginationItemProps = React.ComponentProps<"li">
+
+function PaginationItem({ ...props }: PaginationItemProps): ReactElement {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+export type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps): ReactElement {
+  return (
+    // eslint-disable-next-line jsx-a11y/anchor-has-content -- children passed via props spread
+    <a
+      aria-current={isActive ? "page" : undefined}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? "outline" : "ghost",
+          size,
+        }),
+        className
+      )}
+      data-active={isActive}
+      data-slot="pagination-link"
+      {...props}
+    />
+  )
+}
+
+export type PaginationPreviousProps = React.ComponentProps<typeof PaginationLink>
+
+function PaginationPrevious({
+  className,
+  ...props
+}: PaginationPreviousProps): ReactElement {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
+      size="default"
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  )
+}
+
+export type PaginationNextProps = React.ComponentProps<typeof PaginationLink>
+
+function PaginationNext({
+  className,
+  ...props
+}: PaginationNextProps): ReactElement {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
+      size="default"
+      {...props}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  )
+}
+
+export type PaginationEllipsisProps = React.ComponentProps<"span">
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: PaginationEllipsisProps): ReactElement {
+  return (
+    <span
+      aria-hidden
+      className={cn("flex size-9 items-center justify-center", className)}
+      data-slot="pagination-ellipsis"
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}

package/src/components/ui/popover.tsx

@@ -0,0 +1,112 @@
+import { type ReactElement } from "react"
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
+import { cn } from "@/lib/utils"
+import { useThemeVars } from "@/lib/theme-provider"
+
+export type PopoverProps = React.ComponentProps<typeof PopoverPrimitive.Root>
+
+function Popover({
+  ...props
+}: PopoverProps): ReactElement {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+export type PopoverTriggerProps = React.ComponentProps<typeof PopoverPrimitive.Trigger>
+
+function PopoverTrigger({
+  ...props
+}: PopoverTriggerProps): ReactElement {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+export type PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> & {
+  align?: "start" | "center" | "end"
+  sideOffset?: number
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  style,
+  ...props
+}: PopoverContentProps): ReactElement {
+  const themeVars = useThemeVars();
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        align={align}
+        sideOffset={sideOffset}
+      >
+        <PopoverPrimitive.Popup
+          className={cn(
+            "z-50 w-72 border border-border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-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-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
+            className
+          )}
+          data-slot="popover-content"
+          style={{ ...themeVars, ...style } as React.CSSProperties}
+          {...props}
+        />
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  )
+}
+
+export type PopoverAnchorProps = React.ComponentProps<"div">
+
+function PopoverAnchor({
+  ...props
+}: PopoverAnchorProps): ReactElement {
+  return <div data-slot="popover-anchor" {...props} />
+}
+
+export type PopoverHeaderProps = React.ComponentProps<"div">
+
+function PopoverHeader({ className, ...props }: PopoverHeaderProps): ReactElement {
+  return (
+    <div
+      className={cn("flex flex-col gap-1 text-sm", className)}
+      data-slot="popover-header"
+      {...props}
+    />
+  )
+}
+
+export type PopoverTitleProps = React.ComponentProps<"h2">
+
+function PopoverTitle({ className, ...props }: PopoverTitleProps): ReactElement {
+  return (
+    // eslint-disable-next-line jsx-a11y/heading-has-content -- children passed via props spread
+    <h2
+      className={cn("font-medium", className)}
+      data-slot="popover-title"
+      {...props}
+    />
+  )
+}
+
+export type PopoverDescriptionProps = React.ComponentProps<"p">
+
+function PopoverDescription({
+  className,
+  ...props
+}: PopoverDescriptionProps): ReactElement {
+  return (
+    <p
+      className={cn("text-muted-foreground", className)}
+      data-slot="popover-description"
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverDescription,
+}

package/src/components/ui/progress.tsx

@@ -0,0 +1,40 @@
+import { type ReactElement } from "react"
+import * as React from "react"
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
+import { cn } from "@/lib/utils"
+
+/**
+ * Progress — WealthX Design System
+ * Figma: https://www.figma.com/design/9V9F0NGVsif8LGmEhVjOcT/Design-System---shadcn?node-id=73-1983
+ *
+ * Base: official shadcn progress (npx shadcn\@latest add progress)
+ * WealthX overrides: sharp corners (no rounded-full), track bg-muted instead of bg-primary/20
+ */
+export type ProgressProps = React.ComponentProps<typeof ProgressPrimitive.Root>
+
+function Progress({
+  className,
+  value,
+  ...props
+}: ProgressProps): ReactElement {
+  return (
+    <ProgressPrimitive.Root
+      className={cn(
+        "relative h-2 w-full overflow-hidden bg-muted",
+        className
+      )}
+      data-slot="progress"
+      value={value}
+      {...props}
+    >
+      <ProgressPrimitive.Track className="h-full">
+        <ProgressPrimitive.Indicator
+          className="h-full bg-primary transition-all"
+          data-slot="progress-indicator"
+        />
+      </ProgressPrimitive.Track>
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }

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

@@ -0,0 +1,129 @@
+import { type ReactElement, type ComponentProps } from "react"
+import { CircleIcon } from "lucide-react"
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"
+import { Radio as RadioPrimitive } from "@base-ui/react/radio"
+import { cn } from "@/lib/utils"
+
+/**
+ * RadioGroup — WealthX Design System (shadcn base)
+ * Figma: https://www.figma.com/design/9V9F0NGVsif8LGmEhVjOcT/Design-System---shadcn?node-id=76-8893
+ *
+ * Base: official shadcn radio-group (npx shadcn\@latest add radio-group)
+ * WealthX additions: RadioGroupCard (card with radio + label/description)
+ *
+ * Tokens: circle fill=background (white), stroke=primary, checked fill=primary,
+ *         indicator=background. Error overrides primary-destructive.
+ */
+
+/* Shared radio circle base classes -- single source for Item & Card */
+const CIRCLE_BASE =
+  "inline-flex items-center justify-center aspect-square size-4 shrink-0 rounded-full border border-primary bg-background"
+
+/* Shared indicator dot */
+const INDICATOR_DOT = "size-2 fill-background text-background"
+
+export type RadioGroupProps = ComponentProps<typeof RadioGroupPrimitive>
+
+function RadioGroup({
+  className,
+  ...props
+}: RadioGroupProps): ReactElement {
+  return (
+    <RadioGroupPrimitive
+      className={cn("grid gap-3", className)}
+      data-slot="radio-group"
+      {...props}
+    />
+  )
+}
+
+export type RadioGroupItemProps = ComponentProps<typeof RadioPrimitive.Root>
+
+function RadioGroupItem({
+  className,
+  ...props
+}: RadioGroupItemProps): ReactElement {
+  return (
+    <RadioPrimitive.Root
+      className={cn(
+        CIRCLE_BASE,
+        "transition-all outline-none",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "data-checked:bg-primary",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+        "aria-invalid:data-checked:border-destructive aria-invalid:data-checked:bg-destructive",
+        "dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      data-slot="radio-group-item"
+      {...props}
+    >
+      <RadioPrimitive.Indicator
+        data-slot="radio-group-indicator"
+      >
+        <CircleIcon className={INDICATOR_DOT} />
+      </RadioPrimitive.Indicator>
+    </RadioPrimitive.Root>
+  )
+}
+
+/**
+ * RadioGroupCard -- card with radio left, label+description right.
+ * Figma: CardRadio (3039:5971)
+ * Checked: border-primary + bg-primary/5. Error: destructive variant.
+ */
+export type RadioGroupCardProps = Omit<ComponentProps<typeof RadioPrimitive.Root>, "children"> & {
+  label: string
+  description?: string
+  error?: boolean
+}
+
+function RadioGroupCard({
+  className,
+  value,
+  disabled,
+  error,
+  label,
+  description,
+  ...props
+}: RadioGroupCardProps): ReactElement {
+  return (
+    <RadioPrimitive.Root
+      aria-invalid={error || undefined}
+      className={cn(
+        "group/card flex items-center gap-3 border border-border p-4 font-sans transition-colors text-left cursor-pointer outline-none",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "data-checked:border-primary data-checked:bg-primary/5",
+        "aria-invalid:border-destructive",
+        "aria-invalid:data-checked:border-destructive aria-invalid:data-checked:bg-destructive/5",
+        className
+      )}
+      data-slot="radio-group-card"
+      disabled={disabled}
+      value={value}
+      {...props}
+    >
+      <div
+        className={cn(
+          CIRCLE_BASE,
+          "transition-colors",
+          "group-data-[checked]/card:bg-primary",
+          "group-aria-invalid/card:border-destructive",
+          "group-aria-invalid/card:group-data-[checked]/card:border-destructive group-aria-invalid/card:group-data-[checked]/card:bg-destructive",
+        )}
+      >
+        <RadioPrimitive.Indicator>
+          <CircleIcon className={INDICATOR_DOT} />
+        </RadioPrimitive.Indicator>
+      </div>
+      <div className="flex flex-col gap-1">
+        <span className="text-sm font-medium leading-none">{label}</span>
+        {description ? <span className="text-sm text-muted-foreground">{description}</span> : null}
+      </div>
+    </RadioPrimitive.Root>
+  )
+}
+
+export { RadioGroup, RadioGroupItem, RadioGroupCard }

package/src/components/ui/select.tsx

@@ -0,0 +1,201 @@
+import { type ReactElement } from "react"
+import * as React from "react"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { Select as SelectPrimitive } from "@base-ui/react/select"
+import { cn } from "@/lib/utils"
+import { useThemeVars } from "@/lib/theme-provider"
+
+export type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root>
+
+function Select({
+  ...props
+}: SelectProps): ReactElement {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+export type SelectGroupProps = React.ComponentProps<typeof SelectPrimitive.Group>
+
+function SelectGroup({
+  ...props
+}: SelectGroupProps): ReactElement {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+export type SelectValueProps = React.ComponentProps<typeof SelectPrimitive.Value>
+
+function SelectValue({
+  ...props
+}: SelectValueProps): ReactElement {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+export type SelectTriggerProps = React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: SelectTriggerProps): ReactElement {
+  return (
+    <SelectPrimitive.Trigger
+      className={cn(
+        "flex w-fit items-center justify-between gap-2 border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/20 data-popup-open:border-primary data-popup-open:ring-[3px] data-popup-open:ring-primary/20 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      data-size={size}
+      data-slot="select-trigger"
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon className="transition-transform duration-200 data-popup-open:rotate-180">
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+export type SelectContentProps = React.ComponentProps<typeof SelectPrimitive.Popup>
+
+function SelectContent({
+  className,
+  children,
+  style,
+  ...props
+}: SelectContentProps): ReactElement {
+  const themeVars = useThemeVars();
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner align="start" alignItemWithTrigger={false} sideOffset={4}>
+        <SelectPrimitive.Popup
+          className={cn(
+            "relative z-50 max-h-[var(--available-height)] min-w-[8rem] overflow-x-hidden overflow-y-auto border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-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-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
+            className
+          )}
+          data-slot="select-content"
+          style={{ ...themeVars, ...style } as React.CSSProperties}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          {children}
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  )
+}
+
+export type SelectLabelProps = React.ComponentProps<typeof SelectPrimitive.GroupLabel>
+
+function SelectLabel({
+  className,
+  ...props
+}: SelectLabelProps): ReactElement {
+  return (
+    <SelectPrimitive.GroupLabel
+      className={cn("px-2 py-1.5 text-xs font-semibold text-muted-foreground", className)}
+      data-slot="select-label"
+      {...props}
+    />
+  )
+}
+
+export type SelectItemProps = React.ComponentProps<typeof SelectPrimitive.Item>
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectItemProps): ReactElement {
+  return (
+    <SelectPrimitive.Item
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-highlighted:bg-primary/5 data-highlighted:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      data-slot="select-item"
+      {...props}
+    >
+      <span
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+        data-slot="select-item-indicator"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+export type SelectSeparatorProps = React.ComponentProps<"div">
+
+function SelectSeparator({
+  className,
+  ...props
+}: SelectSeparatorProps): ReactElement {
+  return (
+    <div
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      data-slot="select-separator"
+      role="separator"
+      {...props}
+    />
+  )
+}
+
+export type SelectScrollUpButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: SelectScrollUpButtonProps): ReactElement {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      data-slot="select-scroll-up-button"
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpArrow>
+  )
+}
+
+export type SelectScrollDownButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: SelectScrollDownButtonProps): ReactElement {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      data-slot="select-scroll-down-button"
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownArrow>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

package/src/components/ui/separator.tsx

@@ -0,0 +1,26 @@
+import { type ReactElement } from "react"
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+import { cn } from "@/lib/utils"
+
+export type SeparatorProps = React.ComponentProps<typeof SeparatorPrimitive>
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}: SeparatorProps): ReactElement {
+  return (
+    <SeparatorPrimitive
+      className={cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      data-orientation={orientation}
+      data-slot="separator"
+      {...props}
+    />
+  )
+}
+
+export { Separator }