@tenerife.music/ui 1.0.13 → 1.0.15

package/dist/index.cjs

@@ -726,6 +726,68 @@ var CARD_TOKENS = {
   }
 };
 
+// src/tokens/components/artist.ts
+var ARTIST_TOKENS = {
+  /**
+   * Image container tokens
+   * Layout classes for image container wrapper
+   */
+  image: {
+    /**
+     * Container layout tokens
+     * Positioning and sizing for image container
+     */
+    container: {
+      /**
+       * Base container layout
+       * Relative positioning, full width, overflow hidden
+       * Uses Tailwind layout utilities (allowed per architecture)
+       */
+      layout: "relative w-full overflow-hidden"
+    },
+    /**
+     * Image sizing tokens
+     * Full width and height for images
+     */
+    sizing: {
+      /**
+       * Full size image
+       * Uses Tailwind sizing utilities (allowed per architecture)
+       */
+      full: "h-full w-full"
+    },
+    /**
+     * Placeholder container tokens
+     * Layout for placeholder icon container when no image is provided
+     */
+    placeholder: {
+      /**
+       * Placeholder container layout
+       * Flex centering for placeholder icon
+       * Uses Tailwind layout utilities (allowed per architecture)
+       */
+      container: "flex h-full w-full items-center justify-center"
+    }
+  },
+  /**
+   * Footer border tokens
+   * Border styling for card footer separator
+   */
+  footer: {
+    /**
+     * Footer border tokens
+     * Top border separator for footer section
+     */
+    border: {
+      /**
+       * Footer border top
+       * Uses semantic border color token
+       */
+      top: "border-t border-border"
+    }
+  }
+};
+
 // src/tokens/spacing.ts
 var spacing = {
   // Zero spacing
@@ -988,101 +1050,6 @@ var tailwindSpacingConfig = {
 
 // src/tokens/components/data.ts
 var DATA_TOKENS = {
-  /**
-   * Table Component Tokens
-   */
-  table: {
-    /**
-     * Table row heights by size
-     * Maps to Tailwind height utilities
-     */
-    rowHeight: {
-      sm: "h-8",
-      // 32px (2rem) - compact rows
-      md: "h-10",
-      // 40px (2.5rem) - default rows
-      lg: "h-12"
-      // 48px (3rem) - spacious rows
-    },
-    /**
-     * Table cell and header padding by size
-     * Maps to semantic spacing tokens
-     */
-    padding: {
-      cell: {
-        sm: "p-xs",
-        // 4px (0.25rem) - maps to semanticSpacing.xs
-        md: "p-sm",
-        // 8px (0.5rem) - maps to semanticSpacing.sm
-        lg: "p-md"
-        // 16px (1rem) - maps to semanticSpacing.md
-      },
-      header: {
-        sm: "px-xs py-sm",
-        // 4px horizontal, 8px vertical
-        md: "px-sm py-md",
-        // 8px horizontal, 16px vertical
-        lg: "px-md py-lg"
-        // 16px horizontal, 24px vertical
-      }
-    },
-    /**
-     * Gap between table cells (horizontal spacing)
-     */
-    gap: {
-      sm: "gap-xs",
-      // 4px (0.25rem) - maps to semanticSpacing.xs
-      md: "gap-sm"
-      // 8px (0.5rem) - maps to semanticSpacing.sm
-    },
-    /**
-     * Border radius for table
-     */
-    radius: {
-      default: "rounded-md"
-      // 6px (0.375rem) - maps to borderRadius.md
-    },
-    /**
-     * Shadow tokens for table
-     * Maps to foundation elevation shadow tokens
-     */
-    shadow: {
-      none: "shadow-none",
-      // No shadow
-      subtle: "shadow-sm"
-      // Maps to elevationShadows.sm
-    },
-    /**
-     * Typography tokens for table headers and cells
-     * Maps to foundation typography fontSize tokens
-     */
-    typography: {
-      header: {
-        fontSize: "text-sm",
-        // Maps to fontSize.sm[0]
-        fontWeight: "font-semibold"
-        // Maps to fontWeight.semibold
-      },
-      cell: {
-        fontSize: "text-sm",
-        // Maps to fontSize.sm[0]
-        fontWeight: "font-normal"
-        // Maps to fontWeight.normal
-      }
-    },
-    /**
-     * Color tokens for table states
-     * Uses semantic color tokens
-     */
-    colors: {
-      border: "border-border",
-      // Border color
-      rowHover: "hover:bg-muted/50",
-      // Row hover background
-      rowSelected: "bg-muted"
-      // Selected row background
-    }
-  },
   /**
    * Skeleton Component Tokens
    */
@@ -1148,97 +1115,6 @@ var DATA_TOKENS = {
       inline: "inline-block"
       // Inline block display
     }
-  },
-  /**
-   * EmptyState Component Tokens
-   */
-  emptyState: {
-    /**
-     * Spacing tokens for EmptyState
-     * Maps to semantic spacing tokens
-     */
-    spacing: {
-      gap: "gap-md",
-      // 16px (1rem) - gap between elements - maps to semanticSpacing.md
-      padding: "p-lg"
-      // 24px (1.5rem) - container padding - maps to semanticSpacing.lg
-    },
-    /**
-     * Border radius for EmptyState container
-     */
-    radius: {
-      default: "rounded-xl"
-      // 12px (0.75rem) - maps to borderRadius.xl
-    },
-    /**
-     * Icon sizes by variant
-     * Maps to Tailwind size utilities
-     */
-    iconSize: {
-      sm: "size-8",
-      // 32px (2rem)
-      md: "size-12",
-      // 48px (3rem)
-      lg: "size-16"
-      // 64px (4rem)
-    },
-    /**
-     * Typography tokens for EmptyState
-     * Maps to foundation typography tokens
-     */
-    typography: {
-      title: {
-        fontSize: "text-lg",
-        // Maps to fontSize.lg[0]
-        fontWeight: "font-semibold"
-        // Maps to fontWeight.semibold
-      },
-      description: {
-        fontSize: "text-sm",
-        // Maps to fontSize.sm[0]
-        fontWeight: "font-normal"
-        // Maps to fontWeight.normal
-      }
-    }
-  },
-  /**
-   * DataList Component Tokens
-   */
-  dataList: {
-    /**
-     * Spacing tokens for DataList
-     * Maps to semantic spacing tokens
-     */
-    spacing: {
-      gap: "gap-md",
-      // 16px (1rem) - gap between items - maps to semanticSpacing.md
-      padding: "p-md"
-      // 16px (1rem) - container padding - maps to semanticSpacing.md
-    },
-    /**
-     * Label width tokens (for desktop horizontal layout)
-     * Maps to Tailwind width utilities
-     */
-    labelWidth: {
-      sm: "w-24",
-      // 96px (6rem) - small label width
-      md: "w-32",
-      // 128px (8rem) - default label width
-      lg: "w-40"
-      // 160px (10rem) - large label width
-    },
-    /**
-     * Row padding tokens
-     * Maps to semantic spacing tokens
-     */
-    rowPadding: {
-      sm: "py-xs",
-      // 4px (0.25rem) - maps to semanticSpacing.xs
-      md: "py-sm",
-      // 8px (0.5rem) - maps to semanticSpacing.sm
-      lg: "py-md"
-      // 16px (1rem) - maps to semanticSpacing.md
-    }
   }
 };
 
@@ -1583,7 +1459,7 @@ var DOMAIN_TOKENS = {
   },
   /**
    * Image tokens for card media
-   * Defines aspect ratio, radius, and overlay styles
+   * Defines aspect ratio, radius, overlay styles, and placeholder gradients
    */
   image: {
     /**
@@ -1606,6 +1482,40 @@ var DOMAIN_TOKENS = {
     overlay: {
       gradient: "bg-gradient-to-t from-black/60 via-transparent to-transparent"
       // Gradient overlay for image hover states
+    },
+    /**
+     * Placeholder gradient tokens for image placeholders
+     * Used when no image URL is provided
+     */
+    placeholder: {
+      gradient: "bg-gradient-to-br from-muted to-muted/50"
+      // Placeholder gradient background
+    }
+  },
+  /**
+   * Text tokens for card text elements
+   * Defines hover states and line clamping for titles and descriptions
+   */
+  text: {
+    /**
+     * Hover state tokens for text elements
+     * Used for interactive text elements like titles
+     */
+    hover: {
+      primary: "group-hover:text-primary"
+      // Hover state for primary text color
+    },
+    /**
+     * Line clamp tokens for text truncation
+     * Used for limiting text to specific number of lines
+     */
+    lineClamp: {
+      one: "line-clamp-1",
+      // Single line clamp
+      two: "line-clamp-2",
+      // Two line clamp
+      three: "line-clamp-3"
+      // Three line clamp
     }
   },
   /**
@@ -1828,6 +1738,94 @@ var DOMAIN_TOKENS = {
       height: "h-6"
       // References spacing[6] (1.5rem / 24px) via Tailwind
     }
+  },
+  /**
+   * CTA (Call-to-Action) button tokens for domain card components
+   * Provides PromoCard-specific CTA button styling tokens
+   * These tokens are semantically owned by domain card components, not by the Button component
+   * References foundation tokens (spacing, typography, radius, shadows, motion) for consistency
+   */
+  cta: {
+    /**
+     * CTA button styling tokens
+     * Used by PromoCard and other domain card components for CTA button elements
+     */
+    button: {
+      /**
+       * Button heights by size
+       * Maps to Tailwind height utilities: h-8, h-9
+       */
+      height: {
+        sm: "h-8",
+        // 32px (2rem) - compact size
+        md: "h-9"
+        // 36px (2.25rem) - default size
+      },
+      /**
+       * Button padding by size
+       * Horizontal and vertical padding values
+       * References semanticSpacing tokens
+       */
+      padding: {
+        horizontal: {
+          sm: "px-sm",
+          // 8px (0.5rem) - maps to semanticSpacing.sm
+          md: "px-md"
+          // 16px (1rem) - maps to semanticSpacing.md
+        },
+        vertical: {
+          sm: "py-xs"
+          // 4px (0.25rem) - maps to semanticSpacing.xs
+        }
+      },
+      /**
+       * Border radius for CTA buttons
+       * References borderRadius.md (6px / 0.375rem)
+       * Using Tailwind class "rounded-md" which maps to borderRadius.md
+       */
+      radius: "rounded-md",
+      // References borderRadius.md via Tailwind
+      /**
+       * Font sizes by button size
+       * Maps to foundation typography fontSize tokens
+       */
+      fontSize: {
+        sm: "text-xs",
+        // Maps to fontSize.xs[0]
+        md: "text-sm"
+        // Maps to fontSize.sm[0]
+      },
+      /**
+       * Shadow tokens for CTA buttons
+       * Maps to foundation elevation shadow tokens
+       */
+      shadow: {
+        primary: "shadow"
+        // Maps to elevationShadows.xs (primary variant uses shadow)
+      },
+      /**
+       * Color tokens for CTA button variants
+       * Uses semantic color tokens that map to CSS variables
+       */
+      variant: {
+        primary: {
+          background: "bg-primary",
+          // Primary background using CSS var
+          text: "text-primary-foreground",
+          // Primary text using CSS var
+          hover: "hover:bg-primary/90"
+          // Primary hover using CSS var
+        }
+      },
+      /**
+       * Transition tokens for CTA buttons
+       * References MOTION_TOKENS for transitions
+       */
+      transition: {
+        colors: "transition-colors"
+        // Color transition using motion tokens
+      }
+    }
   }
 };
 
@@ -1931,40 +1929,6 @@ var INPUT_TOKENS = {
     text: "text-[hsl(var(--foreground))]"
     // File input text color using CSS var
   },
-  /**
-   * Select listbox tokens
-   * Styling for select dropdown container
-   */
-  selectListbox: {
-    border: "border border-[hsl(var(--border))]",
-    // Border color using CSS var
-    background: "bg-[hsl(var(--popover))]",
-    // Background using CSS var
-    text: "text-[hsl(var(--popover-foreground))]",
-    // Text color using CSS var
-    radius: "rounded-md",
-    // Radius token (6px)
-    shadow: "shadow-md"
-    // Shadow token
-  },
-  /**
-   * Select option tokens
-   * Styling for select option items
-   */
-  selectOption: {
-    focus: {
-      background: "focus:bg-[hsl(var(--accent))]",
-      // Focus background using CSS var
-      text: "focus:text-[hsl(var(--accent-foreground))]"
-      // Focus text using CSS var
-    },
-    selected: {
-      background: "bg-[hsl(var(--accent))]",
-      // Selected background using CSS var
-      text: "text-[hsl(var(--accent-foreground))]"
-      // Selected text using CSS var
-    }
-  },
   /**
    * Variant-based tokens
    * Border, background, and text colors for different variants
@@ -2178,35 +2142,217 @@ var INPUT_TOKENS = {
   }
 };
 
-// src/tokens/components/checkbox.ts
-var CHECKBOX_TOKENS = {
+// src/tokens/components/textarea.ts
+var TEXTAREA_TOKENS = {
   /**
-   * Checkbox sizes by size variant
-   * Supports xs, sm, md, lg, xl sizes
-   * Checkboxes are typically square and smaller than input fields
+   * Shadow token
+   * Maps to foundation elevation shadow tokens
    */
-  size: {
-    xs: {
-      width: "w-3.5",
-      // 14px (0.875rem)
-      height: "h-3.5",
-      // 14px (0.875rem)
-      radius: "rounded-sm",
-      // 4px (0.25rem)
-      iconSize: "size-2.5"
-      // 10px (0.625rem)
+  shadow: "shadow-sm",
+  // Maps to elevationShadows.sm
+  /**
+   * Variant-based tokens
+   * Border, background, and text colors for different variants
+   * All use CSS variable references for theme support
+   */
+  variant: {
+    primary: {
+      border: "border-[hsl(var(--tm-primary))]",
+      // Primary border color
+      background: "bg-[hsl(var(--tm-primary))]",
+      // Primary background
+      text: "text-[hsl(var(--tm-primary-foreground))]",
+      // Primary text color
+      focus: "focus-visible:shadow-[var(--focus-ring-primary)]"
+      // Primary focus ring
     },
-    sm: {
-      width: "w-4",
-      // 16px (1rem)
-      height: "h-4",
-      // 16px (1rem)
-      radius: "rounded-sm",
-      // 4px (0.25rem)
-      iconSize: "size-3"
-      // 12px (0.75rem)
+    secondary: {
+      border: "border-[hsl(var(--tm-secondary))]",
+      // Secondary border color
+      background: "bg-[hsl(var(--tm-secondary))]",
+      // Secondary background
+      text: "text-[hsl(var(--tm-secondary-foreground))]",
+      // Secondary text color
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Default focus ring
     },
-    md: {
+    outline: {
+      border: "border-[hsl(var(--input))]",
+      // Input border color
+      background: "bg-transparent",
+      // Transparent background
+      text: "text-[hsl(var(--foreground))]",
+      // Foreground text color
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Default focus ring
+    },
+    ghost: {
+      border: "border-transparent",
+      // Transparent border
+      background: "bg-transparent",
+      // Transparent background
+      text: "text-[hsl(var(--foreground))]",
+      // Foreground text color
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Default focus ring
+    },
+    destructive: {
+      border: "border-[hsl(var(--destructive))]",
+      // Destructive border color
+      background: "bg-[hsl(var(--destructive))]",
+      // Destructive background
+      text: "text-[hsl(var(--destructive-foreground))]",
+      // Destructive text color
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Default focus ring
+    }
+  },
+  /**
+   * State-based tokens
+   * Border, background, and text colors for different states
+   * All use CSS variable references for theme support
+   */
+  state: {
+    border: {
+      default: "border-[hsl(var(--input))]",
+      // Default border color using CSS var
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]",
+      // Focus ring using CSS var
+      error: "border-[hsl(var(--destructive))]",
+      // Error state border using CSS var
+      success: "border-[hsl(var(--semantic-success))]",
+      // Success state border using CSS var
+      disabled: "border-[hsl(var(--input))]"
+      // Disabled state border (same as default)
+    },
+    background: {
+      default: "bg-transparent",
+      // Default background
+      disabled: "bg-transparent"
+      // Disabled background (same as default)
+    },
+    text: {
+      default: "text-[hsl(var(--foreground))]",
+      // Default text color using CSS var
+      placeholder: "placeholder:text-[hsl(var(--muted-foreground))]",
+      // Placeholder text color using CSS var
+      disabled: "disabled:opacity-50"
+      // Disabled text opacity
+    }
+  },
+  /**
+   * Width tokens
+   * Common width utilities
+   */
+  width: {
+    full: "w-full"
+    // Full width (100%)
+  },
+  /**
+   * Message tokens
+   * Spacing, positioning, and styling for helper text and error messages
+   */
+  message: {
+    // 8px (0.5rem) - spacing between control and message
+    position: {
+      bottom: "bottom-sm",
+      // 8px (0.5rem) - bottom position for character counter
+      right: "right-sm"
+      // 8px (0.5rem) - right position for character counter
+    },
+    color: {
+      default: "text-[hsl(var(--muted-foreground))]",
+      // Default message color
+      error: "text-[hsl(var(--destructive))]"}
+  },
+  /**
+   * Size-based token structure
+   * Organized by size for easy access
+   */
+  size: {
+    xs: {
+      padding: {
+        horizontal: "px-xs",
+        vertical: "py-xs"
+      },
+      radius: "rounded-sm",
+      fontSize: "text-xs"},
+    sm: {
+      padding: {
+        horizontal: "px-sm",
+        vertical: "py-xs"
+      },
+      radius: "rounded-md",
+      fontSize: "text-sm"},
+    md: {
+      padding: {
+        horizontal: "px-sm",
+        vertical: "py-xs"
+      },
+      radius: "rounded-md",
+      fontSize: "text-base",
+      fontSizeResponsive: "md:text-sm"},
+    lg: {
+      padding: {
+        horizontal: "px-md",
+        vertical: "py-sm"
+      },
+      radius: "rounded-md",
+      fontSize: "text-base"},
+    xl: {
+      padding: {
+        horizontal: "px-lg",
+        vertical: "py-md"
+      },
+      radius: "rounded-lg",
+      fontSize: "text-lg"}
+  }
+};
+
+// src/tokens/components/form.ts
+var FORM_TOKENS = {
+  /**
+   * Label tokens
+   * Spacing and styling for labels
+   */
+  label: {
+    // 8px (0.5rem) - spacing between label and control
+    /**
+     * Color for required asterisk mark
+     */
+    requiredMark: "text-destructive"
+    // Color for required asterisk
+  }};
+
+// src/tokens/components/checkbox.ts
+var CHECKBOX_TOKENS = {
+  /**
+   * Checkbox sizes by size variant
+   * Supports xs, sm, md, lg, xl sizes
+   * Checkboxes are typically square and smaller than input fields
+   */
+  size: {
+    xs: {
+      width: "w-3.5",
+      // 14px (0.875rem)
+      height: "h-3.5",
+      // 14px (0.875rem)
+      radius: "rounded-sm",
+      // 4px (0.25rem)
+      iconSize: "size-2.5"
+      // 10px (0.625rem)
+    },
+    sm: {
+      width: "w-4",
+      // 16px (1rem)
+      height: "h-4",
+      // 16px (1rem)
+      radius: "rounded-sm",
+      // 4px (0.25rem)
+      iconSize: "size-3"
+      // 12px (0.75rem)
+    },
+    md: {
       width: "w-4.5",
       // 18px (1.125rem) - default
       height: "h-4.5",
@@ -4245,6 +4391,14 @@ var DROPDOWN_TOKENS = {
       // 256px
     }
   },
+  /**
+   * Width tokens
+   * Common width utilities
+   */
+  width: {
+    full: "w-full"
+    // Full width (100%)
+  },
   /**
    * Item tokens by size
    * Individual menu item
@@ -5054,64 +5208,352 @@ var MODAL_TOKENS = {
   }
 };
 
-// src/tokens/motion/v2.ts
-var motionV2Durations = {
-  fast: "150ms",
-  // Quick interactions
-  normal: "250ms",
-  // Default transitions
-  slow: "350ms",
-  // Emphasized animations
-  reduced: "0ms"
-  // For prefers-reduced-motion
-};
-var motionV2Easings = {
-  soft: "cubic-bezier(0.22, 1, 0.36, 1)",
-  // Gentle, smooth
-  standard: "cubic-bezier(0.4, 0, 0.2, 1)",
-  // Material Design standard
-  emphasized: "cubic-bezier(0.2, 0, 0, 1)"
-  // Strong, decisive
-};
-var motionV2Transitions = {
-  fast: `${motionV2Durations.fast} ${motionV2Easings.standard}`,
-  normal: `${motionV2Durations.normal} ${motionV2Easings.standard}`,
-  slow: `${motionV2Durations.slow} ${motionV2Easings.emphasized}`,
-  soft: `${motionV2Durations.normal} ${motionV2Easings.soft}`,
-  reduced: `${motionV2Durations.reduced} linear`
-};
-var motionV2Fade = {
-  in: {
-    from: { opacity: 0 },
-    to: { opacity: 1 }
+// src/tokens/components/table.ts
+var TABLE_TOKENS = {
+  /**
+   * Table cell and header padding by size
+   * Maps to semantic spacing tokens
+   */
+  padding: {
+    cell: {
+      sm: "p-xs",
+      // 4px (0.25rem) - maps to semanticSpacing.xs
+      md: "p-sm",
+      // 8px (0.5rem) - maps to semanticSpacing.sm
+      lg: "p-md"
+      // 16px (1rem) - maps to semanticSpacing.md
+    },
+    header: {
+      sm: "px-xs py-sm",
+      // 4px horizontal, 8px vertical
+      md: "px-sm py-md",
+      // 8px horizontal, 16px vertical
+      lg: "px-md py-lg"
+      // 16px horizontal, 24px vertical
+    }
   },
-  out: {
-    from: { opacity: 1 },
-    to: { opacity: 0 }
-  }
-};
-var motionV2Scale = {
-  in: {
-    from: { transform: "scale(0.95)", opacity: 0 },
-    to: { transform: "scale(1)", opacity: 1 }
+  /**
+   * Border radius for table
+   */
+  radius: {
+    default: "rounded-md"
+    // 6px (0.375rem) - maps to borderRadius.md
   },
-  out: {
-    from: { transform: "scale(1)", opacity: 1 },
-    to: { transform: "scale(0.95)", opacity: 0 }
-  }
-};
-var motionV2Slide = {
-  up: {
-    in: {
-      from: { transform: "translateY(100%)", opacity: 0 },
-      to: { transform: "translateY(0)", opacity: 1 }
+  /**
+   * Shadow tokens for table
+   * Maps to foundation elevation shadow tokens
+   */
+  shadow: {
+    // No shadow
+    subtle: "shadow-sm"
+    // Maps to elevationShadows.sm
+  },
+  /**
+   * Typography tokens for table headers and cells
+   * Maps to foundation typography fontSize tokens
+   */
+  typography: {
+    header: {
+      fontSize: "text-sm",
+      // Maps to fontSize.sm[0]
+      fontWeight: "font-semibold"
+      // Maps to fontWeight.semibold
     },
-    out: {
-      from: { transform: "translateY(0)", opacity: 1 },
-      to: { transform: "translateY(100%)", opacity: 0 }
+    cell: {
+      fontSize: "text-sm",
+      // Maps to fontSize.sm[0]
+      fontWeight: "font-normal"
+      // Maps to fontWeight.normal
     }
   },
-  down: {
+  /**
+   * Color tokens for table states
+   * Uses semantic color tokens
+   */
+  colors: {
+    border: "border-border",
+    // Border color
+    rowHover: "hover:bg-muted/50",
+    // Row hover background
+    rowSelected: "bg-muted"
+    // Selected row background
+  },
+  /**
+   * Border tokens for table
+   */
+  border: {
+    bottom: "border-b"
+    // Border bottom for rows and headers
+  },
+  /**
+   * Layout tokens for table container and base styles
+   */
+  layout: {
+    overflow: "overflow-x-auto",
+    // Table container overflow
+    table: "w-full border-collapse"
+    // Table base styles
+  },
+  /**
+   * Sticky header tokens
+   * For sticky header positioning and styling
+   */
+  sticky: {
+    header: "sticky top-0 z-10 bg-background"
+    // Sticky header styles
+  },
+  /**
+   * Expandable row tokens
+   * For expandable content styling
+   */
+  expandable: {
+    padding: "p-md",
+    // Expandable content padding - maps to semanticSpacing.md
+    container: "p-0",
+    // Expandable container padding
+    transition: "overflow-hidden transition-all duration-normal ease-in-out",
+    // Transition styles
+    expanded: "max-h-[100vh] opacity-100",
+    // Expanded state
+    collapsed: "max-h-0 opacity-0",
+    // Collapsed state
+    cursor: "cursor-pointer",
+    // Cursor for expandable rows
+    content: {
+      expanded: "block",
+      // Expanded content display
+      collapsed: "hidden"
+      // Collapsed content display
+    }
+  },
+  /**
+   * Loading state tokens
+   * For loading state cell styling
+   */
+  loading: {
+    cellPadding: "p-sm",
+    // Loading state cell padding - maps to semanticSpacing.sm
+    skeletonWidth: "w-full"
+    // Skeleton width
+  },
+  /**
+   * Empty state tokens
+   * For empty state cell styling
+   */
+  empty: {
+    padding: "p-8"
+    // Empty state padding - maps to semanticSpacing.2xl
+  },
+  /**
+   * Sortable header tokens
+   * For sortable header styling and interactions
+   */
+  sortable: {
+    hover: "hover:bg-muted/50",
+    // Sortable header hover
+    gap: "gap-2",
+    // Sort icon gap - maps to semanticSpacing.sm
+    cursor: "cursor-pointer select-none",
+    // Sortable cursor
+    container: "flex items-center",
+    // Sortable header container
+    icon: {
+      base: "inline-flex size-4 items-center text-muted-foreground transition-transform",
+      // Sort icon base styles
+      rotated: "rotate-180",
+      // Rotated state (descending)
+      inactive: "opacity-30"
+      // Inactive state (no sort)
+    }
+  }
+};
+
+// src/tokens/components/data-list.ts
+var DATA_LIST_TOKENS = {
+  /**
+   * Spacing tokens for DataList
+   * Maps to semantic spacing tokens
+   */
+  spacing: {
+    gap: "gap-md"},
+  /**
+   * Label width tokens (for desktop horizontal layout)
+   * Maps to Tailwind width utilities
+   */
+  labelWidth: {
+    // 96px (6rem) - small label width
+    md: "w-32"},
+  /**
+   * Row padding tokens
+   * Maps to semantic spacing tokens
+   */
+  rowPadding: {
+    sm: "py-xs",
+    // 4px (0.25rem) - maps to semanticSpacing.xs
+    md: "py-sm",
+    // 8px (0.5rem) - maps to semanticSpacing.sm
+    lg: "py-md"
+    // 16px (1rem) - maps to semanticSpacing.md
+  },
+  /**
+   * Item tokens
+   * For individual DataList item styling
+   */
+  item: {
+    /**
+     * Border tokens for items
+     */
+    border: "border-b border-border last:border-0",
+    // Item borders
+    /**
+     * Responsive layout tokens
+     */
+    layout: {
+      mobile: "flex flex-col",
+      // Mobile layout - vertical
+      desktop: "md:flex-row md:items-center"
+      // Desktop layout - horizontal
+    }
+  },
+  /**
+   * Label tokens
+   * For DataList label styling
+   */
+  label: {
+    mobile: "mb-1 font-semibold text-foreground",
+    // Mobile label styles
+    desktop: "md:mb-0"
+    // Desktop label margin override
+  },
+  /**
+   * Value tokens
+   * For DataList value styling
+   */
+  value: {
+    color: "text-muted-foreground",
+    // Value text color
+    flex: "flex-1"
+    // Value flex grow
+  }
+};
+
+// src/tokens/components/empty-state.ts
+var EMPTY_STATE_TOKENS = {
+  /**
+   * Spacing tokens for EmptyState
+   * Maps to semantic spacing tokens
+   */
+  spacing: {
+    // 24px (1.5rem) - container padding - maps to semanticSpacing.lg
+    action: "mt-2"
+    // Action button margin top - maps to semanticSpacing.xs
+  },
+  /**
+   * Icon sizes by variant
+   * Maps to Tailwind size utilities
+   */
+  icon: {
+    size: {
+      sm: "size-8",
+      // 32px (2rem)
+      md: "size-12",
+      // 48px (3rem)
+      lg: "size-16"
+      // 64px (4rem)
+    },
+    container: "flex items-center justify-center text-muted-foreground"
+    // Icon container styles
+  },
+  /**
+   * Typography tokens for EmptyState
+   * Maps to foundation typography tokens
+   */
+  typography: {
+    title: {
+      fontSize: "text-lg",
+      // Maps to fontSize.lg[0]
+      fontWeight: "font-semibold",
+      // Maps to fontWeight.semibold
+      color: "text-foreground"
+      // Title text color
+    },
+    description: {
+      fontSize: "text-sm",
+      // Maps to fontSize.sm[0]
+      fontWeight: "font-normal",
+      // Maps to fontWeight.normal
+      color: "text-muted-foreground",
+      // Description text color
+      maxWidth: "max-w-md"
+      // Maximum width for description
+    }
+  },
+  /**
+   * Alignment tokens
+   * For text alignment in EmptyState
+   */
+  alignment: {
+    center: "text-center"}
+};
+
+// src/tokens/motion/v2.ts
+var motionV2Durations = {
+  fast: "150ms",
+  // Quick interactions
+  normal: "250ms",
+  // Default transitions
+  slow: "350ms",
+  // Emphasized animations
+  reduced: "0ms"
+  // For prefers-reduced-motion
+};
+var motionV2Easings = {
+  soft: "cubic-bezier(0.22, 1, 0.36, 1)",
+  // Gentle, smooth
+  standard: "cubic-bezier(0.4, 0, 0.2, 1)",
+  // Material Design standard
+  emphasized: "cubic-bezier(0.2, 0, 0, 1)"
+  // Strong, decisive
+};
+var motionV2Transitions = {
+  fast: `${motionV2Durations.fast} ${motionV2Easings.standard}`,
+  normal: `${motionV2Durations.normal} ${motionV2Easings.standard}`,
+  slow: `${motionV2Durations.slow} ${motionV2Easings.emphasized}`,
+  soft: `${motionV2Durations.normal} ${motionV2Easings.soft}`,
+  reduced: `${motionV2Durations.reduced} linear`
+};
+var motionV2Fade = {
+  in: {
+    from: { opacity: 0 },
+    to: { opacity: 1 }
+  },
+  out: {
+    from: { opacity: 1 },
+    to: { opacity: 0 }
+  }
+};
+var motionV2Scale = {
+  in: {
+    from: { transform: "scale(0.95)", opacity: 0 },
+    to: { transform: "scale(1)", opacity: 1 }
+  },
+  out: {
+    from: { transform: "scale(1)", opacity: 1 },
+    to: { transform: "scale(0.95)", opacity: 0 }
+  }
+};
+var motionV2Slide = {
+  up: {
+    in: {
+      from: { transform: "translateY(100%)", opacity: 0 },
+      to: { transform: "translateY(0)", opacity: 1 }
+    },
+    out: {
+      from: { transform: "translateY(0)", opacity: 1 },
+      to: { transform: "translateY(100%)", opacity: 0 }
+    }
+  },
+  down: {
     in: {
       from: { transform: "translateY(-100%)", opacity: 0 },
       to: { transform: "translateY(0)", opacity: 1 }
@@ -6374,6 +6816,13 @@ var UI_COLORS = tailwindThemeColors;
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function formatDate(date) {
+  return new Intl.DateTimeFormat("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  }).format(new Date(date));
+}
 var buttonVariants = classVarianceAuthority.cva(
   `inline-flex items-center justify-center ${BUTTON_TOKENS.gap} whitespace-nowrap ${BUTTON_TOKENS.radius} ${BUTTON_TOKENS.fontSize.md} font-medium ${BUTTON_TOKENS.transition.colors} focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:${BUTTON_TOKENS.iconSize} [&_svg]:shrink-0`,
   {
@@ -8339,31 +8788,31 @@ var Radio = React49__namespace.forwardRef(
 );
 Radio.displayName = "Radio";
 var textareaVariants = classVarianceAuthority.cva(
-  `flex min-h-[80px] ${INPUT_TOKENS.shadow} ${MOTION_TOKENS.transition.colors} disabled:cursor-not-allowed focus-visible:outline-none resize-y`,
+  `flex min-h-[80px] ${TEXTAREA_TOKENS.shadow} ${MOTION_TOKENS.transition.colors} disabled:cursor-not-allowed focus-visible:outline-none resize-y`,
   {
     variants: {
       variant: {
-        primary: `${INPUT_TOKENS.variant.primary.border} ${INPUT_TOKENS.variant.primary.background} ${INPUT_TOKENS.variant.primary.text} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.variant.primary.focus}`,
-        secondary: `${INPUT_TOKENS.variant.secondary.border} ${INPUT_TOKENS.variant.secondary.background} ${INPUT_TOKENS.variant.secondary.text} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.variant.secondary.focus}`,
-        outline: `${INPUT_TOKENS.variant.outline.border} ${INPUT_TOKENS.variant.outline.background} ${INPUT_TOKENS.variant.outline.text} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.variant.outline.focus}`,
-        ghost: `${INPUT_TOKENS.variant.ghost.border} ${INPUT_TOKENS.variant.ghost.background} ${INPUT_TOKENS.variant.ghost.text} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.variant.ghost.focus}`,
-        destructive: `${INPUT_TOKENS.variant.destructive.border} ${INPUT_TOKENS.variant.destructive.background} ${INPUT_TOKENS.variant.destructive.text} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.variant.destructive.focus}`
+        primary: `${TEXTAREA_TOKENS.variant.primary.border} ${TEXTAREA_TOKENS.variant.primary.background} ${TEXTAREA_TOKENS.variant.primary.text} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.variant.primary.focus}`,
+        secondary: `${TEXTAREA_TOKENS.variant.secondary.border} ${TEXTAREA_TOKENS.variant.secondary.background} ${TEXTAREA_TOKENS.variant.secondary.text} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.variant.secondary.focus}`,
+        outline: `${TEXTAREA_TOKENS.variant.outline.border} ${TEXTAREA_TOKENS.variant.outline.background} ${TEXTAREA_TOKENS.variant.outline.text} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.variant.outline.focus}`,
+        ghost: `${TEXTAREA_TOKENS.variant.ghost.border} ${TEXTAREA_TOKENS.variant.ghost.background} ${TEXTAREA_TOKENS.variant.ghost.text} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.variant.ghost.focus}`,
+        destructive: `${TEXTAREA_TOKENS.variant.destructive.border} ${TEXTAREA_TOKENS.variant.destructive.background} ${TEXTAREA_TOKENS.variant.destructive.text} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.variant.destructive.focus}`
       },
       size: {
-        xs: `${INPUT_TOKENS.size.xs.padding.horizontal} ${INPUT_TOKENS.size.xs.padding.vertical} ${INPUT_TOKENS.size.xs.radius} ${INPUT_TOKENS.size.xs.fontSize}`,
-        sm: `${INPUT_TOKENS.size.sm.padding.horizontal} ${INPUT_TOKENS.size.sm.padding.vertical} ${INPUT_TOKENS.size.sm.radius} ${INPUT_TOKENS.size.sm.fontSize}`,
-        md: `${INPUT_TOKENS.size.md.padding.horizontal} ${INPUT_TOKENS.size.md.padding.vertical} ${INPUT_TOKENS.size.md.radius} ${INPUT_TOKENS.size.md.fontSize} ${INPUT_TOKENS.size.md.fontSizeResponsive}`,
-        lg: `${INPUT_TOKENS.size.lg.padding.horizontal} ${INPUT_TOKENS.size.lg.padding.vertical} ${INPUT_TOKENS.size.lg.radius} ${INPUT_TOKENS.size.lg.fontSize}`,
-        xl: `${INPUT_TOKENS.size.xl.padding.horizontal} ${INPUT_TOKENS.size.xl.padding.vertical} ${INPUT_TOKENS.size.xl.radius} ${INPUT_TOKENS.size.xl.fontSize}`
+        xs: `${TEXTAREA_TOKENS.size.xs.padding.horizontal} ${TEXTAREA_TOKENS.size.xs.padding.vertical} ${TEXTAREA_TOKENS.size.xs.radius} ${TEXTAREA_TOKENS.size.xs.fontSize}`,
+        sm: `${TEXTAREA_TOKENS.size.sm.padding.horizontal} ${TEXTAREA_TOKENS.size.sm.padding.vertical} ${TEXTAREA_TOKENS.size.sm.radius} ${TEXTAREA_TOKENS.size.sm.fontSize}`,
+        md: `${TEXTAREA_TOKENS.size.md.padding.horizontal} ${TEXTAREA_TOKENS.size.md.padding.vertical} ${TEXTAREA_TOKENS.size.md.radius} ${TEXTAREA_TOKENS.size.md.fontSize} ${TEXTAREA_TOKENS.size.md.fontSizeResponsive}`,
+        lg: `${TEXTAREA_TOKENS.size.lg.padding.horizontal} ${TEXTAREA_TOKENS.size.lg.padding.vertical} ${TEXTAREA_TOKENS.size.lg.radius} ${TEXTAREA_TOKENS.size.lg.fontSize}`,
+        xl: `${TEXTAREA_TOKENS.size.xl.padding.horizontal} ${TEXTAREA_TOKENS.size.xl.padding.vertical} ${TEXTAREA_TOKENS.size.xl.radius} ${TEXTAREA_TOKENS.size.xl.fontSize}`
       },
       state: {
-        default: `${INPUT_TOKENS.state.border.default} ${INPUT_TOKENS.state.background.default} ${INPUT_TOKENS.state.text.default} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.state.border.focus}`,
-        error: `${INPUT_TOKENS.state.border.error} ${INPUT_TOKENS.state.background.default} ${INPUT_TOKENS.state.text.default} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.state.border.focus}`,
-        success: `${INPUT_TOKENS.state.border.success} ${INPUT_TOKENS.state.background.default} ${INPUT_TOKENS.state.text.default} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.state.border.focus}`,
-        disabled: `${INPUT_TOKENS.state.border.disabled} ${INPUT_TOKENS.state.background.disabled} ${INPUT_TOKENS.state.text.default} ${INPUT_TOKENS.state.text.placeholder} ${INPUT_TOKENS.state.text.disabled}`
+        default: `${TEXTAREA_TOKENS.state.border.default} ${TEXTAREA_TOKENS.state.background.default} ${TEXTAREA_TOKENS.state.text.default} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.state.border.focus}`,
+        error: `${TEXTAREA_TOKENS.state.border.error} ${TEXTAREA_TOKENS.state.background.default} ${TEXTAREA_TOKENS.state.text.default} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.state.border.focus}`,
+        success: `${TEXTAREA_TOKENS.state.border.success} ${TEXTAREA_TOKENS.state.background.default} ${TEXTAREA_TOKENS.state.text.default} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.state.border.focus}`,
+        disabled: `${TEXTAREA_TOKENS.state.border.disabled} ${TEXTAREA_TOKENS.state.background.disabled} ${TEXTAREA_TOKENS.state.text.default} ${TEXTAREA_TOKENS.state.text.placeholder} ${TEXTAREA_TOKENS.state.text.disabled}`
       },
       fullWidth: {
-        true: INPUT_TOKENS.width.full,
+        true: TEXTAREA_TOKENS.width.full,
         false: ""
       }
     },
@@ -8407,7 +8856,7 @@ var Textarea = React49__namespace.forwardRef(
     const currentLength = typeof currentValue === "string" ? currentValue.length : 0;
     const shouldShowCounter = showCharacterCount && maxLength !== void 0;
     if (shouldShowCounter) {
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", fullWidth !== false && INPUT_TOKENS.width.full), children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", fullWidth !== false && TEXTAREA_TOKENS.width.full), children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "textarea",
           {
@@ -8427,11 +8876,11 @@ var Textarea = React49__namespace.forwardRef(
           {
             className: cn(
               "absolute",
-              INPUT_TOKENS.message.position.bottom,
-              INPUT_TOKENS.message.position.right,
+              TEXTAREA_TOKENS.message.position.bottom,
+              TEXTAREA_TOKENS.message.position.right,
               TEXT_TOKENS.fontSize.xs,
-              INPUT_TOKENS.message.color.default,
-              currentLength > maxLength && INPUT_TOKENS.message.color.error
+              TEXTAREA_TOKENS.message.color.default,
+              currentLength > maxLength && TEXTAREA_TOKENS.message.color.error
             ),
             children: [
               currentLength,
@@ -8992,7 +9441,7 @@ var labelVariants = classVarianceAuthority.cva(
 var Label2 = React49__namespace.forwardRef(
   ({ className, required, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(LabelPrimitive__namespace.Root, { ref, className: cn(labelVariants(), className), ...props, children: [
     children,
-    required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(INPUT_TOKENS.label.requiredMark, "ml-xs"), children: "*" })
+    required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(FORM_TOKENS.label.requiredMark, "ml-xs"), children: "*" })
   ] })
 );
 Label2.displayName = LabelPrimitive__namespace.Root.displayName;
@@ -10398,7 +10847,7 @@ var PopoverArrow = React49__namespace.forwardRef(
 );
 PopoverArrow.displayName = "PopoverArrow";
 
-// node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
+// node_modules/.pnpm/@floating-ui+utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var min = Math.min;
 var max = Math.max;
 var round = Math.round;
@@ -10529,7 +10978,7 @@ function rectToClientRect(rect) {
   };
 }
 
-// node_modules/@floating-ui/core/dist/floating-ui.core.mjs
+// node_modules/.pnpm/@floating-ui+core@1.7.3/node_modules/@floating-ui/core/dist/floating-ui.core.mjs
 function computeCoordsFromPlacement(_ref, placement, rtl) {
   let {
     reference,
@@ -10974,7 +11423,7 @@ var shift = function(options) {
   };
 };
 
-// node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
+// node_modules/.pnpm/@floating-ui+utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
 function hasWindow() {
   return typeof window !== "undefined";
 }
@@ -11127,7 +11576,7 @@ function getFrameElement(win) {
   return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
 }
 
-// node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
+// node_modules/.pnpm/@floating-ui+dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
 function getCssDimensions(element) {
   const css = getComputedStyle2(element);
   let width = parseFloat(css.width) || 0;
@@ -13224,7 +13673,7 @@ var Skeleton = React49__namespace.forwardRef(
 Skeleton.displayName = "Skeleton";
 var EmptyStateAction = React49__namespace.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mt-2", className), ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn(EMPTY_STATE_TOKENS.spacing.action, className), ...props, children });
   }
 );
 EmptyStateAction.displayName = "EmptyStateAction";
@@ -13235,9 +13684,10 @@ var EmptyStateDescription = React49__namespace.forwardRef(
       {
         ref,
         className: cn(
-          DATA_TOKENS.emptyState.typography.description.fontSize,
-          DATA_TOKENS.emptyState.typography.description.fontWeight,
-          "max-w-md text-muted-foreground",
+          EMPTY_STATE_TOKENS.typography.description.fontSize,
+          EMPTY_STATE_TOKENS.typography.description.fontWeight,
+          EMPTY_STATE_TOKENS.typography.description.color,
+          EMPTY_STATE_TOKENS.typography.description.maxWidth,
           className
         ),
         ...props,
@@ -13249,16 +13699,12 @@ var EmptyStateDescription = React49__namespace.forwardRef(
 EmptyStateDescription.displayName = "EmptyStateDescription";
 var EmptyStateIcon = React49__namespace.forwardRef(
   ({ children, size: size3 = "md", className, ...props }, ref) => {
-    const iconSizeClass = DATA_TOKENS.emptyState.iconSize[size3];
+    const iconSizeClass = EMPTY_STATE_TOKENS.icon.size[size3];
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
-        className: cn(
-          "flex items-center justify-center text-muted-foreground",
-          iconSizeClass,
-          className
-        ),
+        className: cn(EMPTY_STATE_TOKENS.icon.container, iconSizeClass, className),
         ...props,
         children
       }
@@ -13273,9 +13719,9 @@ var EmptyStateTitle = React49__namespace.forwardRef(
       {
         ref,
         className: cn(
-          DATA_TOKENS.emptyState.typography.title.fontSize,
-          DATA_TOKENS.emptyState.typography.title.fontWeight,
-          "text-foreground",
+          EMPTY_STATE_TOKENS.typography.title.fontSize,
+          EMPTY_STATE_TOKENS.typography.title.fontWeight,
+          EMPTY_STATE_TOKENS.typography.title.color,
           className
         ),
         ...props,
@@ -13296,7 +13742,7 @@ var EmptyState = React49__namespace.forwardRef(
         variant: "flat",
         radius: "xl",
         p: "lg",
-        className: cn("text-center", className),
+        className: cn(EMPTY_STATE_TOKENS.alignment.center, className),
         id: emptyStateId,
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx(Stack, { gap: "md", align: "center", justify: "center", children })
@@ -13313,14 +13759,16 @@ var DataListItem = React49__namespace.forwardRef(
   ({ padding = "md", className, children, ...props }, ref) => {
     const paddingValue = getBaseValue(padding);
     const paddingKey = paddingValue && ["sm", "md", "lg"].includes(String(paddingValue)) ? String(paddingValue) : "md";
-    const paddingClass = DATA_TOKENS.dataList.rowPadding[paddingKey];
+    const paddingClass = DATA_LIST_TOKENS.rowPadding[paddingKey];
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         className: cn(
           paddingClass,
-          "flex flex-col border-b border-border last:border-0 md:flex-row md:items-center",
+          DATA_LIST_TOKENS.item.layout.mobile,
+          DATA_LIST_TOKENS.item.layout.desktop,
+          DATA_LIST_TOKENS.item.border,
           className
         ),
         ...props,
@@ -13337,9 +13785,9 @@ var DataListLabel = React49__namespace.forwardRef(
       {
         ref,
         className: cn(
-          "mb-1 font-semibold text-foreground md:mb-0",
-          "md:w-32",
-          // Default md width from tokens
+          DATA_LIST_TOKENS.label.mobile,
+          DATA_LIST_TOKENS.label.desktop,
+          DATA_LIST_TOKENS.labelWidth.md,
           className
         ),
         ...props,
@@ -13351,13 +13799,21 @@ var DataListLabel = React49__namespace.forwardRef(
 DataListLabel.displayName = "DataListLabel";
 var DataListValue = React49__namespace.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("dd", { ref, className: cn("flex-1 text-muted-foreground", className), ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "dd",
+      {
+        ref,
+        className: cn(DATA_LIST_TOKENS.value.flex, DATA_LIST_TOKENS.value.color, className),
+        ...props,
+        children
+      }
+    );
   }
 );
 DataListValue.displayName = "DataListValue";
 var DataListRoot = React49__namespace.forwardRef(
   ({ labelWidth: _labelWidth = "md", className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("dl", { ref, className: cn(DATA_TOKENS.dataList.spacing.gap, className), ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx("dl", { ref, className: cn(DATA_LIST_TOKENS.spacing.gap, className), ...props, children });
   }
 );
 DataListRoot.displayName = "DataListRoot";
@@ -13372,9 +13828,9 @@ var TableBody = React49__namespace.forwardRef(
 TableBody.displayName = "TableBody";
 var TableCell = React49__namespace.forwardRef(
   ({ align = "left", size: size3 = "md", className, ...props }, ref) => {
-    const paddingClass = DATA_TOKENS.table.padding.cell[size3];
-    const typographyClass = DATA_TOKENS.table.typography.cell.fontSize;
-    const fontWeightClass = DATA_TOKENS.table.typography.cell.fontWeight;
+    const paddingClass = TABLE_TOKENS.padding.cell[size3];
+    const typographyClass = TABLE_TOKENS.typography.cell.fontSize;
+    const fontWeightClass = TABLE_TOKENS.typography.cell.fontWeight;
     const alignmentClasses = {
       left: "text-left",
       center: "text-center",
@@ -13400,7 +13856,7 @@ var TableCell = React49__namespace.forwardRef(
 TableCell.displayName = "TableCell";
 var TableEmpty = React49__namespace.forwardRef(
   ({ colSpan, message = "No data available", className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: cn(className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, className: "p-8", children: /* @__PURE__ */ jsxRuntime.jsxs(EmptyState, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: cn(className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, className: TABLE_TOKENS.empty.padding, children: /* @__PURE__ */ jsxRuntime.jsxs(EmptyState, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(EmptyStateIcon, { children: "\u{1F4ED}" }),
       /* @__PURE__ */ jsxRuntime.jsx(EmptyStateTitle, { children: message })
     ] }) }) });
@@ -13415,13 +13871,22 @@ var TableExpandableContent = React49__namespace.forwardRef(
         ref,
         colSpan,
         className: cn(
-          "p-0",
-          "overflow-hidden transition-all duration-normal ease-in-out",
-          expanded ? "max-h-[100vh] opacity-100" : "max-h-0 opacity-0",
+          TABLE_TOKENS.expandable.container,
+          TABLE_TOKENS.expandable.transition,
+          expanded ? TABLE_TOKENS.expandable.expanded : TABLE_TOKENS.expandable.collapsed,
           className
         ),
         ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-md", expanded ? "block" : "hidden"), children })
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              TABLE_TOKENS.expandable.padding,
+              expanded ? TABLE_TOKENS.expandable.content.expanded : TABLE_TOKENS.expandable.content.collapsed
+            ),
+            children
+          }
+        )
       }
     );
   }
@@ -13434,9 +13899,9 @@ var TableSortIcon = React49__namespace.forwardRef(
       {
         ref,
         className: cn(
-          "inline-flex size-4 items-center text-muted-foreground transition-transform",
-          direction === "desc" && "rotate-180",
-          !direction && "opacity-30",
+          TABLE_TOKENS.sortable.icon.base,
+          direction === "desc" && TABLE_TOKENS.sortable.icon.rotated,
+          !direction && TABLE_TOKENS.sortable.icon.inactive,
           className
         ),
         "aria-hidden": "true",
@@ -13483,9 +13948,9 @@ var TableHead = React49__namespace.forwardRef(
         direction: nextDirection
       });
     }, [sortable, columnKey, sortState, setSortState]);
-    const paddingClass = DATA_TOKENS.table.padding.header[size3];
-    const typographyClass = DATA_TOKENS.table.typography.header.fontSize;
-    const fontWeightClass = DATA_TOKENS.table.typography.header.fontWeight;
+    const paddingClass = TABLE_TOKENS.padding.header[size3];
+    const typographyClass = TABLE_TOKENS.typography.header.fontSize;
+    const fontWeightClass = TABLE_TOKENS.typography.header.fontWeight;
     const alignmentClasses = {
       left: "text-left",
       center: "text-center",
@@ -13502,9 +13967,10 @@ var TableHead = React49__namespace.forwardRef(
           typographyClass,
           fontWeightClass,
           alignmentClasses[align],
-          DATA_TOKENS.table.colors.border,
-          "border-b",
-          sortable && "cursor-pointer select-none hover:bg-muted/50",
+          TABLE_TOKENS.colors.border,
+          TABLE_TOKENS.border.bottom,
+          sortable && TABLE_TOKENS.sortable.cursor,
+          sortable && TABLE_TOKENS.sortable.hover,
           className
         ),
         onClick: handleSort,
@@ -13516,7 +13982,7 @@ var TableHead = React49__namespace.forwardRef(
         })(),
         role: "columnheader",
         ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(TABLE_TOKENS.sortable.container, TABLE_TOKENS.sortable.gap), children: [
           children,
           sortable && /* @__PURE__ */ jsxRuntime.jsx(TableSortIcon, { direction: sortDirection })
         ] })
@@ -13531,7 +13997,7 @@ var TableHeader = React49__namespace.forwardRef(
       "thead",
       {
         ref,
-        className: cn(sticky && "sticky top-0 z-10 bg-background", className),
+        className: cn(sticky && TABLE_TOKENS.sticky.header, className),
         role: "rowgroup",
         ...props
       }
@@ -13541,7 +14007,7 @@ var TableHeader = React49__namespace.forwardRef(
 TableHeader.displayName = "TableHeader";
 var TableLoadingState = React49__namespace.forwardRef(
   ({ colSpan, rows = 5, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: rows }).map((_, index2) => /* @__PURE__ */ jsxRuntime.jsx("tr", { ref: index2 === 0 ? ref : void 0, className: cn(className), ...props, children: Array.from({ length: colSpan }).map((_2, cellIndex) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-sm", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "text", className: "w-full" }) }, cellIndex)) }, index2)) });
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: rows }).map((_, index2) => /* @__PURE__ */ jsxRuntime.jsx("tr", { ref: index2 === 0 ? ref : void 0, className: cn(className), ...props, children: Array.from({ length: colSpan }).map((_2, cellIndex) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: TABLE_TOKENS.loading.cellPadding, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "text", className: TABLE_TOKENS.loading.skeletonWidth }) }, cellIndex)) }, index2)) });
   }
 );
 TableLoadingState.displayName = "TableLoadingState";
@@ -13559,11 +14025,11 @@ var TableRow = React49__namespace.forwardRef(
       {
         ref,
         className: cn(
-          DATA_TOKENS.table.colors.border,
-          "border-b",
-          DATA_TOKENS.table.colors.rowHover,
-          selected && DATA_TOKENS.table.colors.rowSelected,
-          expandable && "cursor-pointer",
+          TABLE_TOKENS.colors.border,
+          TABLE_TOKENS.border.bottom,
+          TABLE_TOKENS.colors.rowHover,
+          selected && TABLE_TOKENS.colors.rowSelected,
+          expandable && TABLE_TOKENS.expandable.cursor,
           className
         ),
         "aria-expanded": expandable ? expanded : void 0,
@@ -13624,13 +14090,13 @@ function TableRoot({
     }),
     [sortState, expandedRows, toggleRow, expandable, renderExpandableContent]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: TABLE_TOKENS.layout.overflow, children: /* @__PURE__ */ jsxRuntime.jsx(
     "table",
     {
       className: cn(
-        "w-full border-collapse",
-        DATA_TOKENS.table.radius.default,
-        DATA_TOKENS.table.shadow.subtle,
+        TABLE_TOKENS.layout.table,
+        TABLE_TOKENS.radius.default,
+        TABLE_TOKENS.shadow.subtle,
         className
       ),
       role: "table",
@@ -15197,8 +15663,8 @@ var artistCardGenresVariants = classVarianceAuthority.cva(
   }
 );
 var artistCardFooterBorderVariants = classVarianceAuthority.cva(
-  // Base classes - border top, spacing
-  "border-t border-border",
+  // Base classes - border top from ARTIST_TOKENS, spacing from DOMAIN_TOKENS
+  ARTIST_TOKENS.footer.border.top,
   {
     variants: {
       size: {
@@ -15258,37 +15724,49 @@ var ArtistCard = React49__namespace.forwardRef(
         ...props,
         children: [
           featured && popularBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: artistCardBadgeVariants({ size: size3 }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: artistCardBadgeSurfaceVariants({ size: size3, variant: "featured" }), children: popularBadgeText }) }),
-          showImage && /* @__PURE__ */ jsxRuntime.jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full overflow-hidden bg-gradient-to-br from-muted to-muted/50", children: [
-            imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: imageUrl,
-                alt: name,
-                className: cn("h-full w-full", artistCardImageTransformVariants({ size: size3 }))
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-              Icon2,
-              {
-                name: "info",
-                size: "xl",
-                color: "muted",
-                className: ICON_TOKENS.sizes["4xl"],
-                "aria-hidden": "true"
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: artistCardImageOverlayVariants({ size: size3 }) })
-          ] }) }),
+          showImage && /* @__PURE__ */ jsxRuntime.jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                ARTIST_TOKENS.image.container.layout,
+                DOMAIN_TOKENS.image.placeholder.gradient
+              ),
+              children: [
+                imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: imageUrl,
+                    alt: name,
+                    className: cn(
+                      ARTIST_TOKENS.image.sizing.full,
+                      artistCardImageTransformVariants({ size: size3 })
+                    )
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: ARTIST_TOKENS.image.placeholder.container, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Icon2,
+                  {
+                    name: "info",
+                    size: "xl",
+                    color: "muted",
+                    className: ICON_TOKENS.sizes["4xl"],
+                    "aria-hidden": "true"
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: artistCardImageOverlayVariants({ size: size3 }) })
+              ]
+            }
+          ) }),
           /* @__PURE__ */ jsxRuntime.jsxs(CardBaseContentWrapper, { size: size3, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               Heading,
               {
                 level: 3,
                 className: cn(
-                  "line-clamp-2",
+                  DOMAIN_TOKENS.text.lineClamp.two,
                   TEXT_TOKENS.fontSize.lg,
                   TEXT_TOKENS.fontWeight.bold,
                   MOTION_TOKENS.transition.colors,
-                  "group-hover:text-primary",
+                  DOMAIN_TOKENS.text.hover.primary,
                   size3 === "compact" ? DOMAIN_TOKENS.spacing.section.titleToSubtitle : DOMAIN_TOKENS.spacing.section.subtitleToMetadata
                 ),
                 children: href ? /* @__PURE__ */ jsxRuntime.jsx(Link, { href, variant: "ghost", children: name }) : name
@@ -15300,7 +15778,7 @@ var ArtistCard = React49__namespace.forwardRef(
                 size: "sm",
                 variant: "muted",
                 className: cn(
-                  "line-clamp-2",
+                  DOMAIN_TOKENS.text.lineClamp.two,
                   size3 === "compact" ? DOMAIN_TOKENS.spacing.section.titleToSubtitle : DOMAIN_TOKENS.spacing.section.subtitleToMetadata
                 ),
                 children: description
@@ -15362,16 +15840,16 @@ var ArtistCard = React49__namespace.forwardRef(
   }
 );
 ArtistCard.displayName = "ArtistCard";
-var eventCardBadgeVariants = classVarianceAuthority.cva(
+var categoryCardBadgeVariants = classVarianceAuthority.cva(
   // Base classes - absolute positioning, z-index
   "absolute z-10",
   {
     variants: {
       size: {
         default: DOMAIN_TOKENS.badges.position.default,
-        // Default positioning - maps to semanticSpacing.md (12px)
+        // Default positioning - references semanticSpacing.md (16px)
         compact: DOMAIN_TOKENS.badges.position.compact
-        // Compact positioning - maps to semanticSpacing.sm (8px)
+        // Compact positioning - references semanticSpacing.sm (8px)
       }
     },
     defaultVariants: {
@@ -15379,9 +15857,10 @@ var eventCardBadgeVariants = classVarianceAuthority.cva(
     }
   }
 );
-var eventCardBadgeSurfaceVariants = classVarianceAuthority.cva(
+var categoryCardBadgeSurfaceVariants = classVarianceAuthority.cva(
   // Base classes - flex layout, items center, badge styling
-  `inline-flex items-center ${DOMAIN_TOKENS.badges.radius} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.badges.size.sm} ${DOMAIN_TOKENS.badges.text.color} ${TEXT_TOKENS.fontSize.xs} font-semibold`,
+  // Uses DOMAIN_TOKENS for badge-specific styles, TEXT_TOKENS for typography
+  `inline-flex items-center ${DOMAIN_TOKENS.badges.radius} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.badges.size.sm} ${DOMAIN_TOKENS.badges.text.color} ${TEXT_TOKENS.fontSize.xs} ${TEXT_TOKENS.fontWeight.semibold}`,
   {
     variants: {
       variant: {
@@ -15394,130 +15873,14 @@ var eventCardBadgeSurfaceVariants = classVarianceAuthority.cva(
     }
   }
 );
-var eventCardMetadataVariants = classVarianceAuthority.cva(
-  // Base classes - flex column, metadata spacing
-  `flex flex-col ${DOMAIN_TOKENS.metadata.spacing.vertical}`,
-  {
-    variants: {
-      size: {
-        default: "",
-        compact: ""
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var eventCardMetadataItemVariants = classVarianceAuthority.cva(
-  // Base classes - flex items center, metadata spacing and text
-  `flex items-center ${DOMAIN_TOKENS.metadata.spacing.horizontal} ${DOMAIN_TOKENS.metadata.text.secondary} ${TEXT_TOKENS.fontSize.xs}`,
-  {
-    variants: {
-      size: {
-        default: "",
-        compact: ""
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var eventCardMetadataIconVariants = classVarianceAuthority.cva(
-  // Base classes - icon size and color
-  `${ICON_TOKENS.sizes.md} ${ICON_TOKENS.colors.muted}`,
-  {
-    variants: {
-      size: {
-        default: "",
-        compact: ""
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var eventCardFooterVariants = classVarianceAuthority.cva(
-  // Base classes - border top, spacing
-  "border-t border-border",
-  {
-    variants: {
-      size: {
-        default: DOMAIN_TOKENS.spacing.footer.paddingTopDefault,
-        // Default padding top - references semanticSpacing.sm (8px) via Tailwind
-        compact: DOMAIN_TOKENS.spacing.footer.paddingTopCompact
-        // Compact padding top - references semanticSpacing.xs (4px) via Tailwind
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var eventCardTicketButtonVariants = classVarianceAuthority.cva(
-  // Base classes - flex layout, badge gradient, motion
-  `inline-flex items-center justify-center ${DOMAIN_TOKENS.badges.surface.featured} ${DOMAIN_TOKENS.badges.text.color} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.motion.hover.transition} font-semibold transform`,
-  {
-    variants: {
-      size: {
-        default: DOMAIN_TOKENS.spacing.button.paddingDefault,
-        // Default padding - references semanticSpacing.md (16px) horizontal, xs (4px) vertical via Tailwind
-        compact: DOMAIN_TOKENS.spacing.button.paddingCompact
-        // Compact padding - references semanticSpacing.sm (8px) horizontal, xs (4px) vertical via Tailwind
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var eventCardTicketButtonIconVariants = classVarianceAuthority.cva(
-  // Base classes - icon size and spacing
-  `${ICON_TOKENS.sizes.md} ${DOMAIN_TOKENS.spacing.button.iconMarginLeft}`,
-  {
-    variants: {
-      size: {
-        default: "",
-        compact: ""
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var eventCardPriceVariants = classVarianceAuthority.cva(
-  // Base classes - price gradient text
-  `bg-gradient-to-r from-accent-500 to-primary-600 bg-clip-text text-transparent`,
-  {
-    variants: {
-      size: {
-        default: TEXT_TOKENS.fontSize.lg,
-        // Default size
-        compact: TEXT_TOKENS.fontSize.md
-        // Compact size
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var EventCard = React49__namespace.forwardRef(
+var CategoryCard = React49__namespace.forwardRef(
   ({
     title,
     description,
-    date,
-    venueName,
-    price,
     imageUrl,
     href,
-    ticketUrl,
     featured = false,
     showImage = true,
-    getTicketsLabel,
     featuredBadgeText,
     size: size3 = "default",
     variant,
@@ -15540,46 +15903,57 @@ var EventCard = React49__namespace.forwardRef(
         className: cn("group relative", className),
         ...props,
         children: [
-          featured && featuredBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: eventCardBadgeVariants({ size: size3 }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventCardBadgeSurfaceVariants({ variant: "featured" }), children: featuredBadgeText }) }),
-          showImage && /* @__PURE__ */ jsxRuntime.jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full overflow-hidden bg-gradient-to-br from-surface-elevated1 to-surface-elevated2", children: [
-            imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: imageUrl,
-                alt: title,
-                className: cn(
-                  "h-full w-full object-cover",
-                  DOMAIN_TOKENS.motion.hover.transition,
-                  DOMAIN_TOKENS.motion.hover.scale
-                )
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-              Icon2,
-              {
-                name: "info",
-                size: "xl",
-                color: "muted",
-                className: ICON_TOKENS.sizes["4xl"],
-                "aria-hidden": "true"
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  "absolute inset-0 opacity-0 transition-opacity duration-normal group-hover:opacity-100",
-                  DOMAIN_TOKENS.image.overlay.gradient
+          featured && featuredBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: categoryCardBadgeVariants({ size: size3 }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: categoryCardBadgeSurfaceVariants({ variant: "featured" }), children: featuredBadgeText }) }),
+          showImage && /* @__PURE__ */ jsxRuntime.jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "relative w-full overflow-hidden",
+                DOMAIN_TOKENS.image.placeholder.gradient
+              ),
+              children: [
+                imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: imageUrl,
+                    alt: title,
+                    className: cn(
+                      "h-full w-full object-cover",
+                      DOMAIN_TOKENS.motion.hover.transition,
+                      DOMAIN_TOKENS.motion.hover.scale
+                    )
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Icon2,
+                  {
+                    name: "info",
+                    className: cn(ICON_TOKENS.sizes["4xl"], ICON_TOKENS.colors.muted),
+                    "aria-hidden": "true"
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "absolute inset-0 opacity-0 group-hover:opacity-100",
+                      MOTION_TOKENS.transition.opacity,
+                      MOTION_TOKENS.duration.normal,
+                      DOMAIN_TOKENS.image.overlay.gradient
+                    )
+                  }
                 )
-              }
-            )
-          ] }) }),
+              ]
+            }
+          ) }),
           /* @__PURE__ */ jsxRuntime.jsxs(CardBaseContentWrapper, { size: size3, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               Heading,
               {
                 level: 3,
                 className: cn(
-                  "line-clamp-2 transition-colors group-hover:text-primary",
+                  DOMAIN_TOKENS.text.lineClamp.two,
+                  MOTION_TOKENS.transition.colors,
+                  DOMAIN_TOKENS.text.hover.primary,
                   TEXT_TOKENS.fontSize.lg,
                   TEXT_TOKENS.fontWeight.bold,
                   DOMAIN_TOKENS.spacing.section.titleToSubtitle
@@ -15591,47 +15965,21 @@ var EventCard = React49__namespace.forwardRef(
               Text,
               {
                 size: "sm",
-                muted: true,
+                variant: "muted",
                 className: cn(
-                  "line-clamp-2",
+                  DOMAIN_TOKENS.text.lineClamp.two,
                   size3 === "compact" ? DOMAIN_TOKENS.spacing.section.titleToSubtitle : DOMAIN_TOKENS.spacing.section.subtitleToMetadata
                 ),
                 children: description
               }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: eventCardMetadataVariants({ size: size3 }), children: [
-              date && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: eventCardMetadataItemVariants({ size: size3 }), children: [
-                /* @__PURE__ */ jsxRuntime.jsx(IconCalendar, { className: eventCardMetadataIconVariants({ size: size3 }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", muted: true, children: date })
-              ] }),
-              venueName && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: eventCardMetadataItemVariants({ size: size3 }), children: [
-                /* @__PURE__ */ jsxRuntime.jsx(IconLocation, { className: eventCardMetadataIconVariants({ size: size3 }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", muted: true, className: "line-clamp-1", children: venueName })
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(CardBaseFooterWrapper, { size: size3, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", eventCardFooterVariants({ size: size3 })), children: [
-            ticketUrl && /* @__PURE__ */ jsxRuntime.jsxs(
-              Link,
-              {
-                href: ticketUrl,
-                className: cn("w-full", eventCardTicketButtonVariants({ size: size3 })),
-                target: "_blank",
-                rel: "noopener noreferrer",
-                children: [
-                  getTicketsLabel,
-                  /* @__PURE__ */ jsxRuntime.jsx(IconArrowRight, { className: eventCardTicketButtonIconVariants({ size: size3 }) })
-                ]
-              }
-            ),
-            !ticketUrl && price && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: size3 === "compact" ? "md" : "lg", weight: "bold", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventCardPriceVariants({ size: size3 }), children: price }) }) })
-          ] }) })
+            )
+          ] })
         ]
       }
     ) });
   }
 );
-EventCard.displayName = "EventCard";
+CategoryCard.displayName = "CategoryCard";
 var promoCardBadgeVariants = classVarianceAuthority.cva(
   // Base classes - absolute positioning, z-index
   "absolute z-10",
@@ -15665,14 +16013,14 @@ var promoCardBadgeSurfaceVariants = classVarianceAuthority.cva(
   }
 );
 var promoCardCtaButtonVariants = classVarianceAuthority.cva(
-  // Base classes - flex layout, button tokens, motion
-  `inline-flex items-center justify-center ${BUTTON_TOKENS.radius} ${BUTTON_TOKENS.variant.primary.background} ${BUTTON_TOKENS.variant.primary.text} ${BUTTON_TOKENS.shadow.primary} ${BUTTON_TOKENS.variant.primary.hover} ${BUTTON_TOKENS.transition.colors} font-semibold`,
+  // Base classes - flex layout, CTA button tokens, motion
+  `inline-flex items-center justify-center ${DOMAIN_TOKENS.cta.button.radius} ${DOMAIN_TOKENS.cta.button.variant.primary.background} ${DOMAIN_TOKENS.cta.button.variant.primary.text} ${DOMAIN_TOKENS.cta.button.shadow.primary} ${DOMAIN_TOKENS.cta.button.variant.primary.hover} ${DOMAIN_TOKENS.cta.button.transition.colors} font-semibold`,
   {
     variants: {
       size: {
-        default: `${BUTTON_TOKENS.height.md} ${BUTTON_TOKENS.padding.horizontal.md} ${BUTTON_TOKENS.padding.vertical.sm} ${BUTTON_TOKENS.fontSize.md}`,
+        default: `${DOMAIN_TOKENS.cta.button.height.md} ${DOMAIN_TOKENS.cta.button.padding.horizontal.md} ${DOMAIN_TOKENS.cta.button.padding.vertical.sm} ${DOMAIN_TOKENS.cta.button.fontSize.md}`,
         // Default size - uses md height and padding
-        compact: `${BUTTON_TOKENS.height.sm} ${BUTTON_TOKENS.padding.horizontal.sm} ${BUTTON_TOKENS.padding.vertical.sm} ${BUTTON_TOKENS.fontSize.sm}`
+        compact: `${DOMAIN_TOKENS.cta.button.height.sm} ${DOMAIN_TOKENS.cta.button.padding.horizontal.sm} ${DOMAIN_TOKENS.cta.button.padding.vertical.sm} ${DOMAIN_TOKENS.cta.button.fontSize.sm}`
         // Compact size - uses sm height and padding
       }
     },
@@ -15804,6 +16152,22 @@ var PromoCard = React49__namespace.forwardRef(
   }
 );
 PromoCard.displayName = "PromoCard";
+var ticketCardVariants = classVarianceAuthority.cva("group relative", {
+  variants: {
+    size: {
+      default: "",
+      compact: ""
+    },
+    variant: {
+      default: "",
+      featured: ""
+    }
+  },
+  defaultVariants: {
+    size: "default",
+    variant: "default"
+  }
+});
 var ticketCardBadgeVariants = classVarianceAuthority.cva(
   // Base classes - absolute positioning, z-index
   "absolute z-10",
@@ -15811,7 +16175,7 @@ var ticketCardBadgeVariants = classVarianceAuthority.cva(
     variants: {
       size: {
         default: DOMAIN_TOKENS.badges.position.default,
-        // Default positioning - maps to semanticSpacing.md (12px)
+        // Default positioning - maps to semanticSpacing.md (16px)
         compact: DOMAIN_TOKENS.badges.position.compact
         // Compact positioning - maps to semanticSpacing.sm (8px)
       }
@@ -15823,7 +16187,7 @@ var ticketCardBadgeVariants = classVarianceAuthority.cva(
 );
 var ticketCardBadgeSurfaceVariants = classVarianceAuthority.cva(
   // Base classes - flex layout, items center, badge styling
-  `inline-flex items-center ${DOMAIN_TOKENS.badges.radius} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.badges.size.sm} ${DOMAIN_TOKENS.badges.text.color} ${TEXT_TOKENS.fontSize.xs} font-semibold`,
+  `inline-flex items-center ${DOMAIN_TOKENS.badges.radius} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.badges.size.sm} ${DOMAIN_TOKENS.badges.text.color} ${TEXT_TOKENS.fontSize.xs} ${TEXT_TOKENS.fontWeight.semibold}`,
   {
     variants: {
       variant: {
@@ -15840,6 +16204,45 @@ var ticketCardBadgeSurfaceVariants = classVarianceAuthority.cva(
     }
   }
 );
+var ticketCardTitleVariants = classVarianceAuthority.cva(
+  `${TEXT_TOKENS.fontSize.lg} ${TEXT_TOKENS.fontWeight.bold} ${MOTION_TOKENS.transition.colors} ${DOMAIN_TOKENS.text.hover.primary} ${DOMAIN_TOKENS.text.lineClamp.two}`,
+  {
+    variants: {
+      size: {
+        default: DOMAIN_TOKENS.spacing.section.subtitleToMetadata,
+        compact: DOMAIN_TOKENS.spacing.section.titleToSubtitle
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var ticketCardDateVariants = classVarianceAuthority.cva(
+  `${DOMAIN_TOKENS.metadata.text.secondary} ${TEXT_TOKENS.fontSize.sm} ${MOTION_TOKENS.transition.colors}`,
+  {
+    variants: {
+      size: {
+        default: DOMAIN_TOKENS.spacing.section.titleToSubtitle,
+        compact: `${DOMAIN_TOKENS.spacing.section.titleToSubtitle} ${TEXT_TOKENS.fontSize.xs}`
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var ticketCardDescriptionVariants = classVarianceAuthority.cva(`${DOMAIN_TOKENS.text.lineClamp.two}`, {
+  variants: {
+    size: {
+      default: DOMAIN_TOKENS.spacing.section.subtitleToMetadata,
+      compact: DOMAIN_TOKENS.spacing.section.titleToSubtitle
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
 var ticketCardPriceCapacityContainerVariants = classVarianceAuthority.cva(
   // Base classes - flex layout, price/capacity spacing
   `flex items-center ${DOMAIN_TOKENS.priceCapacity.spacing}`,
@@ -15857,7 +16260,7 @@ var ticketCardPriceCapacityContainerVariants = classVarianceAuthority.cva(
 );
 var ticketCardPriceVariants = classVarianceAuthority.cva(
   // Base classes - price text color
-  `${DOMAIN_TOKENS.priceCapacity.text.primary} font-bold`,
+  `${DOMAIN_TOKENS.priceCapacity.text.primary} ${TEXT_TOKENS.fontWeight.bold}`,
   {
     variants: {
       size: {
@@ -15891,7 +16294,7 @@ var ticketCardCapacityVariants = classVarianceAuthority.cva(
 );
 var ticketCardAvailabilityVariants = classVarianceAuthority.cva(
   // Base classes - availability indicator styling
-  `inline-flex items-center ${DOMAIN_TOKENS.metadata.spacing.horizontal} ${TEXT_TOKENS.fontSize.xs} font-medium`,
+  `inline-flex items-center ${DOMAIN_TOKENS.metadata.spacing.horizontal} ${TEXT_TOKENS.fontSize.xs} ${TEXT_TOKENS.fontWeight.medium}`,
   {
     variants: {
       availability: {
@@ -15924,7 +16327,7 @@ var ticketCardFooterVariants = classVarianceAuthority.cva(
 );
 var ticketCardPurchaseButtonVariants = classVarianceAuthority.cva(
   // Base classes - flex layout, badge gradient, motion
-  `inline-flex items-center justify-center ${DOMAIN_TOKENS.badges.surface.featured} ${DOMAIN_TOKENS.badges.text.color} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.motion.hover.transition} font-semibold transform`,
+  `inline-flex items-center justify-center ${DOMAIN_TOKENS.badges.surface.featured} ${DOMAIN_TOKENS.badges.text.color} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.motion.hover.transition} ${TEXT_TOKENS.fontWeight.semibold} transform`,
   {
     variants: {
       size: {
@@ -15959,9 +16362,38 @@ var ticketCardPurchaseButtonIconVariants = classVarianceAuthority.cva(
     }
   }
 );
+var ticketCardImageOverlayVariants = classVarianceAuthority.cva(
+  `absolute inset-0 ${DOMAIN_TOKENS.image.overlay.gradient} opacity-0 ${MOTION_TOKENS.transition.opacity} ${MOTION_TOKENS.duration.normal} group-hover:opacity-100`,
+  {
+    variants: {
+      size: {
+        default: "",
+        compact: ""
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var ticketCardImageTransformVariants = classVarianceAuthority.cva(
+  `object-cover ${MOTION_TOKENS.transition.transform} ${MOTION_TOKENS.duration.slow} ${DOMAIN_TOKENS.motion.hover.scale}`,
+  {
+    variants: {
+      size: {
+        default: "",
+        compact: ""
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
 var TicketCard = React49__namespace.forwardRef(
   ({
     title,
+    date,
     description,
     price,
     capacity,
@@ -16008,57 +16440,368 @@ var TicketCard = React49__namespace.forwardRef(
       }
     };
     const availabilityLabel = getAvailabilityLabel();
+    const formattedDate = date ? formatDate(date) : null;
+    const dateTimeValue = (() => {
+      if (!date) return null;
+      if (typeof date === "string") {
+        return new Date(date).toISOString();
+      }
+      if (date instanceof Date) {
+        return date.toISOString();
+      }
+      return new Date(date).toISOString();
+    })();
     return /* @__PURE__ */ jsxRuntime.jsx(Box, { ...animationProps, children: /* @__PURE__ */ jsxRuntime.jsxs(
       CardBase,
       {
         ref,
         size: size3,
         variant: cardVariant,
-        className: cn("group relative", className),
+        className: cn(ticketCardVariants({ size: size3, variant: cardVariant }), className),
         ...props,
         children: [
           featured && featuredBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ticketCardBadgeVariants({ size: size3 }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: ticketCardBadgeSurfaceVariants({ variant: "featured" }), children: featuredBadgeText }) }),
           vipBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(ticketCardBadgeVariants({ size: size3 }), getVipBadgePosition()), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: ticketCardBadgeSurfaceVariants({ variant: "vip" }), children: vipBadgeText }) }),
           discountBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(ticketCardBadgeVariants({ size: size3 }), getDiscountBadgePosition()), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: ticketCardBadgeSurfaceVariants({ variant: "discount" }), children: discountBadgeText }) }),
-          showImage && /* @__PURE__ */ jsxRuntime.jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full overflow-hidden bg-gradient-to-br from-surface-elevated1 to-surface-elevated2", children: [
-            imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: imageUrl,
-                alt: title,
-                className: cn(
-                  "h-full w-full object-cover",
-                  DOMAIN_TOKENS.motion.hover.transition,
-                  DOMAIN_TOKENS.motion.hover.scale
-                )
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-              Icon2,
-              {
-                name: "info",
-                size: "xl",
-                color: "muted",
-                className: ICON_TOKENS.sizes["4xl"],
-                "aria-hidden": "true"
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
+          showImage && /* @__PURE__ */ jsxRuntime.jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "relative w-full overflow-hidden",
+                DOMAIN_TOKENS.image.placeholder.gradient
+              ),
+              children: [
+                imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: imageUrl,
+                    alt: title,
+                    className: cn("h-full w-full", ticketCardImageTransformVariants({ size: size3 }))
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Icon2,
+                  {
+                    name: "info",
+                    size: "xl",
+                    color: "muted",
+                    className: ICON_TOKENS.sizes["4xl"],
+                    "aria-hidden": "true"
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: ticketCardImageOverlayVariants({ size: size3 }) })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(CardBaseContentWrapper, { size: size3, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, className: ticketCardTitleVariants({ size: size3 }), children: href ? /* @__PURE__ */ jsxRuntime.jsx(Link, { href, variant: "ghost", children: title }) : title }),
+            formattedDate && dateTimeValue && /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: dateTimeValue, className: ticketCardDateVariants({ size: size3 }), children: formattedDate }),
+            description && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", variant: "muted", className: ticketCardDescriptionVariants({ size: size3 }), children: description }),
+            (price || capacity) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ticketCardPriceCapacityContainerVariants({ size: size3 }), children: [
+              price && /* @__PURE__ */ jsxRuntime.jsx(
+                Text,
+                {
+                  size: size3 === "compact" ? "md" : "lg",
+                  weight: "bold",
+                  className: ticketCardPriceVariants({ size: size3 }),
+                  children: price
+                }
+              ),
+              capacity && /* @__PURE__ */ jsxRuntime.jsx(
+                Text,
+                {
+                  size: size3 === "compact" ? "xs" : "sm",
+                  variant: "muted",
+                  className: ticketCardCapacityVariants({ size: size3 }),
+                  children: capacity
+                }
+              )
+            ] }),
+            availabilityLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ticketCardAvailabilityVariants({ availability }), children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", variant: availability === "sold_out" ? "muted" : "primary", children: availabilityLabel }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(CardBaseFooterWrapper, { size: size3, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", ticketCardFooterVariants({ size: size3 })), children: [
+            purchaseUrl && !isPurchaseDisabled && /* @__PURE__ */ jsxRuntime.jsxs(
+              Link,
               {
+                href: purchaseUrl,
                 className: cn(
-                  "absolute inset-0 opacity-0 transition-opacity duration-normal group-hover:opacity-100",
-                  DOMAIN_TOKENS.image.overlay.gradient
-                )
+                  "w-full",
+                  ticketCardPurchaseButtonVariants({ size: size3, disabled: false })
+                ),
+                target: "_blank",
+                rel: "noopener noreferrer",
+                children: [
+                  purchaseLabel,
+                  /* @__PURE__ */ jsxRuntime.jsx(IconArrowRight, { className: ticketCardPurchaseButtonIconVariants({ size: size3 }) })
+                ]
+              }
+            ),
+            (!purchaseUrl || isPurchaseDisabled) && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "w-full",
+                  ticketCardPurchaseButtonVariants({ size: size3, disabled: isPurchaseDisabled })
+                ),
+                children: [
+                  purchaseLabel,
+                  /* @__PURE__ */ jsxRuntime.jsx(IconArrowRight, { className: ticketCardPurchaseButtonIconVariants({ size: size3 }) })
+                ]
               }
             )
-          ] }) }),
+          ] }) })
+        ]
+      }
+    ) });
+  }
+);
+TicketCard.displayName = "TicketCard";
+var eventCardVariants = classVarianceAuthority.cva(
+  // Base classes - surface, border, radius, shadow, motion from tokens
+  `${DOMAIN_TOKENS.surface.bg.default} ${DOMAIN_TOKENS.surface.border.default} ${DOMAIN_TOKENS.surface.radius.default} ${DOMAIN_TOKENS.surface.shadow.default} ${DOMAIN_TOKENS.surface.bg.hover} ${DOMAIN_TOKENS.surface.border.hover} ${DOMAIN_TOKENS.surface.elevation.hover} ${DOMAIN_TOKENS.motion.hover.transition} overflow-hidden`,
+  {
+    variants: {
+      size: {
+        default: `${CARD_TOKENS.size.md.padding} ${DOMAIN_TOKENS.layout.gap.default}`,
+        compact: `${CARD_TOKENS.size.sm.padding} ${DOMAIN_TOKENS.layout.gap.compact}`
+      },
+      layout: {
+        vertical: "flex flex-col"
+      },
+      variant: {
+        default: "",
+        featured: `${DOMAIN_TOKENS.badges.surface.featured}`
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      layout: "vertical",
+      variant: "default"
+    }
+  }
+);
+var eventCardBadgeVariants = classVarianceAuthority.cva(
+  // Base classes - absolute positioning, z-index
+  "absolute z-10",
+  {
+    variants: {
+      size: {
+        default: DOMAIN_TOKENS.badges.position.default,
+        compact: DOMAIN_TOKENS.badges.position.compact
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var eventCardBadgeSurfaceVariants = classVarianceAuthority.cva(
+  // Base classes - flex layout, items center, badge styling from tokens
+  `inline-flex items-center ${DOMAIN_TOKENS.badges.radius} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.badges.size.sm} ${DOMAIN_TOKENS.badges.text.color} ${TEXT_TOKENS.fontSize.xs} ${TEXT_TOKENS.fontWeight.semibold}`,
+  {
+    variants: {
+      variant: {
+        default: DOMAIN_TOKENS.badges.surface.default,
+        featured: DOMAIN_TOKENS.badges.surface.featured
+      }
+    },
+    defaultVariants: {
+      variant: "featured"
+    }
+  }
+);
+var eventCardMetadataVariants = classVarianceAuthority.cva(
+  // Base classes - flex column, metadata spacing from tokens
+  `flex flex-col ${DOMAIN_TOKENS.metadata.spacing.vertical}`,
+  {
+    variants: {
+      size: {
+        default: "",
+        compact: ""
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var eventCardMetadataItemVariants = classVarianceAuthority.cva(
+  // Base classes - flex items center, metadata spacing and text from tokens
+  `flex items-center ${DOMAIN_TOKENS.metadata.spacing.horizontal} ${DOMAIN_TOKENS.metadata.text.secondary} ${TEXT_TOKENS.fontSize.xs}`,
+  {
+    variants: {
+      size: {
+        default: "",
+        compact: ""
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var eventCardMetadataIconVariants = classVarianceAuthority.cva(
+  // Base classes - icon size and color from tokens
+  `${DOMAIN_TOKENS.metadata.icon.sizeSm} ${DOMAIN_TOKENS.metadata.icon.default}`,
+  {
+    variants: {
+      size: {
+        default: "",
+        compact: ""
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var eventCardFooterVariants = classVarianceAuthority.cva(
+  // Base classes - border top, spacing from tokens
+  "border-t border-border",
+  {
+    variants: {
+      size: {
+        default: DOMAIN_TOKENS.spacing.footer.paddingTopDefault,
+        compact: DOMAIN_TOKENS.spacing.footer.paddingTopCompact
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var eventCardTicketButtonVariants = classVarianceAuthority.cva(
+  // Base classes - flex layout, badge gradient, motion from tokens
+  `inline-flex items-center justify-center ${DOMAIN_TOKENS.badges.surface.featured} ${DOMAIN_TOKENS.badges.text.color} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.motion.hover.transition} ${TEXT_TOKENS.fontWeight.semibold} transform`,
+  {
+    variants: {
+      size: {
+        default: DOMAIN_TOKENS.spacing.button.paddingDefault,
+        compact: DOMAIN_TOKENS.spacing.button.paddingCompact
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var eventCardTicketButtonIconVariants = classVarianceAuthority.cva(
+  // Base classes - icon size and spacing from tokens
+  `${DOMAIN_TOKENS.metadata.icon.sizeSm} ${DOMAIN_TOKENS.spacing.button.iconMarginLeft}`,
+  {
+    variants: {
+      size: {
+        default: "",
+        compact: ""
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var eventCardPriceVariants = classVarianceAuthority.cva(
+  // Base classes - price gradient text from tokens
+  `bg-gradient-to-r from-accent-500 to-primary-600 bg-clip-text text-transparent`,
+  {
+    variants: {
+      size: {
+        default: TEXT_TOKENS.fontSize.lg,
+        compact: TEXT_TOKENS.fontSize.md
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var EventCard = React49__namespace.forwardRef(
+  ({
+    title,
+    description,
+    date,
+    venueName,
+    price,
+    imageUrl,
+    href,
+    ticketUrl,
+    featured = false,
+    showImage = true,
+    getTicketsLabel,
+    featuredBadgeText,
+    size: size3 = "default",
+    layout = "vertical",
+    variant,
+    className,
+    animation,
+    ...props
+  }, ref) => {
+    const animationProps = resolveComponentAnimations({
+      animation: animation?.animation || "fadeInUp",
+      hoverAnimation: animation?.hoverAnimation || "hoverLift",
+      animationProps: animation?.animationProps
+    });
+    const cardVariant = variant || (featured ? "featured" : "default");
+    return /* @__PURE__ */ jsxRuntime.jsx(Box, { ...animationProps, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      CardBase,
+      {
+        ref,
+        size: size3,
+        variant: cardVariant,
+        className: cn(
+          eventCardVariants({ size: size3, layout, variant: cardVariant }),
+          "group relative",
+          className
+        ),
+        ...props,
+        children: [
+          featured && featuredBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: eventCardBadgeVariants({ size: size3 }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventCardBadgeSurfaceVariants({ variant: "featured" }), children: featuredBadgeText }) }),
+          showImage && /* @__PURE__ */ jsxRuntime.jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn("relative w-full overflow-hidden", DOMAIN_TOKENS.surface.bg.default),
+              children: [
+                imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: imageUrl,
+                    alt: title,
+                    className: cn(
+                      "h-full w-full object-cover",
+                      DOMAIN_TOKENS.motion.hover.transition,
+                      DOMAIN_TOKENS.motion.hover.scale
+                    )
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Icon2,
+                  {
+                    name: "info",
+                    size: "xl",
+                    color: "muted",
+                    className: ICON_TOKENS.sizes["4xl"],
+                    "aria-hidden": "true"
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "absolute inset-0 opacity-0 group-hover:opacity-100",
+                      DOMAIN_TOKENS.motion.hover.transition,
+                      DOMAIN_TOKENS.image.overlay.gradient
+                    )
+                  }
+                )
+              ]
+            }
+          ) }),
           /* @__PURE__ */ jsxRuntime.jsxs(CardBaseContentWrapper, { size: size3, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               Heading,
               {
                 level: 3,
                 className: cn(
-                  "line-clamp-2 transition-colors group-hover:text-primary",
+                  "line-clamp-2 group-hover:text-primary",
+                  DOMAIN_TOKENS.motion.hover.transition,
                   TEXT_TOKENS.fontSize.lg,
                   TEXT_TOKENS.fontWeight.bold,
                   DOMAIN_TOKENS.spacing.section.titleToSubtitle
@@ -16070,7 +16813,7 @@ var TicketCard = React49__namespace.forwardRef(
               Text,
               {
                 size: "sm",
-                variant: "muted",
+                muted: true,
                 className: cn(
                   "line-clamp-2",
                   size3 === "compact" ? DOMAIN_TOKENS.spacing.section.titleToSubtitle : DOMAIN_TOKENS.spacing.section.subtitleToMetadata
@@ -16078,49 +16821,57 @@ var TicketCard = React49__namespace.forwardRef(
                 children: description
               }
             ),
-            (price || capacity) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ticketCardPriceCapacityContainerVariants({ size: size3 }), children: [
-              price && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: size3 === "compact" ? "md" : "lg", weight: "bold", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: ticketCardPriceVariants({ size: size3 }), children: price }) }),
-              capacity && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: size3 === "compact" ? "xs" : "sm", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: ticketCardCapacityVariants({ size: size3 }), children: capacity }) })
-            ] }),
-            availabilityLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ticketCardAvailabilityVariants({ availability }), children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", variant: availability === "sold_out" ? "muted" : "primary", children: availabilityLabel }) })
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: eventCardMetadataVariants({ size: size3 }), children: [
+              date && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: eventCardMetadataItemVariants({ size: size3 }), role: "text", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  IconCalendar,
+                  {
+                    className: eventCardMetadataIconVariants({ size: size3 }),
+                    "aria-hidden": true
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", muted: true, children: /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: date, children: date }) })
+              ] }),
+              venueName && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: eventCardMetadataItemVariants({ size: size3 }), role: "text", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  IconLocation,
+                  {
+                    className: eventCardMetadataIconVariants({ size: size3 }),
+                    "aria-hidden": true
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", muted: true, className: "line-clamp-1", children: /* @__PURE__ */ jsxRuntime.jsx("address", { children: venueName }) })
+              ] })
+            ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(CardBaseFooterWrapper, { size: size3, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", ticketCardFooterVariants({ size: size3 })), children: [
-            purchaseUrl && !isPurchaseDisabled && /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(CardBaseFooterWrapper, { size: size3, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", eventCardFooterVariants({ size: size3 })), children: [
+            ticketUrl && /* @__PURE__ */ jsxRuntime.jsxs(
               Link,
               {
-                href: purchaseUrl,
-                className: cn(
-                  "w-full",
-                  ticketCardPurchaseButtonVariants({ size: size3, disabled: false })
-                ),
+                href: ticketUrl,
+                className: cn("w-full", eventCardTicketButtonVariants({ size: size3 })),
                 target: "_blank",
                 rel: "noopener noreferrer",
                 children: [
-                  purchaseLabel,
-                  /* @__PURE__ */ jsxRuntime.jsx(IconArrowRight, { className: ticketCardPurchaseButtonIconVariants({ size: size3 }) })
+                  getTicketsLabel,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    IconArrowRight,
+                    {
+                      className: eventCardTicketButtonIconVariants({ size: size3 }),
+                      "aria-hidden": true
+                    }
+                  )
                 ]
               }
             ),
-            (!purchaseUrl || isPurchaseDisabled) && /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: cn(
-                  "w-full",
-                  ticketCardPurchaseButtonVariants({ size: size3, disabled: isPurchaseDisabled })
-                ),
-                children: [
-                  purchaseLabel,
-                  /* @__PURE__ */ jsxRuntime.jsx(IconArrowRight, { className: ticketCardPurchaseButtonIconVariants({ size: size3 }) })
-                ]
-              }
-            )
+            !ticketUrl && price && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: size3 === "compact" ? "md" : "lg", weight: "bold", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventCardPriceVariants({ size: size3 }), children: price }) }) })
           ] }) })
         ]
       }
     ) });
   }
 );
-TicketCard.displayName = "TicketCard";
+EventCard.displayName = "EventCard";
 
 exports.ALERT_TOKENS = ALERT_TOKENS;
 exports.Alert = Alert;
@@ -16138,6 +16889,7 @@ exports.Card = Card;
 exports.CardBody = CardBody;
 exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
+exports.CategoryCard = CategoryCard;
 exports.Checkbox = Checkbox;
 exports.Code = Code;
 exports.Column = Column;