@tenerife.music/ui 1.0.12 → 1.0.13

package/dist/tokens/index.mjs

@@ -3331,8 +3331,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 +3351,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"
+      }
     }
   },
   /**
@@ -4272,6 +4291,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 +6114,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, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenerife.music/ui",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "private": false,
   "type": "module",
   "sideEffects": [
@@ -39,6 +39,7 @@
     "access": "public"
   },
   "scripts": {
+    "storybook": "storybook dev -p 6006",
     "format": "prettier . --write",
     "lint:fix": "./scripts/lint-local.sh",
     "typecheck": "tsc --noEmit && tsc --noEmit --project tsconfig.vite.json",
@@ -50,17 +51,16 @@
     "dev": "vite build --watch",
     "clean": "rimraf dist",
     "format:check": "prettier . --check",
-    "lint": "eslint . --ext .ts,.tsx --fix --ignore-pattern '**/*.stories.*' --ignore-pattern '.storybook/**' --ignore-pattern 'storybook-static/**'",
-    "lint:check": "eslint . --ext .ts,.tsx --ignore-pattern '**/*.stories.*' --ignore-pattern '.storybook/**' --ignore-pattern 'storybook-static/**'",
+    "lint": "eslint . --ext .ts,.tsx --fix --ignore-pattern '**/*.stories.*' --ignore-pattern '.storybook/**' --ignore-pattern 'storybook-static/**' --ignore-pattern 'docs/**' --ignore-pattern '.cursor/**'",
+    "lint:check": "eslint . --ext .ts,.tsx --ignore-pattern '**/*.stories.*' --ignore-pattern '.storybook/**' --ignore-pattern 'storybook-static/**' --ignore-pattern 'docs/**' --ignore-pattern '.cursor/**'",
     "lint:ci": "./scripts/lint-ci.sh",
-    "lint:strict": "eslint . --ext .ts,.tsx --max-warnings=0 --ignore-pattern '**/*.stories.*' --ignore-pattern '.storybook/**' --ignore-pattern 'storybook-static/**'",
-    "lint:errors": "eslint . --ext .ts,.tsx --format stylish --ignore-pattern '**/*.stories.*' --ignore-pattern '.storybook/**' --ignore-pattern 'storybook-static/**'",
-    "precommit:lint": "eslint . --ext .ts,.tsx --fix --ignore-pattern '**/*.stories.*' --ignore-pattern '.storybook/**' --ignore-pattern 'storybook-static/**'",
+    "lint:strict": "eslint . --ext .ts,.tsx --max-warnings=0 --ignore-pattern '**/*.stories.*' --ignore-pattern '.storybook/**' --ignore-pattern 'storybook-static/**' --ignore-pattern 'docs/**' --ignore-pattern '.cursor/**'",
+    "lint:errors": "eslint . --ext .ts,.tsx --format stylish --ignore-pattern '**/*.stories.*' --ignore-pattern '.storybook/**' --ignore-pattern 'storybook-static/**' --ignore-pattern 'docs/**' --ignore-pattern '.cursor/**'",
+    "precommit:lint": "eslint . --ext .ts,.tsx --fix --ignore-pattern '**/*.stories.*' --ignore-pattern '.storybook/**' --ignore-pattern 'storybook-static/**' --ignore-pattern 'docs/**' --ignore-pattern '.cursor/**'",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "test:a11y": "vitest run a11y.test",
     "a11y:contrast": "tsx scripts/a11y-contrast-check.js",
-    "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "preview": "vite preview",
     "prepublishOnly": "npm run clean && npm run build && npm run typecheck",
@@ -88,6 +88,7 @@
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-context-menu": "^2.2.1",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.2",