@tenerife.music/ui 1.0.3 → 1.0.6

package/dist/components/dropdown/dropdown-variants.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Dropdown Variants
+ *
+ * CVA-based variant system for Dropdown component.
+ * Supports variants (neutral, tinted), sizes (sm, md, lg), and states (open, closed, disabled).
+ * All styling uses token-based values with CSS variable references.
+ */
+/**
+ * Dropdown Trigger Variants
+ * Button element that opens/closes the dropdown
+ */
+export declare const dropdownTriggerVariants: (props?: ({
+    variant?: "neutral" | "tinted" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    state?: "disabled" | "closed" | "open" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Dropdown Menu Variants
+ * Container for the dropdown items
+ */
+export declare const dropdownMenuVariants: (props?: ({
+    variant?: "neutral" | "tinted" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Dropdown Item Variants
+ * Individual menu item
+ */
+export declare const dropdownItemVariants: (props?: ({
+    variant?: "neutral" | "tinted" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    state?: "disabled" | "default" | "selected" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/feedback/ConsentBanner.d.ts

@@ -6,4 +6,3 @@ interface ConsentBannerProps {
 }
 export declare const ConsentBanner: React.FC<ConsentBannerProps>;
 export {};
-//# sourceMappingURL=ConsentBanner.d.ts.map

package/dist/components/feedback/Progress.d.ts

@@ -6,4 +6,3 @@ interface ProgressProps {
 }
 export declare const Progress: React.FC<ProgressProps>;
 export {};
-//# sourceMappingURL=Progress.d.ts.map

package/dist/components/feedback/Skeleton.d.ts

@@ -4,4 +4,3 @@ interface SkeletonProps {
 }
 export declare const Skeleton: React.FC<SkeletonProps>;
 export {};
-//# sourceMappingURL=Skeleton.d.ts.map

package/dist/components/filters/DateRangePicker.d.ts

@@ -19,4 +19,3 @@ export declare function useDateRange(initialRange?: DateRange): {
     clearRange: () => void;
     isRangeComplete: Date | undefined;
 };
-//# sourceMappingURL=DateRangePicker.d.ts.map

package/dist/components/filters/FilterBar.d.ts

@@ -53,4 +53,3 @@ export interface FilterBarProps {
 }
 export declare function FilterBar({ className, showSearch, showCategory, showDateRange, showPriceRange, showSorting, categories, sortOptions, searchPlaceholder, filtersLabel, clearAllLabel, categoryLabel, allCategoriesLabel, dateRangeLabel, anyDateLabel, dateSelectDateRangeLabel, dateClearLabel, dateCloseLabel, sortByLabel, sortAscLabel, sortDescLabel, sortByPlaceholder, activeFiltersLabel, priceRangeLabel, priceMinLabel, priceMaxLabel, priceAnyLabel, priceClearLabel, priceMinAriaLabel, priceMaxAriaLabel, onFiltersChange, }: FilterBarProps): import("react/jsx-runtime").JSX.Element;
 export declare function FilterBarCompact({ className, ...props }: FilterBarProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=FilterBar.d.ts.map

package/dist/components/filters/FilterSelect.d.ts

@@ -21,4 +21,3 @@ export interface FilterSelectProps {
 }
 export declare function FilterSelect({ value, onValueChange, options, placeholder, label, className, }: FilterSelectProps): import("react/jsx-runtime").JSX.Element;
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
-//# sourceMappingURL=FilterSelect.d.ts.map

package/dist/components/filters/PriceRangeSlider.d.ts

@@ -25,4 +25,3 @@ export declare function usePriceRange(initialRange?: PriceRange): {
     clearRange: () => void;
     isRangeSet: boolean;
 };
-//# sourceMappingURL=PriceRangeSlider.d.ts.map

package/dist/components/filters/SearchFilters.d.ts

@@ -30,4 +30,3 @@ interface SearchFiltersProps {
 }
 export declare const SearchFilters: React.FC<SearchFiltersProps>;
 export {};
-//# sourceMappingURL=SearchFilters.d.ts.map

package/dist/components/filters/SearchInput.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-export interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> {
+export interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "size"> {
     value: string;
     onChange: (value: string) => void;
     onClear?: () => void;
@@ -14,4 +14,3 @@ export declare function useSearch(initialValue?: string): {
     setSearch: React.Dispatch<React.SetStateAction<string>>;
     clearSearch: () => void;
 };
-//# sourceMappingURL=SearchInput.d.ts.map

package/dist/components/filters/types.d.ts

@@ -46,4 +46,3 @@ export declare const useFilterManager: () => {
     hasActiveFilters: boolean;
     clearAllFilters: () => void;
 };
-//# sourceMappingURL=types.d.ts.map

package/dist/components/icon/Icon.d.ts

@@ -0,0 +1,32 @@
+import { VariantProps } from 'class-variance-authority';
+import { IconName } from '../../icons';
+import * as React from "react";
+declare const iconVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+    color?: "muted" | "default" | "success" | "warning" | "danger" | "info" | null | undefined;
+    stroke?: "normal" | "bold" | "thin" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface IconProps extends Omit<React.SVGProps<SVGSVGElement>, "color" | "stroke">, VariantProps<typeof iconVariants> {
+    /**
+     * Icon name from registry
+     */
+    name: IconName;
+    /**
+     * Render as child element (composition pattern)
+     * Uses Radix UI Slot for composition
+     */
+    asChild?: boolean;
+}
+/**
+ * Icon component
+ *
+ * Unified icon component with token-driven sizing, colors, and stroke.
+ * Supports SSR-safe rendering and tree-shakeable icon registry.
+ *
+ * @example
+ * ```tsx
+ * <Icon name="search" size="md" color="default" />
+ * ```
+ */
+declare const Icon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export { Icon, iconVariants };

package/dist/components/icon/Icon.types.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Icon Component Types
+ *
+ * Type definitions for the Icon component.
+ * Re-exports from Icon.tsx to maintain consistent export structure.
+ */
+export type { IconProps } from './Icon';

package/dist/components/icon/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Icon Component Exports
+ */
+export { Icon, type IconProps, iconVariants } from './Icon';

package/dist/components/icons/TrendingIcon.d.ts

@@ -4,4 +4,3 @@ interface TrendingIconProps {
 }
 export declare const TrendingIcon: React.FC<TrendingIconProps>;
 export {};
-//# sourceMappingURL=TrendingIcon.d.ts.map

package/dist/components/image/Image.d.ts

@@ -46,4 +46,3 @@ export interface ImageProps extends Omit<ImgProps, "className"> {
 }
 declare const ImageComponent: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLDivElement>>;
 export { ImageComponent as Image };
-//# sourceMappingURL=Image.d.ts.map

package/dist/components/input/Input.d.ts

@@ -0,0 +1,20 @@
+import { InputProps } from './Input.types';
+import * as React from "react";
+/**
+ * Input Component
+ *
+ * A fully accessible, theme-aware input component with variant support,
+ * icon slots, and comprehensive state management.
+ *
+ * @example
+ * ```tsx
+ * <Input
+ *   variant="outline"
+ *   size="md"
+ *   placeholder="Enter text..."
+ *   iconLeft={<Icon name="search" />}
+ * />
+ * ```
+ */
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input };

package/dist/components/input/Input.types.d.ts

@@ -0,0 +1,38 @@
+import { VariantProps } from 'class-variance-authority';
+import { inputVariants } from './input-variants';
+import * as React from "react";
+/**
+ * Input Component Props
+ *
+ * Extends native input HTML attributes with variant props, icon slots, and accessibility props.
+ */
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
+    /**
+     * Input variant style
+     * @default "outline"
+     */
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive";
+    /**
+     * Input size
+     * @default "md"
+     */
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    /**
+     * Input state
+     * @default "default"
+     */
+    state?: "default" | "disabled" | "error" | "success";
+    /**
+     * Whether input should take full width
+     * @default true
+     */
+    fullWidth?: boolean;
+    /**
+     * Icon to display on the left side of the input
+     */
+    iconLeft?: React.ReactNode;
+    /**
+     * Icon to display on the right side of the input
+     */
+    iconRight?: React.ReactNode;
+}

package/dist/components/input/index.d.ts

@@ -0,0 +1,3 @@
+export { Input } from './Input';
+export type { InputProps } from './Input.types';
+export { inputVariants } from './input-variants';

package/dist/components/input/input-variants.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Input Variants
+ *
+ * CVA-based variant system for Input component.
+ * Supports variants (primary, secondary, outline, ghost, destructive),
+ * sizes (xs, sm, md, lg, xl), and states (default, disabled, error, success).
+ * All styling uses token-based values with CSS variable references.
+ */
+export declare const inputVariants: (props?: ({
+    variant?: "primary" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+    state?: "disabled" | "default" | "success" | "error" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/input/legacy/input.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const inputVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    state?: "disabled" | "default" | "error" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input, inputVariants };

package/dist/components/layout/Box.d.ts

@@ -1,12 +1,22 @@
-import { AnimationProps } from '../../animation/types';
-import { ResponsiveColor, ResponsiveRadius, ResponsiveSpacing } from './layout.types';
+import { DisplayValue, FlexDirectionValue, ResponsiveColor, ResponsiveRadius, ResponsiveSpacing, ShadowValue } from './layout.types';
+/**
+ * Box Primitive Component
+ *
+ * Token-driven base container component with support for padding, margin,
+ * display, flex, grid, radius, and shadow. All styling uses token-based
+ * Tailwind classes only (no raw numeric values).
+ */
 import * as React from "react";
 /**
  * Box component props
  */
-export interface BoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof AnimationProps>, AnimationProps {
+export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Render as different HTML element
+     */
+    as?: keyof React.JSX.IntrinsicElements;
     /**
-     * Padding (all sides)
+     * Padding (all sides) - token-based (xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl)
      */
     p?: ResponsiveSpacing;
     /**
@@ -34,7 +44,7 @@ export interface BoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, key
      */
     pl?: ResponsiveSpacing;
     /**
-     * Margin (all sides)
+     * Margin (all sides) - token-based
      */
     m?: ResponsiveSpacing;
     /**
@@ -62,21 +72,40 @@ export interface BoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, key
      */
     ml?: ResponsiveSpacing;
     /**
-     * Background color
+     * Display type
      */
-    bg?: ResponsiveColor;
+    display?: DisplayValue;
+    /**
+     * Flex direction (when display is flex)
+     */
+    flexDirection?: FlexDirectionValue;
     /**
-     * Border radius
+     * Border radius - token-based (none, xs, sm, md, lg, xl, 2xl, 3xl, full)
      */
     radius?: ResponsiveRadius;
     /**
-     * As element - render as different HTML element
+     * Shadow - token-based (none, xs, sm, md, lg, xl, 2xl)
      */
-    as?: keyof React.JSX.IntrinsicElements;
+    shadow?: ShadowValue;
+    /**
+     * Background color - token-based
+     */
+    bg?: ResponsiveColor;
+    /**
+     * Gap (for flex/grid layouts) - token-based
+     */
+    gap?: ResponsiveSpacing;
+    /**
+     * Align items (for flex/grid layouts)
+     */
+    align?: "start" | "end" | "center" | "baseline" | "stretch";
+    /**
+     * Justify content (for flex/grid layouts)
+     */
+    justify?: "start" | "end" | "center" | "between" | "around" | "evenly";
 }
 /**
  * Box component
  */
 declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;
 export { Box };
-//# sourceMappingURL=Box.d.ts.map

package/dist/components/layout/Column.d.ts

@@ -0,0 +1,6 @@
+import { StackProps } from './Stack';
+/**
+ * Column component - alias for Stack (semantic name)
+ */
+export declare const Column: import('react').ForwardRefExoticComponent<StackProps & import('react').RefAttributes<HTMLDivElement>>;
+export type { StackProps as ColumnProps };

package/dist/components/layout/Container.d.ts

@@ -1,11 +1,10 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const containerVariants: (props?: ({
-    size?: "2xl" | "3xl" | "sm" | "md" | "lg" | "xl" | "full" | "4xl" | "5xl" | "6xl" | "7xl" | null | undefined;
+    size?: "2xl" | "3xl" | "4xl" | "5xl" | "sm" | "md" | "lg" | "xl" | "full" | "6xl" | "7xl" | null | undefined;
     padding?: "none" | "sm" | "md" | "lg" | "xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof containerVariants> {
 }
 declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
 export { Container, containerVariants };
-//# sourceMappingURL=Container.d.ts.map

package/dist/components/layout/Flex.d.ts

@@ -1,14 +1,14 @@
-import { VariantProps } from 'class-variance-authority';
-import { AnimationProps } from '../../animation/types';
+import { BoxProps } from './Box';
 import { ResponsiveAlignment, ResponsiveFlexDirection, ResponsiveFlexWrap, ResponsiveJustify, ResponsiveSpacing } from './layout.types';
+/**
+ * Flex Primitive Component
+ *
+ * Token-driven flexbox container with full control over direction, wrap,
+ * grow, shrink, basis, alignment, and spacing. Uses Box internally.
+ * All spacing values use tokens only.
+ */
 import * as React from "react";
-declare const flexVariants: (props?: ({
-    direction?: "row" | "column" | "row-reverse" | "column-reverse" | null | undefined;
-    wrap?: "nowrap" | "wrap" | "wrap-reverse" | null | undefined;
-    justify?: "start" | "end" | "center" | "between" | "around" | "evenly" | null | undefined;
-    align?: "start" | "end" | "center" | "baseline" | "stretch" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface FlexProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof AnimationProps>, Omit<VariantProps<typeof flexVariants>, "direction" | "wrap" | "justify" | "align">, AnimationProps {
+export interface FlexProps extends Omit<BoxProps, "display" | "flexDirection" | "align" | "justify"> {
     /**
      * Flex direction
      */
@@ -18,18 +18,33 @@ export interface FlexProps extends Omit<React.HTMLAttributes<HTMLDivElement>, ke
      */
     wrap?: ResponsiveFlexWrap;
     /**
-     * Justify content
+     * Flex grow (0 or 1, or use Tailwind flex-grow-*)
      */
-    justify?: ResponsiveJustify;
+    grow?: 0 | 1 | boolean;
+    /**
+     * Flex shrink (0 or 1, or use Tailwind flex-shrink-*)
+     */
+    shrink?: 0 | 1 | boolean;
+    /**
+     * Flex basis (CSS value or Tailwind class)
+     * Note: For token-based approach, use spacing tokens via className
+     */
+    basis?: string;
     /**
      * Align items
      */
     align?: ResponsiveAlignment;
     /**
-     * Gap between flex items (uses spacing tokens via CSS variables)
+     * Justify content
+     */
+    justify?: ResponsiveJustify;
+    /**
+     * Gap between flex items - token-based
      */
     gap?: ResponsiveSpacing;
 }
+/**
+ * Flex component
+ */
 declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
-export { Flex, flexVariants };
-//# sourceMappingURL=Flex.d.ts.map
+export { Flex };

package/dist/components/layout/Footer.d.ts

@@ -7,4 +7,3 @@ interface FooterProps {
 }
 export declare const Footer: React.FC<FooterProps>;
 export {};
-//# sourceMappingURL=Footer.d.ts.map

package/dist/components/layout/Grid.d.ts

@@ -1,39 +1,49 @@
-import { VariantProps } from 'class-variance-authority';
-import { AnimationProps } from '../../animation/types';
-import { ColumnValue, ResponsiveAlignment, ResponsiveColumns, ResponsiveFlow, ResponsiveJustify, ResponsiveRows, ResponsiveSpacing } from './layout.types';
+import { BoxProps } from './Box';
+import { ResponsiveAlignment, ResponsiveColumns, ResponsiveFlow, ResponsiveJustify, ResponsiveRows, ResponsiveSpacing } from './layout.types';
+/**
+ * Grid Primitive Component
+ *
+ * Token-driven CSS Grid container with support for columns, rows, gap,
+ * flow, and alignment. Uses Box internally. All spacing values use tokens only.
+ */
 import * as React from "react";
-declare const gridVariants: (props?: ({
-    cols?: 1 | 12 | "none" | 2 | 4 | 6 | 3 | 5 | null | undefined;
-    rows?: 1 | "none" | 2 | 4 | 6 | 3 | 5 | null | undefined;
-    align?: "start" | "end" | "center" | "baseline" | "stretch" | null | undefined;
-    justify?: "start" | "end" | "center" | "between" | "around" | "evenly" | null | undefined;
-    flow?: "row" | "col" | "dense" | "row-dense" | "col-dense" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof AnimationProps>, Omit<VariantProps<typeof gridVariants>, "cols" | "rows" | "gap" | "align" | "justify" | "flow">, AnimationProps {
+export interface GridProps extends Omit<BoxProps, "display" | "align" | "justify"> {
     /**
-     * Number of columns (base breakpoint)
+     * Number of columns (1-6, 12, or none)
      */
     cols?: ResponsiveColumns;
     /**
-     * Number of columns for medium breakpoint (768px+)
+     * Number of columns at sm breakpoint
      */
-    md?: ColumnValue;
+    sm?: 1 | 2 | 3 | 4 | 5 | 6 | 12 | "none";
     /**
-     * Number of columns for large breakpoint (1024px+)
+     * Number of columns at md breakpoint
      */
-    lg?: ColumnValue;
+    md?: 1 | 2 | 3 | 4 | 5 | 6 | 12 | "none";
     /**
-     * Number of columns for extra large breakpoint (1280px+)
+     * Number of columns at lg breakpoint
      */
-    xl?: ColumnValue;
+    lg?: 1 | 2 | 3 | 4 | 5 | 6 | 12 | "none";
     /**
-     * Number of rows
+     * Number of columns at xl breakpoint
+     */
+    xl?: 1 | 2 | 3 | 4 | 5 | 6 | 12 | "none";
+    /**
+     * Number of columns at 2xl breakpoint
+     */
+    "2xl"?: 1 | 2 | 3 | 4 | 5 | 6 | 12 | "none";
+    /**
+     * Number of rows (1-6 or none)
      */
     rows?: ResponsiveRows;
     /**
-     * Gap between grid items (uses spacing tokens via CSS variables)
+     * Gap between grid items - token-based (xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl)
      */
     gap?: ResponsiveSpacing;
+    /**
+     * Grid flow direction
+     */
+    flow?: ResponsiveFlow;
     /**
      * Align items
      */
@@ -42,11 +52,9 @@ export interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, ke
      * Justify content
      */
     justify?: ResponsiveJustify;
-    /**
-     * Grid flow
-     */
-    flow?: ResponsiveFlow;
 }
+/**
+ * Grid component
+ */
 declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
-export { Grid, gridVariants };
-//# sourceMappingURL=Grid.d.ts.map
+export { Grid };

package/dist/components/layout/ModeHero.d.ts

@@ -8,4 +8,3 @@ interface ModeHeroProps {
 }
 export declare const ModeHero: React.FC<ModeHeroProps>;
 export {};
-//# sourceMappingURL=ModeHero.d.ts.map

package/dist/components/layout/Navbar.d.ts

@@ -7,4 +7,3 @@ interface NavbarProps extends React.HTMLAttributes<HTMLElement> {
 }
 export declare const Navbar: React.FC<NavbarProps>;
 export {};
-//# sourceMappingURL=Navbar.d.ts.map

package/dist/components/layout/Row.d.ts

@@ -0,0 +1,28 @@
+import { BoxProps } from './Box';
+import { ResponsiveSpacing } from './layout.types';
+/**
+ * Row Primitive Component
+ *
+ * Token-driven horizontal layout component (flex row). Uses Box internally
+ * with flex display and row direction. All spacing uses token-based values.
+ */
+import * as React from "react";
+export interface RowProps extends Omit<BoxProps, "display" | "flexDirection"> {
+    /**
+     * Gap between row items - token-based (xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl)
+     */
+    gap?: ResponsiveSpacing;
+    /**
+     * Align items
+     */
+    align?: "start" | "end" | "center" | "baseline" | "stretch";
+    /**
+     * Justify content
+     */
+    justify?: "start" | "end" | "center" | "between" | "around" | "evenly";
+}
+/**
+ * Row component - horizontal layout using flex row
+ */
+declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLDivElement>>;
+export { Row };

package/dist/components/layout/Section.d.ts

@@ -8,4 +8,3 @@ interface SectionProps {
 }
 export declare const Section: React.FC<SectionProps>;
 export {};
-//# sourceMappingURL=Section.d.ts.map

package/dist/components/layout/Stack.d.ts

@@ -1,29 +1,38 @@
-import { VariantProps } from 'class-variance-authority';
-import { AnimationProps } from '../../animation/types';
-import { ResponsiveAlignment, ResponsiveJustify, ResponsiveSpacing, ResponsiveStackDirection } from './layout.types';
+import { BoxProps } from './Box';
+import { ResponsiveSpacing } from './layout.types';
+/**
+ * Stack Primitive Component
+ *
+ * Token-driven vertical layout component (flex column). Uses Box internally
+ * with flex display and column direction. All spacing uses token-based values.
+ */
 import * as React from "react";
-declare const stackVariants: (props?: ({
-    align?: "start" | "end" | "center" | "stretch" | null | undefined;
-    justify?: "start" | "end" | "center" | "between" | "around" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface StackProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof AnimationProps>, Omit<VariantProps<typeof stackVariants>, "align" | "justify">, AnimationProps {
+export interface StackProps extends Omit<BoxProps, "display" | "flexDirection" | "gap"> {
     /**
-     * Stack direction
+     * Stack direction - vertical (column) or horizontal (row)
      */
-    direction?: ResponsiveStackDirection;
+    direction?: "vertical" | "horizontal";
     /**
-     * Spacing between stack items (uses spacing tokens via CSS variables)
+     * Spacing between stack items - token-based (xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl)
+     * Alias for gap prop
      */
     spacing?: ResponsiveSpacing;
+    /**
+     * Gap between stack items - token-based (xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl)
+     * Alias for spacing prop
+     */
+    gap?: ResponsiveSpacing;
     /**
      * Align items
      */
-    align?: ResponsiveAlignment;
+    align?: "start" | "end" | "center" | "baseline" | "stretch";
     /**
      * Justify content
      */
-    justify?: ResponsiveJustify;
+    justify?: "start" | "end" | "center" | "between" | "around" | "evenly";
 }
+/**
+ * Stack component - vertical layout using flex column by default
+ */
 declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
-export { Stack, stackVariants };
-//# sourceMappingURL=Stack.d.ts.map
+export { Stack };

package/dist/components/layout/Surface.d.ts

@@ -0,0 +1,21 @@
+import { BoxProps } from './Box';
+import { SurfaceVariant } from './layout.types';
+import * as React from "react";
+declare const surfaceVariants: (props?: ({
+    variant?: "flat" | "raised" | "sunken" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SurfaceProps extends Omit<BoxProps, "bg" | "shadow"> {
+    /**
+     * Surface variant
+     */
+    variant?: SurfaceVariant;
+    /**
+     * Border radius - token-based
+     */
+    radius?: BoxProps["radius"];
+}
+/**
+ * Surface component - elevation variant component
+ */
+declare const Surface: React.ForwardRefExoticComponent<SurfaceProps & React.RefAttributes<HTMLDivElement>>;
+export { Surface, surfaceVariants };