@kennycorrea/ui 0.11.4 → 1.6.1

package/dist/organisms/DataTable/DataTable.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// biome-ignore-all lint/a11y/noRedundantRoles: the stacked layout sets display: block on the table, which drops its implicit roles in some browsers; explicit roles keep it a table.
+import { ArrowDownIcon, ArrowUpIcon, CaretSortIcon, DotsHorizontalIcon, } from '@radix-ui/react-icons';
+import { IconButton, Skeleton as ThemedSkeleton } from '@radix-ui/themes';
+import { useId } from 'react';
+import { ActionMenu } from '../../atoms/ActionMenu/ActionMenu.js';
+import { Checkbox } from '../../atoms/Checkbox/Checkbox.js';
+import { EmptyState } from '../../molecules/EmptyState/EmptyState.js';
+import { ErrorState } from '../../molecules/ErrorState/ErrorState.js';
+import { Pagination } from '../../molecules/Pagination/Pagination.js';
+import { useUiStrings } from '../../strings.js';
+const INTERACTIVE = 'a, button, input, select, textarea, [role="checkbox"], [role="menuitem"]';
+/**
+ * A data table: sortable headers, row selection, row actions, loading/empty/error states and
+ * pagination. Fully controlled: it never sorts, pages or selects on its own, so the data can
+ * come from a server as easily as from `useClientTable`.
+ *
+ * It responds to its own width (a container query), not the viewport's. Narrow, it drops
+ * low-priority columns and then stacks each row into a labelled card. Explicit table roles
+ * keep it a table to screen readers in the stacked layout, where `display: block` would
+ * otherwise erase that in some browsers.
+ */
+export function DataTable({ columns, rows, getRowId, caption, showCaption = false, getRowLabel, sort = null, onSortChange, selection, onSelectionChange, rowActions, onRowAction, onRowClick, state = 'ready', empty, error, loadingRows = 5, pagination, density = 'comfortable', stackBelow = 'md', stickyFirstColumn = false, maxHeight, className, }) {
+    const strings = useUiStrings();
+    const captionId = useId();
+    const selectable = !!selection && !!onSelectionChange;
+    const hasActions = !!rowActions;
+    const span = columns.length + (selectable ? 1 : 0) + (hasActions ? 1 : 0);
+    const headerColumn = columns.find((c) => c.isRowHeader);
+    const labelOf = (row) => {
+        if (getRowLabel)
+            return getRowLabel(row);
+        const v = headerColumn?.sortValue?.(row);
+        return v === null || v === undefined ? getRowId(row) : String(v);
+    };
+    const effective = state === 'ready' && rows.length === 0 ? 'empty' : state;
+    const ids = effective === 'ready' ? rows.map(getRowId) : [];
+    const selectedHere = ids.filter((id) => selection?.has(id)).length;
+    const allChecked = selectedHere === 0 ? false : selectedHere === ids.length ? true : 'indeterminate';
+    const toggleAll = () => {
+        if (!onSelectionChange)
+            return;
+        const next = new Set(selection);
+        if (allChecked === true)
+            for (const id of ids)
+                next.delete(id);
+        else
+            for (const id of ids)
+                next.add(id);
+        onSelectionChange(next);
+    };
+    const toggleOne = (id) => {
+        if (!onSelectionChange)
+            return;
+        const next = new Set(selection);
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        onSelectionChange(next);
+    };
+    const nextSort = (id) => {
+        if (sort?.id !== id)
+            return { id, direction: 'asc' };
+        if (sort.direction === 'asc')
+            return { id, direction: 'desc' };
+        return null;
+    };
+    const header = (_jsx("thead", { role: "rowgroup", children: _jsxs("tr", { role: "row", children: [selectable ? (_jsx("th", { role: "columnheader", scope: "col", "data-col": "select", children: _jsx(Checkbox, { "aria-label": strings.selectAll, checked: allChecked, disabled: ids.length === 0, onCheckedChange: toggleAll }) })) : null, columns.map((col) => {
+                    const sortable = (col.sortable ?? !!col.sortValue) && !!onSortChange;
+                    const sorted = sort?.id === col.id ? sort.direction : undefined;
+                    const Icon = sorted === 'asc' ? ArrowUpIcon : sorted === 'desc' ? ArrowDownIcon : CaretSortIcon;
+                    return (_jsx("th", { role: "columnheader", scope: "col", "data-align": col.align, "data-priority": col.priority, style: col.width ? { inlineSize: col.width } : undefined, "aria-sort": sorted === 'asc' ? 'ascending' : sorted === 'desc' ? 'descending' : undefined, children: sortable ? (_jsxs("button", { type: "button", className: "ui-table__sort", "data-sorted": sorted ? '' : undefined, onClick: () => onSortChange?.(nextSort(col.id)), children: [col.header, _jsx(Icon, { "aria-hidden": "true" })] })) : (col.header) }, col.id));
+                }), hasActions ? (_jsx("th", { role: "columnheader", scope: "col", "data-col": "actions", children: _jsx("span", { className: "ui-sr-only", children: strings.moreActions }) })) : null] }) }));
+    let body;
+    if (effective === 'loading') {
+        body = Array.from({ length: loadingRows }, (_, i) => `l${i}`).map((key) => (_jsx("tr", { role: "row", children: Array.from({ length: span }, (_, c) => `${key}c${c}`).map((ck) => (_jsx("td", { role: "cell", children: _jsx(ThemedSkeleton, { height: "0.875rem", width: "70%" }) }, ck))) }, key)));
+    }
+    else if (effective === 'error' || effective === 'empty') {
+        body = (_jsx("tr", { role: "row", children: _jsx("td", { role: "cell", colSpan: span, className: "ui-table__empty", children: effective === 'error'
+                    ? (error ?? _jsx(ErrorState, { size: "sm", as: "p" }))
+                    : (empty ?? _jsx(EmptyState, { size: "sm", as: "p", title: strings.noResults })) }) }));
+    }
+    else {
+        body = rows.map((row) => {
+            const id = getRowId(row);
+            const label = labelOf(row);
+            const selected = selection?.has(id) ?? false;
+            const onClick = onRowClick
+                ? (e) => {
+                    const hit = e.target.closest(INTERACTIVE);
+                    if (hit && e.currentTarget.contains(hit))
+                        return;
+                    onRowClick(row);
+                }
+                : undefined;
+            return (_jsxs("tr", { role: "row", "data-selected": selected ? '' : undefined, "data-clickable": onRowClick ? '' : undefined, onClick: onClick, children: [selectable ? (_jsx("td", { role: "cell", "data-col": "select", children: _jsx(Checkbox, { "aria-label": strings.selectRow(label), checked: selected, onCheckedChange: () => toggleOne(id) }) })) : null, columns.map((col) => {
+                        const content = col.cell(row);
+                        const common = {
+                            'data-align': col.align,
+                            'data-priority': col.priority,
+                            'data-label': col.mobileLabel === false || col.isRowHeader
+                                ? undefined
+                                : (col.mobileLabel ?? col.header),
+                        };
+                        if (col.isRowHeader) {
+                            return (_jsx("th", { role: "rowheader", scope: "row", ...common, children: onRowClick ? (_jsx("button", { type: "button", className: "ui-table__rowbutton", onClick: () => onRowClick(row), children: content })) : (content) }, col.id));
+                        }
+                        return (_jsx("td", { role: "cell", ...common, children: content }, col.id));
+                    }), hasActions ? (_jsx("td", { role: "cell", "data-col": "actions", children: _jsx(ActionMenu, { items: rowActions(row), onSelect: (actionId) => onRowAction?.(actionId, row), title: label, trigger: _jsx(IconButton, { variant: "ghost", color: "gray", "aria-label": strings.actionsFor(label), children: _jsx(DotsHorizontalIcon, {}) }) }) })) : null] }, id));
+        });
+    }
+    const regionStyle = maxHeight
+        ? { maxBlockSize: maxHeight }
+        : undefined;
+    return (_jsxs("div", { className: ['ui-table', className].filter(Boolean).join(' '), "data-density": density, "data-stack": stackBelow || undefined, "data-sticky-first": stickyFirstColumn ? '' : undefined, children: [effective === 'loading' ? (_jsx("span", { role: "status", className: "ui-sr-only", children: strings.loading })) : null, _jsx("section", { className: "ui-table__region", "aria-labelledby": captionId, 
+                // biome-ignore lint/a11y/noNoninteractiveTabindex: a scrolling region must be reachable by keyboard to be scrolled.
+                tabIndex: 0, style: regionStyle, children: _jsxs("table", { className: "ui-table__table", role: "table", "aria-busy": effective === 'loading' || undefined, children: [_jsx("caption", { id: captionId, className: showCaption ? 'ui-table__caption' : 'ui-sr-only', children: caption }), header, _jsx("tbody", { role: "rowgroup", children: body })] }) }), pagination && effective !== 'loading' ? _jsx(Pagination, { ...pagination }) : null] }));
+}

package/dist/organisms/DataTable/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DataTable.js';
+export * from './types.js';
+export * from './useClientTable.js';

package/dist/organisms/DataTable/index.js

@@ -0,0 +1,3 @@
+export * from './DataTable.js';
+export * from './types.js';
+export * from './useClientTable.js';

package/dist/organisms/DataTable/types.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+export type SortDirection = 'asc' | 'desc';
+export type SortState = {
+    id: string;
+    direction: SortDirection;
+} | null;
+/** What a column sorts by. `null` and `undefined` sort last in both directions. */
+export type SortValue = string | number | boolean | Date | null | undefined;
+export interface DataTableColumn<Row> {
+    /** Stable, and what `sort.id` refers to. */
+    id: string;
+    /** The column's name: the header text, the sort button's name, and the stacked-layout label. */
+    header: string;
+    cell: (row: Row) => ReactNode;
+    /**
+     * What the column sorts by. Needed by `useClientTable`; a server-sorted table can leave it
+     * out and set `sortable` alone.
+     */
+    sortValue?: (row: Row) => SortValue;
+    /** Shows a sort button in the header. Default: `true` when `sortValue` is given. */
+    sortable?: boolean;
+    /** `end` also turns on tabular numerals, for numbers that should line up. */
+    align?: 'start' | 'end' | 'center';
+    /** A CSS width for the column, e.g. `'120px'` or `'20%'`. */
+    width?: string;
+    /**
+     * What goes first when the table is narrow: `low` columns hide below 640px of table width,
+     * `medium` below 480px. `high` (the default) never hides.
+     */
+    priority?: 'high' | 'medium' | 'low';
+    /**
+     * The cell that names the row (`th scope="row"`): the card title in the stacked layout, the
+     * sticky column with `stickyFirstColumn`, and the default row label for checkboxes and menus.
+     * One column at most.
+     */
+    isRowHeader?: boolean;
+    /** The label beside the value in the stacked layout. Default `header`; `false` for none. */
+    mobileLabel?: string | false;
+}

package/dist/organisms/DataTable/types.js

@@ -0,0 +1 @@
+export {};

package/dist/organisms/DataTable/useClientTable.d.ts

@@ -0,0 +1,27 @@
+import type { DataTableColumn, SortState } from './types.js';
+/**
+ * Rows sorted by one column, without mutating the input. Strings compare with `Intl.Collator`
+ * in `locale` with numeric collation ("Item 2" before "Item 10"); empty values go last in both
+ * directions; ties keep their original order.
+ */
+export declare function sortRows<Row>(rows: readonly Row[], columns: readonly DataTableColumn<Row>[], sort: SortState, locale?: string): Row[];
+export interface ClientTableOptions {
+    sort: SortState;
+    /** 1-based. */
+    page: number;
+    pageSize: number;
+}
+export interface ClientTable<Row> {
+    /** The current page's rows, sorted. */
+    rows: Row[];
+    /** Every row, sorted (for "select all across pages", exports). */
+    sorted: Row[];
+    total: number;
+    pageCount: number;
+}
+/**
+ * Sorting and paging in the browser, for data that is already all loaded. A server-driven table
+ * does neither and passes its page straight to `DataTable`. Formats with the `UiStringsProvider`
+ * locale.
+ */
+export declare function useClientTable<Row>(rows: readonly Row[], columns: readonly DataTableColumn<Row>[], { sort, page, pageSize }: ClientTableOptions): ClientTable<Row>;

package/dist/organisms/DataTable/useClientTable.js

@@ -0,0 +1,51 @@
+import { useMemo } from 'react';
+import { useUiLocale } from '../../strings.js';
+function rank(v) {
+    if (v === null || v === undefined)
+        return null;
+    if (v instanceof Date)
+        return v.getTime();
+    if (typeof v === 'boolean')
+        return v ? 1 : 0;
+    return v;
+}
+/**
+ * Rows sorted by one column, without mutating the input. Strings compare with `Intl.Collator`
+ * in `locale` with numeric collation ("Item 2" before "Item 10"); empty values go last in both
+ * directions; ties keep their original order.
+ */
+export function sortRows(rows, columns, sort, locale) {
+    const column = sort ? columns.find((c) => c.id === sort.id) : undefined;
+    if (!sort || !column?.sortValue)
+        return [...rows];
+    const get = column.sortValue;
+    const collator = new Intl.Collator(locale, { numeric: true, sensitivity: 'base' });
+    const sign = sort.direction === 'asc' ? 1 : -1;
+    return rows
+        .map((row, index) => ({ row, index, value: rank(get(row)) }))
+        .sort((a, b) => {
+        if (a.value === null || b.value === null) {
+            if (a.value === b.value)
+                return a.index - b.index;
+            return a.value === null ? 1 : -1;
+        }
+        const diff = typeof a.value === 'string' || typeof b.value === 'string'
+            ? collator.compare(String(a.value), String(b.value))
+            : a.value - b.value;
+        return diff === 0 ? a.index - b.index : diff * sign;
+    })
+        .map((x) => x.row);
+}
+/**
+ * Sorting and paging in the browser, for data that is already all loaded. A server-driven table
+ * does neither and passes its page straight to `DataTable`. Formats with the `UiStringsProvider`
+ * locale.
+ */
+export function useClientTable(rows, columns, { sort, page, pageSize }) {
+    const locale = useUiLocale();
+    const sorted = useMemo(() => sortRows(rows, columns, sort, locale), [rows, columns, sort, locale]);
+    const pageCount = Math.max(1, Math.ceil(sorted.length / pageSize));
+    const current = Math.min(Math.max(page, 1), pageCount);
+    const pageRows = useMemo(() => sorted.slice((current - 1) * pageSize, current * pageSize), [sorted, current, pageSize]);
+    return { rows: pageRows, sorted, total: sorted.length, pageCount };
+}

package/dist/organisms/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,43 @@
+import { type Breakpoint } from '../../hooks/breakpoints.js';
+import { type IsoDate, type Weekday } from '../../utils/dates.js';
+export interface DateRangePreset {
+    id: string;
+    /** "Last 7 days", "This month". */
+    label: string;
+    range: {
+        from: IsoDate;
+        to: IsoDate;
+    };
+}
+export interface DateRangePickerProps {
+    /** A complete range, or `null`. A half-chosen range never leaves the picker. */
+    value: {
+        from: IsoDate;
+        to: IsoDate;
+    } | null;
+    onValueChange: (value: {
+        from: IsoDate;
+        to: IsoDate;
+    }) => void;
+    /** Ready-made ranges, chosen in one click. */
+    presets?: DateRangePreset[];
+    min?: IsoDate;
+    max?: IsoDate;
+    isDateDisabled?: (date: IsoDate) => boolean;
+    locale?: string;
+    weekStartsOn?: Weekday;
+    /** Below this it opens in a bottom Sheet with one month. Default `sm`. `false` never does. */
+    sheetBelow?: Breakpoint | false;
+    placeholder?: string;
+    id?: string;
+    'aria-describedby'?: string;
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * A from–to date range: a button showing the range that opens two months side by side with
+ * presets beside them, or, below `sheetBelow`, one month in a bottom sheet with the presets as
+ * chips. Choosing the second date, or a preset, commits and closes. Escape or a click outside
+ * leaves the value as it was.
+ */
+export declare function DateRangePicker({ value, onValueChange, presets, min, max, isDateDisabled, locale: localeProp, weekStartsOn, sheetBelow, placeholder, id, 'aria-describedby': describedBy, 'aria-label': ariaLabel, className, }: DateRangePickerProps): import("react").JSX.Element;

package/dist/organisms/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CalendarIcon } from '@radix-ui/react-icons';
+import { Button as ThemedButton, Popover as ThemedPopover } from '@radix-ui/themes';
+import { useId, useState } from 'react';
+import { ChipGroup } from '../../atoms/ChipGroup/ChipGroup.js';
+import { Sheet } from '../../atoms/Sheet/Sheet.js';
+import { minWidth } from '../../hooks/breakpoints.js';
+import { useMediaQuery } from '../../hooks/useMediaQuery.js';
+import { Calendar } from '../../molecules/Calendar/Calendar.js';
+import { useUiLocale, useUiStrings } from '../../strings.js';
+import { formatDateRange } from '../../utils/dates.js';
+/**
+ * A from–to date range: a button showing the range that opens two months side by side with
+ * presets beside them, or, below `sheetBelow`, one month in a bottom sheet with the presets as
+ * chips. Choosing the second date, or a preset, commits and closes. Escape or a click outside
+ * leaves the value as it was.
+ */
+export function DateRangePicker({ value, onValueChange, presets, min, max, isDateDisabled, locale: localeProp, weekStartsOn, sheetBelow = 'sm', placeholder, id, 'aria-describedby': describedBy, 'aria-label': ariaLabel, className, }) {
+    const strings = useUiStrings();
+    const providerLocale = useUiLocale();
+    const locale = localeProp ?? providerLocale;
+    const wide = useMediaQuery(minWidth(sheetBelow || 'xs'));
+    const sheet = sheetBelow !== false && !wide;
+    const [open, setOpenState] = useState(false);
+    const [draft, setDraft] = useState(value);
+    const valueId = useId();
+    const setOpen = (next) => {
+        if (next)
+            setDraft(value);
+        setOpenState(next);
+    };
+    const commit = (range) => {
+        onValueChange(range);
+        setOpenState(false);
+    };
+    const text = value ? formatDateRange(value, locale) : (placeholder ?? strings.chooseDates);
+    const title = ariaLabel ?? strings.chooseDates;
+    const trigger = (_jsxs(ThemedButton, { type: "button", variant: "surface", color: "gray", id: id, "aria-haspopup": "dialog", "aria-label": ariaLabel, "aria-describedby": [value ? valueId : null, describedBy].filter(Boolean).join(' ') || undefined, className: ['ui-date-input', className].filter(Boolean).join(' '), "data-empty": value ? undefined : '', onClick: sheet ? () => setOpen(true) : undefined, children: [_jsx(CalendarIcon, { "aria-hidden": "true" }), _jsx("span", { "aria-hidden": value ? 'true' : undefined, children: text }), value ? (_jsx("span", { id: valueId, className: "ui-sr-only", children: formatDateRange(value, locale, { dateStyle: 'full' }) })) : null] }));
+    const calendar = (_jsx(Calendar, { mode: "range", value: draft, onValueChange: (next) => {
+            setDraft(next);
+            if (next.to)
+                commit({ from: next.from, to: next.to });
+        }, min: min, max: max, isDateDisabled: isDateDisabled, locale: locale, weekStartsOn: weekStartsOn, numberOfMonths: sheet ? 1 : 2, autoFocus: true }));
+    const presetValue = presets?.find((p) => value && p.range.from === value.from && p.range.to === value.to)?.id ??
+        null;
+    if (sheet) {
+        return (_jsxs(_Fragment, { children: [trigger, _jsx(Sheet, { open: open, onOpenChange: setOpen, title: title, showCloseButton: true, children: _jsxs("div", { className: "flex flex-col gap-3", children: [presets?.length ? (_jsx(ChipGroup, { "aria-label": strings.datePresets, options: presets.map((p) => ({ value: p.id, label: p.label })), value: presetValue, onValueChange: (pid) => {
+                                    const preset = presets.find((p) => p.id === pid);
+                                    if (preset)
+                                        commit(preset.range);
+                                } })) : null, calendar] }) })] }));
+    }
+    return (_jsxs(ThemedPopover.Root, { open: open, onOpenChange: setOpen, children: [_jsx(ThemedPopover.Trigger, { children: trigger }), _jsx(ThemedPopover.Content, { align: "start", "aria-label": title, className: "max-w-[calc(100vw-1.5rem)]", children: _jsxs("div", { className: "ui-range-picker", children: [presets?.length ? (_jsx("ul", { className: "ui-range-picker__presets", "aria-label": strings.datePresets, children: presets.map((p) => (_jsx("li", { children: _jsx("button", { type: "button", className: "ui-nav-item", "aria-pressed": p.id === presetValue, onClick: () => commit(p.range), children: _jsx("span", { className: "ui-nav-item__label", children: p.label }) }) }, p.id))) })) : null, calendar] }) })] }));
+}

package/dist/organisms/DateRangePicker/index.d.ts

@@ -0,0 +1 @@
+export * from './DateRangePicker.js';

package/dist/organisms/DateRangePicker/index.js

@@ -0,0 +1 @@
+export * from './DateRangePicker.js';

package/dist/organisms/FilterBar/FilterBar.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+export interface ActiveFilter {
+    id: string;
+    /** What the pill says, e.g. "Status: Paid". Also names its remove button. */
+    label: string;
+}
+export interface FilterBarProps {
+    /** A SearchField. Takes the remaining width, and a row of its own below 640px. */
+    search?: ReactNode;
+    /** FilterPopovers, Selects, FilterChips. */
+    filters?: ReactNode;
+    /** At the end of the row: an export button, a view switch. */
+    actions?: ReactNode;
+    /** The filters in effect, shown as removable pills under the row. */
+    activeFilters?: ActiveFilter[];
+    onRemoveFilter?: (id: string) => void;
+    /** Shows "Clear all" after the pills. */
+    onClearAll?: () => void;
+    className?: string;
+}
+/**
+ * The controls above a list: search, filters, actions, and the filters in effect.
+ *
+ * It lays out by its own width. On a phone the search takes the first row and everything else
+ * wraps below it. Put the filter controls in a FilterPopover and they become one "Filters (n)"
+ * button that opens a sheet.
+ */
+export declare function FilterBar({ search, filters, actions, activeFilters, onRemoveFilter, onClearAll, className, }: FilterBarProps): import("react").JSX.Element;

package/dist/organisms/FilterBar/FilterBar.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../atoms/Button/Button.js';
+import { Pill } from '../../atoms/Pill/Pill.js';
+import { useUiStrings } from '../../strings.js';
+/**
+ * The controls above a list: search, filters, actions, and the filters in effect.
+ *
+ * It lays out by its own width. On a phone the search takes the first row and everything else
+ * wraps below it. Put the filter controls in a FilterPopover and they become one "Filters (n)"
+ * button that opens a sheet.
+ */
+export function FilterBar({ search, filters, actions, activeFilters, onRemoveFilter, onClearAll, className, }) {
+    const strings = useUiStrings();
+    const hasActive = !!activeFilters?.length;
+    return (_jsxs("div", { className: ['ui-filter-bar', className].filter(Boolean).join(' '), children: [_jsxs("div", { className: "ui-filter-bar__row", children: [search ? _jsx("div", { className: "ui-filter-bar__search", children: search }) : null, filters, actions ? _jsx("div", { className: "ui-filter-bar__actions", children: actions }) : null] }), hasActive ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("ul", { className: "ui-filter-bar__active", "aria-label": strings.activeFilters, children: activeFilters?.map((filter) => (_jsx("li", { children: _jsx(Pill, { onRemove: onRemoveFilter ? () => onRemoveFilter(filter.id) : undefined, children: filter.label }) }, filter.id))) }), onClearAll ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: onClearAll, children: strings.clearFilters })) : null] })) : null] }));
+}

package/dist/organisms/FilterBar/index.d.ts

@@ -0,0 +1 @@
+export * from './FilterBar.js';

package/dist/organisms/FilterBar/index.js

@@ -0,0 +1 @@
+export * from './FilterBar.js';

package/dist/organisms/PageHeader/PageHeader.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import { type ActionMenuItem } from '../../atoms/ActionMenu/ActionMenu.js';
+import { type BreadcrumbItem } from '../../molecules/Breadcrumbs/Breadcrumbs.js';
+export interface PageHeaderProps {
+    /** The page's `h1`. */
+    title: ReactNode;
+    description?: ReactNode;
+    /** A trail (rendered as Breadcrumbs), or any node of your own. */
+    breadcrumbs?: BreadcrumbItem[] | ReactNode;
+    /** The one main action. Always visible. */
+    primaryAction?: ReactNode;
+    /**
+     * Lesser actions. Ghost buttons beside the primary one when the header is 640px or wider;
+     * folded into a "more" menu when it is narrower.
+     */
+    secondaryActions?: ActionMenuItem[];
+    onSecondaryAction?: (id: string) => void;
+    /** Beside the title: a status badge, a last-updated time. */
+    meta?: ReactNode;
+    /** Under everything: PageTabs, usually. */
+    tabs?: ReactNode;
+    className?: string;
+}
+/**
+ * The top of a page: breadcrumbs, the `h1`, a description and the page's actions.
+ *
+ * It sizes to its own column, not the viewport (a container query), so it behaves the same in
+ * a narrow panel as on a phone. Both forms of the secondary actions are in the markup; the one
+ * that does not apply is `display: none`, which also takes it out of the accessibility tree.
+ */
+export declare function PageHeader({ title, description, breadcrumbs, primaryAction, secondaryActions, onSecondaryAction, meta, tabs, className, }: PageHeaderProps): import("react").JSX.Element;

package/dist/organisms/PageHeader/PageHeader.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DotsHorizontalIcon } from '@radix-ui/react-icons';
+import { IconButton } from '@radix-ui/themes';
+import { ActionMenu } from '../../atoms/ActionMenu/ActionMenu.js';
+import { Button } from '../../atoms/Button/Button.js';
+import { Breadcrumbs } from '../../molecules/Breadcrumbs/Breadcrumbs.js';
+import { useUiStrings } from '../../strings.js';
+/**
+ * The top of a page: breadcrumbs, the `h1`, a description and the page's actions.
+ *
+ * It sizes to its own column, not the viewport (a container query), so it behaves the same in
+ * a narrow panel as on a phone. Both forms of the secondary actions are in the markup; the one
+ * that does not apply is `display: none`, which also takes it out of the accessibility tree.
+ */
+export function PageHeader({ title, description, breadcrumbs, primaryAction, secondaryActions, onSecondaryAction, meta, tabs, className, }) {
+    const strings = useUiStrings();
+    const hasSecondary = !!secondaryActions?.length && !!onSecondaryAction;
+    return (_jsxs("div", { className: ['ui-page-header', className].filter(Boolean).join(' '), children: [Array.isArray(breadcrumbs) ? _jsx(Breadcrumbs, { items: breadcrumbs }) : breadcrumbs, _jsxs("div", { className: "ui-page-header__row", children: [_jsxs("div", { className: "ui-page-header__text", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("h1", { className: "ui-page-header__title", children: title }), meta] }), description ? _jsx("p", { className: "ui-page-header__description", children: description }) : null] }), primaryAction || hasSecondary ? (_jsxs("div", { className: "ui-page-header__actions", children: [hasSecondary ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "ui-page-header__secondary", children: secondaryActions?.map((a) => (_jsx(Button, { variant: a.destructive ? 'danger' : 'ghost', disabled: a.disabled, onClick: () => onSecondaryAction?.(a.id), children: a.label }, a.id))) }), _jsx("span", { className: "ui-page-header__overflow", children: _jsx(ActionMenu, { items: secondaryActions ?? [], onSelect: (id) => onSecondaryAction?.(id), trigger: _jsx(IconButton, { variant: "ghost", color: "gray", "aria-label": strings.moreActions, children: _jsx(DotsHorizontalIcon, {}) }) }) })] })) : null, primaryAction] })) : null] }), tabs] }));
+}

package/dist/organisms/PageHeader/index.d.ts

@@ -0,0 +1 @@
+export * from './PageHeader.js';

package/dist/organisms/PageHeader/index.js

@@ -0,0 +1 @@
+export * from './PageHeader.js';

package/dist/organisms/PageTabs/PageTabs.d.ts

@@ -0,0 +1,27 @@
+import type { RenderLink } from '../../atoms/TextLink/TextLink.js';
+export interface PageTabsItem {
+    value: string;
+    label: string;
+    /** A link. Without it the tab is a button that calls `onValueChange`. */
+    href?: string;
+    render?: RenderLink;
+    /** A count after the label, e.g. open items. */
+    count?: number;
+}
+export interface PageTabsProps {
+    items: PageTabsItem[];
+    value: string;
+    onValueChange?: (value: string) => void;
+    /** Names the navigation landmark. Required: a page can have more than one. */
+    'aria-label': string;
+    className?: string;
+}
+/**
+ * Sub-pages of one page (Overview, Activity, Settings), shown as a row of tabs.
+ *
+ * Navigation rather than an ARIA tablist: each tab goes somewhere (usually a URL), so it is a
+ * `nav` of links with `aria-current="page"`, the pattern people expect from the back button
+ * and from opening a tab in a new window. For tabs that switch panels in place, use the `Tabs`
+ * primitive instead. The row scrolls sideways when the tabs do not fit.
+ */
+export declare function PageTabs({ items, value, onValueChange, 'aria-label': ariaLabel, className, }: PageTabsProps): import("react").JSX.Element;

package/dist/organisms/PageTabs/PageTabs.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Sub-pages of one page (Overview, Activity, Settings), shown as a row of tabs.
+ *
+ * Navigation rather than an ARIA tablist: each tab goes somewhere (usually a URL), so it is a
+ * `nav` of links with `aria-current="page"`, the pattern people expect from the back button
+ * and from opening a tab in a new window. For tabs that switch panels in place, use the `Tabs`
+ * primitive instead. The row scrolls sideways when the tabs do not fit.
+ */
+export function PageTabs({ items, value, onValueChange, 'aria-label': ariaLabel, className, }) {
+    return (_jsx("nav", { "aria-label": ariaLabel, className: className, children: _jsx("ul", { className: "ui-page-tabs__list", children: items.map((item) => {
+                const active = item.value === value;
+                const children = (_jsxs(_Fragment, { children: [item.label, item.count !== undefined ? ' ' : null, item.count !== undefined ? (_jsx("span", { className: "text-xs tabular-nums text-ink-muted", children: item.count })) : null] }));
+                const onClick = () => onValueChange?.(item.value);
+                let control;
+                if (item.href !== undefined) {
+                    const props = {
+                        href: item.href,
+                        className: 'ui-page-tabs__item',
+                        'aria-current': active ? 'page' : undefined,
+                        onClick,
+                        children,
+                    };
+                    control = item.render ? item.render(props) : _jsx("a", { ...props });
+                }
+                else {
+                    control = (_jsx("button", { type: "button", className: "ui-page-tabs__item", "aria-current": active ? 'page' : undefined, onClick: onClick, children: children }));
+                }
+                return _jsx("li", { children: control }, item.value);
+            }) }) }));
+}

package/dist/organisms/PageTabs/index.d.ts

@@ -0,0 +1 @@
+export * from './PageTabs.js';

package/dist/organisms/PageTabs/index.js

@@ -0,0 +1 @@
+export * from './PageTabs.js';

package/dist/organisms/Sidebar/Sidebar.d.ts

@@ -0,0 +1,48 @@
+import { type ReactNode } from 'react';
+import { type Breakpoint } from '../../hooks/breakpoints.js';
+import { type NavItemProps } from '../../molecules/NavItem/NavItem.js';
+export interface SidebarSection {
+    /** React key. Defaults to the label, then the index. */
+    id?: string;
+    /** A small heading over the section. Hidden (still read out) while collapsed. */
+    label?: string;
+    items: NavItemProps[];
+}
+export interface SidebarProps {
+    /** Top slot: a logo or workspace switcher. */
+    header?: ReactNode;
+    /**
+     * What the header shows while the sidebar is an icon rail: a logo mark rather than the full
+     * wordmark, which would wrap in 64px. Default: `header`.
+     */
+    collapsedHeader?: ReactNode;
+    sections: SidebarSection[];
+    /** Bottom slot, above the collapse toggle: help links, a user menu. */
+    footer?: ReactNode;
+    /** Controlled icon-rail state on wide screens. */
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Shows the collapse toggle. Default `true`. */
+    collapsible?: boolean;
+    /** Overrides the landmark's name (otherwise the `mainNavigation` UI string). */
+    'aria-label'?: string;
+    /**
+     * Outside an AppShell: the breakpoint from which the sidebar is persistent (default `md`), and
+     * the off-canvas panel's open state below it. Inside one, the shell provides all three.
+     */
+    breakpoint?: Breakpoint;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Where the off-canvas panel portals. Default: the nearest `<Theme>`. */
+    container?: HTMLElement | null;
+}
+/**
+ * The main navigation. From `breakpoint` up it is a persistent column that can collapse to an
+ * icon rail; below it, an off-canvas panel from the start edge with a scrim, a focus trap and
+ * Escape, which closes again when an item is chosen.
+ *
+ * Inside an `AppShell`, the shell decides which and the Topbar's menu button opens the panel.
+ * Without matchMedia (on the server) it renders the persistent column.
+ */
+export declare function Sidebar({ header, collapsedHeader, sections, footer, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, collapsible, 'aria-label': ariaLabel, breakpoint, open, onOpenChange, container, }: SidebarProps): import("react").JSX.Element;