@wealthx/shadcn 0.0.2 → 1.0.1

package/src/components/ui/calendar.tsx

@@ -0,0 +1,252 @@
+import { type ReactElement } from "react"
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type DayButton,
+} from "react-day-picker"
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+/**
+ * Calendar — shadcn/WealthX
+ * Base: npx shadcn\@latest add calendar (latest)
+ * Figma: Design-System---shadcn?node-id=72-2720
+ *
+ * WealthX:
+ * - font-sans for consistent Figtree typography
+ * - border + shadow-sm on root (square corners — no border radius)
+ * - captionLayout defaults to "dropdown" (Figma shows month/year dropdown pills)
+ */
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}
+
+function CalendarRoot({
+  className,
+  rootRef,
+  ...props
+}: {
+  className?: string
+  rootRef?: React.Ref<HTMLDivElement>
+} & React.ComponentProps<"div">): ReactElement {
+  return (
+    <div
+      className={cn(className)}
+      data-slot="calendar"
+      ref={rootRef}
+      {...props}
+    />
+  )
+}
+
+function CalendarChevron({
+  className,
+  orientation,
+  ...props
+}: {
+  className?: string
+  orientation?: string
+} & React.ComponentProps<"svg">): ReactElement {
+  if (orientation === "left") {
+    return (
+      <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+    )
+  }
+
+  if (orientation === "right") {
+    return (
+      <ChevronRightIcon
+        className={cn("size-4", className)}
+        {...props}
+      />
+    )
+  }
+
+  return (
+    <ChevronDownIcon className={cn("size-4", className)} {...props} />
+  )
+}
+
+function CalendarWeekNumber({
+  children,
+  ...props
+}: React.ComponentProps<"td">): ReactElement {
+  return (
+    <td {...props}>
+      <div className="flex size-(--cell-size) items-center justify-center text-center">
+        {children}
+      </div>
+    </td>
+  )
+}
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "dropdown",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: CalendarProps): ReactElement {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      captionLayout={captionLayout}
+      className={cn(
+        "group/calendar bg-background p-3 font-sans border border-border shadow-sm [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute inset-0 bg-popover opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "font-medium select-none",
+          captionLayout === "label"
+            ? "text-sm"
+            : "flex h-8 items-center gap-1 pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 text-[0.8rem] font-normal text-muted-foreground select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-(--cell-size) select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] text-muted-foreground select-none",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full p-0 text-center select-none",
+          defaultClassNames.day
+        ),
+        range_start: cn("bg-accent", defaultClassNames.range_start),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: CalendarRoot,
+        Chevron: CalendarChevron,
+        DayButton: CalendarDayButton,
+        WeekNumber: CalendarWeekNumber,
+        ...components,
+      }}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      showOutsideDays={showOutsideDays}
+      {...props}
+    />
+  )
+}
+
+export type CalendarDayButtonProps = React.ComponentProps<typeof DayButton>
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: CalendarDayButtonProps): ReactElement {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  const selectedSingle =
+    modifiers.selected &&
+    !modifiers.range_start &&
+    !modifiers.range_end
+      ? !modifiers.range_middle
+      : null
+
+  return (
+    <Button
+      className={cn(
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal rounded-none group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      data-day={day.date.toLocaleDateString()}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      data-range-start={modifiers.range_start}
+      data-selected-single={selectedSingle}
+      ref={ref}
+      size="icon"
+      variant="ghost"
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }

package/src/components/ui/card.tsx

@@ -0,0 +1,106 @@
+import { type ReactElement } from "react"
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export type CardProps = React.ComponentProps<"div">
+
+function Card({ className, ...props }: CardProps): ReactElement {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-6 border bg-card py-6 text-card-foreground shadow-sm",
+        className
+      )}
+      data-slot="card"
+      {...props}
+    />
+  )
+}
+
+export type CardHeaderProps = React.ComponentProps<"div">
+
+function CardHeader({ className, ...props }: CardHeaderProps): ReactElement {
+  return (
+    <div
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      data-slot="card-header"
+      {...props}
+    />
+  )
+}
+
+export type CardTitleProps = React.ComponentProps<"div">
+
+function CardTitle({ className, ...props }: CardTitleProps): ReactElement {
+  return (
+    <div
+      className={cn("leading-none font-semibold", className)}
+      data-slot="card-title"
+      {...props}
+    />
+  )
+}
+
+export type CardDescriptionProps = React.ComponentProps<"div">
+
+function CardDescription({ className, ...props }: CardDescriptionProps): ReactElement {
+  return (
+    <div
+      className={cn("text-sm text-muted-foreground", className)}
+      data-slot="card-description"
+      {...props}
+    />
+  )
+}
+
+export type CardActionProps = React.ComponentProps<"div">
+
+function CardAction({ className, ...props }: CardActionProps): ReactElement {
+  return (
+    <div
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      data-slot="card-action"
+      {...props}
+    />
+  )
+}
+
+export type CardContentProps = React.ComponentProps<"div">
+
+function CardContent({ className, ...props }: CardContentProps): ReactElement {
+  return (
+    <div
+      className={cn("px-6", className)}
+      data-slot="card-content"
+      {...props}
+    />
+  )
+}
+
+export type CardFooterProps = React.ComponentProps<"div">
+
+function CardFooter({ className, ...props }: CardFooterProps): ReactElement {
+  return (
+    <div
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      data-slot="card-footer"
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,111 @@
+"use client"
+
+import { type ReactElement, useState, type ComponentProps } from "react"
+import { CheckIcon, MinusIcon } from "lucide-react"
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
+import { cn } from "@/lib/utils"
+
+/**
+ * Checkbox — shadcn/WealthX Design System
+ * Figma: https://www.figma.com/design/9V9F0NGVsif8LGmEhVjOcT/Design-System---shadcn?node-id=72-2723
+ *
+ * States: unchecked | checked | indeterminate × default | disabled | error
+ * White-label: checked/indeterminate use `primary` token → adapts to tenant color.
+ * Error+checked/indeterminate: stacked variant overrides primary with destructive (higher specificity).
+ */
+export type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root>
+
+function Checkbox({ className, ...props }: CheckboxProps): ReactElement {
+  return (
+    <CheckboxPrimitive.Root
+      className={cn(
+        "peer group inline-flex size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-all outline-none",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+        "data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground",
+        "data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground",
+        // Dark mode (upstream shadcn)
+        "dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-checked:bg-primary",
+        // Stacked (2 attr selectors) → wins over single-attr rules above
+        "aria-invalid:data-checked:border-destructive aria-invalid:data-checked:bg-destructive aria-invalid:data-checked:text-destructive-foreground",
+        "aria-invalid:data-indeterminate:border-destructive aria-invalid:data-indeterminate:bg-destructive aria-invalid:data-indeterminate:text-destructive-foreground",
+        className
+      )}
+      data-slot="checkbox"
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        className="grid place-content-center text-current transition-none"
+        data-slot="checkbox-indicator"
+      >
+        <CheckIcon className="size-3.5 group-data-indeterminate:hidden" />
+        <MinusIcon className="size-3.5 hidden group-data-indeterminate:block" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+/**
+ * CheckboxCard — card wrapper with label + optional description.
+ * Figma: Checkbox_card (3029:12381)
+ *
+ * Card background: primary/5 when checked/indeterminate; destructive/5 when error+checked.
+ * White-label: opacity modifier on primary token → adapts to tenant color.
+ */
+export type CheckboxCardProps = ComponentProps<typeof CheckboxPrimitive.Root> & {
+  label: string
+  description?: string
+  error?: boolean
+}
+
+function CheckboxCard({
+  className,
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  disabled,
+  error,
+  label,
+  description,
+  ...props
+}: CheckboxCardProps): ReactElement {
+  const [internalChecked, setInternalChecked] = useState<boolean>(
+    Boolean(defaultChecked)
+  )
+
+  const resolvedChecked = checked ?? internalChecked
+  const isTinted = resolvedChecked
+
+  return (
+    <label
+      className={cn(
+        "flex items-start gap-3 border border-border p-4 font-sans transition-colors cursor-pointer",
+        error
+          ? ["border-destructive", isTinted && "bg-destructive/5"]
+          : isTinted && "border-primary bg-primary/5",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      )}
+      data-slot="checkbox-card"
+    >
+      <Checkbox
+        aria-invalid={error || undefined}
+        checked={resolvedChecked}
+        className="mt-0.5"
+        disabled={disabled}
+        onCheckedChange={(value, event) => {
+          setInternalChecked(value as boolean)
+          onCheckedChange?.(value, event)
+        }}
+        {...props}
+      />
+      <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>
+    </label>
+  )
+}
+
+export { Checkbox, CheckboxCard }

package/src/components/ui/chip.tsx

@@ -0,0 +1,65 @@
+// Chip — WealthX DS (built on Badge)
+//
+// Badge extended with an optional dismiss button.
+// Passes all Badge props (variant, className, etc.) through unchanged.
+//
+// Usage:
+//   <Chip>Label</Chip>
+//   <Chip onRemove={() => handleRemove(id)}>Label</Chip>
+//   <Chip variant="outline" disabled onRemove={...}>Label</Chip>
+import { type ReactElement } from "react"
+import * as React from "react"
+import { X } from "lucide-react"
+import type { VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+import { badgeVariants } from "@/components/ui/badge"
+
+export interface ChipProps
+  extends React.ComponentProps<"span">,
+    VariantProps<typeof badgeVariants> {
+  /** When provided, renders a dismiss (×) button inside the chip. */
+  onRemove?: () => void
+  disabled?: boolean
+}
+
+function Chip({
+  className,
+  variant = "secondary",
+  onRemove,
+  disabled,
+  children,
+  ...props
+}: ChipProps): ReactElement {
+  return (
+    <span
+      aria-disabled={disabled}
+      className={cn(
+        badgeVariants({ variant }),
+        // extra right padding only when dismiss button is present
+        onRemove && "pr-1",
+        disabled && "pointer-events-none opacity-50",
+        className
+      )}
+      data-slot="chip"
+      data-variant={variant}
+      {...props}
+    >
+      {children}
+      {onRemove ? <button
+          aria-label="Remove"
+          className="ml-0.5 inline-flex shrink-0 items-center justify-center rounded-full p-0.5 opacity-60 hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none"
+          data-slot="chip-remove"
+          disabled={disabled}
+          onClick={(e) => {
+            e.stopPropagation()
+            onRemove()
+          }}
+          type="button"
+        >
+          <X className="size-3" />
+        </button> : null}
+    </span>
+  )
+}
+
+export { Chip }