@tenerife.music/ui 1.0.13 → 1.0.15

package/dist/index.mjs

@@ -699,6 +699,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
@@ -961,101 +1023,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
    */
@@ -1121,97 +1088,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
-    }
   }
 };
 
@@ -1556,7 +1432,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: {
     /**
@@ -1579,6 +1455,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
     }
   },
   /**
@@ -1801,6 +1711,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
+      }
+    }
   }
 };
 
@@ -1904,40 +1902,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
@@ -2151,35 +2115,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",
@@ -4218,6 +4364,14 @@ var DROPDOWN_TOKENS = {
       // 256px
     }
   },
+  /**
+   * Width tokens
+   * Common width utilities
+   */
+  width: {
+    full: "w-full"
+    // Full width (100%)
+  },
   /**
    * Item tokens by size
    * Individual menu item
@@ -5027,64 +5181,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 }
@@ -6347,6 +6789,13 @@ var UI_COLORS = tailwindThemeColors;
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function formatDate(date) {
+  return new Intl.DateTimeFormat("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  }).format(new Date(date));
+}
 var buttonVariants = 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`,
   {
@@ -8312,31 +8761,31 @@ var Radio = React49.forwardRef(
 );
 Radio.displayName = "Radio";
 var textareaVariants = 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: ""
       }
     },
@@ -8380,7 +8829,7 @@ var Textarea = React49.forwardRef(
     const currentLength = typeof currentValue === "string" ? currentValue.length : 0;
     const shouldShowCounter = showCharacterCount && maxLength !== void 0;
     if (shouldShowCounter) {
-      return /* @__PURE__ */ jsxs("div", { className: cn("relative", fullWidth !== false && INPUT_TOKENS.width.full), children: [
+      return /* @__PURE__ */ jsxs("div", { className: cn("relative", fullWidth !== false && TEXTAREA_TOKENS.width.full), children: [
         /* @__PURE__ */ jsx(
           "textarea",
           {
@@ -8400,11 +8849,11 @@ var Textarea = React49.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,
@@ -8965,7 +9414,7 @@ var labelVariants = cva(
 var Label2 = React49.forwardRef(
   ({ className, required, children, ...props }, ref) => /* @__PURE__ */ jsxs(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props, children: [
     children,
-    required && /* @__PURE__ */ jsx("span", { className: cn(INPUT_TOKENS.label.requiredMark, "ml-xs"), children: "*" })
+    required && /* @__PURE__ */ jsx("span", { className: cn(FORM_TOKENS.label.requiredMark, "ml-xs"), children: "*" })
   ] })
 );
 Label2.displayName = LabelPrimitive.Root.displayName;
@@ -10371,7 +10820,7 @@ var PopoverArrow = React49.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;
@@ -10502,7 +10951,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,
@@ -10947,7 +11396,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";
 }
@@ -11100,7 +11549,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;
@@ -13197,7 +13646,7 @@ var Skeleton = React49.forwardRef(
 Skeleton.displayName = "Skeleton";
 var EmptyStateAction = React49.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("mt-2", className), ...props, children });
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(EMPTY_STATE_TOKENS.spacing.action, className), ...props, children });
   }
 );
 EmptyStateAction.displayName = "EmptyStateAction";
@@ -13208,9 +13657,10 @@ var EmptyStateDescription = React49.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,
@@ -13222,16 +13672,12 @@ var EmptyStateDescription = React49.forwardRef(
 EmptyStateDescription.displayName = "EmptyStateDescription";
 var EmptyStateIcon = React49.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__ */ 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
       }
@@ -13246,9 +13692,9 @@ var EmptyStateTitle = React49.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,
@@ -13269,7 +13715,7 @@ var EmptyState = React49.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__ */ jsx(Stack, { gap: "md", align: "center", justify: "center", children })
@@ -13286,14 +13732,16 @@ var DataListItem = React49.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__ */ 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,
@@ -13310,9 +13758,9 @@ var DataListLabel = React49.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,
@@ -13324,13 +13772,21 @@ var DataListLabel = React49.forwardRef(
 DataListLabel.displayName = "DataListLabel";
 var DataListValue = React49.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("dd", { ref, className: cn("flex-1 text-muted-foreground", className), ...props, children });
+    return /* @__PURE__ */ jsx(
+      "dd",
+      {
+        ref,
+        className: cn(DATA_LIST_TOKENS.value.flex, DATA_LIST_TOKENS.value.color, className),
+        ...props,
+        children
+      }
+    );
   }
 );
 DataListValue.displayName = "DataListValue";
 var DataListRoot = React49.forwardRef(
   ({ labelWidth: _labelWidth = "md", className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("dl", { ref, className: cn(DATA_TOKENS.dataList.spacing.gap, className), ...props, children });
+    return /* @__PURE__ */ jsx("dl", { ref, className: cn(DATA_LIST_TOKENS.spacing.gap, className), ...props, children });
   }
 );
 DataListRoot.displayName = "DataListRoot";
@@ -13345,9 +13801,9 @@ var TableBody = React49.forwardRef(
 TableBody.displayName = "TableBody";
 var TableCell = React49.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",
@@ -13373,7 +13829,7 @@ var TableCell = React49.forwardRef(
 TableCell.displayName = "TableCell";
 var TableEmpty = React49.forwardRef(
   ({ colSpan, message = "No data available", className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("tr", { ref, className: cn(className), ...props, children: /* @__PURE__ */ jsx("td", { colSpan, className: "p-8", children: /* @__PURE__ */ jsxs(EmptyState, { children: [
+    return /* @__PURE__ */ jsx("tr", { ref, className: cn(className), ...props, children: /* @__PURE__ */ jsx("td", { colSpan, className: TABLE_TOKENS.empty.padding, children: /* @__PURE__ */ jsxs(EmptyState, { children: [
       /* @__PURE__ */ jsx(EmptyStateIcon, { children: "\u{1F4ED}" }),
       /* @__PURE__ */ jsx(EmptyStateTitle, { children: message })
     ] }) }) });
@@ -13388,13 +13844,22 @@ var TableExpandableContent = React49.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__ */ jsx("div", { className: cn("p-md", expanded ? "block" : "hidden"), children })
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              TABLE_TOKENS.expandable.padding,
+              expanded ? TABLE_TOKENS.expandable.content.expanded : TABLE_TOKENS.expandable.content.collapsed
+            ),
+            children
+          }
+        )
       }
     );
   }
@@ -13407,9 +13872,9 @@ var TableSortIcon = React49.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",
@@ -13456,9 +13921,9 @@ var TableHead = React49.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",
@@ -13475,9 +13940,10 @@ var TableHead = React49.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,
@@ -13489,7 +13955,7 @@ var TableHead = React49.forwardRef(
         })(),
         role: "columnheader",
         ...props,
-        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        children: /* @__PURE__ */ jsxs("div", { className: cn(TABLE_TOKENS.sortable.container, TABLE_TOKENS.sortable.gap), children: [
           children,
           sortable && /* @__PURE__ */ jsx(TableSortIcon, { direction: sortDirection })
         ] })
@@ -13504,7 +13970,7 @@ var TableHeader = React49.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
       }
@@ -13514,7 +13980,7 @@ var TableHeader = React49.forwardRef(
 TableHeader.displayName = "TableHeader";
 var TableLoadingState = React49.forwardRef(
   ({ colSpan, rows = 5, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: rows }).map((_, index2) => /* @__PURE__ */ jsx("tr", { ref: index2 === 0 ? ref : void 0, className: cn(className), ...props, children: Array.from({ length: colSpan }).map((_2, cellIndex) => /* @__PURE__ */ jsx("td", { className: "p-sm", children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", className: "w-full" }) }, cellIndex)) }, index2)) });
+    return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: rows }).map((_, index2) => /* @__PURE__ */ jsx("tr", { ref: index2 === 0 ? ref : void 0, className: cn(className), ...props, children: Array.from({ length: colSpan }).map((_2, cellIndex) => /* @__PURE__ */ jsx("td", { className: TABLE_TOKENS.loading.cellPadding, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", className: TABLE_TOKENS.loading.skeletonWidth }) }, cellIndex)) }, index2)) });
   }
 );
 TableLoadingState.displayName = "TableLoadingState";
@@ -13532,11 +13998,11 @@ var TableRow = React49.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,
@@ -13597,13 +14063,13 @@ function TableRoot({
     }),
     [sortState, expandedRows, toggleRow, expandable, renderExpandableContent]
   );
-  return /* @__PURE__ */ jsx(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: TABLE_TOKENS.layout.overflow, children: /* @__PURE__ */ 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",
@@ -15170,8 +15636,8 @@ var artistCardGenresVariants = cva(
   }
 );
 var artistCardFooterBorderVariants = 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: {
@@ -15231,37 +15697,49 @@ var ArtistCard = React49.forwardRef(
         ...props,
         children: [
           featured && popularBadgeText && /* @__PURE__ */ jsx("div", { className: artistCardBadgeVariants({ size: size3 }), children: /* @__PURE__ */ jsx("span", { className: artistCardBadgeSurfaceVariants({ size: size3, variant: "featured" }), children: popularBadgeText }) }),
-          showImage && /* @__PURE__ */ jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxs("div", { className: "relative w-full overflow-hidden bg-gradient-to-br from-muted to-muted/50", children: [
-            imageUrl ? /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: imageUrl,
-                alt: name,
-                className: cn("h-full w-full", artistCardImageTransformVariants({ size: size3 }))
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx(
-              Icon2,
-              {
-                name: "info",
-                size: "xl",
-                color: "muted",
-                className: ICON_TOKENS.sizes["4xl"],
-                "aria-hidden": "true"
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { className: artistCardImageOverlayVariants({ size: size3 }) })
-          ] }) }),
+          showImage && /* @__PURE__ */ jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                ARTIST_TOKENS.image.container.layout,
+                DOMAIN_TOKENS.image.placeholder.gradient
+              ),
+              children: [
+                imageUrl ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: imageUrl,
+                    alt: name,
+                    className: cn(
+                      ARTIST_TOKENS.image.sizing.full,
+                      artistCardImageTransformVariants({ size: size3 })
+                    )
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: ARTIST_TOKENS.image.placeholder.container, children: /* @__PURE__ */ jsx(
+                  Icon2,
+                  {
+                    name: "info",
+                    size: "xl",
+                    color: "muted",
+                    className: ICON_TOKENS.sizes["4xl"],
+                    "aria-hidden": "true"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { className: artistCardImageOverlayVariants({ size: size3 }) })
+              ]
+            }
+          ) }),
           /* @__PURE__ */ jsxs(CardBaseContentWrapper, { size: size3, children: [
             /* @__PURE__ */ 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__ */ jsx(Link, { href, variant: "ghost", children: name }) : name
@@ -15273,7 +15751,7 @@ var ArtistCard = React49.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
@@ -15335,16 +15813,16 @@ var ArtistCard = React49.forwardRef(
   }
 );
 ArtistCard.displayName = "ArtistCard";
-var eventCardBadgeVariants = cva(
+var categoryCardBadgeVariants = 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: {
@@ -15352,9 +15830,10 @@ var eventCardBadgeVariants = cva(
     }
   }
 );
-var eventCardBadgeSurfaceVariants = cva(
+var categoryCardBadgeSurfaceVariants = 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: {
@@ -15367,130 +15846,14 @@ var eventCardBadgeSurfaceVariants = cva(
     }
   }
 );
-var eventCardMetadataVariants = cva(
-  // Base classes - flex column, metadata spacing
-  `flex flex-col ${DOMAIN_TOKENS.metadata.spacing.vertical}`,
-  {
-    variants: {
-      size: {
-        default: "",
-        compact: ""
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var eventCardMetadataItemVariants = 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 = cva(
-  // Base classes - icon size and color
-  `${ICON_TOKENS.sizes.md} ${ICON_TOKENS.colors.muted}`,
-  {
-    variants: {
-      size: {
-        default: "",
-        compact: ""
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var eventCardFooterVariants = 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 = 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 = 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 = 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.forwardRef(
+var CategoryCard = React49.forwardRef(
   ({
     title,
     description,
-    date,
-    venueName,
-    price,
     imageUrl,
     href,
-    ticketUrl,
     featured = false,
     showImage = true,
-    getTicketsLabel,
     featuredBadgeText,
     size: size3 = "default",
     variant,
@@ -15513,46 +15876,57 @@ var EventCard = React49.forwardRef(
         className: cn("group relative", className),
         ...props,
         children: [
-          featured && featuredBadgeText && /* @__PURE__ */ jsx("div", { className: eventCardBadgeVariants({ size: size3 }), children: /* @__PURE__ */ jsx("span", { className: eventCardBadgeSurfaceVariants({ variant: "featured" }), children: featuredBadgeText }) }),
-          showImage && /* @__PURE__ */ jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxs("div", { className: "relative w-full overflow-hidden bg-gradient-to-br from-surface-elevated1 to-surface-elevated2", children: [
-            imageUrl ? /* @__PURE__ */ 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__ */ jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx(
-              Icon2,
-              {
-                name: "info",
-                size: "xl",
-                color: "muted",
-                className: ICON_TOKENS.sizes["4xl"],
-                "aria-hidden": "true"
-              }
-            ) }),
-            /* @__PURE__ */ 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__ */ jsx("div", { className: categoryCardBadgeVariants({ size: size3 }), children: /* @__PURE__ */ jsx("span", { className: categoryCardBadgeSurfaceVariants({ variant: "featured" }), children: featuredBadgeText }) }),
+          showImage && /* @__PURE__ */ jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "relative w-full overflow-hidden",
+                DOMAIN_TOKENS.image.placeholder.gradient
+              ),
+              children: [
+                imageUrl ? /* @__PURE__ */ 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__ */ jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx(
+                  Icon2,
+                  {
+                    name: "info",
+                    className: cn(ICON_TOKENS.sizes["4xl"], ICON_TOKENS.colors.muted),
+                    "aria-hidden": "true"
+                  }
+                ) }),
+                /* @__PURE__ */ 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__ */ jsxs(CardBaseContentWrapper, { size: size3, children: [
             /* @__PURE__ */ 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
@@ -15564,47 +15938,21 @@ var EventCard = React49.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__ */ jsxs("div", { className: eventCardMetadataVariants({ size: size3 }), children: [
-              date && /* @__PURE__ */ jsxs("div", { className: eventCardMetadataItemVariants({ size: size3 }), children: [
-                /* @__PURE__ */ jsx(IconCalendar, { className: eventCardMetadataIconVariants({ size: size3 }) }),
-                /* @__PURE__ */ jsx(Text, { size: "xs", muted: true, children: date })
-              ] }),
-              venueName && /* @__PURE__ */ jsxs("div", { className: eventCardMetadataItemVariants({ size: size3 }), children: [
-                /* @__PURE__ */ jsx(IconLocation, { className: eventCardMetadataIconVariants({ size: size3 }) }),
-                /* @__PURE__ */ jsx(Text, { size: "xs", muted: true, className: "line-clamp-1", children: venueName })
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(CardBaseFooterWrapper, { size: size3, children: /* @__PURE__ */ jsxs("div", { className: cn("w-full", eventCardFooterVariants({ size: size3 })), children: [
-            ticketUrl && /* @__PURE__ */ jsxs(
-              Link,
-              {
-                href: ticketUrl,
-                className: cn("w-full", eventCardTicketButtonVariants({ size: size3 })),
-                target: "_blank",
-                rel: "noopener noreferrer",
-                children: [
-                  getTicketsLabel,
-                  /* @__PURE__ */ jsx(IconArrowRight, { className: eventCardTicketButtonIconVariants({ size: size3 }) })
-                ]
-              }
-            ),
-            !ticketUrl && price && /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Text, { size: size3 === "compact" ? "md" : "lg", weight: "bold", children: /* @__PURE__ */ jsx("span", { className: eventCardPriceVariants({ size: size3 }), children: price }) }) })
-          ] }) })
+            )
+          ] })
         ]
       }
     ) });
   }
 );
-EventCard.displayName = "EventCard";
+CategoryCard.displayName = "CategoryCard";
 var promoCardBadgeVariants = cva(
   // Base classes - absolute positioning, z-index
   "absolute z-10",
@@ -15638,14 +15986,14 @@ var promoCardBadgeSurfaceVariants = cva(
   }
 );
 var promoCardCtaButtonVariants = 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
       }
     },
@@ -15777,6 +16125,22 @@ var PromoCard = React49.forwardRef(
   }
 );
 PromoCard.displayName = "PromoCard";
+var ticketCardVariants = cva("group relative", {
+  variants: {
+    size: {
+      default: "",
+      compact: ""
+    },
+    variant: {
+      default: "",
+      featured: ""
+    }
+  },
+  defaultVariants: {
+    size: "default",
+    variant: "default"
+  }
+});
 var ticketCardBadgeVariants = cva(
   // Base classes - absolute positioning, z-index
   "absolute z-10",
@@ -15784,7 +16148,7 @@ var ticketCardBadgeVariants = 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)
       }
@@ -15796,7 +16160,7 @@ var ticketCardBadgeVariants = cva(
 );
 var ticketCardBadgeSurfaceVariants = 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: {
@@ -15813,6 +16177,45 @@ var ticketCardBadgeSurfaceVariants = cva(
     }
   }
 );
+var ticketCardTitleVariants = 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 = 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 = 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 = cva(
   // Base classes - flex layout, price/capacity spacing
   `flex items-center ${DOMAIN_TOKENS.priceCapacity.spacing}`,
@@ -15830,7 +16233,7 @@ var ticketCardPriceCapacityContainerVariants = cva(
 );
 var ticketCardPriceVariants = cva(
   // Base classes - price text color
-  `${DOMAIN_TOKENS.priceCapacity.text.primary} font-bold`,
+  `${DOMAIN_TOKENS.priceCapacity.text.primary} ${TEXT_TOKENS.fontWeight.bold}`,
   {
     variants: {
       size: {
@@ -15864,7 +16267,7 @@ var ticketCardCapacityVariants = cva(
 );
 var ticketCardAvailabilityVariants = 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: {
@@ -15897,7 +16300,7 @@ var ticketCardFooterVariants = cva(
 );
 var ticketCardPurchaseButtonVariants = 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: {
@@ -15932,9 +16335,38 @@ var ticketCardPurchaseButtonIconVariants = cva(
     }
   }
 );
+var ticketCardImageOverlayVariants = 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 = 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.forwardRef(
   ({
     title,
+    date,
     description,
     price,
     capacity,
@@ -15981,57 +16413,368 @@ var TicketCard = React49.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__ */ jsx(Box, { ...animationProps, children: /* @__PURE__ */ 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__ */ jsx("div", { className: ticketCardBadgeVariants({ size: size3 }), children: /* @__PURE__ */ jsx("span", { className: ticketCardBadgeSurfaceVariants({ variant: "featured" }), children: featuredBadgeText }) }),
           vipBadgeText && /* @__PURE__ */ jsx("div", { className: cn(ticketCardBadgeVariants({ size: size3 }), getVipBadgePosition()), children: /* @__PURE__ */ jsx("span", { className: ticketCardBadgeSurfaceVariants({ variant: "vip" }), children: vipBadgeText }) }),
           discountBadgeText && /* @__PURE__ */ jsx("div", { className: cn(ticketCardBadgeVariants({ size: size3 }), getDiscountBadgePosition()), children: /* @__PURE__ */ jsx("span", { className: ticketCardBadgeSurfaceVariants({ variant: "discount" }), children: discountBadgeText }) }),
-          showImage && /* @__PURE__ */ jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxs("div", { className: "relative w-full overflow-hidden bg-gradient-to-br from-surface-elevated1 to-surface-elevated2", children: [
-            imageUrl ? /* @__PURE__ */ 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__ */ jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx(
-              Icon2,
-              {
-                name: "info",
-                size: "xl",
-                color: "muted",
-                className: ICON_TOKENS.sizes["4xl"],
-                "aria-hidden": "true"
-              }
-            ) }),
-            /* @__PURE__ */ jsx(
-              "div",
+          showImage && /* @__PURE__ */ jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "relative w-full overflow-hidden",
+                DOMAIN_TOKENS.image.placeholder.gradient
+              ),
+              children: [
+                imageUrl ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: imageUrl,
+                    alt: title,
+                    className: cn("h-full w-full", ticketCardImageTransformVariants({ size: size3 }))
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx(
+                  Icon2,
+                  {
+                    name: "info",
+                    size: "xl",
+                    color: "muted",
+                    className: ICON_TOKENS.sizes["4xl"],
+                    "aria-hidden": "true"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { className: ticketCardImageOverlayVariants({ size: size3 }) })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(CardBaseContentWrapper, { size: size3, children: [
+            /* @__PURE__ */ jsx(Heading, { level: 3, className: ticketCardTitleVariants({ size: size3 }), children: href ? /* @__PURE__ */ jsx(Link, { href, variant: "ghost", children: title }) : title }),
+            formattedDate && dateTimeValue && /* @__PURE__ */ jsx("time", { dateTime: dateTimeValue, className: ticketCardDateVariants({ size: size3 }), children: formattedDate }),
+            description && /* @__PURE__ */ jsx(Text, { size: "sm", variant: "muted", className: ticketCardDescriptionVariants({ size: size3 }), children: description }),
+            (price || capacity) && /* @__PURE__ */ jsxs("div", { className: ticketCardPriceCapacityContainerVariants({ size: size3 }), children: [
+              price && /* @__PURE__ */ jsx(
+                Text,
+                {
+                  size: size3 === "compact" ? "md" : "lg",
+                  weight: "bold",
+                  className: ticketCardPriceVariants({ size: size3 }),
+                  children: price
+                }
+              ),
+              capacity && /* @__PURE__ */ jsx(
+                Text,
+                {
+                  size: size3 === "compact" ? "xs" : "sm",
+                  variant: "muted",
+                  className: ticketCardCapacityVariants({ size: size3 }),
+                  children: capacity
+                }
+              )
+            ] }),
+            availabilityLabel && /* @__PURE__ */ jsx("div", { className: ticketCardAvailabilityVariants({ availability }), children: /* @__PURE__ */ jsx(Text, { size: "xs", variant: availability === "sold_out" ? "muted" : "primary", children: availabilityLabel }) })
+          ] }),
+          /* @__PURE__ */ jsx(CardBaseFooterWrapper, { size: size3, children: /* @__PURE__ */ jsxs("div", { className: cn("w-full", ticketCardFooterVariants({ size: size3 })), children: [
+            purchaseUrl && !isPurchaseDisabled && /* @__PURE__ */ 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__ */ jsx(IconArrowRight, { className: ticketCardPurchaseButtonIconVariants({ size: size3 }) })
+                ]
+              }
+            ),
+            (!purchaseUrl || isPurchaseDisabled) && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "w-full",
+                  ticketCardPurchaseButtonVariants({ size: size3, disabled: isPurchaseDisabled })
+                ),
+                children: [
+                  purchaseLabel,
+                  /* @__PURE__ */ jsx(IconArrowRight, { className: ticketCardPurchaseButtonIconVariants({ size: size3 }) })
+                ]
               }
             )
-          ] }) }),
+          ] }) })
+        ]
+      }
+    ) });
+  }
+);
+TicketCard.displayName = "TicketCard";
+var eventCardVariants = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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.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__ */ jsx(Box, { ...animationProps, children: /* @__PURE__ */ jsxs(
+      CardBase,
+      {
+        ref,
+        size: size3,
+        variant: cardVariant,
+        className: cn(
+          eventCardVariants({ size: size3, layout, variant: cardVariant }),
+          "group relative",
+          className
+        ),
+        ...props,
+        children: [
+          featured && featuredBadgeText && /* @__PURE__ */ jsx("div", { className: eventCardBadgeVariants({ size: size3 }), children: /* @__PURE__ */ jsx("span", { className: eventCardBadgeSurfaceVariants({ variant: "featured" }), children: featuredBadgeText }) }),
+          showImage && /* @__PURE__ */ jsx(CardBaseImageWrapper, { size: size3, children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn("relative w-full overflow-hidden", DOMAIN_TOKENS.surface.bg.default),
+              children: [
+                imageUrl ? /* @__PURE__ */ 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__ */ jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx(
+                  Icon2,
+                  {
+                    name: "info",
+                    size: "xl",
+                    color: "muted",
+                    className: ICON_TOKENS.sizes["4xl"],
+                    "aria-hidden": "true"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "absolute inset-0 opacity-0 group-hover:opacity-100",
+                      DOMAIN_TOKENS.motion.hover.transition,
+                      DOMAIN_TOKENS.image.overlay.gradient
+                    )
+                  }
+                )
+              ]
+            }
+          ) }),
           /* @__PURE__ */ jsxs(CardBaseContentWrapper, { size: size3, children: [
             /* @__PURE__ */ 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
@@ -16043,7 +16786,7 @@ var TicketCard = React49.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
@@ -16051,48 +16794,56 @@ var TicketCard = React49.forwardRef(
                 children: description
               }
             ),
-            (price || capacity) && /* @__PURE__ */ jsxs("div", { className: ticketCardPriceCapacityContainerVariants({ size: size3 }), children: [
-              price && /* @__PURE__ */ jsx(Text, { size: size3 === "compact" ? "md" : "lg", weight: "bold", children: /* @__PURE__ */ jsx("span", { className: ticketCardPriceVariants({ size: size3 }), children: price }) }),
-              capacity && /* @__PURE__ */ jsx(Text, { size: size3 === "compact" ? "xs" : "sm", children: /* @__PURE__ */ jsx("span", { className: ticketCardCapacityVariants({ size: size3 }), children: capacity }) })
-            ] }),
-            availabilityLabel && /* @__PURE__ */ jsx("div", { className: ticketCardAvailabilityVariants({ availability }), children: /* @__PURE__ */ jsx(Text, { size: "xs", variant: availability === "sold_out" ? "muted" : "primary", children: availabilityLabel }) })
+            /* @__PURE__ */ jsxs("div", { className: eventCardMetadataVariants({ size: size3 }), children: [
+              date && /* @__PURE__ */ jsxs("div", { className: eventCardMetadataItemVariants({ size: size3 }), role: "text", children: [
+                /* @__PURE__ */ jsx(
+                  IconCalendar,
+                  {
+                    className: eventCardMetadataIconVariants({ size: size3 }),
+                    "aria-hidden": true
+                  }
+                ),
+                /* @__PURE__ */ jsx(Text, { size: "xs", muted: true, children: /* @__PURE__ */ jsx("time", { dateTime: date, children: date }) })
+              ] }),
+              venueName && /* @__PURE__ */ jsxs("div", { className: eventCardMetadataItemVariants({ size: size3 }), role: "text", children: [
+                /* @__PURE__ */ jsx(
+                  IconLocation,
+                  {
+                    className: eventCardMetadataIconVariants({ size: size3 }),
+                    "aria-hidden": true
+                  }
+                ),
+                /* @__PURE__ */ jsx(Text, { size: "xs", muted: true, className: "line-clamp-1", children: /* @__PURE__ */ jsx("address", { children: venueName }) })
+              ] })
+            ] })
           ] }),
-          /* @__PURE__ */ jsx(CardBaseFooterWrapper, { size: size3, children: /* @__PURE__ */ jsxs("div", { className: cn("w-full", ticketCardFooterVariants({ size: size3 })), children: [
-            purchaseUrl && !isPurchaseDisabled && /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(CardBaseFooterWrapper, { size: size3, children: /* @__PURE__ */ jsxs("div", { className: cn("w-full", eventCardFooterVariants({ size: size3 })), children: [
+            ticketUrl && /* @__PURE__ */ 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__ */ jsx(IconArrowRight, { className: ticketCardPurchaseButtonIconVariants({ size: size3 }) })
+                  getTicketsLabel,
+                  /* @__PURE__ */ jsx(
+                    IconArrowRight,
+                    {
+                      className: eventCardTicketButtonIconVariants({ size: size3 }),
+                      "aria-hidden": true
+                    }
+                  )
                 ]
               }
             ),
-            (!purchaseUrl || isPurchaseDisabled) && /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cn(
-                  "w-full",
-                  ticketCardPurchaseButtonVariants({ size: size3, disabled: isPurchaseDisabled })
-                ),
-                children: [
-                  purchaseLabel,
-                  /* @__PURE__ */ jsx(IconArrowRight, { className: ticketCardPurchaseButtonIconVariants({ size: size3 }) })
-                ]
-              }
-            )
+            !ticketUrl && price && /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Text, { size: size3 === "compact" ? "md" : "lg", weight: "bold", children: /* @__PURE__ */ jsx("span", { className: eventCardPriceVariants({ size: size3 }), children: price }) }) })
           ] }) })
         ]
       }
     ) });
   }
 );
-TicketCard.displayName = "TicketCard";
+EventCard.displayName = "EventCard";
 
-export { ALERT_TOKENS, Alert, ArtistCard, BUTTON_TOKENS, Backdrop, Body, Box, Breadcrumbs, Button, CARD_TOKENS, CHECKBOX_TOKENS, Caption, Card, CardBody, CardFooter, CardHeader, Checkbox, Code, Column, Container, Surface2 as ContainerSurface, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DATA_TOKENS, DOMAIN_TOKENS, DROPDOWN_TOKENS, DataListRoot as DataList, DataListItem, DataListLabel, DataListRoot, DataListValue, Dialog, DialogBody, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, Display, DropdownMenuCheckItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateAction, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, EventCard, FieldRoot as Field, Flex, Grid, Heading, HoverCardContent, HoverCardRoot, HoverCardTrigger, ICONS_MAP, ICON_TOKENS, INPUT_TOKENS, Icon2 as Icon, IconArrowRight, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClose, IconError, IconInfo, IconLocation, IconMenu, IconSearch, IconSuccess, IconWarning, Input, Label2 as Label, Lead, MENU_TOKENS, MOTION_TOKENS, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalRoot, ModalTitle, ModalTrigger, NAVIGATION_TOKENS, NOTIFICATION_TOKENS, NotificationCenter, NotificationCenterDismissAll, NotificationCenterGroupHeader, NotificationCenterItem, NotificationCenterList, NotificationCenterPanel, NotificationCenterProvider, NotificationCenterTrigger, OVERLAY_TOKENS, POPOVER_TOKENS, Pagination, PopoverArrow, PopoverContent, PopoverRoot, PopoverTrigger, Portal3 as Portal, PromoCard, RADIO_TOKENS, Radio, RadioGroup, Row, SECTION_TOKENS, SURFACE_TOKENS, SWITCH_TOKENS, Section, SegmentedControl, Select, SelectContent, SelectGroup, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, SelectViewport, Skeleton, Stack, Stepper, Surface, TEXT_TOKENS, TOAST_TOKENS, TOOLTIP_TOKENS, TableRoot as Table, TableBody, TableCell, TableEmpty, TableExpandableContent, TableHead, TableHeader, TableLoadingState, TableRoot, TableRow, TableSortIcon, Tabs, Text, Textarea, TicketCard, Toast, ToastProvider, ToastViewport, UI_COLORS, accentColoredShadows, accentColors, alertVariants, allCSSVariables, allCSSVariablesCSS, animations, baseColors, bodyVariants, borderRadius, buttonVariants, captionVariants, chartColors, checkboxVariants, codeVariants, colorCSSVariables, componentRadius, componentShadowMapping, surfaceVariants2 as containerSurfaceVariants, cssVariableColorTokens, displayVariants, durations, easings, elevationShadows, focusRings, fontFamily, fontSize, fontSizeWithMd, fontWeight, generateCSSVariablesCSS, glowEffects, headingVariants, iconVariants, inputVariants, keyframes, labelVariants, layoutSpacing, leadVariants, letterSpacing, lineHeight, motionCSSVariables, motionV2CSSVariables, motionV2Combined, motionV2Durations, motionV2Easings, motionV2Fade, motionV2Scale, motionV2Slide, motionV2TailwindConfig, motionV2Transitions, popoverContentVariants, primaryColoredShadows, primaryColors, radioVariants, radiusCSSVariables, reducedMotion, secondaryColors, segmentedControlItemVariants, segmentedControlRootVariants, semanticColors, semanticSpacing, shadowBase, shadowCSSVariables, shadowOpacity, skeletonVariants, spacing, spacingCSSVariables, springs, surfaceColors, surfaceVariants, tailwindMotionConfig, tailwindRadiusConfig, tailwindShadowConfig, tailwindSpacingConfig, tailwindThemeColors, tailwindTypographyConfig, textColors, textStyles, textVariants, textareaVariants, tokenSystemSummary, transitions, typographyCSSVariables, useNotificationCenter, useNotificationCenterContext, useTableContext, useToast };
+export { ALERT_TOKENS, Alert, ArtistCard, BUTTON_TOKENS, Backdrop, Body, Box, Breadcrumbs, Button, CARD_TOKENS, CHECKBOX_TOKENS, Caption, Card, CardBody, CardFooter, CardHeader, CategoryCard, Checkbox, Code, Column, Container, Surface2 as ContainerSurface, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DATA_TOKENS, DOMAIN_TOKENS, DROPDOWN_TOKENS, DataListRoot as DataList, DataListItem, DataListLabel, DataListRoot, DataListValue, Dialog, DialogBody, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, Display, DropdownMenuCheckItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateAction, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, EventCard, FieldRoot as Field, Flex, Grid, Heading, HoverCardContent, HoverCardRoot, HoverCardTrigger, ICONS_MAP, ICON_TOKENS, INPUT_TOKENS, Icon2 as Icon, IconArrowRight, IconCalendar, IconCheck, IconChevronDown, IconChevronRight, IconClose, IconError, IconInfo, IconLocation, IconMenu, IconSearch, IconSuccess, IconWarning, Input, Label2 as Label, Lead, MENU_TOKENS, MOTION_TOKENS, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalRoot, ModalTitle, ModalTrigger, NAVIGATION_TOKENS, NOTIFICATION_TOKENS, NotificationCenter, NotificationCenterDismissAll, NotificationCenterGroupHeader, NotificationCenterItem, NotificationCenterList, NotificationCenterPanel, NotificationCenterProvider, NotificationCenterTrigger, OVERLAY_TOKENS, POPOVER_TOKENS, Pagination, PopoverArrow, PopoverContent, PopoverRoot, PopoverTrigger, Portal3 as Portal, PromoCard, RADIO_TOKENS, Radio, RadioGroup, Row, SECTION_TOKENS, SURFACE_TOKENS, SWITCH_TOKENS, Section, SegmentedControl, Select, SelectContent, SelectGroup, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, SelectViewport, Skeleton, Stack, Stepper, Surface, TEXT_TOKENS, TOAST_TOKENS, TOOLTIP_TOKENS, TableRoot as Table, TableBody, TableCell, TableEmpty, TableExpandableContent, TableHead, TableHeader, TableLoadingState, TableRoot, TableRow, TableSortIcon, Tabs, Text, Textarea, TicketCard, Toast, ToastProvider, ToastViewport, UI_COLORS, accentColoredShadows, accentColors, alertVariants, allCSSVariables, allCSSVariablesCSS, animations, baseColors, bodyVariants, borderRadius, buttonVariants, captionVariants, chartColors, checkboxVariants, codeVariants, colorCSSVariables, componentRadius, componentShadowMapping, surfaceVariants2 as containerSurfaceVariants, cssVariableColorTokens, displayVariants, durations, easings, elevationShadows, focusRings, fontFamily, fontSize, fontSizeWithMd, fontWeight, generateCSSVariablesCSS, glowEffects, headingVariants, iconVariants, inputVariants, keyframes, labelVariants, layoutSpacing, leadVariants, letterSpacing, lineHeight, motionCSSVariables, motionV2CSSVariables, motionV2Combined, motionV2Durations, motionV2Easings, motionV2Fade, motionV2Scale, motionV2Slide, motionV2TailwindConfig, motionV2Transitions, popoverContentVariants, primaryColoredShadows, primaryColors, radioVariants, radiusCSSVariables, reducedMotion, secondaryColors, segmentedControlItemVariants, segmentedControlRootVariants, semanticColors, semanticSpacing, shadowBase, shadowCSSVariables, shadowOpacity, skeletonVariants, spacing, spacingCSSVariables, springs, surfaceColors, surfaceVariants, tailwindMotionConfig, tailwindRadiusConfig, tailwindShadowConfig, tailwindSpacingConfig, tailwindThemeColors, tailwindTypographyConfig, textColors, textStyles, textVariants, textareaVariants, tokenSystemSummary, transitions, typographyCSSVariables, useNotificationCenter, useNotificationCenterContext, useTableContext, useToast };