@wealthx/shadcn 1.4.1 → 1.5.0

package/src/components/ui/debt-accordion.tsx

@@ -0,0 +1,254 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import { formatCurrency } from "@/lib/format-currency";
+
+export type DebtItem = {
+  id: string;
+  description: string;
+  currentOwing: number;
+  monthlyRepayment?: number;
+  interestRate?: number;
+  subLabel?: string;
+};
+
+export type DebtGroup = {
+  debtType: string;
+  label: string;
+  items: DebtItem[];
+};
+
+export type DebtAccordionProps = {
+  groups: DebtGroup[];
+  openGroups?: string[];
+  onToggleGroup?: (debtType: string) => void;
+  onAddItem?: (debtType: string) => void;
+  onEditItem?: (debtType: string, itemId: string) => void;
+  onDeleteItem?: (debtType: string, itemId: string) => void;
+  onPrev?: () => void;
+  onNext?: () => void;
+  nextLabel?: string;
+  /** Accessible label for the accordion landmark region. */
+  "aria-label"?: string;
+  className?: string;
+};
+
+export function DebtAccordion({
+  groups,
+  openGroups,
+  onToggleGroup,
+  onAddItem,
+  onEditItem,
+  onDeleteItem,
+  onPrev,
+  onNext,
+  nextLabel = "Next",
+  "aria-label": ariaLabel = "Debt list",
+  className,
+}: DebtAccordionProps) {
+  const totalOwing = groups
+    .flatMap((g) => g.items)
+    .reduce((sum, item) => sum + item.currentOwing, 0);
+
+  return (
+    <div className={cn("flex flex-col gap-4 font-sans", className)}>
+      <div className="flex items-center justify-between pb-2">
+        <h3 className="text-sm font-semibold text-foreground">Debts</h3>
+        <span className="text-sm font-medium text-foreground">
+          Total owing: {formatCurrency(totalOwing)}
+        </span>
+      </div>
+
+      <Accordion
+        type="multiple"
+        aria-label={ariaLabel}
+        value={openGroups}
+        onValueChange={(vals) => {
+          const prev = new Set(openGroups ?? []);
+          const next = new Set(vals as string[]);
+          for (const v of next) {
+            if (!prev.has(v)) onToggleGroup?.(v);
+          }
+          for (const v of prev) {
+            if (!next.has(v)) onToggleGroup?.(v);
+          }
+        }}
+      >
+        {groups.map((group) => (
+          <AccordionItem key={group.debtType} value={group.debtType}>
+            <AccordionTrigger>
+              <div className="flex w-full items-center justify-between pr-2">
+                <span>{group.label}</span>
+                <span className="text-xs text-muted-foreground">
+                  {group.items.length}{" "}
+                  {group.items.length === 1 ? "item" : "items"} ·{" "}
+                  {formatCurrency(
+                    group.items.reduce((s, i) => s + i.currentOwing, 0),
+                  )}{" "}
+                  owing
+                </span>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="flex flex-col gap-2 pb-2">
+                {group.items.length === 0 ? (
+                  <p className="text-xs text-muted-foreground">
+                    No {group.label.toLowerCase()} added yet.
+                  </p>
+                ) : (
+                  group.items.map((item) => (
+                    <DebtItemRow
+                      key={item.id}
+                      item={item}
+                      onEdit={() => onEditItem?.(group.debtType, item.id)}
+                      onDelete={() => onDeleteItem?.(group.debtType, item.id)}
+                    />
+                  ))
+                )}
+                <button
+                  type="button"
+                  onClick={() => onAddItem?.(group.debtType)}
+                  className="mt-1 flex items-center gap-1 text-xs text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  <PlusIcon className="size-3" />
+                  Add {group.label}
+                </button>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+
+      <div className="flex items-center justify-between pt-2">
+        {onPrev ? (
+          <Button variant="outline" onClick={onPrev}>
+            <ChevronLeftIcon className="mr-1 size-4" />
+            Previous
+          </Button>
+        ) : (
+          <span />
+        )}
+        {onNext && (
+          <Button onClick={onNext}>
+            {nextLabel}
+            <ChevronRightIcon className="ml-1 size-4" />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function DebtItemRow({
+  item,
+  onEdit,
+  onDelete,
+}: {
+  item: DebtItem;
+  onEdit?: () => void;
+  onDelete?: () => void;
+}) {
+  return (
+    <div className="flex items-start justify-between border border-border p-3">
+      <div className="flex flex-col gap-0.5">
+        <span className="text-sm font-medium text-foreground">
+          {item.description}
+        </span>
+        {item.subLabel && (
+          <span className="text-xs text-muted-foreground">{item.subLabel}</span>
+        )}
+        <div className="flex flex-wrap gap-3">
+          <span className="text-sm text-foreground">
+            Owing: {formatCurrency(item.currentOwing)}
+          </span>
+          {item.monthlyRepayment != null && (
+            <span className="text-xs text-muted-foreground">
+              Repayment: {formatCurrency(item.monthlyRepayment)}/mo
+            </span>
+          )}
+          {item.interestRate != null && (
+            <span className="text-xs text-muted-foreground">
+              Rate: {item.interestRate}%
+            </span>
+          )}
+        </div>
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        <button
+          type="button"
+          onClick={onEdit}
+          className="text-xs text-primary hover:underline focus-visible:outline-none"
+        >
+          Edit
+        </button>
+        <button
+          type="button"
+          onClick={onDelete}
+          className="text-xs text-destructive hover:underline focus-visible:outline-none"
+        >
+          Delete
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function PlusIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+    >
+      <path d="M12 5v14M5 12h14" />
+    </svg>
+  );
+}
+
+function ChevronLeftIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+    >
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+  );
+}
+
+function ChevronRightIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  );
+}

package/src/components/ui/delete-contact-component.tsx

@@ -0,0 +1,87 @@
+import * as React from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Spinner } from "@/components/ui/spinner";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface DeleteContactComponentProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** "single" — confirm deleting one contact by name. */
+  mode: "single" | "bulk";
+  /** Required when mode="single". */
+  contactName?: string;
+  /** Required when mode="bulk". Number of contacts to delete. */
+  count?: number;
+  onConfirm: () => void;
+  isLoading?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function DeleteContactComponent({
+  open,
+  onOpenChange,
+  mode,
+  contactName,
+  count = 0,
+  onConfirm,
+  isLoading = false,
+}: DeleteContactComponentProps) {
+  const isSingle = mode === "single";
+
+  const title = isSingle
+    ? `Delete ${contactName ?? "this contact"}?`
+    : `Delete ${count} contact${count !== 1 ? "s" : ""}?`;
+
+  const description = isSingle
+    ? `This will permanently remove ${contactName ?? "this contact"} and all their associated data. This action cannot be undone.`
+    : `This will permanently remove ${count} selected contact${count !== 1 ? "s" : ""} and all their associated data. This action cannot be undone.`;
+
+  return (
+    <AlertDialog
+      open={open}
+      onOpenChange={isLoading ? undefined : onOpenChange}
+    >
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle className="text-destructive">
+            {title}
+          </AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isLoading}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={onConfirm}
+            disabled={isLoading}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            {isLoading ? (
+              <>
+                <Spinner className="size-3.5" />
+                Deleting…
+              </>
+            ) : (
+              "Delete"
+            )}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/src/components/ui/dialog.tsx

@@ -100,7 +100,7 @@ export type DialogContentProps = React.ComponentProps<
    * instead of appending to document.body.
    */
   container?: HTMLElement | null;
-  /** Vertical alignment of the dialog. "top" anchors to top-4; "center" (default) vertically centers. */
+  /** Vertical alignment of the dialog. "top" (default) anchors to top-4; "center" vertically centers. */
   align?: "center" | "top";
   /**
    * Width behaviour of the dialog panel.
@@ -125,7 +125,7 @@ function DialogContent({
   showCloseButton = true,
   style,
   container,
-  align = "center",
+  align = "top",
   size = "lg",
   minWidth,
   ...props

package/src/components/ui/dynamic-tabs.tsx

@@ -0,0 +1,149 @@
+import * as React from "react";
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuPortal,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+
+export type DynamicTabItem = {
+  value: string;
+  label: string;
+};
+
+export type DynamicTabsProps = {
+  /** Full list of available tabs (selected + unselected). */
+  allTabs: DynamicTabItem[];
+  /** Values of the tabs currently shown in the bar. */
+  selectedTabs: string[];
+  /** Currently active tab value. */
+  activeTab: string;
+  onTabChange: (value: string) => void;
+  /** Called when the user adds/removes tabs via the overflow dropdown. */
+  onTabsChange?: (next: string[]) => void;
+  /** Label for the overflow toggle button. */
+  expandLabel?: string;
+  className?: string;
+};
+
+export function DynamicTabs({
+  allTabs,
+  selectedTabs,
+  activeTab,
+  onTabChange,
+  onTabsChange,
+  expandLabel = "More",
+  className,
+}: DynamicTabsProps) {
+  // Staged selections inside the dropdown (committed on close).
+  const [staged, setStaged] = useState<Set<string>>(new Set());
+  const [open, setOpen] = useState(false);
+
+  const selectedSet = new Set(selectedTabs);
+
+  const handleOpenChange = (next: boolean) => {
+    if (!next && staged.size > 0) {
+      // Commit: append new tabs preserving original order
+      const ordered = allTabs
+        .filter((t) => staged.has(t.value))
+        .map((t) => t.value);
+      onTabsChange?.([...selectedTabs, ...ordered]);
+      setStaged(new Set());
+    }
+    setOpen(next);
+  };
+
+  const handleToggle = (value: string, checked: boolean) => {
+    if (selectedSet.has(value)) return; // already shown — no-op
+    setStaged((prev) => {
+      const next = new Set(prev);
+      checked ? next.add(value) : next.delete(value);
+      return next;
+    });
+  };
+
+  const hasOverflow = allTabs.some((t) => !selectedSet.has(t.value));
+
+  return (
+    // Outer wrapper is NOT role="tablist" — the dropdown must live outside it
+    <div
+      className={cn(
+        "flex items-end gap-0 border-b border-border font-sans",
+        className,
+      )}
+    >
+      {/* Tab buttons only — valid children of tablist */}
+      <div role="tablist" className="flex min-w-0 flex-1 items-end gap-0">
+        {selectedTabs.map((value) => {
+          const tab = allTabs.find((t) => t.value === value);
+          if (!tab) return null;
+          const isActive = value === activeTab;
+          return (
+            <button
+              key={value}
+              role="tab"
+              aria-selected={isActive}
+              onClick={() => onTabChange(value)}
+              className={cn(
+                "relative shrink-0 cursor-pointer px-4 py-2.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                isActive
+                  ? "border-b-2 border-primary text-foreground"
+                  : "border-b-2 border-transparent text-muted-foreground hover:text-foreground",
+              )}
+            >
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Overflow dropdown lives outside the tablist to satisfy aria-required-children */}
+      {hasOverflow && (
+        <DropdownMenu open={open} onOpenChange={handleOpenChange}>
+          <DropdownMenuTrigger className="mb-px shrink-0 inline-flex items-center gap-1 px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+            {expandLabel}
+            <ChevronDownIcon className="size-3" />
+          </DropdownMenuTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuContent align="end" className="min-w-48">
+              {allTabs.map((tab) => (
+                <DropdownMenuCheckboxItem
+                  key={tab.value}
+                  checked={selectedSet.has(tab.value) || staged.has(tab.value)}
+                  disabled={selectedSet.has(tab.value)}
+                  onCheckedChange={(checked) =>
+                    handleToggle(tab.value, checked)
+                  }
+                >
+                  {tab.label}
+                </DropdownMenuCheckboxItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenuPortal>
+        </DropdownMenu>
+      )}
+    </div>
+  );
+}
+
+function ChevronDownIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}

package/src/components/ui/editable-money-item.tsx

@@ -0,0 +1,176 @@
+import React, { useRef, useState } from "react";
+import { Info, Pencil } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { colorMixSwatch } from "@/lib/colors";
+import { Input } from "./input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./tooltip";
+
+/**
+ * A calculator-section row showing a color swatch, label, optional info
+ * tooltip, a money value, and an optional pencil edit trigger.
+ *
+ * Two modes:
+ *
+ * **Display + external callback** (`onEdit` only):
+ *   Shows a formatted string and calls `onEdit` when the pencil is clicked.
+ *   The parent handles the edit flow (e.g. opens a drawer).
+ *
+ * **Inline edit** (`numericValue` + `onValueChange`):
+ *   Shows a formatted value in display state. Clicking the pencil (or the
+ *   value itself) switches the row to an `<Input>` field. Committing via
+ *   blur or Enter saves the value and returns to display state.
+ *   `value` is used as the display-mode formatted string; `numericValue` /
+ *   `onValueChange` drive the input.
+ *
+ * The pencil slot is always reserved (invisible when no edit prop) so value
+ * text stays column-aligned in mixed read-only / editable row groups.
+ */
+
+export interface EditableMoneyItemProps {
+  /** Row label (e.g. "Current Expenses") */
+  label: string;
+  /** Pre-formatted display string (e.g. "$5,000") */
+  value: string;
+  /** CSS color used for the swatch border and tinted fill */
+  color: string;
+  /** Fill opacity for the swatch background (default: 0.4) */
+  fillOpacity?: number;
+  /** Optional tooltip text shown on the info icon */
+  tooltip?: string;
+
+  // ── External callback mode ──────────────────────────────────────────────────
+  /** Called when the pencil is clicked (use without numericValue / onValueChange) */
+  onEdit?: () => void;
+
+  // ── Inline edit mode ────────────────────────────────────────────────────────
+  /** Raw numeric value — enables inline edit when paired with onValueChange */
+  numericValue?: number;
+  /** Called with the new number when the inline input is committed */
+  onValueChange?: (value: number) => void;
+
+  className?: string;
+}
+
+export function EditableMoneyItem({
+  label,
+  value,
+  color,
+  fillOpacity = 0.4,
+  tooltip,
+  onEdit,
+  numericValue,
+  onValueChange,
+  className,
+}: EditableMoneyItemProps) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const inlineMode = numericValue !== undefined && onValueChange !== undefined;
+  const hasEditAction = inlineMode || Boolean(onEdit);
+
+  const startEditing = () => {
+    if (!inlineMode) {
+      onEdit?.();
+      return;
+    }
+    setDraft(String(numericValue ?? 0));
+    setEditing(true);
+    // Focus after React re-renders
+    setTimeout(() => inputRef.current?.select(), 0);
+  };
+
+  const commitEdit = () => {
+    const parsed = Number(draft.replace(/[^0-9.-]/g, ""));
+    onValueChange?.(isNaN(parsed) ? 0 : parsed);
+    setEditing(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") commitEdit();
+    if (e.key === "Escape") setEditing(false);
+  };
+
+  return (
+    <div
+      className={cn("flex items-center justify-between gap-3 py-2", className)}
+    >
+      {/* Label side */}
+      <div className="flex min-w-0 items-center gap-2">
+        <span
+          aria-hidden
+          className="h-5 w-5 shrink-0 border"
+          style={{
+            borderColor: color,
+            backgroundColor: colorMixSwatch(color, fillOpacity),
+          }}
+        />
+        <span className="truncate text-sm text-foreground">{label}</span>
+        {tooltip && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  aria-label="More info"
+                  className="shrink-0 text-muted-foreground transition-colors hover:text-foreground"
+                >
+                  <Info size={14} />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p className="max-w-xs text-xs">{tooltip}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+      </div>
+
+      {/* Value + pencil side */}
+      <div className="flex shrink-0 items-center gap-1">
+        {editing && inlineMode ? (
+          <Input
+            ref={inputRef}
+            autoFocus
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onBlur={commitEdit}
+            onKeyDown={handleKeyDown}
+            className="h-7 w-28 text-right text-base font-semibold tabular-nums"
+          />
+        ) : (
+          <button
+            type="button"
+            disabled={!hasEditAction}
+            onClick={inlineMode ? startEditing : undefined}
+            className={cn(
+              "text-base font-semibold tabular-nums text-foreground",
+              inlineMode && "cursor-text hover:opacity-70",
+            )}
+          >
+            {value}
+          </button>
+        )}
+
+        <button
+          type="button"
+          aria-label="Edit value"
+          onClick={startEditing}
+          className={cn(
+            "p-1 transition-colors",
+            hasEditAction
+              ? "text-muted-foreground hover:text-foreground"
+              : "invisible pointer-events-none",
+          )}
+        >
+          <Pencil size={14} />
+        </button>
+      </div>
+    </div>
+  );
+}