themelia-react-ui 0.0.0-stage → 1.0.1

package/dist/components/features/table/partials/cell-renderers.d.ts

@@ -0,0 +1,141 @@
+/**
+ * Reusable cell renderers for DataTable columns.
+ *
+ * Use these from `column.cell` definitions to keep table preview pages and
+ * production code consistent. Every renderer is presentational (no data
+ * fetching) and accepts the value plus optional formatting hints.
+ *
+ *   { accessorKey: 'status', cell: ({ getValue }) => <StatusCell value={getValue()} map={STATUS_MAP} /> }
+ *   { accessorKey: 'createdAt', cell: ({ getValue }) => <DateCell value={getValue()} /> }
+ *   { accessorKey: 'amount', cell: ({ getValue }) => <CurrencyCell value={getValue()} currency="USD" /> }
+ *   { accessorKey: 'owner', cell: ({ getValue }) => <AvatarCell name={getValue()} /> }
+ */
+import type { ComponentType, ReactNode } from 'react';
+import { type LucideIcon } from 'lucide-react';
+import { type BadgeTone } from '../../../base/badge';
+import { type DateProps } from '../../../primitives';
+export interface StatusCellEntry {
+    /** Display label. */
+    label: ReactNode;
+    tone?: BadgeTone;
+    /** Leading glyph. */
+    icon?: LucideIcon;
+    dot?: boolean;
+}
+export interface StatusCellProps<TStatus extends string> {
+    /** The record's status. */
+    value?: TStatus | null;
+    /** Label and tone for every status this column can show. */
+    map: Record<TStatus, StatusCellEntry>;
+    /** Copy shown when the status is absent or missing from `map`. */
+    /** Copy shown when the value is absent. */
+    emptyLabel?: ReactNode;
+    /** Merged onto the outermost node. */
+    className?: string;
+}
+export declare function StatusCell<TStatus extends string>({ value, map, emptyLabel, className, }: StatusCellProps<TStatus>): import("react").JSX.Element;
+export declare namespace StatusCell {
+    var displayName: string;
+}
+export interface StatusClusterCellItem {
+    /** Stable identity for this entry. */
+    id?: string;
+    /** Display label. */
+    label: ReactNode;
+    tone?: BadgeTone;
+    /** Leading glyph. */
+    icon?: LucideIcon;
+    dot?: boolean;
+    hidden?: boolean;
+}
+export interface StatusClusterCellProps {
+    /** Status chips to show side by side in one cell. */
+    items?: readonly StatusClusterCellItem[];
+    /** Copy shown when there are no items. */
+    /** Copy shown when the value is absent. */
+    emptyLabel?: ReactNode;
+    /** Merged onto the outermost node. */
+    className?: string;
+    /** Merged onto the badge. */
+    badgeClassName?: string;
+}
+export declare function StatusClusterCell({ items, emptyLabel, className, badgeClassName, }: StatusClusterCellProps): import("react").JSX.Element;
+export declare namespace StatusClusterCell {
+    var displayName: string;
+}
+export interface DateCellProps {
+    /** The date to render. */
+    value?: DateProps['value'];
+    /** date-fns format string. Falls back to the Date primitive/provider default. */
+    format?: DateProps['format'];
+    /** Semantic Date primitive preset. */
+    preset?: DateProps['preset'];
+    /** date-fns locale override. Falls back to UIProvider dates. */
+    locale?: DateProps['locale'];
+    /** Renders the icon. */
+    showIcon?: boolean;
+    /** Leading glyph. */
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    /** Copy shown when the value is absent. */
+    emptyLabel?: ReactNode;
+    /** Merged onto the outermost node. */
+    className?: string;
+}
+export declare function DateCell({ value, format, preset, locale, showIcon, icon: IconComponent, emptyLabel, className, }: DateCellProps): import("react").JSX.Element;
+export declare namespace DateCell {
+    var displayName: string;
+}
+export interface DateMetaCellProps extends DateCellProps {
+    /** Second line under the date — pass a function to derive it from the value. */
+    secondary?: ReactNode | ((date: Date) => ReactNode);
+    /** Merged onto the primary. */
+    primaryClassName?: string;
+    /** Merged onto the secondary. */
+    secondaryClassName?: string;
+}
+export declare function DateMetaCell({ value, format, preset, locale, showIcon, icon: IconComponent, emptyLabel, className, primaryClassName, secondary, secondaryClassName, }: DateMetaCellProps): import("react").JSX.Element;
+export declare namespace DateMetaCell {
+    var displayName: string;
+}
+export interface CurrencyCellProps {
+    /** The amount to render. */
+    value?: number | string | null;
+    /** ISO currency code. */
+    currency?: string;
+    /** BCP 47 locale for the amount. */
+    locale?: string;
+    /** Copy shown when the amount is absent. */
+    /** Copy shown when the value is absent. */
+    emptyLabel?: ReactNode;
+    /** Merged onto the outermost node. */
+    className?: string;
+    /** Weight of the amount. */
+    weight?: 'regular' | 'medium' | 'semibold' | 'bold';
+}
+export declare function CurrencyCell({ value, currency, locale, emptyLabel, className, weight, }: CurrencyCellProps): import("react").JSX.Element;
+export declare namespace CurrencyCell {
+    var displayName: string;
+}
+export interface AvatarCellProps {
+    /** Display name. */
+    name?: string | null;
+    /** Avatar source. Falls back to initials when absent or broken. */
+    imageUrl?: string;
+    /** Leading glyph. */
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    /** Secondary line under the name. */
+    subtitle?: ReactNode;
+    /** Copy shown when the value is absent. */
+    emptyLabel?: ReactNode;
+    /** Merged onto the outermost node. */
+    className?: string;
+}
+export declare function AvatarCell({ name, imageUrl, icon: IconComponent, subtitle, emptyLabel, className, }: AvatarCellProps): import("react").JSX.Element;
+export declare namespace AvatarCell {
+    var displayName: string;
+}
+export { ResourceCell, type ResourceCellBadge, type ResourceCellLinkProps, type ResourceCellMetadataItem, type ResourceCellProps, } from './resource-cell';

package/dist/components/features/table/partials/cell-value.d.ts

@@ -0,0 +1,121 @@
+import { type ReactElement, type ReactNode } from 'react';
+import type { Locale } from 'date-fns';
+import { type FileSizeUnit, type MoneyProps } from '../../../primitives';
+export type CellValueKind = 'value' | 'secondary' | 'muted' | 'name' | 'mono' | 'link' | 'email' | 'phone' | 'url' | 'money' | 'number' | 'percent' | 'fileSize' | 'date' | 'time' | 'dateTime' | 'relativeTime';
+export type PrimitiveCellValue = string | number | Date | null | undefined;
+/**
+ * A value plus the formatting needed to render it.
+ *
+ * `kind` selects the display primitive; every other option applies only to the
+ * kinds noted below and is ignored otherwise, so one descriptor shape can
+ * describe any cell in a column definition.
+ */
+export interface CellValueDescriptor {
+    /** The raw value. Empty values render the missing state instead. */
+    value?: PrimitiveCellValue;
+    /** Which primitive renders the value. Defaults to `value`. */
+    kind?: CellValueKind;
+    /** Pre-rendered content used verbatim, bypassing `kind` and all formatting. */
+    display?: ReactNode;
+    /** Destination for the entry, when it navigates. */
+    href?: string;
+    /** ISO currency code. `money` only. */
+    currency?: string;
+    /** Whether the currency shows as a symbol, code, or name. `money` only. */
+    currencyDisplay?: MoneyProps['currencyDisplay'];
+    /** Smallest number of decimals to show. `money`, `number`, and `percent`. */
+    minimumFractionDigits?: number;
+    /** Largest number of decimals to show. `money`, `number`, and `percent`. */
+    maximumFractionDigits?: number;
+    /** Selects the compact or full money presentation. `money` only. */
+    formatMode?: MoneyProps['formatMode'];
+    /** BCP 47 locale for number and currency formatting. */
+    locale?: string;
+    /** date-fns `Locale` for date and time formatting. */
+    dateLocale?: Locale;
+    /** Unit the raw value is already expressed in. `fileSize` only. */
+    from?: FileSizeUnit;
+    /** Renders the zero value rather than the missing state. */
+    force?: boolean;
+    /** Escape hatch passed to `Intl.NumberFormat`. `number` and `percent`. */
+    options?: Intl.NumberFormatOptions;
+    /** Treats the value as a fraction and scales it to a percentage. `percent` only. */
+    scaled?: boolean;
+    /** date-fns pattern, overriding `datePreset`. `date` and `dateTime`. */
+    dateFormat?: string;
+    /** Named date length. `date` and `dateTime`. */
+    datePreset?: 'compact' | 'short' | 'medium' | 'long';
+    /** date-fns pattern for the time portion. `time` and `dateTime`. */
+    timeFormat?: string;
+    /** Copy shown in place of an empty value. Defaults to an em dash. */
+    emptyLabel?: ReactNode;
+    /** Merged onto the outermost node. */
+    className?: string;
+}
+export type CellValueTuple = readonly [
+    value: PrimitiveCellValue,
+    kind?: CellValueKind,
+    options?: Omit<CellValueDescriptor, 'value' | 'kind'>
+];
+export type CellStackValue = PrimitiveCellValue | false | ReactElement | CellValueDescriptor | CellValueTuple;
+export interface CellValueProps extends Omit<CellValueDescriptor, 'className' | 'display'> {
+    /** The value to display. When empty, renders fallback with muted styling. */
+    value?: PrimitiveCellValue;
+    /** Which primitive should render the value. Defaults to Value. */
+    kind?: CellValueKind;
+    /** Text shown when value is missing. Defaults to '--'. */
+    fallback?: ReactNode;
+    /** Force missing state regardless of value emptiness. */
+    missing?: boolean;
+    /** Additional class names. */
+    className?: string;
+    /** Children override. When provided, renders children directly with missing styling applied. */
+    children?: ReactNode;
+}
+export interface CellStackProps {
+    /** Values are filtered for null, undefined, and empty strings, then capped at four rows. */
+    values?: readonly CellStackValue[];
+    /** Copy shown when every value is empty. */
+    emptyLabel?: ReactNode;
+    /** Merged onto the outermost node. */
+    className?: string;
+    /** Merged onto the item. */
+    itemClassName?: string;
+    /** Merged onto the primary. */
+    primaryClassName?: string;
+    /** Merged onto the secondary. */
+    secondaryClassName?: string;
+    /** Weight of the first row, which reads as the cell's primary value. */
+    primaryWeight?: 'regular' | 'medium' | 'semibold' | 'bold';
+}
+/**
+ * Table cell value with primitive-backed formatting and automatic missing-value treatment.
+ *
+ * @example
+ * <CellValue value={booking.reference} kind="mono" />
+ * <CellValue value={booking.total} kind="money" />
+ */
+export declare function CellValue({ value, kind, href, currency, currencyDisplay, minimumFractionDigits, maximumFractionDigits, formatMode, locale, dateLocale, from, force, options, scaled, dateFormat, datePreset, timeFormat, emptyLabel, fallback, missing, className, children, }: CellValueProps): import("react").JSX.Element;
+export declare namespace CellValue {
+    var displayName: string;
+}
+/**
+ * Table cell stack for primary + secondary value rows.
+ *
+ * Values are normalized, null/undefined/empty-string entries are skipped, and
+ * only the first four visible rows render. The first visible primitive defaults
+ * to normal `Value`; later primitive rows default to smaller `SecondaryValue`.
+ * Pass tuples/descriptors to opt into richer primitives such as `email`,
+ * `phone`, `name`, `money`, `fileSize`, or `date`.
+ *
+ * @example
+ * <CellStack values={[
+ *   booking.contactName,
+ *   [booking.contactEmail, 'email'],
+ *   [booking.contactPhone, 'phone'],
+ * ]} />
+ */
+export declare function CellStack({ values, emptyLabel, className, itemClassName, primaryClassName, secondaryClassName, primaryWeight, }: CellStackProps): import("react").JSX.Element;
+export declare namespace CellStack {
+    var displayName: string;
+}

package/dist/components/features/table/partials/fullscreen-toggle.d.ts

@@ -0,0 +1,16 @@
+export interface FullscreenToggleProps {
+    /** Whether the table currently covers the viewport. */
+    fullscreen: boolean;
+    /** Fired with the next full-screen state. */
+    onFullscreenChange: (fullscreen: boolean) => void;
+    /** Accessible copy for entering full screen. */
+    enterLabel?: string;
+    /** Accessible copy for leaving full screen. */
+    exitLabel?: string;
+    /** Merged onto the outermost node. */
+    className?: string;
+}
+export declare function FullscreenToggle({ fullscreen, onFullscreenChange, enterLabel, exitLabel, className, }: FullscreenToggleProps): import("react").JSX.Element;
+export declare namespace FullscreenToggle {
+    var displayName: string;
+}

package/dist/components/features/table/partials/resource-cell.d.ts

@@ -0,0 +1,63 @@
+import type { ComponentType, ReactNode } from 'react';
+import { type LucideIcon } from 'lucide-react';
+import { type BadgeTone } from '../../../base/badge';
+export interface ResourceCellMetadataItem {
+    /** Stable identity for this entry. */
+    id?: string;
+    /** Display label. */
+    label?: ReactNode;
+    value: ReactNode;
+}
+export type ResourceCellBadge = ReactNode | ({
+    id?: string;
+    label: ReactNode;
+    tone?: BadgeTone;
+    icon?: LucideIcon;
+    dot?: boolean;
+});
+export interface ResourceCellLinkProps {
+    /** Destination for the entry, when it navigates. */
+    href: string;
+    children: ReactNode;
+    /** Merged onto the outermost node. */
+    className?: string;
+    'aria-label'?: string;
+}
+export interface ResourceCellProps {
+    /** Surface title. */
+    title?: ReactNode;
+    /** Secondary line under the title. */
+    subtitle?: ReactNode;
+    /** Label/value facts rendered as a metadata list. */
+    metadata?: ReactNode | readonly ResourceCellMetadataItem[];
+    /** Status chips shown after the title. */
+    badges?: readonly ResourceCellBadge[];
+    /** Thumbnail source. Falls back to `icon`, then `fallback`, when absent or broken. */
+    imageUrl?: string;
+    /** Leading glyph. */
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    /** Media shown when neither `imageUrl` nor `icon` resolves — usually initials. */
+    fallback?: ReactNode;
+    /** Destination for the entry, when it navigates. */
+    href?: string;
+    /** Replaces the default link rendering. */
+    renderLink?: (props: ResourceCellLinkProps) => ReactNode;
+    /** Copy shown when the cell has no title. */
+    emptyLabel?: ReactNode;
+    /** Merged onto the outermost node. */
+    className?: string;
+    /** Merged onto the media. */
+    mediaClassName?: string;
+    /** Merged onto the content. */
+    contentClassName?: string;
+    /** Merged onto the title. */
+    titleClassName?: string;
+    /** Merged onto the subtitle. */
+    subtitleClassName?: string;
+}
+export declare function ResourceCell({ title, subtitle, metadata, badges, imageUrl, icon: IconComponent, fallback, href, renderLink, emptyLabel, className, mediaClassName, contentClassName, titleClassName, subtitleClassName, }: ResourceCellProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+export declare namespace ResourceCell {
+    var displayName: string;
+}

package/dist/components/features/table/partials/table-link.d.ts

@@ -0,0 +1,3 @@
+import type { AnchorHTMLAttributes } from 'react';
+export type TableLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>;
+export declare const TableLink: ({ className, ...props }: TableLinkProps) => import("react").JSX.Element;

package/dist/components/features/table/table-actions.d.ts

@@ -0,0 +1,5 @@
+import { type DataTableActionsProps } from './table.types';
+export declare function DataTableActions<TData>(props: DataTableActionsProps<TData>): import("react").JSX.Element | null;
+export declare namespace DataTableActions {
+    var displayName: string;
+}

package/dist/components/features/table/table-body.d.ts

@@ -0,0 +1,5 @@
+import { type DataTableBodyProps } from './table.types';
+export declare function DataTableBody<TData>({ table, onRowClick, emptyStateMessage, emptyStateAction, cellClassName, rowClassName, stickyFirstColumn, striped, strings, }: DataTableBodyProps<TData>): import("react").JSX.Element;
+export declare namespace DataTableBody {
+    var displayName: string;
+}

package/dist/components/features/table/table-header.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type DataTableHeaderProps } from './table.types';
+export declare function DataTableHeader<TData>({ table, enableResizing, stickyHeader, headerClassName, cellClassName, stickyFirstColumn, columnGroups, headerTransparent, }: DataTableHeaderProps<TData>): React.JSX.Element;
+export declare namespace DataTableHeader {
+    var displayName: string;
+}

package/dist/components/features/table/table-helpers.d.ts

@@ -0,0 +1,39 @@
+import type { SortingState, RowSelectionState, VisibilityState, Table, Row, Updater, ColumnDef } from '@tanstack/react-table';
+import React from 'react';
+import type { DataTableStrings } from './table.types';
+/**
+ * Helper function for handling row selection changes with OnChangeFn compatibility
+ */
+export declare const handleRowSelectionChange: (updatedSelection: Updater<RowSelectionState>, setInternalState: React.Dispatch<React.SetStateAction<RowSelectionState>>, externalHandler?: (state: RowSelectionState) => void) => void;
+/**
+ * Helper function for handling sorting changes with OnChangeFn compatibility
+ */
+export declare const handleSortingChange: (updatedSorting: Updater<SortingState>, setInternalState: React.Dispatch<React.SetStateAction<SortingState>>, externalHandler?: (state: SortingState) => void) => void;
+/**
+ * Helper function for handling column visibility changes
+ */
+export declare const handleColumnVisibilityChange: (updatedVisibility: Updater<VisibilityState>, setInternalState: React.Dispatch<React.SetStateAction<VisibilityState>>, externalHandler?: (state: VisibilityState) => void) => void;
+/**
+ * Get row class name based on selection state and custom function
+ */
+export declare const getRowClassName: <TData>(row: Row<TData>, index: number, rowClassName?: string | ((row: Row<TData>, index: number) => string), isSelected?: boolean) => string;
+/**
+ * Get cell class name including sticky column handling
+ */
+export declare const getCellClassName: <TData>(columnId: string, row: Row<TData> | null, cellClassName?: string | ((column: string, row: Row<TData> | null) => string), stickyFirstColumn?: boolean, isFirstColumn?: boolean) => string;
+/**
+ * Get selected rows data from the table
+ */
+export declare const getSelectedRowsData: <T extends object>(table: Table<T>) => T[];
+/**
+ * Create row selection component for a row
+ */
+export declare const createRowSelectionCheckbox: <TData>(row: Row<TData>, strings?: DataTableStrings) => React.JSX.Element;
+/**
+ * Create header selection checkbox
+ */
+export declare const createHeaderSelectionCheckbox: <TData>(table: Table<TData>, strings?: DataTableStrings) => React.JSX.Element;
+/**
+ * Add selection column to columns
+ */
+export declare const addSelectionColumn: <TData, TValue = unknown>(columns: ColumnDef<TData, TValue>[], strings?: DataTableStrings) => ColumnDef<TData, TValue>[];

package/dist/components/features/table/table-toolbar.d.ts

@@ -0,0 +1,5 @@
+import { type DataTableToolbarProps } from './table.types';
+export declare function DataTableToolbar<TData>({ table, tableAreaRef, fullscreen, onFullscreenChange, showFullscreenToggle, enableColumnVisibility, labelVisibility, strings, }: DataTableToolbarProps<TData>): import("react").JSX.Element | null;
+export declare namespace DataTableToolbar {
+    var displayName: string;
+}

package/dist/components/features/table/table.strings.d.ts

@@ -0,0 +1,3 @@
+import { type DataTableStrings, type DataTableStringsOverride } from './table.types';
+export declare const defaultDataTableStrings: DataTableStrings;
+export declare const mergeDataTableStrings: (overrides?: DataTableStringsOverride) => DataTableStrings;