@tenerife.music/ui 1.0.8 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenerife.music/ui",
-  "version": "1.0.8",
+  "version": "1.0.12",
   "private": false,
   "type": "module",
   "sideEffects": [
@@ -46,7 +46,7 @@
     "ci:local": "./scripts/ci-local.sh",
     "test:ui": "vitest --ui",
     "ci:a11y": "pnpm test:a11y && pnpm a11y:contrast",
-    "build": "vite build",
+    "build": "tsup",
     "dev": "vite build --watch",
     "clean": "rimraf dist",
     "format:check": "prettier . --check",
@@ -159,11 +159,11 @@
     "semantic-release": "^25.0.2",
     "storybook": "^8.0.0",
     "tailwindcss": "^3.0.0",
+    "tsup": "^8.5.1",
     "tsx": "^4.19.2",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.47.0",
     "vite": "^5.0.0",
-    "vite-plugin-dts": "^4.0.0",
     "vitest": "^4.0.15",
     "vitest-axe": "^0.1.0"
   },

package/dist/animation/index.d.ts

@@ -1,8 +0,0 @@
-/**
- * Tenerife Animation System (TAS)
- *
- * Unified animation system exports
- */
-export * from './presets';
-export * from './tas';
-export * from './types';

package/dist/animation/presets.d.ts

@@ -1,301 +0,0 @@
-import { AnimationProps, PresetConfig } from './types';
-/**
- * Fade animation presets
- */
-export declare const fadePresets: {
-    /**
-     * Fade in animation
-     */
-    fadeIn: (config?: PresetConfig) => AnimationProps;
-    /**
-     * Fade out animation
-     */
-    fadeOut: (config?: PresetConfig) => AnimationProps;
-    /**
-     * Fade in from top
-     */
-    fadeInUp: (config?: PresetConfig & {
-        distance?: number;
-    }) => AnimationProps;
-    /**
-     * Fade in from bottom
-     */
-    fadeInDown: (config?: PresetConfig & {
-        distance?: number;
-    }) => AnimationProps;
-    /**
-     * Fade in from left
-     */
-    fadeInLeft: (config?: PresetConfig & {
-        distance?: number;
-    }) => AnimationProps;
-    /**
-     * Fade in from right
-     */
-    fadeInRight: (config?: PresetConfig & {
-        distance?: number;
-    }) => AnimationProps;
-};
-/**
- * Slide animation presets
- */
-export declare const slidePresets: {
-    /**
-     * Slide in from bottom
-     */
-    slideInUp: (config?: PresetConfig & {
-        distance?: number;
-    }) => AnimationProps;
-    /**
-     * Slide in from top
-     */
-    slideInDown: (config?: PresetConfig & {
-        distance?: number;
-    }) => AnimationProps;
-    /**
-     * Slide in from left
-     */
-    slideInLeft: (config?: PresetConfig & {
-        distance?: number;
-    }) => AnimationProps;
-    /**
-     * Slide in from right
-     */
-    slideInRight: (config?: PresetConfig & {
-        distance?: number;
-    }) => AnimationProps;
-    /**
-     * Slide out to top
-     */
-    slideOutUp: (config?: PresetConfig & {
-        distance?: number;
-    }) => AnimationProps;
-    /**
-     * Slide out to bottom
-     */
-    slideOutDown: (config?: PresetConfig & {
-        distance?: number;
-    }) => AnimationProps;
-    /**
-     * Slide out to left
-     */
-    slideOutLeft: (config?: PresetConfig & {
-        distance?: number;
-    }) => AnimationProps;
-    /**
-     * Slide out to right
-     */
-    slideOutRight: (config?: PresetConfig & {
-        distance?: number;
-    }) => AnimationProps;
-};
-/**
- * Scale animation presets
- */
-export declare const scalePresets: {
-    /**
-     * Scale in animation
-     */
-    scaleIn: (config?: PresetConfig & {
-        scale?: number;
-    }) => AnimationProps;
-    /**
-     * Scale out animation
-     */
-    scaleOut: (config?: PresetConfig & {
-        scale?: number;
-    }) => AnimationProps;
-    /**
-     * Scale up on hover
-     */
-    scaleUp: (config?: PresetConfig & {
-        scale?: number;
-    }) => AnimationProps;
-    /**
-     * Scale down on tap
-     */
-    scaleDown: (config?: PresetConfig & {
-        scale?: number;
-    }) => AnimationProps;
-};
-/**
- * Stagger animation helper
- * Note: Stagger animations are not directly supported in CSS-only approach.
- * This function is kept for API compatibility but returns empty className.
- * For stagger effects, apply animation classes to child elements with CSS delays.
- */
-export declare function createStagger(_staggerChildren?: number, _delayChildren?: number, config?: PresetConfig): AnimationProps;
-/**
- * Reveal on scroll preset
- * Uses Intersection Observer for scroll-triggered animations
- * Returns CSS class that should be applied when element is in view
- */
-export declare function revealOnScroll(config?: PresetConfig & {
-    threshold?: number;
-    rootMargin?: string;
-    triggerOnce?: boolean;
-    direction?: "up" | "down" | "left" | "right" | "fade";
-    distance?: number;
-}): AnimationProps;
-/**
- * Hover animation presets
- */
-export declare const hoverPresets: {
-    /**
-     * Lift up on hover (combines scale and y translation)
-     */
-    hoverLift: (config?: PresetConfig & {
-        scale?: number;
-        y?: number;
-    }) => AnimationProps;
-    /**
-     * Scale up on hover
-     */
-    hoverScale: (config?: PresetConfig & {
-        scale?: number;
-    }) => AnimationProps;
-    /**
-     * Scale down on tap
-     */
-    tapScale: (config?: PresetConfig & {
-        scale?: number;
-    }) => AnimationProps;
-};
-/**
- * Export all presets
- */
-export declare const presets: {
-    fade: {
-        /**
-         * Fade in animation
-         */
-        fadeIn: (config?: PresetConfig) => AnimationProps;
-        /**
-         * Fade out animation
-         */
-        fadeOut: (config?: PresetConfig) => AnimationProps;
-        /**
-         * Fade in from top
-         */
-        fadeInUp: (config?: PresetConfig & {
-            distance?: number;
-        }) => AnimationProps;
-        /**
-         * Fade in from bottom
-         */
-        fadeInDown: (config?: PresetConfig & {
-            distance?: number;
-        }) => AnimationProps;
-        /**
-         * Fade in from left
-         */
-        fadeInLeft: (config?: PresetConfig & {
-            distance?: number;
-        }) => AnimationProps;
-        /**
-         * Fade in from right
-         */
-        fadeInRight: (config?: PresetConfig & {
-            distance?: number;
-        }) => AnimationProps;
-    };
-    slide: {
-        /**
-         * Slide in from bottom
-         */
-        slideInUp: (config?: PresetConfig & {
-            distance?: number;
-        }) => AnimationProps;
-        /**
-         * Slide in from top
-         */
-        slideInDown: (config?: PresetConfig & {
-            distance?: number;
-        }) => AnimationProps;
-        /**
-         * Slide in from left
-         */
-        slideInLeft: (config?: PresetConfig & {
-            distance?: number;
-        }) => AnimationProps;
-        /**
-         * Slide in from right
-         */
-        slideInRight: (config?: PresetConfig & {
-            distance?: number;
-        }) => AnimationProps;
-        /**
-         * Slide out to top
-         */
-        slideOutUp: (config?: PresetConfig & {
-            distance?: number;
-        }) => AnimationProps;
-        /**
-         * Slide out to bottom
-         */
-        slideOutDown: (config?: PresetConfig & {
-            distance?: number;
-        }) => AnimationProps;
-        /**
-         * Slide out to left
-         */
-        slideOutLeft: (config?: PresetConfig & {
-            distance?: number;
-        }) => AnimationProps;
-        /**
-         * Slide out to right
-         */
-        slideOutRight: (config?: PresetConfig & {
-            distance?: number;
-        }) => AnimationProps;
-    };
-    scale: {
-        /**
-         * Scale in animation
-         */
-        scaleIn: (config?: PresetConfig & {
-            scale?: number;
-        }) => AnimationProps;
-        /**
-         * Scale out animation
-         */
-        scaleOut: (config?: PresetConfig & {
-            scale?: number;
-        }) => AnimationProps;
-        /**
-         * Scale up on hover
-         */
-        scaleUp: (config?: PresetConfig & {
-            scale?: number;
-        }) => AnimationProps;
-        /**
-         * Scale down on tap
-         */
-        scaleDown: (config?: PresetConfig & {
-            scale?: number;
-        }) => AnimationProps;
-    };
-    hover: {
-        /**
-         * Lift up on hover (combines scale and y translation)
-         */
-        hoverLift: (config?: PresetConfig & {
-            scale?: number;
-            y?: number;
-        }) => AnimationProps;
-        /**
-         * Scale up on hover
-         */
-        hoverScale: (config?: PresetConfig & {
-            scale?: number;
-        }) => AnimationProps;
-        /**
-         * Scale down on tap
-         */
-        tapScale: (config?: PresetConfig & {
-            scale?: number;
-        }) => AnimationProps;
-    };
-    stagger: typeof createStagger;
-    reveal: typeof revealOnScroll;
-};

package/dist/animation/tas.d.ts

@@ -1,24 +0,0 @@
-import { Duration, durations, Easing, easings, reducedMotion, Transition, transitions } from '../tokens/motion';
-/**
- * Check if user prefers reduced motion
- * Checks both system preference and global override
- */
-export declare function shouldReduceMotion(override?: boolean | "auto"): boolean;
-/**
- * Create CSS transition from tokens
- * Returns transition string using motion tokens
- */
-export declare function createTransition(transitionName?: Transition, customDuration?: Duration | string, customEasing?: Easing | string, reduceMotionOverride?: boolean | "auto"): string;
-/**
- * Check if animations should be enabled
- * Global check for animation enablement
- */
-export declare function shouldEnableAnimations(globalEnable?: boolean, reduceMotionOverride?: boolean | "auto"): boolean;
-/**
- * Export motion tokens for direct access
- */
-export { durations, easings, reducedMotion, transitions };
-/**
- * Export types
- */
-export type { Duration, Easing, Transition };

package/dist/animation/types.d.ts

@@ -1,67 +0,0 @@
-import { Spring as SpringToken } from '../tokens/motion';
-/**
- * Spring type re-exported for convenience
- */
-export type Spring = SpringToken;
-/**
- * Animation props for layout primitives
- * Returns CSS class names for Motion Tokens V2 animations
- */
-export interface AnimationProps {
-    /**
-     * CSS class name for the animation
-     * Maps to tm-motion-* utility classes
-     */
-    className?: string;
-}
-/**
- * Transition configuration
- */
-export interface TransitionConfig {
-    duration?: number | string;
-    ease?: string | number[];
-    delay?: number;
-    type?: "tween" | "spring" | "inertia" | "keyframes";
-    [key: string]: unknown;
-}
-/**
- * Spring configuration
- */
-export interface SpringConfig {
-    type: "spring";
-    stiffness?: number;
-    damping?: number;
-    mass?: number;
-    velocity?: number;
-    [key: string]: unknown;
-}
-/**
- * Animation preset configuration
- */
-export interface PresetConfig {
-    duration?: number | string;
-    delay?: number;
-    ease?: string | number[];
-    spring?: Spring | SpringConfig;
-    reducedMotion?: boolean | "auto";
-}
-/**
- * Component animation configuration
- * Allows components to accept animation presets as props
- */
-export interface ComponentAnimationConfig {
-    /**
-     * Animation preset for initial mount/entrance
-     * Can be a preset name string or CSS class name
-     */
-    animation?: "fadeIn" | "fadeInUp" | "fadeInDown" | "fadeInLeft" | "fadeInRight" | "slideInUp" | "slideInDown" | "slideInLeft" | "slideInRight" | "scaleIn" | string;
-    /**
-     * Animation preset for hover state
-     * Can be a preset name string or CSS class name
-     */
-    hoverAnimation?: "hoverLift" | "hoverScale" | "tapScale" | string;
-    /**
-     * Custom animation class name (overrides preset names)
-     */
-    animationProps?: AnimationProps;
-}

package/dist/animation/useInView.d.ts

@@ -1,36 +0,0 @@
-/**
- * useInView Hook
- *
- * Native Intersection Observer hook for scroll-triggered animations.
- * SSR-safe implementation that works without framer-motion.
- */
-export interface UseInViewOptions {
-    /**
-     * Trigger animation only once
-     */
-    once?: boolean;
-    /**
-     * Root margin for Intersection Observer
-     * e.g., "-100px" or "0px 0px -100px 0px"
-     */
-    margin?: string;
-    /**
-     * Threshold for intersection (0-1)
-     */
-    threshold?: number;
-}
-export interface UseInViewReturn {
-    /**
-     * Ref to attach to the element to observe
-     */
-    ref: React.RefObject<HTMLElement | null>;
-    /**
-     * Whether the element is currently in view
-     */
-    isInView: boolean;
-}
-/**
- * Hook to detect when an element enters the viewport
- * Uses native Intersection Observer API
- */
-export declare function useInView(options?: UseInViewOptions): UseInViewReturn;

package/dist/animation/utils.d.ts

@@ -1,6 +0,0 @@
-import { AnimationProps, ComponentAnimationConfig } from './types';
-/**
- * Resolve component animation config to AnimationProps
- * Merges animation, hoverAnimation, and custom animationProps
- */
-export declare function resolveComponentAnimations(config?: ComponentAnimationConfig): AnimationProps;

package/dist/brand-C5R2semX.js

@@ -1,45 +0,0 @@
-"use client";
-const o = {
-  name: "brand",
-  description: "Brand-specific theme with custom color palette",
-  // Override primary colors - warmer blue tones for brand
-  primaryColors: {
-    500: "210 75% 45%",
-    // Brighter, warmer blue
-    600: "210 70% 40%",
-    700: "210 65% 35%"
-  },
-  // Override accent colors - vibrant purple-pink gradient
-  accentColors: {
-    400: "285 75% 65%",
-    // Softer purple
-    500: "285 80% 60%",
-    // Vibrant purple-pink
-    600: "285 75% 55%"
-  },
-  // Override secondary colors - teal accent for brand
-  secondaryColors: {
-    400: "170 85% 50%",
-    // Brighter teal
-    500: "170 90% 45%",
-    // Vibrant teal (#00d9b8)
-    600: "170 85% 40%"
-  },
-  // Override semantic colors for day mode - brand-aligned colors
-  semanticColorsDay: {
-    success: "145 75% 40%",
-    // Brand-aligned green
-    info: "210 75% 50%"
-    // Brand primary blue
-  },
-  // Override semantic colors for night mode
-  semanticColorsNight: {
-    success: "145 70% 48%",
-    // Brighter brand green
-    info: "210 75% 55%"
-    // Brighter brand blue
-  }
-};
-export {
-  o as brandTheme
-};

package/dist/brand-DQb18Frh.cjs

@@ -1,2 +0,0 @@
-"use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"brand",description:"Brand-specific theme with custom color palette",primaryColors:{500:"210 75% 45%",600:"210 70% 40%",700:"210 65% 35%"},accentColors:{400:"285 75% 65%",500:"285 80% 60%",600:"285 75% 55%"},secondaryColors:{400:"170 85% 50%",500:"170 90% 45%",600:"170 85% 40%"},semanticColorsDay:{success:"145 75% 40%",info:"210 75% 50%"},semanticColorsNight:{success:"145 70% 48%",info:"210 75% 55%"}};exports.brandTheme=e;

package/dist/components/SectionBuilder.d.ts

@@ -1,36 +0,0 @@
-import { SectionBuilderProps } from './SectionBuilder.types';
-/**
- * SectionBuilder Component
- *
- * High-level component that composes layout primitives and core components
- * based on configuration objects. Enables developers to construct custom
- * marketing sections without writing repetitive markup.
- *
- * All styling uses design tokens - no raw CSS values or hardcoded styles.
- * Fully theme-aware and brand-compliant.
- */
-import * as React from "react";
-/**
- * SectionBuilder Component
- *
- * Composes sections from configuration objects using layout primitives
- * and core components. All styling uses design tokens.
- *
- * @example
- * ```tsx
- * <SectionBuilder
- *   config={{
- *     layout: {
- *       type: "split",
- *       left: "Left content",
- *       right: "Right content",
- *       imagePosition: "right",
- *     },
- *     background: { type: "surface", variant: "elevated1" },
- *     spacing: { paddingY: "xl" },
- *   }}
- * />
- * ```
- */
-export declare const SectionBuilder: React.ForwardRefExoticComponent<SectionBuilderProps & React.RefAttributes<HTMLElement>>;
-export type { SectionBuilderConfig, SectionBuilderProps } from './SectionBuilder.types';