@tenerife.music/ui 1.0.12 → 1.0.15

package/dist/tokens/index.mjs

@@ -682,6 +682,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
@@ -944,101 +1006,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
    */
@@ -1104,97 +1071,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
-    }
   }
 };
 
@@ -1539,7 +1415,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: {
     /**
@@ -1562,6 +1438,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
     }
   },
   /**
@@ -1784,6 +1694,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
+      }
+    }
   }
 };
 
@@ -1887,40 +1885,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
@@ -3331,8 +3295,9 @@ var TOAST_TOKENS = {
   },
   /**
    * Animation tokens for toast enter/exit animations
-   * Maps to Motion V2 utility classes
+   * Maps to Motion V2 utility classes and Radix data attributes
    * Uses CSS-only animations from motion/v2.ts
+   * Radix Toast provides data-[state=open] and data-[state=closed] attributes
    */
   animation: {
     enter: {
@@ -3350,6 +3315,24 @@ var TOAST_TOKENS = {
       // Motion V2 fade out
       combined: "tm-motion-fade-slide-left-out"
       // Motion V2 fade + slide left out
+    },
+    /**
+     * Radix Toast data attribute classes
+     * These are applied automatically by Radix based on toast state
+     */
+    radix: {
+      /**
+       * Base classes for Radix Toast Root
+       * Includes swipe handling and state-based animations
+       */
+      root: "data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out",
+      /**
+       * State-based animation classes
+       */
+      state: {
+        open: "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+        closed: "data-[state=closed]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full"
+      }
     }
   },
   /**
@@ -4182,6 +4165,14 @@ var DROPDOWN_TOKENS = {
       // 256px
     }
   },
+  /**
+   * Width tokens
+   * Common width utilities
+   */
+  width: {
+    full: "w-full"
+    // Full width (100%)
+  },
   /**
    * Item tokens by size
    * Individual menu item
@@ -4272,6 +4263,511 @@ var TOOLTIP_TOKENS = {
   }
 };
 
+// src/tokens/components/select.ts
+var SELECT_TOKENS = {
+  /**
+   * Select trigger heights by size
+   * Supports xs, sm, md, lg, xl sizes
+   */
+  trigger: {
+    height: {
+      xs: "h-7",
+      // 28px (1.75rem)
+      sm: "h-8",
+      // 32px (2rem)
+      md: "h-9",
+      // 36px (2.25rem) - default
+      lg: "h-10",
+      // 40px (2.5rem)
+      xl: "h-11"
+      // 44px (2.75rem)
+    },
+    padding: {
+      horizontal: {
+        xs: "px-xs",
+        // 4px (0.25rem)
+        sm: "px-sm",
+        // 8px (0.5rem)
+        md: "px-sm",
+        // 8px (0.5rem) - default
+        lg: "px-md",
+        // 16px (1rem)
+        xl: "px-lg"
+        // 24px (1.5rem)
+      },
+      vertical: {
+        xs: "py-xs",
+        // 4px (0.25rem)
+        sm: "py-xs",
+        // 4px (0.25rem)
+        md: "py-xs",
+        // 4px (0.25rem) - default
+        lg: "py-sm",
+        // 8px (0.5rem)
+        xl: "py-md"
+        // 16px (1rem)
+      }
+    },
+    radius: {
+      xs: "rounded-sm",
+      // 4px (0.25rem)
+      sm: "rounded-md",
+      // 6px (0.375rem)
+      md: "rounded-md",
+      // 6px (0.375rem) - default
+      lg: "rounded-md",
+      // 6px (0.375rem)
+      xl: "rounded-lg"
+      // 8px (0.5rem)
+    },
+    fontSize: {
+      xs: "text-xs",
+      // Maps to fontSize.xs[0]
+      sm: "text-sm",
+      // Maps to fontSize.sm[0]
+      md: "text-base",
+      // Maps to fontSize.base[0] - default
+      lg: "text-base",
+      // Maps to fontSize.base[0]
+      xl: "text-lg"
+      // Maps to fontSize.lg[0]
+    },
+    icon: {
+      size: "size-4",
+      // 16px (1rem)
+      gap: "gap-sm",
+      // 8px (0.5rem)
+      color: "text-[hsl(var(--muted-foreground))]"
+      // Icon color using CSS variable
+    }
+  },
+  /**
+   * Select content (dropdown) tokens
+   */
+  content: {
+    padding: {
+      xs: "p-xs",
+      // 4px (0.25rem)
+      sm: "p-sm",
+      // 8px (0.5rem)
+      md: "p-sm",
+      // 8px (0.5rem) - default
+      lg: "p-md",
+      // 16px (1rem)
+      xl: "p-lg"
+      // 24px (1.5rem)
+    },
+    radius: {
+      xs: "rounded-sm",
+      // 4px (0.25rem)
+      sm: "rounded-md",
+      // 6px (0.375rem)
+      md: "rounded-md",
+      // 6px (0.375rem) - default
+      lg: "rounded-md",
+      // 6px (0.375rem)
+      xl: "rounded-lg"
+      // 8px (0.5rem)
+    },
+    shadow: "shadow-md",
+    // Maps to elevationShadows.md
+    background: "bg-[hsl(var(--popover))]",
+    // Background using CSS var
+    text: "text-[hsl(var(--popover-foreground))]",
+    // Text color using CSS var
+    border: "border border-[hsl(var(--border))]",
+    // Border color using CSS var
+    maxHeight: "max-h-[384px]",
+    // Maximum height for scrollable content (24rem = 384px)
+    minWidth: "min-w-[128px]"
+    // Minimum width (8rem = 128px)
+  },
+  /**
+   * Select item tokens
+   */
+  item: {
+    padding: {
+      horizontal: {
+        xs: "px-xs",
+        // 4px (0.25rem)
+        sm: "px-sm",
+        // 8px (0.5rem)
+        md: "px-sm",
+        // 8px (0.5rem) - default
+        lg: "px-md",
+        // 16px (1rem)
+        xl: "px-lg"
+        // 24px (1.5rem)
+      },
+      vertical: {
+        xs: "py-xs",
+        // 4px (0.25rem)
+        sm: "py-xs",
+        // 4px (0.25rem)
+        md: "py-xs",
+        // 4px (0.25rem) - default
+        lg: "py-sm",
+        // 8px (0.5rem)
+        xl: "py-sm"
+        // 8px (0.5rem)
+      }
+    },
+    radius: {
+      xs: "rounded-[4px]",
+      // 4px (0.25rem) - using explicit value to avoid numeric class
+      sm: "rounded-[4px]",
+      // 4px (0.25rem)
+      md: "rounded-[4px]",
+      // 4px (0.25rem) - default
+      lg: "rounded-[4px]",
+      // 4px (0.25rem)
+      xl: "rounded-md"
+      // 6px (0.375rem)
+    },
+    fontSize: {
+      xs: "text-xs",
+      // Maps to fontSize.xs[0]
+      sm: "text-sm",
+      // Maps to fontSize.sm[0]
+      md: "text-sm",
+      // Maps to fontSize.sm[0] - default
+      lg: "text-sm",
+      // Maps to fontSize.sm[0]
+      xl: "text-base"
+      // Maps to fontSize.base[0]
+    },
+    indicator: {
+      size: "size-4",
+      // 16px (1rem)
+      position: "left-sm"
+      // 8px (0.5rem) from left
+    },
+    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
+    },
+    disabled: {
+      opacity: "opacity-50",
+      // Disabled opacity
+      pointerEvents: "pointer-events-none"
+      // Disable pointer events
+    }
+  },
+  /**
+   * Select label tokens
+   */
+  label: {
+    padding: {
+      horizontal: {
+        xs: "px-xs",
+        // 4px (0.25rem)
+        sm: "px-sm",
+        // 8px (0.5rem)
+        md: "px-sm",
+        // 8px (0.5rem) - default
+        lg: "px-md",
+        // 16px (1rem)
+        xl: "px-lg"
+        // 24px (1.5rem)
+      },
+      vertical: {
+        xs: "py-xs",
+        // 4px (0.25rem)
+        sm: "py-xs",
+        // 4px (0.25rem)
+        md: "py-xs",
+        // 4px (0.25rem) - default
+        lg: "py-sm",
+        // 8px (0.5rem)
+        xl: "py-sm"
+        // 8px (0.5rem)
+      }
+    },
+    fontSize: {
+      xs: "text-xs",
+      // Maps to fontSize.xs[0]
+      sm: "text-sm",
+      // Maps to fontSize.sm[0]
+      md: "text-sm",
+      // Maps to fontSize.sm[0] - default
+      lg: "text-sm",
+      // Maps to fontSize.sm[0]
+      xl: "text-base"
+      // Maps to fontSize.base[0]
+    },
+    fontWeight: "font-semibold"
+    // Semibold weight for labels
+  },
+  /**
+   * Select separator tokens
+   */
+  separator: {
+    margin: {
+      horizontal: {
+        xs: "-mx-xs",
+        // -4px
+        sm: "-mx-xs",
+        // -4px
+        md: "-mx-xs",
+        // -4px - default
+        lg: "-mx-sm",
+        // -8px
+        xl: "-mx-sm"
+        // -8px
+      },
+      vertical: {
+        xs: "my-xs",
+        // 4px (0.25rem)
+        sm: "my-xs",
+        // 4px (0.25rem)
+        md: "my-xs",
+        // 4px (0.25rem) - default
+        lg: "my-sm",
+        // 8px (0.5rem)
+        xl: "my-sm"
+        // 8px (0.5rem)
+      }
+    },
+    height: "h-px",
+    // 1px height
+    background: "bg-[hsl(var(--muted))]"
+    // Background using CSS var
+  },
+  /**
+   * 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
+    },
+    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
+    },
+    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: {
+    default: {
+      border: "border-[hsl(var(--input))]",
+      // Default border color using CSS var
+      background: "bg-transparent",
+      // Default background
+      text: "text-[hsl(var(--foreground))]"
+      // Default text color using CSS var
+    },
+    disabled: {
+      border: "border-[hsl(var(--input))]",
+      // Disabled state border (same as default)
+      background: "bg-transparent",
+      // Disabled background (same as default)
+      text: "text-[hsl(var(--foreground))] disabled:opacity-50",
+      // Disabled text opacity
+      cursor: "cursor-not-allowed"
+      // Disabled cursor
+    },
+    open: {
+      border: "border-[hsl(var(--ring))]",
+      // Open state border
+      focus: "focus-visible:shadow-[var(--focus-ring-default)]"
+      // Focus ring using CSS var
+    },
+    closed: {
+      border: "border-[hsl(var(--input))]"
+      // Closed state border
+    }
+  },
+  /**
+   * Width tokens
+   */
+  width: {
+    auto: "w-auto",
+    // Auto width
+    full: "w-full",
+    // Full width (100%)
+    sm: "w-48",
+    // 192px (12rem)
+    md: "w-64",
+    // 256px (16rem)
+    lg: "w-80",
+    // 320px (20rem)
+    xl: "w-96"
+    // 384px (24rem)
+  },
+  /**
+   * Size-based token structure
+   * Organized by size for easy access
+   */
+  size: {
+    xs: {
+      trigger: {
+        height: "h-7",
+        padding: {
+          horizontal: "px-xs",
+          vertical: "py-xs"
+        },
+        radius: "rounded-sm",
+        fontSize: "text-xs"
+      },
+      item: {
+        padding: {
+          horizontal: "px-xs",
+          vertical: "py-xs"
+        },
+        fontSize: "text-xs"
+      },
+      content: {
+        padding: "p-xs",
+        radius: "rounded-sm"
+      }
+    },
+    sm: {
+      trigger: {
+        height: "h-8",
+        padding: {
+          horizontal: "px-sm",
+          vertical: "py-xs"
+        },
+        radius: "rounded-md",
+        fontSize: "text-sm"
+      },
+      item: {
+        padding: {
+          horizontal: "px-sm",
+          vertical: "py-xs"
+        },
+        fontSize: "text-sm"
+      },
+      content: {
+        padding: "p-sm",
+        radius: "rounded-md"
+      }
+    },
+    md: {
+      trigger: {
+        height: "h-9",
+        padding: {
+          horizontal: "px-sm",
+          vertical: "py-xs"
+        },
+        radius: "rounded-md",
+        fontSize: "text-base"
+      },
+      item: {
+        padding: {
+          horizontal: "px-sm",
+          vertical: "py-xs"
+        },
+        fontSize: "text-sm"
+      },
+      content: {
+        padding: "p-sm",
+        radius: "rounded-md"
+      }
+    },
+    lg: {
+      trigger: {
+        height: "h-10",
+        padding: {
+          horizontal: "px-md",
+          vertical: "py-sm"
+        },
+        radius: "rounded-md",
+        fontSize: "text-base"
+      },
+      item: {
+        padding: {
+          horizontal: "px-md",
+          vertical: "py-sm"
+        },
+        fontSize: "text-sm"
+      },
+      content: {
+        padding: "p-md",
+        radius: "rounded-md"
+      }
+    },
+    xl: {
+      trigger: {
+        height: "h-11",
+        padding: {
+          horizontal: "px-lg",
+          vertical: "py-md"
+        },
+        radius: "rounded-lg",
+        fontSize: "text-lg"
+      },
+      item: {
+        padding: {
+          horizontal: "px-lg",
+          vertical: "py-sm"
+        },
+        fontSize: "text-base"
+      },
+      content: {
+        padding: "p-lg",
+        radius: "rounded-lg"
+      }
+    }
+  }
+};
+
 // src/tokens/motion/v2.ts
 var motionV2Durations = {
   fast: "150ms",
@@ -5590,4 +6086,4 @@ var tokenSystemSummary = {
 // src/tokens/theme.ts
 var UI_COLORS = tailwindThemeColors;
 
-export { ALERT_TOKENS, BUTTON_TOKENS, CARD_TOKENS, CHECKBOX_TOKENS, DATA_TOKENS, DOMAIN_TOKENS, DROPDOWN_TOKENS, ICON_TOKENS, INPUT_TOKENS, MENU_TOKENS, MOTION_TOKENS, NAVIGATION_TOKENS, NOTIFICATION_TOKENS, OVERLAY_TOKENS, POPOVER_TOKENS, RADIO_TOKENS, SECTION_TOKENS, SURFACE_TOKENS, SWITCH_TOKENS, TEXT_TOKENS, TOAST_TOKENS, TOOLTIP_TOKENS, UI_COLORS, accentColoredShadows, accentColors, allCSSVariables, allCSSVariablesCSS, animations, baseColors, borderRadius, chartColors, colorCSSVariables, componentRadius, componentShadowMapping, cssVariableColorTokens, durations, easings, elevationShadows, focusRings, fontFamily, fontSize, fontSizeWithMd, fontWeight, generateCSSVariablesCSS, glowEffects, keyframes, layoutSpacing, letterSpacing, lineHeight, motionCSSVariables, motionV2CSSVariables, motionV2Combined, motionV2Durations, motionV2Easings, motionV2Fade, motionV2Scale, motionV2Slide, motionV2TailwindConfig, motionV2Transitions, primaryColoredShadows, primaryColors, radiusCSSVariables, reducedMotion, secondaryColors, semanticColors, semanticSpacing, shadowBase, shadowCSSVariables, shadowOpacity, spacing, spacingCSSVariables, springs, surfaceColors, tailwindMotionConfig, tailwindRadiusConfig, tailwindShadowConfig, tailwindSpacingConfig, tailwindThemeColors, tailwindTypographyConfig, textColors, textStyles, tokenSystemSummary, transitions, typographyCSSVariables };
+export { ALERT_TOKENS, ARTIST_TOKENS, BUTTON_TOKENS, CARD_TOKENS, CHECKBOX_TOKENS, DATA_TOKENS, DOMAIN_TOKENS, DROPDOWN_TOKENS, ICON_TOKENS, INPUT_TOKENS, MENU_TOKENS, MOTION_TOKENS, NAVIGATION_TOKENS, NOTIFICATION_TOKENS, OVERLAY_TOKENS, POPOVER_TOKENS, RADIO_TOKENS, SECTION_TOKENS, SELECT_TOKENS, SURFACE_TOKENS, SWITCH_TOKENS, TEXT_TOKENS, TOAST_TOKENS, TOOLTIP_TOKENS, UI_COLORS, accentColoredShadows, accentColors, allCSSVariables, allCSSVariablesCSS, animations, baseColors, borderRadius, chartColors, colorCSSVariables, componentRadius, componentShadowMapping, cssVariableColorTokens, durations, easings, elevationShadows, focusRings, fontFamily, fontSize, fontSizeWithMd, fontWeight, generateCSSVariablesCSS, glowEffects, keyframes, layoutSpacing, letterSpacing, lineHeight, motionCSSVariables, motionV2CSSVariables, motionV2Combined, motionV2Durations, motionV2Easings, motionV2Fade, motionV2Scale, motionV2Slide, motionV2TailwindConfig, motionV2Transitions, primaryColoredShadows, primaryColors, radiusCSSVariables, reducedMotion, secondaryColors, semanticColors, semanticSpacing, shadowBase, shadowCSSVariables, shadowOpacity, spacing, spacingCSSVariables, springs, surfaceColors, tailwindMotionConfig, tailwindRadiusConfig, tailwindShadowConfig, tailwindSpacingConfig, tailwindThemeColors, tailwindTypographyConfig, textColors, textStyles, tokenSystemSummary, transitions, typographyCSSVariables };