@wealthx/shadcn 1.0.2 → 1.2.0

package/src/components/ui/sheet.tsx

@@ -7,56 +7,56 @@
  *   - SheetTitle:    added `text-lg` — matches Figma Text-lg/Semibold
  *   - Close button:  matches DialogClose — no radius, `hover:bg-foreground/5`, `focus:ring-border`
  */
-import { type ReactElement } from "react"
-import * as React from "react"
-import { XIcon } from "lucide-react"
-import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
-import { cn } from "@/lib/utils"
-import { useThemeVars } from "@/lib/theme-provider"
+import { type ReactElement } from "react";
+import * as React from "react";
+import { XIcon } from "lucide-react";
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+import { cn } from "@/lib/utils";
+import { useThemeVars } from "@/lib/theme-provider";
 
 // ---------------------------------------------------------------------------
 // Side-specific panel classes
 // ---------------------------------------------------------------------------
 
 const SIDE_CLASSES = {
-  right:  "inset-y-0 right-0 h-full w-3/4 border-l data-ending-style:slide-out-to-right data-open:slide-in-from-right sm:max-w-sm",
-  left:   "inset-y-0 left-0 h-full w-3/4 border-r data-ending-style:slide-out-to-left data-open:slide-in-from-left sm:max-w-sm",
-  top:    "inset-x-0 top-0 h-auto border-b data-ending-style:slide-out-to-top data-open:slide-in-from-top",
-  bottom: "inset-x-0 bottom-0 h-auto border-t data-ending-style:slide-out-to-bottom data-open:slide-in-from-bottom",
-} satisfies Record<string, string>
+  right:
+    "inset-y-0 right-0 h-full w-1/2 border-l data-ending-style:slide-out-to-right data-open:slide-in-from-right",
+  left: "inset-y-0 left-0 h-full w-1/2 border-r data-ending-style:slide-out-to-left data-open:slide-in-from-left",
+  top: "inset-x-0 top-0 h-auto border-b data-ending-style:slide-out-to-top data-open:slide-in-from-top",
+  bottom:
+    "inset-x-0 bottom-0 h-auto border-t data-ending-style:slide-out-to-bottom data-open:slide-in-from-bottom",
+} satisfies Record<string, string>;
 
 // ---------------------------------------------------------------------------
 // Components
 // ---------------------------------------------------------------------------
 
-export type SheetProps = React.ComponentProps<typeof SheetPrimitive.Root>
+export type SheetProps = React.ComponentProps<typeof SheetPrimitive.Root>;
 
 function Sheet({ ...props }: SheetProps): ReactElement {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }
 
-export type SheetTriggerProps = React.ComponentProps<typeof SheetPrimitive.Trigger>
+export type SheetTriggerProps = React.ComponentProps<
+  typeof SheetPrimitive.Trigger
+>;
 
-function SheetTrigger({
-  ...props
-}: SheetTriggerProps): ReactElement {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+function SheetTrigger({ ...props }: SheetTriggerProps): ReactElement {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
 }
 
-export type SheetCloseProps = React.ComponentProps<typeof SheetPrimitive.Close>
+export type SheetCloseProps = React.ComponentProps<typeof SheetPrimitive.Close>;
 
-function SheetClose({
-  ...props
-}: SheetCloseProps): ReactElement {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+function SheetClose({ ...props }: SheetCloseProps): ReactElement {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
 }
 
-export type SheetPortalProps = React.ComponentProps<typeof SheetPrimitive.Portal>
+export type SheetPortalProps = React.ComponentProps<
+  typeof SheetPrimitive.Portal
+>;
 
-function SheetPortal({
-  ...props
-}: SheetPortalProps): ReactElement {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+function SheetPortal({ ...props }: SheetPortalProps): ReactElement {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
 }
 
 function SheetOverlay({
@@ -67,18 +67,20 @@ function SheetOverlay({
     <SheetPrimitive.Backdrop
       className={cn(
         "fixed inset-0 z-50 bg-foreground/50 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0",
-        className
+        className,
       )}
       data-slot="sheet-overlay"
       {...props}
     />
-  )
+  );
 }
 
-export type SheetContentProps = React.ComponentProps<typeof SheetPrimitive.Popup> & {
-  side?: keyof typeof SIDE_CLASSES
-  showCloseButton?: boolean
-}
+export type SheetContentProps = React.ComponentProps<
+  typeof SheetPrimitive.Popup
+> & {
+  side?: keyof typeof SIDE_CLASSES;
+  showCloseButton?: boolean;
+};
 
 function SheetContent({
   className,
@@ -96,26 +98,28 @@ function SheetContent({
         className={cn(
           "fixed z-50 flex flex-col gap-4 bg-background transition ease-in-out data-ending-style:animate-out data-ending-style:duration-300 data-ending-style:fill-mode-forwards data-open:animate-in data-open:duration-500",
           SIDE_CLASSES[side],
-          className
+          className,
         )}
         data-slot="sheet-content"
         style={{ ...themeVars, ...style } as React.CSSProperties}
         {...props}
       >
         {children}
-        {showCloseButton ? <SheetPrimitive.Close
+        {showCloseButton ? (
+          <SheetPrimitive.Close
             className="absolute top-4 right-4 transition-colors hover:bg-foreground/5 focus:outline-hidden focus:ring-2 focus:ring-border focus:ring-offset-0 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
             data-slot="sheet-icon-close"
           >
             <XIcon />
             <span className="sr-only">Close</span>
-          </SheetPrimitive.Close> : null}
+          </SheetPrimitive.Close>
+        ) : null}
       </SheetPrimitive.Popup>
     </SheetPortal>
-  )
+  );
 }
 
-export type SheetHeaderProps = React.ComponentProps<"div">
+export type SheetHeaderProps = React.ComponentProps<"div">;
 
 function SheetHeader({ className, ...props }: SheetHeaderProps): ReactElement {
   return (
@@ -124,10 +128,10 @@ function SheetHeader({ className, ...props }: SheetHeaderProps): ReactElement {
       data-slot="sheet-header"
       {...props}
     />
-  )
+  );
 }
 
-export type SheetFooterProps = React.ComponentProps<"div">
+export type SheetFooterProps = React.ComponentProps<"div">;
 
 function SheetFooter({ className, ...props }: SheetFooterProps): ReactElement {
   return (
@@ -136,25 +140,24 @@ function SheetFooter({ className, ...props }: SheetFooterProps): ReactElement {
       data-slot="sheet-footer"
       {...props}
     />
-  )
+  );
 }
 
-export type SheetTitleProps = React.ComponentProps<typeof SheetPrimitive.Title>
+export type SheetTitleProps = React.ComponentProps<typeof SheetPrimitive.Title>;
 
-function SheetTitle({
-  className,
-  ...props
-}: SheetTitleProps): ReactElement {
+function SheetTitle({ className, ...props }: SheetTitleProps): ReactElement {
   return (
     <SheetPrimitive.Title
       className={cn("text-lg font-semibold text-foreground", className)}
       data-slot="sheet-title"
       {...props}
     />
-  )
+  );
 }
 
-export type SheetDescriptionProps = React.ComponentProps<typeof SheetPrimitive.Description>
+export type SheetDescriptionProps = React.ComponentProps<
+  typeof SheetPrimitive.Description
+>;
 
 function SheetDescription({
   className,
@@ -162,11 +165,11 @@ function SheetDescription({
 }: SheetDescriptionProps): ReactElement {
   return (
     <SheetPrimitive.Description
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn("text-body-small text-muted-foreground", className)}
       data-slot="sheet-description"
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -179,4 +182,4 @@ export {
   SheetPortal,
   SheetTitle,
   SheetTrigger,
-}
+};

package/src/components/ui/slider.tsx

@@ -1,26 +1,26 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
+import * as React from "react";
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+import { cn } from "@/lib/utils";
 
 /**
  * Slider — WealthX Design System
  *
- * Base HTML range input styled to match WealthX design tokens.
- * Supports single value. Track bg-muted, range bg-primary, rounded corners.
+ * Built on @base-ui/react/slider. Uses thumbAlignment="edge" so the thumb
+ * stays fully within the control at min/max without overflowing.
  */
 
-interface SliderProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "type"> {
-  value?: number
-  defaultValue?: number
-  min?: number
-  max?: number
-  step?: number
-  disabled?: boolean
-  onValueChange?: (value: number) => void
+interface SliderProps {
+  value?: number;
+  defaultValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  onValueChange?: (value: number) => void;
+  className?: string;
 }
 
-const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
+const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
   (
     {
       className,
@@ -31,77 +31,54 @@ const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
       step = 1,
       disabled = false,
       onValueChange,
-      ...props
     },
-    ref
+    ref,
   ) => {
-    const [internalValue, setInternalValue] = React.useState(defaultValue)
-    const currentValue = value !== undefined ? value : internalValue
-
-    const percentage = ((currentValue - min) / (max - min)) * 100
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const newValue = Number(e.target.value)
-      if (value === undefined) {
-        setInternalValue(newValue)
-      }
-      onValueChange?.(newValue)
-    }
-
     return (
-      <div
+      <SliderPrimitive.Root
+        ref={ref}
+        value={value}
+        defaultValue={defaultValue}
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        thumbAlignment="edge"
+        onValueChange={(val) => onValueChange?.(val as number)}
         data-slot="slider"
         className={cn(
-          "relative flex w-full touch-none items-center select-none",
+          "relative w-full touch-none select-none",
           disabled && "opacity-50",
-          className
+          className,
         )}
       >
-        {/* Track */}
-        <div
-          data-slot="slider-track"
-          className="relative h-2 w-full overflow-hidden rounded-full bg-muted"
+        <SliderPrimitive.Control
+          className="relative flex h-5 w-full cursor-pointer items-center"
+          data-slot="slider-control"
         >
-          {/* Range fill */}
-          <div
-            data-slot="slider-range"
-            className="absolute h-full rounded-full bg-primary"
-            style={{ width: `${percentage}%` }}
+          <SliderPrimitive.Track
+            className="relative h-2 w-full overflow-hidden rounded-full bg-muted"
+            data-slot="slider-track"
+          >
+            <SliderPrimitive.Indicator
+              className="absolute h-full rounded-full bg-primary"
+              data-slot="slider-indicator"
+            />
+          </SliderPrimitive.Track>
+          <SliderPrimitive.Thumb
+            className={cn(
+              "block size-5 rounded-full border-2 border-primary bg-background shadow-sm",
+              "outline-none",
+            )}
+            data-slot="slider-thumb"
           />
-        </div>
-
-        {/* Native range input (invisible, covers full width for interaction) */}
-        <input
-          ref={ref}
-          type="range"
-          min={min}
-          max={max}
-          step={step}
-          value={currentValue}
-          disabled={disabled}
-          onChange={handleChange}
-          className={cn(
-            "absolute inset-0 h-full w-full cursor-pointer opacity-0",
-            disabled && "cursor-not-allowed"
-          )}
-          {...props}
-        />
-
-        {/* Visual thumb */}
-        <div
-          data-slot="slider-thumb"
-          className={cn(
-            "pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2",
-            "block size-5 rounded-full border-2 border-primary bg-background shadow-sm"
-          )}
-          style={{ left: `${percentage}%` }}
-        />
-      </div>
-    )
-  }
-)
+        </SliderPrimitive.Control>
+      </SliderPrimitive.Root>
+    );
+  },
+);
 
-Slider.displayName = "Slider"
+Slider.displayName = "Slider";
 
-export { Slider }
-export type { SliderProps }
+export { Slider };
+export type { SliderProps };

package/src/components/ui/stage-timeline.tsx

@@ -0,0 +1,205 @@
+import { Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Progress } from "@/components/ui/progress";
+import { TaskCheckItem } from "@/components/ui/pipeline-primitives";
+import { Spinner } from "@/components/ui/spinner";
+
+/**
+ * StageTimeline — WealthX DS (L4 Section)
+ *
+ * Progress bar + accordion list of pipeline stages with task checklists.
+ * Used in the Tasks tab of OpportunityDetailsDrawer.
+ *
+ * Layout:
+ *   • Top: progress bar showing completed stages / total stages
+ *   • Below: accordion with one item per stage
+ *
+ * Data source: `listColumns()` + `listLoans()` → tasks per stage
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface StageTimelineTask {
+  id: string;
+  title: string;
+  completed: boolean;
+  aiAgentName?: string | null;
+}
+
+export interface StageTimelineStage {
+  id: string;
+  name: string;
+  tasks: StageTimelineTask[];
+  /** Stage the opportunity is currently in. */
+  isCurrentStage?: boolean;
+  /** Stage has been fully passed through. */
+  isCompleted?: boolean;
+}
+
+export interface StageTimelineProps {
+  stages: StageTimelineStage[];
+  /** Called when a task checkbox is toggled. */
+  onTaskToggle?: (stageId: string, taskId: string) => void;
+  /** Shows a loading skeleton instead of stages. */
+  isLoading?: boolean;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// StageTimeline
+// ---------------------------------------------------------------------------
+
+export function StageTimeline({
+  stages,
+  onTaskToggle,
+  isLoading = false,
+  className,
+}: StageTimelineProps) {
+  if (isLoading) {
+    return (
+      <div
+        className={cn(
+          "flex flex-col items-center justify-center gap-3 py-10",
+          className,
+        )}
+        data-slot="stage-timeline"
+      >
+        <Spinner size="lg" className="text-muted-foreground" />
+        <p className="text-sm text-muted-foreground">Loading stages…</p>
+      </div>
+    );
+  }
+
+  if (stages.length === 0) {
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-center py-10 text-sm text-muted-foreground",
+          className,
+        )}
+        data-slot="stage-timeline"
+      >
+        No stages available.
+      </div>
+    );
+  }
+
+  const completedCount = stages.filter((s) => s.isCompleted).length;
+  const progressPct = Math.round((completedCount / stages.length) * 100);
+
+  // Default open: current stage (or first if none flagged)
+  const defaultOpen = stages.find((s) => s.isCurrentStage)?.id ?? stages[0].id;
+
+  return (
+    <div
+      className={cn("flex flex-col gap-4", className)}
+      data-slot="stage-timeline"
+    >
+      {/* Progress bar */}
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center justify-between text-sm text-muted-foreground">
+          <span>Stage progress</span>
+          <span>
+            {completedCount} / {stages.length} completed
+          </span>
+        </div>
+        <Progress value={progressPct} className="h-2.5" />
+      </div>
+
+      {/* Stage accordion */}
+      <Accordion
+        type="single"
+        collapsible
+        defaultValue={defaultOpen}
+        className="w-full"
+      >
+        {stages.map((stage) => {
+          const completedTasks = stage.tasks.filter((t) => t.completed).length;
+          const hasTasks = stage.tasks.length > 0;
+
+          return (
+            <AccordionItem
+              key={stage.id}
+              value={stage.id}
+              className="border-b border-border last:border-0"
+            >
+              <AccordionTrigger
+                className={cn(
+                  "py-3.5 text-sm hover:no-underline [&>svg]:size-4",
+                  stage.isCompleted
+                    ? "text-muted-foreground"
+                    : stage.isCurrentStage
+                      ? "font-semibold text-foreground"
+                      : "font-normal text-muted-foreground",
+                )}
+                disabled={!hasTasks}
+              >
+                <span className="flex items-center gap-2.5">
+                  {/* Stage status icon */}
+                  {stage.isCompleted ? (
+                    <span
+                      className="flex size-5 shrink-0 items-center justify-center rounded-full bg-primary"
+                      aria-hidden="true"
+                    >
+                      <Check
+                        className="size-3 text-primary-foreground"
+                        strokeWidth={2.5}
+                      />
+                    </span>
+                  ) : stage.isCurrentStage ? (
+                    <span
+                      className="size-5 shrink-0 rounded-full border-2 border-primary bg-background"
+                      aria-hidden="true"
+                    />
+                  ) : (
+                    <span
+                      className="size-5 shrink-0 rounded-full border-2 border-muted-foreground/30 bg-background"
+                      aria-hidden="true"
+                    />
+                  )}
+
+                  <span className={cn(stage.isCompleted && "line-through")}>
+                    {stage.name}
+                  </span>
+
+                  {hasTasks && (
+                    <span className="text-xs text-muted-foreground">
+                      {completedTasks}/{stage.tasks.length}
+                    </span>
+                  )}
+                </span>
+              </AccordionTrigger>
+
+              {hasTasks && (
+                <AccordionContent className="p-0 pb-3 pl-8">
+                  {stage.tasks.map((task) => (
+                    <TaskCheckItem
+                      key={task.id}
+                      title={task.title}
+                      completed={task.completed}
+                      aiAgentName={task.aiAgentName}
+                      size="sm"
+                      onToggle={
+                        onTaskToggle
+                          ? () => onTaskToggle(stage.id, task.id)
+                          : undefined
+                      }
+                    />
+                  ))}
+                </AccordionContent>
+              )}
+            </AccordionItem>
+          );
+        })}
+      </Accordion>
+    </div>
+  );
+}