@tenerife.music/ui 1.0.3 → 1.0.6

package/dist/components/containers/Card.d.ts

@@ -0,0 +1,75 @@
+import { BoxProps } from '../layout/Box';
+import { ResponsiveRadius, ResponsiveSpacing, ShadowValue } from '../layout/layout.types';
+/**
+ * Card Container Component
+ *
+ * Token-driven card component with Header, Body, and Footer subcomponents.
+ * Uses SURFACE_TOKENS + CARD_TOKENS for styling.
+ * All styling uses tokens exclusively (no raw CSS values).
+ */
+import * as React from "react";
+export interface CardProps extends Omit<BoxProps, "radius" | "shadow" | "p"> {
+    /**
+     * Card size - maps to CARD_TOKENS.size
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Border radius - token-based (overrides size default)
+     */
+    radius?: ResponsiveRadius;
+    /**
+     * Shadow - token-based (overrides size default)
+     */
+    shadow?: ShadowValue;
+    /**
+     * Padding - token-based (overrides size default)
+     */
+    p?: ResponsiveSpacing;
+}
+/**
+ * Card component - main container
+ */
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * CardHeader component - uses Stack for vertical spacing
+ */
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Card size - determines padding from CARD_TOKENS
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Padding - token-based (overrides size default)
+     */
+    p?: ResponsiveSpacing;
+}
+declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * CardBody component - main content area
+ */
+export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Card size - determines padding from CARD_TOKENS
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Padding - token-based (overrides size default)
+     */
+    p?: ResponsiveSpacing;
+}
+declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * CardFooter component - uses Row for horizontal layout
+ */
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Card size - determines padding from CARD_TOKENS
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Padding - token-based (overrides size default)
+     */
+    p?: ResponsiveSpacing;
+}
+declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardBody, CardFooter, CardHeader };

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

@@ -0,0 +1,31 @@
+import { StackProps } from '../layout/Stack';
+/**
+ * Section Container Component
+ *
+ * Token-driven section component for page/landing layout composition.
+ * Uses SECTION_TOKENS for padding and spacing.
+ * Uses Stack internally for content block composition.
+ * All styling uses tokens exclusively (no raw CSS values).
+ */
+import * as React from "react";
+export interface SectionProps extends Omit<StackProps, "py" | "gap"> {
+    /**
+     * Vertical padding - token-based (sm, md, lg, xl)
+     * Maps to SECTION_TOKENS.padding
+     */
+    padding?: "sm" | "md" | "lg" | "xl";
+    /**
+     * Gap spacing for content blocks - token-based (sm, md, lg, xl)
+     * Maps to SECTION_TOKENS.spacing
+     */
+    gap?: "sm" | "md" | "lg" | "xl";
+    /**
+     * Render as different HTML element
+     */
+    as?: keyof React.JSX.IntrinsicElements;
+}
+/**
+ * Section component - page/landing layout container
+ */
+declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLDivElement>>;
+export { Section };

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

@@ -0,0 +1,28 @@
+import { VariantProps } from 'class-variance-authority';
+import { BoxProps } from '../layout/Box';
+import { ResponsiveRadius, ResponsiveSpacing } from '../layout/layout.types';
+import * as React from "react";
+declare const surfaceVariants: (props?: ({
+    variant?: "outline" | "flat" | "raised" | "sunken" | "subtle" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SurfaceProps extends Omit<BoxProps, "bg" | "shadow" | "radius" | "p">, VariantProps<typeof surfaceVariants> {
+    /**
+     * Surface variant
+     */
+    variant?: "flat" | "raised" | "sunken" | "outline" | "subtle";
+    /**
+     * Padding - token-based (sm, md, lg, xl)
+     * Overrides default variant padding
+     */
+    p?: ResponsiveSpacing;
+    /**
+     * Border radius - token-based (sm, md, lg, xl, 2xl, 3xl, full)
+     * Overrides default variant radius
+     */
+    radius?: ResponsiveRadius;
+}
+/**
+ * Surface component - elevation variant container
+ */
+declare const Surface: React.ForwardRefExoticComponent<SurfaceProps & React.RefAttributes<HTMLDivElement>>;
+export { Surface, surfaceVariants };

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

@@ -0,0 +1,9 @@
+/**
+ * Container Components Exports
+ *
+ * Token-driven container components: Surface, Card, Section
+ * All components use tokens exclusively (no raw CSS values)
+ */
+export { Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, } from './Card';
+export { Section, type SectionProps } from './Section';
+export { Surface, type SurfaceProps, surfaceVariants } from './Surface';

package/dist/components/controls/LanguageSelector.d.ts

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

package/dist/components/data/List.d.ts

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

package/dist/components/data/Table.d.ts

@@ -12,4 +12,3 @@ interface TableProps<T> {
 }
 export declare const Table: <T extends Record<string, unknown>>({ data, columns, rowKey, className, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
-//# sourceMappingURL=Table.d.ts.map

package/dist/components/data/Timeline.d.ts

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

package/dist/components/data/data-list/DataList.d.ts

@@ -0,0 +1,29 @@
+/**
+ * DataList Root Component
+ *
+ * Mobile-first data list component for displaying key-value pairs.
+ * Uses Stack for vertical layout and DATA_TOKENS for spacing.
+ */
+import * as React from "react";
+export interface DataListRootProps extends React.HTMLAttributes<HTMLDListElement> {
+    /**
+     * Label width for desktop layout
+     * @default "md"
+     */
+    labelWidth?: "sm" | "md" | "lg";
+}
+/**
+ * DataList Root component
+ *
+ * @example
+ * ```tsx
+ * <DataList.Root>
+ *   <DataList.Item>
+ *     <DataList.Label>Name</DataList.Label>
+ *     <DataList.Value>John Doe</DataList.Value>
+ *   </DataList.Item>
+ * </DataList.Root>
+ * ```
+ */
+declare const DataListRoot: React.ForwardRefExoticComponent<DataListRootProps & React.RefAttributes<HTMLDListElement>>;
+export { DataListRoot };

package/dist/components/data/data-list/DataList.types.d.ts

@@ -0,0 +1,43 @@
+/**
+ * DataList Component Types
+ *
+ * TypeScript interfaces and types for DataList component.
+ */
+/**
+ * DataList Root component props
+ */
+export interface DataListRootProps extends React.HTMLAttributes<HTMLDListElement> {
+    /**
+     * Label width for desktop layout
+     * @default "md"
+     */
+    labelWidth?: "sm" | "md" | "lg";
+}
+/**
+ * DataList Item component props
+ */
+export interface DataListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Row padding
+     * @default "md"
+     */
+    padding?: "sm" | "md" | "lg";
+}
+/**
+ * DataList Label component props
+ */
+export interface DataListLabelProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Label text
+     */
+    children: React.ReactNode;
+}
+/**
+ * DataList Value component props
+ */
+export interface DataListValueProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Value content
+     */
+    children: React.ReactNode;
+}

package/dist/components/data/data-list/DataListItem.d.ts

@@ -0,0 +1,20 @@
+/**
+ * DataList Item Component
+ *
+ * Individual item in DataList (contains Label and Value).
+ */
+import * as React from "react";
+export interface DataListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Row padding
+     * @default "md"
+     */
+    padding?: "sm" | "md" | "lg";
+}
+/**
+ * DataList Item component
+ * Mobile: vertical layout (label above value)
+ * Desktop: horizontal layout (label left, value right)
+ */
+declare const DataListItem: React.ForwardRefExoticComponent<DataListItemProps & React.RefAttributes<HTMLDivElement>>;
+export { DataListItem };

package/dist/components/data/data-list/DataListLabel.d.ts

@@ -0,0 +1,19 @@
+/**
+ * DataList Label Component
+ *
+ * Label subcomponent for DataList items.
+ */
+import * as React from "react";
+export interface DataListLabelProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Label text
+     */
+    children: React.ReactNode;
+}
+/**
+ * DataList Label component
+ * Mobile: full width
+ * Desktop: fixed width (from tokens)
+ */
+declare const DataListLabel: React.ForwardRefExoticComponent<DataListLabelProps & React.RefAttributes<HTMLElement>>;
+export { DataListLabel };

package/dist/components/data/data-list/DataListValue.d.ts

@@ -0,0 +1,18 @@
+/**
+ * DataList Value Component
+ *
+ * Value subcomponent for DataList items.
+ */
+import * as React from "react";
+export interface DataListValueProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Value content
+     */
+    children: React.ReactNode;
+}
+/**
+ * DataList Value component
+ * Flex-grow to fill remaining space on desktop
+ */
+declare const DataListValue: React.ForwardRefExoticComponent<DataListValueProps & React.RefAttributes<HTMLElement>>;
+export { DataListValue };

package/dist/components/data/data-list/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * DataList Component
+ *
+ * Mobile-first data list component for displaying key-value pairs.
+ */
+export { DataListRoot, type DataListRootProps } from './DataList';
+export { DataListItem, type DataListItemProps } from './DataListItem';
+export { DataListLabel, type DataListLabelProps } from './DataListLabel';
+export { DataListValue, type DataListValueProps } from './DataListValue';
+export { DataListRoot as DataList } from './DataList';

package/dist/components/data/empty-state/EmptyState.d.ts

@@ -0,0 +1,31 @@
+/**
+ * EmptyState Component
+ *
+ * Token-driven empty state component for displaying empty or no-data states.
+ * Uses DATA_TOKENS for all spacing and sizing.
+ * Integrates with Surface and Stack components.
+ */
+import * as React from "react";
+export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Unique ID for accessibility (auto-generated if not provided)
+     */
+    id?: string;
+}
+/**
+ * EmptyState root component
+ *
+ * @example
+ * ```tsx
+ * <EmptyState>
+ *   <EmptyState.Icon>📭</EmptyState.Icon>
+ *   <EmptyState.Title>No items found</EmptyState.Title>
+ *   <EmptyState.Description>Try adjusting your filters</EmptyState.Description>
+ *   <EmptyState.Action>
+ *     <Button>Create Item</Button>
+ *   </EmptyState.Action>
+ * </EmptyState>
+ * ```
+ */
+declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+export { EmptyState };

package/dist/components/data/empty-state/EmptyState.types.d.ts

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+/**
+ * EmptyState root component props
+ */
+export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Unique ID for accessibility (auto-generated if not provided)
+     */
+    id?: string;
+}
+/**
+ * EmptyState Icon component props
+ */
+export interface EmptyStateIconProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Icon content (any ReactNode)
+     */
+    children: ReactNode;
+    /**
+     * Icon size
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * EmptyState Title component props
+ */
+export interface EmptyStateTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * Title text
+     */
+    children: ReactNode;
+}
+/**
+ * EmptyState Description component props
+ */
+export interface EmptyStateDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * Description text
+     */
+    children: ReactNode;
+}
+/**
+ * EmptyState Action component props
+ */
+export interface EmptyStateActionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Action button or link (typically Button component)
+     */
+    children: ReactNode;
+}

package/dist/components/data/empty-state/EmptyStateAction.d.ts

@@ -0,0 +1,17 @@
+/**
+ * EmptyState Action Component
+ *
+ * Action subcomponent for EmptyState (typically contains Button).
+ */
+import * as React from "react";
+export interface EmptyStateActionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Action button or link (typically Button component)
+     */
+    children: React.ReactNode;
+}
+/**
+ * EmptyState Action component
+ */
+declare const EmptyStateAction: React.ForwardRefExoticComponent<EmptyStateActionProps & React.RefAttributes<HTMLDivElement>>;
+export { EmptyStateAction };

package/dist/components/data/empty-state/EmptyStateDescription.d.ts

@@ -0,0 +1,17 @@
+/**
+ * EmptyState Description Component
+ *
+ * Description subcomponent for EmptyState.
+ */
+import * as React from "react";
+export interface EmptyStateDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * Description text
+     */
+    children: React.ReactNode;
+}
+/**
+ * EmptyState Description component
+ */
+declare const EmptyStateDescription: React.ForwardRefExoticComponent<EmptyStateDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export { EmptyStateDescription };

package/dist/components/data/empty-state/EmptyStateIcon.d.ts

@@ -0,0 +1,22 @@
+/**
+ * EmptyState Icon Component
+ *
+ * Icon subcomponent for EmptyState.
+ */
+import * as React from "react";
+export interface EmptyStateIconProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Icon content (any ReactNode)
+     */
+    children: React.ReactNode;
+    /**
+     * Icon size
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * EmptyState Icon component
+ */
+declare const EmptyStateIcon: React.ForwardRefExoticComponent<EmptyStateIconProps & React.RefAttributes<HTMLDivElement>>;
+export { EmptyStateIcon };

package/dist/components/data/empty-state/EmptyStateTitle.d.ts

@@ -0,0 +1,17 @@
+/**
+ * EmptyState Title Component
+ *
+ * Title subcomponent for EmptyState.
+ */
+import * as React from "react";
+export interface EmptyStateTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * Title text
+     */
+    children: React.ReactNode;
+}
+/**
+ * EmptyState Title component
+ */
+declare const EmptyStateTitle: React.ForwardRefExoticComponent<EmptyStateTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export { EmptyStateTitle };

package/dist/components/data/empty-state/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * EmptyState Component
+ *
+ * Token-driven empty state component for displaying empty or no-data states.
+ */
+export { EmptyState, type EmptyStateProps } from './EmptyState';
+export { EmptyStateAction, type EmptyStateActionProps } from './EmptyStateAction';
+export { EmptyStateDescription, type EmptyStateDescriptionProps } from './EmptyStateDescription';
+export { EmptyStateIcon, type EmptyStateIconProps } from './EmptyStateIcon';
+export { EmptyStateTitle, type EmptyStateTitleProps } from './EmptyStateTitle';

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

@@ -0,0 +1,9 @@
+/**
+ * Data Components
+ *
+ * Token-driven data display components: Table, DataList, Skeleton, EmptyState.
+ */
+export { Skeleton, type SkeletonProps, skeletonVariants } from './skeleton';
+export { EmptyState, EmptyStateAction, type EmptyStateActionProps, EmptyStateDescription, type EmptyStateDescriptionProps, EmptyStateIcon, type EmptyStateIconProps, type EmptyStateProps, EmptyStateTitle, type EmptyStateTitleProps, } from './empty-state';
+export { DataList, DataListItem, type DataListItemProps, DataListLabel, type DataListLabelProps, DataListRoot, type DataListRootProps, DataListValue, type DataListValueProps, } from './data-list';
+export { type SortDirection, type SortState, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, type TableColumn, type TableContextValue, TableEmpty, type TableEmptyProps, TableExpandableContent, type TableExpandableContentProps, TableHead, TableHeader, type TableHeaderProps, type TableHeadProps, TableLoadingState, type TableLoadingStateProps, TableRoot, type TableRootProps, TableRow, type TableRowProps, TableSortIcon, type TableSortIconProps, useTableContext, } from './table';

package/dist/components/data/skeleton/Skeleton.d.ts

@@ -0,0 +1,24 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const skeletonVariants: (props?: ({
+    variant?: "text" | "circle" | "inline" | "block" | "card" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
+    /**
+     * Whether to hide from screen readers
+     * @default true
+     */
+    "aria-hidden"?: boolean;
+}
+/**
+ * Skeleton component for loading states
+ *
+ * @example
+ * ```tsx
+ * <Skeleton variant="text" />
+ * <Skeleton variant="circle" />
+ * <Skeleton variant="card" />
+ * ```
+ */
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+export { Skeleton, skeletonVariants };

package/dist/components/data/skeleton/Skeleton.types.d.ts

@@ -0,0 +1,12 @@
+import { VariantProps } from 'class-variance-authority';
+import { skeletonVariants } from './Skeleton';
+/**
+ * Skeleton component props
+ */
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
+    /**
+     * Whether to hide from screen readers
+     * @default true
+     */
+    "aria-hidden"?: boolean;
+}

package/dist/components/data/skeleton/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Skeleton Component
+ *
+ * Token-driven skeleton loading component with multiple variants.
+ */
+export { Skeleton, type SkeletonProps, skeletonVariants } from './Skeleton';

package/dist/components/data/table/Table.d.ts

@@ -0,0 +1,33 @@
+import { TableContextValue, TableRootProps } from './Table.types';
+export declare function useTableContext(): TableContextValue;
+/**
+ * Table Root component
+ *
+ * @example
+ * ```tsx
+ * <Table.Root
+ *   data={users}
+ *   columns={columns}
+ *   rowKey="id"
+ *   sortable
+ * >
+ *   <Table.Header>
+ *     <Table.Row>
+ *       <Table.Head>Name</Table.Head>
+ *     </Table.Row>
+ *   </Table.Header>
+ *   <Table.Body>
+ *     {users.map((user) => (
+ *       <Table.Row key={user.id}>
+ *         <Table.Cell>{user.name}</Table.Cell>
+ *       </Table.Row>
+ *     ))}
+ *   </Table.Body>
+ * </Table.Root>
+ * ```
+ */
+declare function TableRoot<T extends Record<string, unknown>>({ data: _data, columns: _columns, rowKey: _rowKey, sortable: _sortable, expandable, renderExpandableContent, loading: _loading, emptyMessage: _emptyMessage, stickyHeader: _stickyHeader, rowSize: _rowSize, className, children, ...props }: TableRootProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace TableRoot {
+    var displayName: string;
+}
+export { TableRoot };