@wealthx/shadcn 1.5.6 → 1.5.7

package/src/components/ui/selectable-card.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { RadioGroupItem } from "./radio-group";
+import { cn } from "../../lib/utils";
+
+export interface SelectableCardProps {
+  /** The value passed to the parent RadioGroup */
+  value: string;
+  /** Whether this card is currently selected */
+  selected?: boolean;
+  /** Content rendered inside the card */
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * A card-shaped radio option. Place inside a RadioGroup.
+ * Hides the RadioGroupItem visually so the entire card acts as the selector.
+ */
+export function SelectableCard({
+  value,
+  selected = false,
+  children,
+  className,
+}: SelectableCardProps) {
+  return (
+    <label
+      className={cn(
+        "flex cursor-pointer flex-col items-center justify-center gap-3 border border-border p-6 text-center transition-colors hover:border-primary/50",
+        selected && "border-primary bg-primary/5",
+        className,
+      )}
+    >
+      <RadioGroupItem value={value} className="sr-only" />
+      {children}
+    </label>
+  );
+}

package/src/components/ui/stepper.tsx

@@ -279,7 +279,8 @@ function StepLabel({
     >
       <span
         className={cn(
-          "text-sm font-medium leading-tight transition-colors",
+          orientation === "vertical" && "flex h-8 items-center",
+          "text-label-small transition-colors",
           (isActive || isCompleted) && !error && "text-foreground",
           !isActive && !isCompleted && !error && "text-muted-foreground",
           error && "text-destructive",
@@ -290,7 +291,7 @@ function StepLabel({
       {subtext && (
         <span
           className={cn(
-            "mt-0.5 text-xs",
+            "mt-0.5 text-caption",
             error ? "text-destructive" : "text-muted-foreground",
           )}
         >

package/src/lib/format-date.ts

@@ -50,21 +50,21 @@ export function formatDateWithWeekday(iso: string): string {
 }
 
 /**
- * Format a Date or ISO string as "Monday, 15 January" (long weekday + day + long month).
- * Returns raw string on parse failure.
+ * Format a Date or ISO string as a long human-readable string: "Wednesday, 15 January 2026".
+ * Used for booking confirmations and summary displays.
  */
 export function formatDateLong(date: Date | string): string {
-  const d = typeof date === "string" ? safeParse(date) : date;
   try {
-    return format(d, "EEEE, d MMMM");
+    const d = typeof date === "string" ? safeParse(date) : date;
+    return format(d, "EEEE, d MMMM yyyy");
   } catch {
-    return d.toLocaleDateString();
+    return String(date);
   }
 }
 
 /**
  * Format a Date or ISO string as an uppercase short weekday: "MON", "TUE", etc.
- * Returns raw string on parse failure.
+ * Used for calendar day headers.
  */
 export function formatWeekdayShort(date: Date | string): string {
   try {