@tenerife.music/ui 1.0.3 → 1.0.6

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

@@ -0,0 +1,264 @@
+import { ReactNode } from 'react';
+/**
+ * Table column definition
+ */
+export interface TableColumn<T = Record<string, unknown>> {
+    /**
+     * Column key (must match a key in the data object)
+     */
+    key: keyof T;
+    /**
+     * Column header title
+     */
+    title: string;
+    /**
+     * Custom render function for cell content
+     */
+    render?: (value: T[keyof T], item: T, index: number) => ReactNode;
+    /**
+     * Column alignment
+     * @default "left"
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Column width (CSS value or Tailwind class)
+     */
+    width?: string;
+    /**
+     * Whether column is sortable
+     * @default false
+     */
+    sortable?: boolean;
+    /**
+     * Cell size
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * Sort direction
+ */
+export type SortDirection = "asc" | "desc" | null;
+/**
+ * Sort state
+ */
+export interface SortState {
+    /**
+     * Column key being sorted
+     */
+    column: string | null;
+    /**
+     * Sort direction
+     */
+    direction: SortDirection;
+}
+/**
+ * Table context value
+ */
+export interface TableContextValue {
+    /**
+     * Current sort state
+     */
+    sortState: SortState;
+    /**
+     * Set sort state
+     */
+    setSortState: (state: SortState) => void;
+    /**
+     * Expanded rows (for expandable rows)
+     */
+    expandedRows: Set<string | number>;
+    /**
+     * Toggle row expansion
+     */
+    toggleRow: (rowKey: string | number) => void;
+    /**
+     * Whether table has expandable rows
+     */
+    expandable?: boolean;
+    /**
+     * Render function for expandable content
+     */
+    renderExpandableContent?: (item: unknown, index: number) => ReactNode;
+}
+/**
+ * Table Root component props
+ */
+export interface TableRootProps<T = Record<string, unknown>> extends React.HTMLAttributes<HTMLTableElement> {
+    /**
+     * Table data array
+     */
+    data: T[];
+    /**
+     * Column definitions
+     */
+    columns: TableColumn<T>[];
+    /**
+     * Key to use for row identification
+     */
+    rowKey: keyof T | ((item: T, index: number) => string | number);
+    /**
+     * Whether table supports sorting
+     * @default false
+     */
+    sortable?: boolean;
+    /**
+     * Whether table supports expandable rows
+     * @default false
+     */
+    expandable?: boolean;
+    /**
+     * Render function for expandable content
+     */
+    renderExpandableContent?: (item: T, index: number) => ReactNode;
+    /**
+     * Whether table is in loading state
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Empty state message (shown when data is empty)
+     */
+    emptyMessage?: string;
+    /**
+     * Whether header is sticky
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /**
+     * Row size
+     * @default "md"
+     */
+    rowSize?: "sm" | "md" | "lg";
+}
+/**
+ * Table Header component props
+ */
+export interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    /**
+     * Whether header is sticky
+     * @default false
+     */
+    sticky?: boolean;
+}
+/**
+ * Table Head component props
+ */
+export interface TableHeadProps extends React.HTMLAttributes<HTMLTableCellElement> {
+    /**
+     * Column alignment
+     * @default "left"
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Whether column is sortable
+     * @default false
+     */
+    sortable?: boolean;
+    /**
+     * Column key (for sorting)
+     */
+    columnKey?: string;
+    /**
+     * Cell size
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * Table Body component props
+ */
+export interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+/**
+ * Table Row component props
+ */
+export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    /**
+     * Whether row is selected
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Whether row is expandable
+     * @default false
+     */
+    expandable?: boolean;
+    /**
+     * Row key (for expansion tracking)
+     */
+    rowKey?: string | number;
+    /**
+     * Whether row is expanded
+     * @default false
+     */
+    expanded?: boolean;
+}
+/**
+ * Table Cell component props
+ */
+export interface TableCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+    /**
+     * Cell alignment
+     * @default "left"
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Cell size
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * Table SortIcon component props
+ */
+export interface TableSortIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Sort direction
+     */
+    direction: SortDirection;
+}
+/**
+ * Table Empty component props
+ */
+export interface TableEmptyProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    /**
+     * Number of columns to span
+     */
+    colSpan: number;
+    /**
+     * Empty message
+     */
+    message?: string;
+}
+/**
+ * Table LoadingState component props
+ */
+export interface TableLoadingStateProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    /**
+     * Number of columns to span
+     */
+    colSpan: number;
+    /**
+     * Number of skeleton rows to show
+     * @default 5
+     */
+    rows?: number;
+}
+/**
+ * Table ExpandableContent component props
+ */
+export interface TableExpandableContentProps extends React.HTMLAttributes<HTMLTableCellElement> {
+    /**
+     * Number of columns to span
+     */
+    colSpan: number;
+    /**
+     * Whether content is expanded
+     */
+    expanded: boolean;
+    /**
+     * Content to render
+     */
+    children: ReactNode;
+}

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

@@ -0,0 +1,13 @@
+import { TableBodyProps } from './Table.types';
+/**
+ * Table Body Component
+ *
+ * Body section for table (tbody element).
+ */
+import * as React from "react";
+export type { TableBodyProps };
+/**
+ * Table Body component
+ */
+declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
+export { TableBody };

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

@@ -0,0 +1,13 @@
+import { TableCellProps } from './Table.types';
+/**
+ * Table Cell Component
+ *
+ * Table cell component with alignment and size support.
+ */
+import * as React from "react";
+export type { TableCellProps };
+/**
+ * Table Cell component
+ */
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+export { TableCell };

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

@@ -0,0 +1,13 @@
+import { TableEmptyProps } from './Table.types';
+/**
+ * Table Empty Component
+ *
+ * Empty state row for table (uses EmptyState component).
+ */
+import * as React from "react";
+export type { TableEmptyProps };
+/**
+ * Table Empty component
+ */
+declare const TableEmpty: React.ForwardRefExoticComponent<TableEmptyProps & React.RefAttributes<HTMLTableRowElement>>;
+export { TableEmpty };

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

@@ -0,0 +1,14 @@
+import { TableExpandableContentProps } from './Table.types';
+/**
+ * Table ExpandableContent Component
+ *
+ * Expandable content cell with CSS height transitions.
+ */
+import * as React from "react";
+export type { TableExpandableContentProps };
+/**
+ * Table ExpandableContent component
+ * Uses CSS height transitions (no framer-motion)
+ */
+declare const TableExpandableContent: React.ForwardRefExoticComponent<TableExpandableContentProps & React.RefAttributes<HTMLTableCellElement>>;
+export { TableExpandableContent };

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

@@ -0,0 +1,13 @@
+import { TableHeadProps } from './Table.types';
+/**
+ * Table Head Component
+ *
+ * Header cell component with sorting support.
+ */
+import * as React from "react";
+export type { TableHeadProps };
+/**
+ * Table Head component
+ */
+declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableCellElement>>;
+export { TableHead };

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

@@ -0,0 +1,13 @@
+import { TableHeaderProps } from './Table.types';
+/**
+ * Table Header Component
+ *
+ * Header section for table (thead element).
+ */
+import * as React from "react";
+export type { TableHeaderProps };
+/**
+ * Table Header component
+ */
+declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLTableSectionElement>>;
+export { TableHeader };

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

@@ -0,0 +1,13 @@
+import { TableLoadingStateProps } from './Table.types';
+/**
+ * Table LoadingState Component
+ *
+ * Loading state row for table (uses Skeleton component).
+ */
+import * as React from "react";
+export type { TableLoadingStateProps };
+/**
+ * Table LoadingState component
+ */
+declare const TableLoadingState: React.ForwardRefExoticComponent<TableLoadingStateProps & React.RefAttributes<HTMLTableRowElement>>;
+export { TableLoadingState };

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

@@ -0,0 +1,13 @@
+import { TableRowProps } from './Table.types';
+/**
+ * Table Row Component
+ *
+ * Table row component with hover and selected states.
+ */
+import * as React from "react";
+export type { TableRowProps };
+/**
+ * Table Row component
+ */
+declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+export { TableRow };

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

@@ -0,0 +1,14 @@
+import { TableSortIconProps } from './Table.types';
+/**
+ * Table SortIcon Component
+ *
+ * Sort indicator icon with rotation animation.
+ */
+import * as React from "react";
+export type { TableSortIconProps };
+/**
+ * Table SortIcon component
+ * Uses CSS rotation animation (no framer-motion)
+ */
+declare const TableSortIcon: React.ForwardRefExoticComponent<TableSortIconProps & React.RefAttributes<HTMLSpanElement>>;
+export { TableSortIcon };

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

@@ -0,0 +1,17 @@
+/**
+ * Table Component
+ *
+ * Token-driven table component with sorting, expandable rows, loading, and empty states.
+ */
+export { TableRoot, useTableContext } from './Table';
+export type { SortDirection, SortState, TableColumn, TableContextValue, TableRootProps, } from './Table.types';
+export { TableBody, type TableBodyProps } from './TableBody';
+export { TableCell, type TableCellProps } from './TableCell';
+export { TableEmpty, type TableEmptyProps } from './TableEmpty';
+export { TableExpandableContent, type TableExpandableContentProps } from './TableExpandableContent';
+export { TableHead, type TableHeadProps } from './TableHead';
+export { TableHeader, type TableHeaderProps } from './TableHeader';
+export { TableLoadingState, type TableLoadingStateProps } from './TableLoadingState';
+export { TableRow, type TableRowProps } from './TableRow';
+export { TableSortIcon, type TableSortIconProps } from './TableSortIcon';
+export { TableRoot as Table } from './Table';

package/dist/components/drawer/Drawer.d.ts

@@ -0,0 +1,41 @@
+import { DrawerBodyProps, DrawerFooterProps, DrawerHeaderProps, DrawerProps as DrawerPropsType } from './Drawer.types';
+import { drawerVariants } from './drawer-variants';
+/**
+ * Drawer Component
+ *
+ * Complete CVA-driven, tokenized, theme-aware drawer overlay with focus trap,
+ * keyboard controls, and portal rendering. Supports left, right, and bottom positions.
+ *
+ * Features:
+ * - Portal rendering for proper z-index stacking
+ * - Focus trap (loops focus inside drawer)
+ * - Escape key closes drawer
+ * - Overlay click optionally closes (prop controlled)
+ * - Theme-aware overlay opacity using tokens
+ * - Token-driven shadows, border radius, and spacing
+ * - Complete accessibility (role, aria-modal, aria-labelledby, aria-describedby)
+ * - Initial focus on first interactive element
+ * - Position variants: left, right, bottom
+ * - Size variants: sm, md, lg
+ */
+import * as React from "react";
+/**
+ * Drawer Header - Header section with spacing
+ */
+declare const DrawerHeader: React.ForwardRefExoticComponent<DrawerHeaderProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Drawer Body - Main content area
+ */
+declare const DrawerBody: React.ForwardRefExoticComponent<DrawerBodyProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Drawer Footer - Footer section with layout
+ */
+declare const DrawerFooter: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
+declare const Drawer: React.ForwardRefExoticComponent<DrawerPropsType & React.RefAttributes<HTMLDivElement>> & {
+    Content: React.ForwardRefExoticComponent<DrawerPropsType & React.RefAttributes<HTMLDivElement>>;
+    Header: React.ForwardRefExoticComponent<DrawerHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<DrawerBodyProps & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
+};
+export type { DrawerBackdropVariant, DrawerBodyProps, DrawerFooterProps, DrawerHeaderProps, DrawerPosition, DrawerProps, DrawerSize, } from './Drawer.types';
+export { Drawer, DrawerBody, DrawerFooter, DrawerHeader, drawerVariants };

package/dist/components/drawer/Drawer.types.d.ts

@@ -0,0 +1,75 @@
+import { VariantProps } from 'class-variance-authority';
+import { drawerVariants } from './drawer-variants';
+/**
+ * Drawer position variants
+ */
+export type DrawerPosition = "left" | "right" | "bottom";
+/**
+ * Drawer size variants
+ */
+export type DrawerSize = "sm" | "md" | "lg";
+/**
+ * Backdrop variant for drawer overlay
+ */
+export type DrawerBackdropVariant = "default" | "blurred" | "transparent";
+/**
+ * Drawer Props
+ * Main props interface for Drawer component
+ */
+export interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClick" | "role" | "aria-modal" | "aria-labelledby" | "aria-describedby">, VariantProps<typeof drawerVariants> {
+    /**
+     * Whether drawer is open
+     */
+    open: boolean;
+    /**
+     * Callback when drawer should close
+     */
+    onClose: () => void;
+    /**
+     * Drawer position variant
+     */
+    position?: DrawerPosition;
+    /**
+     * Drawer size variant
+     */
+    size?: DrawerSize;
+    /**
+     * Backdrop variant
+     */
+    backdropVariant?: DrawerBackdropVariant;
+    /**
+     * Whether to close on backdrop click
+     */
+    closeOnBackdropClick?: boolean;
+    /**
+     * Whether to close on escape key
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Element to return focus to when drawer closes
+     */
+    returnFocusRef?: React.RefObject<HTMLElement>;
+    /**
+     * ID for the drawer title (for aria-labelledby)
+     */
+    titleId?: string;
+    /**
+     * ID for the drawer description (for aria-describedby)
+     */
+    descriptionId?: string;
+}
+/**
+ * Drawer Header Props
+ */
+export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Drawer Body Props
+ */
+export interface DrawerBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Drawer Footer Props
+ */
+export interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}

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

@@ -0,0 +1,17 @@
+/**
+ * Drawer Variants
+ *
+ * CVA-based variant system for Drawer component.
+ * Supports positions (left, right, bottom), sizes (sm, md, lg),
+ * and transitions (appear, disappear).
+ * All styling uses token-based values with CSS variable references.
+ */
+/**
+ * Drawer Content Variants
+ * Main drawer container with position, size, and transition support
+ */
+export declare const drawerVariants: (props?: ({
+    position?: "left" | "right" | "bottom" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    transition?: "appear" | "disappear" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1,8 @@
+/**
+ * Drawer Component Exports
+ *
+ * Token-driven drawer component with Portal, Backdrop, and Surface integration.
+ * Supports position variants (left, right, bottom) and size variants (sm, md, lg).
+ */
+export { Drawer, DrawerBody, DrawerFooter, DrawerHeader, drawerVariants } from './Drawer';
+export type { DrawerBackdropVariant, DrawerBodyProps, DrawerFooterProps, DrawerHeaderProps, DrawerPosition, DrawerProps, DrawerSize, } from './Drawer.types';

package/dist/components/dropdown/Dropdown.d.ts

@@ -0,0 +1,38 @@
+import { DropdownItemProps, DropdownMenuProps, DropdownRootProps, DropdownTriggerProps } from './Dropdown.types';
+import * as React from "react";
+/**
+ * Dropdown Root Component
+ * Manages state and provides context for all Dropdown sub-components
+ */
+export declare function DropdownRoot({ open: controlledOpen, onOpenChange, defaultOpen, disabled, children, variant, size, }: DropdownRootProps & {
+    variant?: DropdownRootProps["variant"];
+    size?: DropdownRootProps["size"];
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace DropdownRoot {
+    var displayName: string;
+}
+/**
+ * Dropdown Trigger Component
+ * Button that opens/closes the dropdown
+ */
+export declare const DropdownTrigger: React.ForwardRefExoticComponent<DropdownTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Dropdown Menu Component
+ * Portal-rendered menu container with keyboard navigation
+ */
+export declare const DropdownMenu: React.ForwardRefExoticComponent<DropdownMenuProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Dropdown Item Component
+ * Individual menu item with roving tabindex
+ */
+export declare const DropdownItem: React.ForwardRefExoticComponent<DropdownItemProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Dropdown Component (Compound)
+ * Main export that combines all sub-components
+ */
+export declare const Dropdown: {
+    Root: typeof DropdownRoot;
+    Trigger: React.ForwardRefExoticComponent<DropdownTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Menu: React.ForwardRefExoticComponent<DropdownMenuProps & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<DropdownItemProps & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/components/dropdown/Dropdown.types.d.ts

@@ -0,0 +1,82 @@
+import { VariantProps } from 'class-variance-authority';
+import { dropdownItemVariants, dropdownMenuVariants, dropdownTriggerVariants } from './dropdown-variants';
+/**
+ * Dropdown Root Props
+ * Props for the DropdownRoot component that manages dropdown state
+ */
+export interface DropdownRootProps {
+    /**
+     * Controlled open state
+     */
+    open?: boolean;
+    /**
+     * Callback when open state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Default open state (uncontrolled)
+     */
+    defaultOpen?: boolean;
+    /**
+     * Disable the dropdown
+     */
+    disabled?: boolean;
+    /**
+     * Dropdown children
+     */
+    children: React.ReactNode;
+    /**
+     * Dropdown variant
+     */
+    variant?: "neutral" | "tinted";
+    /**
+     * Dropdown size
+     */
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * Dropdown Trigger Props
+ * Props for the DropdownTrigger component
+ */
+export interface DropdownTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof dropdownTriggerVariants> {
+    /**
+     * Render as child element
+     */
+    asChild?: boolean;
+    /**
+     * Dropdown trigger children
+     */
+    children: React.ReactNode;
+}
+/**
+ * Dropdown Menu Props
+ * Props for the DropdownMenu component
+ */
+export interface DropdownMenuProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof dropdownMenuVariants> {
+    /**
+     * Dropdown menu children
+     */
+    children: React.ReactNode;
+}
+/**
+ * Dropdown Item Props
+ * Props for the DropdownItem component
+ */
+export interface DropdownItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect">, VariantProps<typeof dropdownItemVariants> {
+    /**
+     * Whether the item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the item is selected
+     */
+    selected?: boolean;
+    /**
+     * Callback when item is selected
+     */
+    onSelect?: (event: Event) => void;
+    /**
+     * Dropdown item children
+     */
+    children: React.ReactNode;
+}