@pearpages/pulp-react 0.0.0

package/dist/table.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/visually-hidden/VisuallyHidden.module.css","../src/table/Table.module.css"],"sourcesContent":["/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer components {\n  .root {\n    position: absolute;\n    inline-size: var(--visually-hidden-size);\n    block-size: var(--visually-hidden-size);\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n}\n","/*\n * Every value is a token (--table-*). Density resolves the row padding into a\n * private custom property on the table. React Aria writes the state:\n * data-hovered, data-selected, data-disabled, data-focus-visible on rows and\n * cells; data-allows-sorting and data-sort-direction on columns;\n * data-selected and data-indeterminate on the selection checkbox.\n * Rules are ordered from general to specific so no later selector has a lower\n * specificity than an earlier one for the same element.\n */\n\n@layer components {\n  .container {\n    overflow: auto;\n    border: var(--size-hairline) solid var(--table-border);\n    border-radius: var(--table-radius);\n    background-color: var(--table-bg);\n    color: var(--table-fg);\n    font-family: var(--table-font-family);\n    font-size: var(--table-font-size);\n  }\n\n  .table {\n    --_padding-block: var(--table-cell-padding-block-default);\n\n    inline-size: 100%;\n    border-collapse: collapse;\n    border-spacing: 0;\n    outline: none;\n\n    &[data-density=\"compact\"] {\n      --_padding-block: var(--table-cell-padding-block-compact);\n    }\n\n    &[data-focus-visible] {\n      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);\n      outline-offset: calc(-1 * var(--table-focus-ring-width));\n    }\n  }\n\n  .header {\n    background-color: var(--table-header-bg);\n  }\n\n  .container[data-sticky-header] .header {\n    position: sticky;\n    inset-block-start: 0;\n  }\n\n  .column {\n    padding-block: var(--_padding-block);\n    padding-inline: var(--table-cell-padding-inline);\n    border-block-end: var(--size-hairline) solid var(--table-border);\n    color: var(--table-header-fg);\n    font-size: var(--table-header-font-size);\n    font-weight: var(--table-header-font-weight);\n    text-align: start;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    outline: none;\n\n    &[data-align=\"end\"] {\n      text-align: end;\n    }\n\n    &[data-allows-sorting] {\n      cursor: pointer;\n    }\n\n    &[data-allows-sorting]::after {\n      content: \"\";\n      display: inline-block;\n      inline-size: var(--table-header-sort-indicator-size);\n      block-size: var(--table-header-sort-indicator-size);\n      margin-inline-start: var(--table-header-sort-indicator-size);\n      border-inline-end: var(--table-header-sort-indicator-width) solid currentcolor;\n      border-block-end: var(--table-header-sort-indicator-width) solid currentcolor;\n      rotate: -135deg;\n      translate: 0 25%;\n      opacity: 0;\n      transition: opacity var(--table-motion-duration) var(--motion-easing-standard);\n    }\n\n    &[data-hovered]::after {\n      opacity: 0.5;\n    }\n\n    &[data-sort-direction] {\n      color: var(--table-header-fg-active);\n    }\n\n    &[data-sort-direction]::after {\n      color: var(--table-header-sort-indicator);\n      opacity: 1;\n    }\n\n    &[data-sort-direction=\"descending\"]::after {\n      rotate: 45deg;\n      translate: 0 -25%;\n    }\n\n    &[data-focus-visible] {\n      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);\n      outline-offset: calc(-1 * var(--table-focus-ring-width));\n    }\n  }\n\n  .row {\n    outline: none;\n    transition: background-color var(--table-motion-duration) var(--motion-easing-standard);\n\n    &[data-hovered] {\n      background-color: var(--table-row-bg-hover);\n    }\n\n    &[data-selected] {\n      background-color: var(--table-row-bg-selected);\n    }\n\n    &[data-disabled] {\n      color: var(--table-row-fg-disabled);\n    }\n\n    &[data-focus-visible] {\n      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);\n      outline-offset: calc(-1 * var(--table-focus-ring-width));\n    }\n  }\n\n  .cell {\n    padding-block: var(--_padding-block);\n    padding-inline: var(--table-cell-padding-inline);\n    outline: none;\n\n    &[data-align=\"end\"] {\n      text-align: end;\n      font-variant-numeric: tabular-nums;\n    }\n\n    &[data-focus-visible] {\n      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);\n      outline-offset: calc(-1 * var(--table-focus-ring-width));\n    }\n  }\n\n  .body .row:not(:last-child) .cell {\n    border-block-end: var(--size-hairline) solid var(--table-border);\n  }\n\n  .selectColumn,\n  .selectCell {\n    inline-size: var(--table-select-size);\n    padding-inline-end: 0;\n  }\n\n  .selectBox {\n    display: grid;\n    place-content: center;\n    inline-size: var(--table-select-size);\n    block-size: var(--table-select-size);\n    border: var(--size-hairline) solid var(--table-select-border);\n    border-radius: var(--table-select-radius);\n    background-color: var(--table-select-bg);\n    transition:\n      background-color var(--table-motion-duration) var(--motion-easing-standard),\n      border-color var(--table-motion-duration) var(--motion-easing-standard);\n\n    &::after {\n      content: \"\";\n      inline-size: calc(var(--table-select-size) * 0.3);\n      block-size: calc(var(--table-select-size) * 0.55);\n      border-style: solid;\n      border-color: var(--table-select-check);\n      border-width: 0 var(--table-select-check-width) var(--table-select-check-width) 0;\n      rotate: 45deg;\n      translate: 0 -10%;\n      opacity: 0;\n    }\n  }\n\n  .select {\n    display: inline-grid;\n    place-items: center;\n    inline-size: var(--table-select-size);\n    block-size: var(--table-select-size);\n    cursor: pointer;\n\n    &[data-focus-visible] .selectBox {\n      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);\n      outline-offset: var(--table-focus-ring-offset);\n    }\n\n    &[data-selected] .selectBox,\n    &[data-indeterminate] .selectBox {\n      border-color: var(--table-select-bg-checked);\n      background-color: var(--table-select-bg-checked);\n\n      &::after {\n        opacity: 1;\n      }\n    }\n\n    &[data-indeterminate] .selectBox::after {\n      inline-size: calc(var(--table-select-size) * 0.55);\n      block-size: 0;\n      border-width: 0 0 var(--table-select-check-width);\n      rotate: 0deg;\n      translate: 0 0;\n    }\n  }\n\n  .empty {\n    padding: var(--table-empty-padding);\n    color: var(--table-empty-fg);\n    text-align: center;\n  }\n}\n"],"mappings":"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","names":["root","container","table","header","column","row","cell","body","selectColumn","selectCell","selectBox","select","empty"]}

package/dist/table.d.ts

@@ -0,0 +1,137 @@
+import * as react from 'react';
+import { Ref, ReactNode, ReactElement } from 'react';
+
+type TableSelectionMode = 'none' | 'single' | 'multiple';
+type TableDensity = 'default' | 'compact';
+type TableSortDirection = 'ascending' | 'descending';
+interface TableSort {
+    column: string;
+    direction: TableSortDirection;
+}
+interface TableProps {
+    /** The table's accessible name. Pass `aria-labelledby` instead when a visible heading names it. */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    /** @default 'none' */
+    selectionMode?: TableSelectionMode;
+    /** Selected row ids (controlled). */
+    selected?: readonly string[];
+    /** @default [] */
+    defaultSelected?: readonly string[];
+    onSelectedChange?: (ids: string[]) => void;
+    /** Rows that cannot be selected or activated. */
+    disabledIds?: readonly string[];
+    /** Current sort (controlled). Sorting the data is the caller's job: this is the header state. */
+    sort?: TableSort | null;
+    defaultSort?: TableSort;
+    onSortChange?: (sort: TableSort) => void;
+    /** Row padding steps down one token. The brand's `space.unit` sets the base. @default 'default' */
+    density?: TableDensity;
+    /** The header stays visible while the container scrolls. Give the container a height through `className`. @default false */
+    stickyHeader?: boolean;
+    /**
+     * Called with the row id on Enter, on click, and on double click. Once
+     * rows are selectable and a selection exists, Enter and click toggle the
+     * selection instead (the vendor's rule, so touch users select without a
+     * modifier key); double click still runs the action.
+     */
+    onRowAction?: (id: string) => void;
+    /** Applied to the scroll container around the table. */
+    className?: string;
+    /** The `<table>` element. */
+    ref?: Ref<HTMLTableElement>;
+    /** `Table.Header` then `Table.Body`. */
+    children: ReactNode;
+}
+/**
+ * A data table on React Aria's grid (decision record 001): one Tab stop,
+ * arrows move between rows and cells, Space toggles selection, Enter runs
+ * the row action (see `onRowAction` for the selection rule), sortable
+ * headers carry `aria-sort` and are pressed to change direction. Selection and sort are the caller's state; the table
+ * reports changes and renders them. Compose with `Table.Header`,
+ * `Table.Column`, `Table.Body`, `Table.Row` and `Table.Cell`; the selection
+ * column appears by itself when rows are selectable.
+ *
+ * @status experimental
+ * @category Data
+ * @accessibility `role="grid"` named by `aria-label` or `aria-labelledby`; one column is the row header (`isRowHeader`), sortable columns carry `aria-sort`, selectable rows `aria-selected`, and the selection column holds real checkboxes ("Select All" in the header). One tab stop: arrows move between rows and cells, Space toggles selection, Enter runs the row action, the header cells are pressed to sort.
+ * @do Mark exactly one column `isRowHeader`.
+ * Give the table a name that says what the rows are.
+ * @dont Sort the data inside the table; sort your data from `onSortChange` and pass it back.
+ * Use it for layout.
+ */
+declare function Table({ selectionMode, selected, defaultSelected, onSelectedChange, disabledIds, sort, defaultSort, onSortChange, density, stickyHeader, onRowAction, className, ref, children, ...rest }: TableProps): react.JSX.Element;
+declare namespace Table {
+    var displayName: string;
+    var Header: typeof TableHeader;
+    var Column: typeof TableColumn;
+    var Body: typeof TableBody;
+    var Row: typeof TableRow;
+    var Cell: typeof TableCell;
+}
+interface TableHeaderProps {
+    className?: string;
+    /** `Table.Column` elements. */
+    children: ReactNode;
+}
+declare function TableHeader({ className, children }: TableHeaderProps): react.JSX.Element;
+declare namespace TableHeader {
+    var displayName: string;
+}
+type TableAlign = 'start' | 'end';
+interface TableColumnProps {
+    /** The column id `sort.column` refers to. Defaults to the column's text. */
+    id?: string;
+    /** Pressing the header sorts by it; the table reports the change through `onSortChange`. @default false */
+    allowsSorting?: boolean;
+    /** This column names the row for assistive technology. Exactly one column per table. @default false */
+    isRowHeader?: boolean;
+    /** @default 'start' */
+    align?: TableAlign;
+    className?: string;
+    children: ReactNode;
+}
+declare function TableColumn({ id, allowsSorting, isRowHeader, align, className, children }: TableColumnProps): react.JSX.Element;
+declare namespace TableColumn {
+    var displayName: string;
+}
+interface TableBodyProps<T extends {
+    id: string;
+}> {
+    /** Rows from data: each item renders through the `children` function, keyed by `item.id`. */
+    items?: Iterable<T>;
+    /** Shown when there are no rows. @default 'No rows' */
+    emptyMessage?: ReactNode;
+    className?: string;
+    /** `Table.Row` elements, or a function from an item to one when `items` is given. */
+    children: ReactNode | ((item: T) => ReactElement);
+}
+declare function TableBody<T extends {
+    id: string;
+}>({ items, emptyMessage, className, children }: TableBodyProps<T>): react.JSX.Element;
+declare namespace TableBody {
+    var displayName: string;
+}
+interface TableRowProps {
+    /** The row id used for selection, sorting callbacks and `onRowAction`. Required unless the row comes from `items`. */
+    id?: string;
+    className?: string;
+    /** `Table.Cell` elements. */
+    children: ReactNode;
+}
+declare function TableRow({ id, className, children }: TableRowProps): react.JSX.Element;
+declare namespace TableRow {
+    var displayName: string;
+}
+interface TableCellProps {
+    /** @default 'start' */
+    align?: TableAlign;
+    className?: string;
+    children: ReactNode;
+}
+declare function TableCell({ align, className, children }: TableCellProps): react.JSX.Element;
+declare namespace TableCell {
+    var displayName: string;
+}
+
+export { Table, type TableAlign, type TableDensity, type TableProps, type TableSelectionMode, type TableSort, type TableSortDirection };

package/dist/table.js

@@ -0,0 +1,6 @@
+export { Table } from './chunk-F3OFZGGE.js';
+import './chunk-Z4PN6B2C.js';
+import './chunk-CZBCGLEM.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=table.js.map
+//# sourceMappingURL=table.js.map

package/dist/table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"table.js"}

package/dist/tabs.css

@@ -0,0 +1,75 @@
+/* src/tabs/Tabs.module.css */
+@layer components {
+  .Tabs_root {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    &[data-orientation=vertical] {
+      flex-direction: row;
+    }
+  }
+  .Tabs_list {
+    display: flex;
+    gap: var(--tabs-gap);
+    border-block-end: 1px solid var(--tabs-list-border);
+    &[data-orientation=vertical] {
+      flex-direction: column;
+      border-block-end: none;
+      border-inline-end: 1px solid var(--tabs-list-border);
+    }
+  }
+  .Tabs_tab {
+    position: relative;
+    padding-block: var(--tabs-tab-padding-block);
+    padding-inline: var(--tabs-tab-padding-inline);
+    border: none;
+    border-radius: var(--tabs-tab-radius) var(--tabs-tab-radius) 0 0;
+    background-color: transparent;
+    color: var(--tabs-tab-fg);
+    font-size: var(--tabs-tab-font-size);
+    font-weight: var(--tabs-tab-font-weight);
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: color var(--tabs-motion-duration) var(--motion-easing-standard), background-color var(--tabs-motion-duration) var(--motion-easing-standard);
+    border-block-end: 2px solid transparent;
+    &:focus-visible {
+      outline: var(--tabs-focus-ring-width) solid var(--tabs-focus-ring);
+      outline-offset: calc(-1 * var(--tabs-focus-ring-offset));
+    }
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+    &[data-state=active] {
+      color: var(--tabs-tab-fg-active);
+      border-block-end-color: var(--tabs-tab-indicator);
+    }
+    &:hover:not(:disabled, [data-state=active]) {
+      color: var(--tabs-tab-fg-hover);
+      background-color: var(--tabs-tab-bg-hover);
+    }
+  }
+  .Tabs_list[data-orientation=vertical] .Tabs_tab {
+    border-radius: var(--tabs-tab-radius) 0 0 var(--tabs-tab-radius);
+    border-block-end: none;
+    border-inline-end: 2px solid transparent;
+    text-align: start;
+    &[data-state=active] {
+      border-inline-end-color: var(--tabs-tab-indicator);
+    }
+  }
+  .Tabs_panel {
+    padding-block: var(--tabs-panel-padding-block);
+    color: var(--tabs-panel-fg);
+    &:focus-visible {
+      outline: var(--tabs-focus-ring-width) solid var(--tabs-focus-ring);
+      outline-offset: var(--tabs-focus-ring-offset);
+    }
+  }
+  .Tabs_root[data-orientation=vertical] .Tabs_panel {
+    padding-block: 0;
+    padding-inline-start: var(--tabs-tab-padding-inline);
+  }
+}
+/*# sourceMappingURL=tabs.css.map */

package/dist/tabs.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tabs/Tabs.module.css"],"sourcesContent":["/* Every value is a token (--tabs-*). The indicator is a logical border on the active tab, so vertical orientation just flips the side. */\n\n@layer components {\n  .root {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n\n    &[data-orientation=\"vertical\"] {\n      flex-direction: row;\n    }\n  }\n\n  .list {\n    display: flex;\n    gap: var(--tabs-gap);\n    border-block-end: 1px solid var(--tabs-list-border);\n\n    &[data-orientation=\"vertical\"] {\n      flex-direction: column;\n      border-block-end: none;\n      border-inline-end: 1px solid var(--tabs-list-border);\n    }\n  }\n\n  .tab {\n    position: relative;\n    padding-block: var(--tabs-tab-padding-block);\n    padding-inline: var(--tabs-tab-padding-inline);\n    border: none;\n    border-radius: var(--tabs-tab-radius) var(--tabs-tab-radius) 0 0;\n    background-color: transparent;\n    color: var(--tabs-tab-fg);\n    font-size: var(--tabs-tab-font-size);\n    font-weight: var(--tabs-tab-font-weight);\n    line-height: 1;\n    white-space: nowrap;\n    cursor: pointer;\n    transition:\n      color var(--tabs-motion-duration) var(--motion-easing-standard),\n      background-color var(--tabs-motion-duration) var(--motion-easing-standard);\n\n    /* Indicator: a transparent border always present, coloured when active, so nothing shifts. */\n    border-block-end: 2px solid transparent;\n\n    &:focus-visible {\n      outline: var(--tabs-focus-ring-width) solid var(--tabs-focus-ring);\n      outline-offset: calc(-1 * var(--tabs-focus-ring-offset));\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-state=\"active\"] {\n      color: var(--tabs-tab-fg-active);\n      border-block-end-color: var(--tabs-tab-indicator);\n    }\n\n    &:hover:not(:disabled, [data-state=\"active\"]) {\n      color: var(--tabs-tab-fg-hover);\n      background-color: var(--tabs-tab-bg-hover);\n    }\n  }\n\n  .list[data-orientation=\"vertical\"] .tab {\n    border-radius: var(--tabs-tab-radius) 0 0 var(--tabs-tab-radius);\n    border-block-end: none;\n    border-inline-end: 2px solid transparent;\n    text-align: start;\n\n    &[data-state=\"active\"] {\n      border-inline-end-color: var(--tabs-tab-indicator);\n    }\n  }\n\n  .panel {\n    padding-block: var(--tabs-panel-padding-block);\n    color: var(--tabs-panel-fg);\n\n    &:focus-visible {\n      outline: var(--tabs-focus-ring-width) solid var(--tabs-focus-ring);\n      outline-offset: var(--tabs-focus-ring-offset);\n    }\n  }\n\n  .root[data-orientation=\"vertical\"] .panel {\n    padding-block: 0;\n    padding-inline-start: var(--tabs-tab-padding-inline);\n  }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS;AACT,oBAAgB;AAChB,SAAK;AAEL,KAAC,CAAC;AACA,sBAAgB;AAClB;AACF;AAEA,GAACC;AACC,aAAS;AACT,SAAK,IAAI;AACT,sBAAkB,IAAI,MAAM,IAAI;AAEhC,KAAC,CAAC;AACA,sBAAgB;AAChB,wBAAkB;AAClB,yBAAmB,IAAI,MAAM,IAAI;AACnC;AACF;AAEA,GAACC;AACC,cAAU;AACV,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,YAAQ;AACR,mBAAe,IAAI,mBAAmB,IAAI,mBAAmB,EAAE;AAC/D,sBAAkB;AAClB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,iBAAa;AACb,iBAAa;AACb,YAAQ;AACR,gBACE,MAAM,IAAI,wBAAwB,IAAI,yBAAyB,EAC/D,iBAAiB,IAAI,wBAAwB,IAAI;AAGnD,sBAAkB,IAAI,MAAM;AAE5B,KAAC;AACC,eAAS,IAAI,yBAAyB,MAAM,IAAI;AAChD,sBAAgB,KAAK,GAAG,EAAE,IAAI;AAChC;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,CAAC;AACA,aAAO,IAAI;AACX,8BAAwB,IAAI;AAC9B;AAEA,KAAC,MAAM,KAAK,WAAW,CAAC;AACtB,aAAO,IAAI;AACX,wBAAkB,IAAI;AACxB;AACF;AAEA,GArDCD,SAqDI,CAAC,2BAA6B,CAzClCC;AA0CC,mBAAe,IAAI,mBAAmB,EAAE,EAAE,IAAI;AAC9C,sBAAkB;AAClB,uBAAmB,IAAI,MAAM;AAC7B,gBAAY;AAEZ,KAAC,CAAC;AACA,+BAAyB,IAAI;AAC/B;AACF;AAEA,GAACC;AACC,mBAAe,IAAI;AACnB,WAAO,IAAI;AAEX,KAAC;AACC,eAAS,IAAI,yBAAyB,MAAM,IAAI;AAChD,sBAAgB,IAAI;AACtB;AACF;AAEA,GApFCH,SAoFI,CAAC,2BAA6B,CAVlCG;AAWC,mBAAe;AACf,0BAAsB,IAAI;AAC5B;AACF;","names":["root","list","tab","panel"]}

package/dist/tabs.d.ts

@@ -0,0 +1,73 @@
+import * as react from 'react';
+import { HTMLAttributes, Ref, ReactNode, ButtonHTMLAttributes } from 'react';
+
+type TabsOrientation = 'horizontal' | 'vertical';
+type TabsActivation = 'automatic' | 'manual';
+interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+    /** Controlled selected tab. */
+    value?: string;
+    /** Initially selected tab when uncontrolled. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Layout and arrow-key axis. @default 'horizontal' */
+    orientation?: TabsOrientation;
+    /**
+     * `automatic` selects a tab when it receives focus (arrow keys); `manual`
+     * moves focus only and selects on Enter, Space or click.
+     * @default 'automatic'
+     */
+    activation?: TabsActivation;
+    ref?: Ref<HTMLDivElement>;
+    children: ReactNode;
+}
+/**
+ * Tabbed sections following the WAI-ARIA Tabs pattern. Compose with
+ * `Tabs.List`, `Tabs.Tab` and `Tabs.Panel`; ids and ARIA relationships are
+ * wired automatically. One tab stop: arrows move between tabs, Home and End
+ * jump to the ends, disabled tabs are skipped. State on the DOM:
+ * `data-orientation`, `data-state="active|inactive"`.
+ *
+ * @status stable
+ * @category Navigation
+ * @accessibility The WAI-ARIA Tabs pattern: `tablist` with `aria-orientation`, `tab`s carrying `aria-selected` and `aria-controls`, `tabpanel`s labelled by their tab. One tab stop: arrows move (and select with automatic activation), Home/End jump, disabled tabs are skipped.
+ * @do Use `activation="manual"` when switching a tab is expensive.
+ * Name the `Tabs.List` with `aria-label`.
+ * @dont Use tabs for sequential steps; use a stepper pattern.
+ * Put a link inside a tab.
+ */
+declare function Tabs({ value, defaultValue, onValueChange, orientation, activation, className, ref, children, ...rest }: TabsProps): react.JSX.Element;
+declare namespace Tabs {
+    var displayName: string;
+    var List: typeof TabsList;
+    var Tab: typeof TabsTab;
+    var Panel: typeof TabsPanel;
+}
+interface TabsListProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children: ReactNode;
+}
+declare function TabsList({ className, ref, onKeyDown, children, ...rest }: TabsListProps): react.JSX.Element;
+declare namespace TabsList {
+    var displayName: string;
+}
+interface TabsTabProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+    /** Identifies the tab; the panel with the same value belongs to it. */
+    value: string;
+    ref?: Ref<HTMLButtonElement>;
+    children: ReactNode;
+}
+declare function TabsTab({ value, disabled, className, onClick, ref, children, ...rest }: TabsTabProps): react.JSX.Element;
+declare namespace TabsTab {
+    var displayName: string;
+}
+interface TabsPanelProps extends HTMLAttributes<HTMLDivElement> {
+    value: string;
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+declare function TabsPanel({ value, className, ref, children, ...rest }: TabsPanelProps): react.JSX.Element;
+declare namespace TabsPanel {
+    var displayName: string;
+}
+
+export { Tabs, type TabsActivation, type TabsOrientation, type TabsProps };

package/dist/tabs.js

@@ -0,0 +1,5 @@
+export { Tabs } from './chunk-FH54XQ35.js';
+import './chunk-I5OZ63W7.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=tabs.js.map
+//# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"tabs.js"}

package/dist/text-field.css

@@ -0,0 +1,75 @@
+/* src/field/Field.module.css */
+@layer components {
+  .Field_field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--field-gap);
+  }
+  .Field_label {
+    font-size: var(--field-label-font-size);
+    font-weight: var(--field-label-font-weight);
+    color: var(--field-label-fg);
+  }
+  .Field_required {
+    margin-inline-start: var(--field-required-gap);
+    color: var(--field-required-fg);
+  }
+  .Field_description {
+    margin: 0;
+    font-size: var(--field-description-font-size);
+    color: var(--field-description-fg);
+  }
+  .Field_error {
+    margin: 0;
+    font-size: var(--field-error-font-size);
+    color: var(--field-error-fg);
+  }
+}
+
+/* src/text-field/TextField.module.css */
+@layer components {
+  .TextField_field {
+    font-family: var(--text-field-font-family);
+  }
+  .TextField_input {
+    min-block-size: var(--text-field-height-md);
+    padding-block: 0;
+    padding-inline: var(--text-field-padding-inline);
+    border: 1px solid var(--text-field-border-default);
+    border-radius: var(--text-field-radius);
+    background-color: var(--text-field-bg);
+    color: var(--text-field-fg);
+    font-size: var(--text-field-font-size-md);
+    transition: border-color var(--text-field-motion-duration) var(--motion-easing-standard), background-color var(--text-field-motion-duration) var(--motion-easing-standard);
+    &::placeholder {
+      color: var(--text-field-placeholder);
+    }
+    &:focus-visible {
+      border-color: var(--text-field-border-focus);
+      outline: var(--text-field-focus-ring-width) solid var(--text-field-focus-ring);
+      outline-offset: var(--text-field-focus-ring-offset);
+    }
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+    &:read-only:not(:disabled) {
+      background-color: var(--color-surface-sunken);
+    }
+    &:hover:not(:disabled, :focus-visible) {
+      border-color: var(--text-field-border-hover);
+    }
+  }
+  .TextField_field[data-size=sm] .TextField_input {
+    min-block-size: var(--text-field-height-sm);
+    font-size: var(--text-field-font-size-sm);
+  }
+  .TextField_field[data-size=lg] .TextField_input {
+    min-block-size: var(--text-field-height-lg);
+    font-size: var(--text-field-font-size-lg);
+  }
+  .TextField_field[data-invalid] .TextField_input {
+    border-color: var(--text-field-border-invalid);
+  }
+}
+/*# sourceMappingURL=text-field.css.map */

package/dist/text-field.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/field/Field.module.css","../src/text-field/TextField.module.css"],"sourcesContent":["/* Every value is a token (--field-*). The control itself brings its own styles. */\n\n@layer components {\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--field-gap);\n  }\n\n  .label {\n    font-size: var(--field-label-font-size);\n    font-weight: var(--field-label-font-weight);\n    color: var(--field-label-fg);\n  }\n\n  .required {\n    margin-inline-start: var(--field-required-gap);\n    color: var(--field-required-fg);\n  }\n\n  .description {\n    margin: 0;\n    font-size: var(--field-description-font-size);\n    color: var(--field-description-fg);\n  }\n\n  .error {\n    margin: 0;\n    font-size: var(--field-error-font-size);\n    color: var(--field-error-fg);\n  }\n}\n","/*\n * The input's own styles (--text-field-*). Label, description and error come\n * from Field. State lives on the wrapper as data attributes and on the input\n * as native pseudo-classes.\n */\n\n@layer components {\n  .field {\n    font-family: var(--text-field-font-family);\n  }\n\n  .input {\n    min-block-size: var(--text-field-height-md);\n    padding-block: 0;\n    padding-inline: var(--text-field-padding-inline);\n    border: 1px solid var(--text-field-border-default);\n    border-radius: var(--text-field-radius);\n    background-color: var(--text-field-bg);\n    color: var(--text-field-fg);\n    font-size: var(--text-field-font-size-md);\n    transition:\n      border-color var(--text-field-motion-duration) var(--motion-easing-standard),\n      background-color var(--text-field-motion-duration) var(--motion-easing-standard);\n\n    &::placeholder {\n      color: var(--text-field-placeholder);\n    }\n\n    &:focus-visible {\n      border-color: var(--text-field-border-focus);\n      outline: var(--text-field-focus-ring-width) solid var(--text-field-focus-ring);\n      outline-offset: var(--text-field-focus-ring-offset);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:read-only:not(:disabled) {\n      background-color: var(--color-surface-sunken);\n    }\n\n    &:hover:not(:disabled, :focus-visible) {\n      border-color: var(--text-field-border-hover);\n    }\n  }\n\n  .field[data-size=\"sm\"] .input {\n    min-block-size: var(--text-field-height-sm);\n    font-size: var(--text-field-font-size-sm);\n  }\n\n  .field[data-size=\"lg\"] .input {\n    min-block-size: var(--text-field-height-lg);\n    font-size: var(--text-field-font-size-lg);\n  }\n\n  .field[data-invalid] .input {\n    border-color: var(--text-field-border-invalid);\n  }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACX;AAEA,GAACC;AACC,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,WAAO,IAAI;AACb;AAEA,GAACC;AACC,yBAAqB,IAAI;AACzB,WAAO,IAAI;AACb;AAEA,GAACC;AACC,YAAQ;AACR,eAAW,IAAI;AACf,WAAO,IAAI;AACb;AAEA,GAACC;AACC,YAAQ;AACR,eAAW,IAAI;AACf,WAAO,IAAI;AACb;AACF;;;ACzBA;AACE,GAACC;AACC,iBAAa,IAAI;AACnB;AAEA,GAACC;AACC,oBAAgB,IAAI;AACpB,mBAAe;AACf,oBAAgB,IAAI;AACpB,YAAQ,IAAI,MAAM,IAAI;AACtB,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,gBACE,aAAa,IAAI,8BAA8B,IAAI,yBAAyB,EAC5E,iBAAiB,IAAI,8BAA8B,IAAI;AAEzD,KAAC;AACC,aAAO,IAAI;AACb;AAEA,KAAC;AACC,oBAAc,IAAI;AAClB,eAAS,IAAI,+BAA+B,MAAM,IAAI;AACtD,sBAAgB,IAAI;AACtB;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,UAAU,KAAK;AACd,wBAAkB,IAAI;AACxB;AAEA,KAAC,MAAM,KAAK,WAAW;AACrB,oBAAc,IAAI;AACpB;AACF;AAEA,GAzCCD,eAyCK,CAAC,cAAgB,CArCtBC;AAsCC,oBAAgB,IAAI;AACpB,eAAW,IAAI;AACjB;AAEA,GA9CCD,eA8CK,CAAC,cAAgB,CA1CtBC;AA2CC,oBAAgB,IAAI;AACpB,eAAW,IAAI;AACjB;AAEA,GAnDCD,eAmDK,CAAC,cAAc,CA/CpBC;AAgDC,kBAAc,IAAI;AACpB;AACF;","names":["field","label","required","description","error","field","input"]}

package/dist/text-field.d.ts

@@ -0,0 +1,43 @@
+import * as react from 'react';
+import { InputHTMLAttributes, ReactNode, Ref } from 'react';
+
+type TextFieldSize = 'sm' | 'md' | 'lg';
+interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Visible label. Always rendered: a placeholder is not a label. */
+    label: ReactNode;
+    /** Help text under the field, exposed as the input's accessible description. */
+    description?: ReactNode;
+    /**
+     * Error message. Its presence marks the input invalid (`aria-invalid`,
+     * `data-invalid`) and the message is announced as an alert.
+     */
+    error?: ReactNode;
+    /** @default 'md' */
+    size?: TextFieldSize;
+    /** The `<input>` element. */
+    ref?: Ref<HTMLInputElement>;
+    /** Applied to the wrapper, not the input. */
+    className?: string;
+}
+/**
+ * A single-line text input on top of `Field`: label, description and error
+ * wired for assistive technology. Controlled and uncontrolled behave exactly
+ * like the native input (`value`/`onChange` or `defaultValue`). Every value
+ * comes from `--text-field-*` and `--field-*` tokens; state is exposed as
+ * `data-size`, `data-invalid`, `data-disabled` and `data-readonly` on the
+ * wrapper.
+ *
+ * @status stable
+ * @category Forms
+ * @accessibility A native text `input` wired through Field: `label[for]`, `aria-describedby` for description and error, `aria-invalid` and `aria-required`. Everything the browser gives a native input (autofill, IME, forms) applies.
+ * @do Always pass `label`; use a visible one.
+ * Prefer `error` text that says how to fix the value.
+ * @dont Use `placeholder` as the label.
+ * Use it for multi-line text; use Textarea.
+ */
+declare function TextField({ label, description, error, size, required, disabled, readOnly, id, className, ref, 'aria-describedby': describedBy, ...rest }: TextFieldProps): react.JSX.Element;
+declare namespace TextField {
+    var displayName: string;
+}
+
+export { TextField, type TextFieldProps, type TextFieldSize };

package/dist/text-field.js

@@ -0,0 +1,6 @@
+export { TextField } from './chunk-MXWXJZFS.js';
+import './chunk-2PXTVZ7H.js';
+import './chunk-ZVDN3GRI.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=text-field.js.map
+//# sourceMappingURL=text-field.js.map

package/dist/text-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"text-field.js"}

package/dist/text.css

@@ -0,0 +1,53 @@
+/* src/text/Text.module.css */
+@layer components {
+  .Text_text {
+    margin: 0;
+    font-family: var(--text-font-family-body);
+    font-size: var(--text-size-md);
+    font-weight: var(--text-weight-regular);
+    line-height: var(--text-line-height);
+    color: var(--text-tone-default);
+    &[data-size=xs] {
+      font-size: var(--text-size-xs);
+    }
+    &[data-size=sm] {
+      font-size: var(--text-size-sm);
+    }
+    &[data-size=lg] {
+      font-size: var(--text-size-lg);
+    }
+    &[data-size=xl] {
+      font-size: var(--text-size-xl);
+    }
+    &[data-weight=medium] {
+      font-weight: var(--text-weight-medium);
+    }
+    &[data-weight=semibold] {
+      font-weight: var(--text-weight-semibold);
+    }
+    &[data-tone=muted] {
+      color: var(--text-tone-muted);
+    }
+    &[data-tone=faint] {
+      color: var(--text-tone-faint);
+    }
+    &[data-family=mono] {
+      font-family: var(--text-font-family-mono);
+    }
+    &[data-align=start] {
+      text-align: start;
+    }
+    &[data-align=center] {
+      text-align: center;
+    }
+    &[data-align=end] {
+      text-align: end;
+    }
+    &[data-truncate] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+/*# sourceMappingURL=text.css.map */

package/dist/text.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/text/Text.module.css"],"sourcesContent":["/* Every value is a token (--text-*). Variants are data attributes. */\n\n@layer components {\n  .text {\n    margin: 0;\n    font-family: var(--text-font-family-body);\n    font-size: var(--text-size-md);\n    font-weight: var(--text-weight-regular);\n    line-height: var(--text-line-height);\n    color: var(--text-tone-default);\n\n    &[data-size=\"xs\"] { font-size: var(--text-size-xs); }\n    &[data-size=\"sm\"] { font-size: var(--text-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--text-size-lg); }\n    &[data-size=\"xl\"] { font-size: var(--text-size-xl); }\n    &[data-weight=\"medium\"] { font-weight: var(--text-weight-medium); }\n    &[data-weight=\"semibold\"] { font-weight: var(--text-weight-semibold); }\n    &[data-tone=\"muted\"] { color: var(--text-tone-muted); }\n    &[data-tone=\"faint\"] { color: var(--text-tone-faint); }\n    &[data-family=\"mono\"] { font-family: var(--text-font-family-mono); }\n    &[data-align=\"start\"] { text-align: start; }\n    &[data-align=\"center\"] { text-align: center; }\n    &[data-align=\"end\"] { text-align: end; }\n\n    &[data-truncate] {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,YAAQ;AACR,iBAAa,IAAI;AACjB,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,iBAAa,IAAI;AACjB,WAAO,IAAI;AAEX,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAwB,mBAAa,IAAI;AAAuB;AAClE,KAAC,CAAC;AAA0B,mBAAa,IAAI;AAAyB;AACtE,KAAC,CAAC;AAAqB,aAAO,IAAI;AAAoB;AACtD,KAAC,CAAC;AAAqB,aAAO,IAAI;AAAoB;AACtD,KAAC,CAAC;AAAsB,mBAAa,IAAI;AAA0B;AACnE,KAAC,CAAC;AAAsB,kBAAY;AAAO;AAC3C,KAAC,CAAC;AAAuB,kBAAY;AAAQ;AAC7C,KAAC,CAAC;AAAoB,kBAAY;AAAK;AAEvC,KAAC,CAAC;AACA,gBAAU;AACV,qBAAe;AACf,mBAAa;AACf;AACF;AACF;","names":["text"]}