@skdx/react 0.26.0

package/dist/table/types.d.ts

@@ -0,0 +1,355 @@
+import type { CheckboxProps } from '../checkbox/types.js';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** Direction a {@link Table} column is sorted in: ascending or descending. */
+export type SortDirection = 'asc' | 'desc';
+/** The currently sorted column and its direction, as tracked by {@link Table}. */
+export interface TableSortState {
+    columnKey: string;
+    direction: SortDirection;
+}
+/**
+ * A whole table's sort state: one column (single sort, the default), an ordered
+ * list of columns (`multiSort`, most significant first), or nothing sorted.
+ *
+ * Single-sort tables are given and handed back the bare object — the array form
+ * only appears once `multiSort` is on, so existing single-sort code is unaffected.
+ */
+export type TableSort = TableSortState | TableSortState[] | null;
+/**
+ * Which rows a {@link TableSelectAllCheckbox} covers: only the ids it was
+ * handed (`'page'`) or the entire dataset (`'all'`). There is no default — the
+ * two behave identically until the table is paginated or virtualized, at which
+ * point picking the wrong one is a bug found in production.
+ */
+export type TableSelectAllScope = 'page' | 'all';
+/** How many rows a {@link Table} allows selected at once: one, many, or no selection. */
+export type TableSelectionMode = 'single' | 'multiple' | 'none';
+/** Per-column pixel widths, keyed by a header cell's `columnKey` (falling back to its `sortKey`). */
+export type TableColumnWidths = Record<string, number>;
+/** @internal Shared sort/selection state distributed from {@link Table} to its parts via context. Not part of the public API. */
+export interface TableContextValue {
+    /** Unique per-table id, used to derive stable `id`/`aria-controls` pairs for detail rows. */
+    tableId: string;
+    /** The most significant sorted column, or `null`. Equivalent to `sortList[0] ?? null`. */
+    sort: TableSortState | null;
+    /** Every sorted column, most significant first. At most one entry unless `multiSort` is on. */
+    sortList: TableSortState[];
+    /** Whether activating a second column adds to the sort rather than replacing it. */
+    multiSort: boolean;
+    selected: Set<string>;
+    selectionMode: TableSelectionMode;
+    /** Row ids whose detail row is currently expanded. */
+    expandedRows: Set<string>;
+    toggleRowExpanded: (rowId: string) => void;
+    isRowExpanded: (rowId: string) => boolean;
+    /** Current per-column widths in pixels; columns absent from it are left to the browser. */
+    columnWidths: TableColumnWidths;
+    setColumnWidth: (columnKey: string, width: number) => void;
+    /**
+     * Cycles the given column through asc → desc → unsorted; switching to a
+     * different column always starts at asc. `columnLabel` is the header cell's
+     * own text, used only for the live-region announcement.
+     */
+    toggleSort: (columnKey: string, columnLabel?: string) => void;
+    /**
+     * Toggles a row's selection. In `'single'` mode, selecting a new row replaces
+     * the current selection. Passing `extend` (a Shift-click) selects every row
+     * between the last row toggled and this one, in `'multiple'` mode only.
+     */
+    toggleRow: (id: string, extend?: boolean) => void;
+    isRowSelected: (id: string) => boolean;
+    /** Toggles all given row ids: selects every id unless all are already selected, in which case it deselects them. */
+    toggleAll: (allIds: string[]) => void;
+    isAllSelected: (allIds: string[]) => boolean;
+    isSomeSelected: (allIds: string[]) => boolean;
+}
+/**
+ * @internal Column-scoped defaults a {@link TableHeaderCell} publishes to the
+ * sort/resize parts nested inside it, so those parts don't repeat the column's
+ * key and bounds. Every field is optional — the parts also work standalone,
+ * given their own props. Not part of the public API.
+ */
+export interface TableHeaderCellContextValue {
+    sortKey?: string;
+    columnKey?: string;
+    minWidth?: number;
+    maxWidth?: number;
+    resizeLabel?: string;
+    resizeStep?: number;
+}
+/** Props for the {@link Table} root, a native `<table>` with optional headless sorting and selection state. */
+export interface TableProps extends Omit<PrimitivePropsWithRef<'table'>, 'onChange'> {
+    /**
+     * Current sort state, for controlled usage. Pair with `onSortChange`. A bare
+     * object (or `null`) for single sort, an array — most significant column
+     * first — when `multiSort` is on.
+     * @default undefined — uncontrolled, the table tracks its own sort state.
+     */
+    sort?: TableSort;
+    /**
+     * Initial sort state, for uncontrolled usage.
+     * @default null — nothing sorted, so every header reports `aria-sort="none"`.
+     */
+    defaultSort?: TableSort;
+    /**
+     * Fires with the new sort state whenever a sortable `TableHeaderCell` is
+     * activated, controlled or not. Handed the same shape `sort` takes: a bare
+     * object or `null` while `multiSort` is off, an array once it is on.
+     * @default undefined — no-op if omitted; the table still tracks sort internally.
+     */
+    onSortChange?: (sort: TableSort) => void;
+    /**
+     * Lets several columns be sorted at once: activating a second column appends
+     * it to the sort instead of replacing the first, and `sort` becomes an array
+     * ordered most-significant-first. Off, exactly one column can carry
+     * `aria-sort="ascending" | "descending"` at a time.
+     * @default false — a second column replaces the first, and `sort` stays a bare object.
+     */
+    multiSort?: boolean;
+    /**
+     * Selected row ids, for controlled usage. Pair with `onSelectedChange`. Accepts a `Set` or an array.
+     * @default undefined
+     */
+    selected?: Set<string> | string[];
+    /**
+     * Initially selected row ids, for uncontrolled usage. Accepts a `Set` or an array.
+     * @default undefined
+     */
+    defaultSelected?: Set<string> | string[];
+    /**
+     * Fires with the new selected ids (as an array) whenever selection changes, controlled or not.
+     * @default undefined
+     */
+    onSelectedChange?: (selected: string[]) => void;
+    /**
+     * Whether rows can be selected at all, and if so, whether one or many at
+     * once. `'none'` disables row-click and checkbox selection entirely.
+     * @default 'none'
+     */
+    selectionMode?: TableSelectionMode;
+    /**
+     * Formats the message announced (through the shared `LiveAnnouncer`) when a
+     * sortable `TableHeaderCell` is activated — a changed `aria-sort` is not
+     * itself re-announced by screen readers. `column` is the header cell's own
+     * text. Return an empty string to announce nothing.
+     * @default defaultGetSortLabel — e.g. `"Amount sorted ascending"`
+     */
+    getSortLabel?: (column: string, direction: SortDirection | null) => string;
+    /**
+     * Row ids whose `TableExpandedRow` detail row is open, for controlled usage.
+     * Pair with `onExpandedRowIdsChange`.
+     * @default undefined
+     */
+    expandedRowIds?: string[];
+    /**
+     * Initially expanded detail rows, for uncontrolled usage.
+     * @default []
+     */
+    defaultExpandedRowIds?: string[];
+    /**
+     * Fires with the new set of expanded row ids whenever a `TableExpandTrigger`
+     * is activated, controlled or not.
+     * @default undefined
+     */
+    onExpandedRowIdsChange?: (rowIds: string[]) => void;
+    /**
+     * Per-column pixel widths keyed by `columnKey`, for controlled usage. Pair
+     * with `onColumnWidthsChange`.
+     * @default undefined
+     */
+    columnWidths?: TableColumnWidths;
+    /**
+     * Initial per-column pixel widths, for uncontrolled usage. Columns left out
+     * size themselves until the user resizes them.
+     * @default {}
+     */
+    defaultColumnWidths?: TableColumnWidths;
+    /**
+     * Fires with the full width map whenever a resizable column is dragged or
+     * keyboard-resized, controlled or not.
+     * @default undefined
+     */
+    onColumnWidthsChange?: (widths: TableColumnWidths) => void;
+}
+/** Props for {@link TableHeader}, the `<thead>` section. */
+export interface TableHeaderProps extends PrimitivePropsWithRef<'thead'> {
+}
+/** Props for {@link TableBody}, the `<tbody>` section. */
+export interface TableBodyProps extends PrimitivePropsWithRef<'tbody'> {
+}
+/** Props for {@link TableFooter}, the `<tfoot>` section. */
+export interface TableFooterProps extends PrimitivePropsWithRef<'tfoot'> {
+}
+/** Props for a single selectable, sortable-aware row inside a {@link Table}. */
+export interface TableRowProps extends PrimitivePropsWithRef<'tr'> {
+    /**
+     * This row's identifier within the table's selection state. Required for
+     * the row to be selectable (via click or its own checkbox); rows without
+     * it are never selected or clickable-to-select.
+     * @default undefined
+     */
+    rowId?: string;
+}
+/** Props for a single column header cell inside a {@link Table}, optionally sortable and resizable. */
+export interface TableHeaderCellProps extends PrimitivePropsWithRef<'th'> {
+    /**
+     * Column identifier used for sorting. Presence of this prop is what makes
+     * the header cell sortable — omit it for a non-sortable column header.
+     * @default undefined
+     */
+    sortKey?: string;
+    /**
+     * Column identifier used for resizing, when it differs from `sortKey`.
+     * Defaults to `sortKey`; a resizable column needs one of the two.
+     * @default sortKey
+     */
+    columnKey?: string;
+    /**
+     * Renders a focusable `role="separator"` resize handle at the cell's inline
+     * end. Drag it, or focus it and press Arrow Left/Right (Home/End jump to the
+     * bounds) to resize the column.
+     * @default false
+     */
+    resizable?: boolean;
+    /**
+     * Smallest width in pixels the column can be resized to.
+     * @default 40
+     */
+    minWidth?: number;
+    /**
+     * Largest width in pixels the column can be resized to.
+     * @default 1000
+     */
+    maxWidth?: number;
+    /**
+     * Accessible name for the resize handle — a `role="separator"` widget needs
+     * its own name, distinct from the column header's.
+     * @default 'Resize column'
+     */
+    resizeLabel?: string;
+    /**
+     * Pixels one Arrow keypress moves the column edge by. Also inherited by a
+     * `TableColumnResizeTrigger` rendered as a child of this cell.
+     * @default 8 — matches the handle's own default, small enough to land on a
+     * precise width without a hundred presses.
+     */
+    resizeStep?: number;
+}
+/**
+ * Props for {@link TableColumnHeaderSortTrigger}, the button inside a `<th>`
+ * that cycles that column's sort.
+ */
+export interface TableColumnHeaderSortTriggerProps extends PrimitivePropsWithRef<'button'> {
+    /**
+     * Column this trigger sorts. Inherited from the enclosing `TableHeaderCell`'s
+     * `sortKey`, so you only pass it when rendering the trigger outside one.
+     * @default the enclosing `TableHeaderCell`'s `sortKey` — the trigger renders nothing without either.
+     */
+    sortKey?: string;
+}
+/**
+ * Props for {@link TableSortIndicator}, the decorative arrow reflecting a
+ * column's sort direction.
+ */
+export interface TableSortIndicatorProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Column whose direction this indicator reflects. Inherited from the
+     * enclosing `TableHeaderCell`'s `sortKey`.
+     * @default the enclosing `TableHeaderCell`'s `sortKey`.
+     */
+    sortKey?: string;
+}
+/** Props for {@link TableSelectAllCheckbox}, the tri-state header checkbox. */
+export interface TableSelectAllCheckboxProps extends Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'onCheckedChange'> {
+    /**
+     * The ids this checkbox selects and reports on. Must be the *whole dataset's*
+     * ids when `scope` is `'all'`, and only the rendered page's when it is
+     * `'page'` — the table stores no row registry, so this list is the only thing
+     * that decides which.
+     */
+    rowIds: string[];
+    /**
+     * Whether `rowIds` is the current page/window or the entire dataset. Required
+     * and unset by default: the two are indistinguishable until the table
+     * paginates or virtualizes, and guessing produces a "select all" that quietly
+     * selects only what is on screen.
+     */
+    scope: TableSelectAllScope;
+    /**
+     * Words the checkbox's accessible name. `count` is `rowIds.length`, so the
+     * name can keep saying how many rows and which scope — which is the reason a
+     * plain `aria-label` is not enough here.
+     * @default defaultSelectAllLabel — e.g. `"Select all 40 rows on this page"`
+     */
+    getSelectAllLabel?: (scope: TableSelectAllScope, count: number) => string;
+}
+/** Props for {@link TableRowSelectCheckbox}, one row's selection checkbox. */
+export interface TableRowSelectCheckboxProps extends Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'onCheckedChange'> {
+    /** Id of the row this checkbox selects. Must match the enclosing `TableRow`'s `rowId`. */
+    rowId: string;
+}
+/** Props for {@link TableColumnResizeTrigger}, the draggable/keyboard-operable column edge. */
+export interface TableColumnResizeTriggerProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Column whose width this handle writes. Inherited from the enclosing
+     * `TableHeaderCell`'s `columnKey` (which itself falls back to `sortKey`); a
+     * handle with neither has nowhere to store a width and renders nothing.
+     * @default the enclosing `TableHeaderCell`'s `columnKey ?? sortKey`.
+     */
+    columnKey?: string;
+    /**
+     * Smallest width in pixels the column can be dragged or stepped to; also the
+     * width **Home** snaps to.
+     * @default the enclosing `TableHeaderCell`'s `minWidth`, otherwise `40`.
+     */
+    minWidth?: number;
+    /**
+     * Largest width in pixels the column can be dragged or stepped to; also the
+     * width **End** snaps to.
+     * @default the enclosing `TableHeaderCell`'s `maxWidth`, otherwise `1000`.
+     */
+    maxWidth?: number;
+    /**
+     * Pixels one Arrow keypress moves the column edge by.
+     * @default the enclosing `TableHeaderCell`'s `resizeStep`, otherwise `8`.
+     */
+    step?: number;
+    /**
+     * Accessible name for the handle — a focusable `role="separator"` is a widget
+     * and needs its own name. Prefer a column-specific one
+     * (`"Resize Name column"`): the handle sits inside the `<th>`, so its name
+     * joins the header's name-from-content.
+     * @default the enclosing `TableHeaderCell`'s `resizeLabel`, otherwise `'Resize column'`.
+     */
+    label?: string;
+}
+/** Props for a single body cell (`<td>`) rendered inside a {@link Table} row. */
+export interface TableCellProps extends PrimitivePropsWithRef<'td'> {
+}
+/** Props for {@link TableCaption}, the table's `<caption>`. */
+export interface TableCaptionProps extends PrimitivePropsWithRef<'caption'> {
+}
+/** Props for {@link TableExpandTrigger}, the disclosure button that opens a row's detail row. */
+export interface TableExpandTriggerProps extends PrimitivePropsWithRef<'button'> {
+    /** Id of the row this trigger expands. Must match the `rowId` of the paired `TableExpandedRow`. */
+    rowId: string;
+}
+/** Props for {@link TableExpandedRow}, the full-width detail row revealed by a {@link TableExpandTrigger}. */
+export interface TableExpandedRowProps extends PrimitivePropsWithRef<'tr'> {
+    /** Id of the row this detail row belongs to. Must match the paired `TableExpandTrigger`'s `rowId`. */
+    rowId: string;
+    /**
+     * How many columns the detail cell spans — set it to the table's column
+     * count so the row doesn't tear the column grid.
+     * @default 1
+     */
+    colSpan?: number;
+}
+/** Props for {@link TableEmpty}, the full-width row shown in place of body rows when there is no data. */
+export interface TableEmptyProps extends PrimitivePropsWithRef<'tr'> {
+    /**
+     * How many columns the empty cell spans — set it to the table's column count.
+     * @default 1
+     */
+    colSpan?: number;
+}

package/dist/tabs/Tabs.cjs

@@ -0,0 +1 @@
+"use strict";var q=Object.create;var p=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var W=(t,e)=>{for(var a in e)p(t,a,{get:e[a],enumerable:!0})},y=(t,e,a,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of J(e))!U.call(t,o)&&o!==a&&p(t,o,{get:()=>e[o],enumerable:!(r=G(e,o))||r.enumerable});return t};var T=(t,e,a)=>(a=t!=null?q(Q(t)):{},y(e||!t||!t.__esModule?p(a,"default",{value:t,enumerable:!0}):a,t)),X=t=>y(p({},"__esModule",{value:!0}),t);var j={};W(j,{Tabs:()=>k,TabsContent:()=>x,TabsList:()=>C,TabsProvider:()=>L,TabsTrigger:()=>E,makeContentId:()=>b,makeTriggerId:()=>d,useTabsContext:()=>s});module.exports=X(j);var i=T(require("react"),1),R=require("../utils/createContext.cjs"),P=require("../utils/part.cjs"),V=require("../utils/primitive.cjs"),I=require("../utils/useControllableState.cjs"),v=require("react/jsx-runtime"),[L,s]=(0,R.createSafeContext)("Tabs");function d(t,e){return`${t}-trigger-${e}`}function b(t,e){return`${t}-content-${e}`}var k=i.forwardRef(({value:t,defaultValue:e,onValueChange:a,orientation:r="horizontal",activationMode:o="automatic",...n},m)=>{let[f,B]=(0,I.useControllableState)({prop:t,defaultProp:e,onChange:a}),O=i.useId(),[_,z]=i.useState(null);return(0,v.jsx)(L,{baseId:O,value:f,onValueChange:B,orientation:r,activationMode:o,firstEnabledValue:_,setFirstEnabledValue:z,children:(0,v.jsx)(V.Primitive.div,{"data-orientation":r,...n,...(0,P.skdxPart)("tabs","root",n.className),ref:m})})});k.displayName="Tabs";var u=T(require("react"),1),h=require("../utils/composeRefs.cjs"),w=require("../utils/part.cjs"),g=require("../utils/primitive.cjs"),c=require("../utils/useRovingFocus.cjs");var D=require("react/jsx-runtime"),Y='[role="tab"]:not([disabled])',Z='[role="tab"][data-state="active"]:not([disabled])',C=u.forwardRef(({loop:t=!0,...e},a)=>{let r=s("TabsList"),o=(0,c.useRovingFocus)({orientation:r.orientation,loop:t,itemSelector:'[role="tab"]'}),n=u.useRef(null),m=(0,h.useComposedRefs)(a,n);return(0,c.useRovingTabStop)(n,Z,"data-value",r.firstEnabledValue,r.setFirstEnabledValue),(0,c.useRovingTabStop)(n,Y,"data-value",r.firstEnabledValue,r.setFirstEnabledValue),(0,D.jsx)(g.Primitive.div,{role:"tablist","aria-orientation":r.orientation,"data-orientation":r.orientation,...e,...(0,w.skdxPart)("tabs","list",e.className),ref:m,onKeyDown:(0,g.composeEventHandlers)(e.onKeyDown,o)})});C.displayName="TabsList";var S=T(require("react"),1),H=require("../utils/part.cjs"),l=require("../utils/primitive.cjs"),M=require("../utils/useRovingFocus.cjs");var N=require("react/jsx-runtime"),E=S.forwardRef(({value:t,disabled:e,...a},r)=>{let o=s("TabsTrigger"),n=o.value===t,m=o.firstEnabledValue===null?n&&!e:o.firstEnabledValue===t;return(0,N.jsx)(l.Primitive.button,{type:"button",role:"tab","aria-selected":n,"aria-controls":b(o.baseId,t),id:d(o.baseId,t),"data-state":n?"active":"inactive","data-disabled":e?"":void 0,"data-orientation":o.orientation,"data-value":t,disabled:e,tabIndex:(0,M.rovingTabIndex)(o.firstEnabledValue!==null||o.value!==void 0,m,e),...a,...(0,H.skdxPart)("tabs","trigger",a.className),ref:r,onClick:(0,l.composeEventHandlers)(a.onClick,()=>{e||o.onValueChange(t)}),onFocus:(0,l.composeEventHandlers)(a.onFocus,()=>{o.activationMode==="automatic"&&!e&&!n&&o.onValueChange(t)}),onKeyDown:(0,l.composeEventHandlers)(a.onKeyDown,f=>{[" ","Enter"].includes(f.key)&&!e&&(f.preventDefault(),o.onValueChange(t))})})});E.displayName="TabsTrigger";var F=T(require("react"),1),K=require("../utils/part.cjs"),$=require("../utils/primitive.cjs");var A=require("react/jsx-runtime"),x=F.forwardRef(({value:t,forceMount:e,...a},r)=>{let o=s("TabsContent"),n=o.value===t;return e||n?(0,A.jsx)($.Primitive.div,{role:"tabpanel","aria-labelledby":d(o.baseId,t),id:b(o.baseId,t),"data-state":n?"active":"inactive","data-orientation":o.orientation,hidden:!n,tabIndex:0,...a,...(0,K.skdxPart)("tabs","content",a.className),ref:r}):null});x.displayName="TabsContent";0&&(module.exports={Tabs,TabsContent,TabsList,TabsProvider,TabsTrigger,makeContentId,makeTriggerId,useTabsContext});

package/dist/tabs/Tabs.d.cts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { TabsContextValue, TabsProps } from './types.cjs';
+export declare const TabsProvider: {
+    (props: TabsContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useTabsContext: (consumerName: string) => TabsContextValue;
+/** @internal Deterministic `id` for a tab trigger, used to wire `aria-controls`/`aria-labelledby` to its panel. */
+export declare function makeTriggerId(baseId: string, value: string): string;
+/** @internal Deterministic `id` for a tab panel, paired with {@link makeTriggerId}. */
+export declare function makeContentId(baseId: string, value: string): string;
+/**
+ * Root of a tabbed interface: owns the selected value and hands it down to
+ * `TabsList` / `TabsTrigger` / `TabsContent` via context. Renders a plain
+ * `<div>` — layout of the list vs. panels is entirely up to your CSS.
+ *
+ * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="account">
+ *   <TabsList aria-label="Manage account">
+ *     <TabsTrigger value="account">Account</TabsTrigger>
+ *     <TabsTrigger value="password">Password</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="account">Account settings…</TabsContent>
+ *   <TabsContent value="password">Password settings…</TabsContent>
+ * </Tabs>
+ * ```
+ */
+export declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/tabs/Tabs.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { TabsContextValue, TabsProps } from './types.js';
+export declare const TabsProvider: {
+    (props: TabsContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useTabsContext: (consumerName: string) => TabsContextValue;
+/** @internal Deterministic `id` for a tab trigger, used to wire `aria-controls`/`aria-labelledby` to its panel. */
+export declare function makeTriggerId(baseId: string, value: string): string;
+/** @internal Deterministic `id` for a tab panel, paired with {@link makeTriggerId}. */
+export declare function makeContentId(baseId: string, value: string): string;
+/**
+ * Root of a tabbed interface: owns the selected value and hands it down to
+ * `TabsList` / `TabsTrigger` / `TabsContent` via context. Renders a plain
+ * `<div>` — layout of the list vs. panels is entirely up to your CSS.
+ *
+ * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="account">
+ *   <TabsList aria-label="Manage account">
+ *     <TabsTrigger value="account">Account</TabsTrigger>
+ *     <TabsTrigger value="password">Password</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="account">Account settings…</TabsContent>
+ *   <TabsContent value="password">Password settings…</TabsContent>
+ * </Tabs>
+ * ```
+ */
+export declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/tabs/Tabs.js

@@ -0,0 +1 @@
+import*as s from"react";import{createSafeContext as V}from"../utils/createContext.js";import{skdxPart as I}from"../utils/part.js";import{Primitive as L}from"../utils/primitive.js";import{useControllableState as k}from"../utils/useControllableState.js";import{jsx as p}from"react/jsx-runtime";var[h,i]=V("Tabs");function d(e,o){return`${e}-trigger-${o}`}function b(e,o){return`${e}-content-${o}`}var w=s.forwardRef(({value:e,defaultValue:o,onValueChange:n,orientation:r="horizontal",activationMode:t="automatic",...a},l)=>{let[m,x]=k({prop:e,defaultProp:o,onChange:n}),y=s.useId(),[R,P]=s.useState(null);return p(h,{baseId:y,value:m,onValueChange:x,orientation:r,activationMode:t,firstEnabledValue:R,setFirstEnabledValue:P,children:p(L.div,{"data-orientation":r,...a,...I("tabs","root",a.className),ref:l})})});w.displayName="Tabs";import*as c from"react";import{useComposedRefs as D}from"../utils/composeRefs.js";import{skdxPart as S}from"../utils/part.js";import{composeEventHandlers as H,Primitive as M}from"../utils/primitive.js";import{useRovingFocus as N,useRovingTabStop as T}from"../utils/useRovingFocus.js";import{jsx as $}from"react/jsx-runtime";var F='[role="tab"]:not([disabled])',K='[role="tab"][data-state="active"]:not([disabled])',u=c.forwardRef(({loop:e=!0,...o},n)=>{let r=i("TabsList"),t=N({orientation:r.orientation,loop:e,itemSelector:'[role="tab"]'}),a=c.useRef(null),l=D(n,a);return T(a,K,"data-value",r.firstEnabledValue,r.setFirstEnabledValue),T(a,F,"data-value",r.firstEnabledValue,r.setFirstEnabledValue),$(M.div,{role:"tablist","aria-orientation":r.orientation,"data-orientation":r.orientation,...o,...S("tabs","list",o.className),ref:l,onKeyDown:H(o.onKeyDown,t)})});u.displayName="TabsList";import*as g from"react";import{skdxPart as A}from"../utils/part.js";import{composeEventHandlers as f,Primitive as B}from"../utils/primitive.js";import{rovingTabIndex as O}from"../utils/useRovingFocus.js";import{jsx as _}from"react/jsx-runtime";var v=g.forwardRef(({value:e,disabled:o,...n},r)=>{let t=i("TabsTrigger"),a=t.value===e,l=t.firstEnabledValue===null?a&&!o:t.firstEnabledValue===e;return _(B.button,{type:"button",role:"tab","aria-selected":a,"aria-controls":b(t.baseId,e),id:d(t.baseId,e),"data-state":a?"active":"inactive","data-disabled":o?"":void 0,"data-orientation":t.orientation,"data-value":e,disabled:o,tabIndex:O(t.firstEnabledValue!==null||t.value!==void 0,l,o),...n,...A("tabs","trigger",n.className),ref:r,onClick:f(n.onClick,()=>{o||t.onValueChange(e)}),onFocus:f(n.onFocus,()=>{t.activationMode==="automatic"&&!o&&!a&&t.onValueChange(e)}),onKeyDown:f(n.onKeyDown,m=>{[" ","Enter"].includes(m.key)&&!o&&(m.preventDefault(),t.onValueChange(e))})})});v.displayName="TabsTrigger";import*as C from"react";import{skdxPart as z}from"../utils/part.js";import{Primitive as q}from"../utils/primitive.js";import{jsx as G}from"react/jsx-runtime";var E=C.forwardRef(({value:e,forceMount:o,...n},r)=>{let t=i("TabsContent"),a=t.value===e;return o||a?G(q.div,{role:"tabpanel","aria-labelledby":d(t.baseId,e),id:b(t.baseId,e),"data-state":a?"active":"inactive","data-orientation":t.orientation,hidden:!a,tabIndex:0,...n,...z("tabs","content",n.className),ref:r}):null});E.displayName="TabsContent";export{w as Tabs,E as TabsContent,u as TabsList,h as TabsProvider,v as TabsTrigger,b as makeContentId,d as makeTriggerId,i as useTabsContext};

package/dist/tabs/TabsContent.d.cts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { TabsContentProps } from './types.cjs';
+/**
+ * Panel shown when its `value` matches the parent `Tabs`' selected value.
+ * Renders `role="tabpanel"`, is unmounted while inactive unless `forceMount`
+ * is set, and is a focusable landmark (`tabIndex={0}`) so keyboard users can
+ * tab from the trigger straight into the panel's content.
+ *
+ * @example
+ * ```tsx
+ * <TabsContent value="password">
+ *   <PasswordForm />
+ * </TabsContent>
+ * ```
+ */
+export declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/tabs/TabsContent.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { TabsContentProps } from './types.js';
+/**
+ * Panel shown when its `value` matches the parent `Tabs`' selected value.
+ * Renders `role="tabpanel"`, is unmounted while inactive unless `forceMount`
+ * is set, and is a focusable landmark (`tabIndex={0}`) so keyboard users can
+ * tab from the trigger straight into the panel's content.
+ *
+ * @example
+ * ```tsx
+ * <TabsContent value="password">
+ *   <PasswordForm />
+ * </TabsContent>
+ * ```
+ */
+export declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/tabs/TabsList.d.cts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { TabsListProps } from './types.cjs';
+/**
+ * Container for a `Tabs`' triggers. Renders `role="tablist"` and drives
+ * roving-focus keyboard navigation (Arrow Left/Right for horizontal,
+ * Arrow Up/Down for vertical, plus Home/End) across its `TabsTrigger` children.
+ *
+ * @example
+ * ```tsx
+ * <TabsList aria-label="Manage account">
+ *   <TabsTrigger value="account">Account</TabsTrigger>
+ *   <TabsTrigger value="password">Password</TabsTrigger>
+ * </TabsList>
+ * ```
+ */
+export declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/tabs/TabsList.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { TabsListProps } from './types.js';
+/**
+ * Container for a `Tabs`' triggers. Renders `role="tablist"` and drives
+ * roving-focus keyboard navigation (Arrow Left/Right for horizontal,
+ * Arrow Up/Down for vertical, plus Home/End) across its `TabsTrigger` children.
+ *
+ * @example
+ * ```tsx
+ * <TabsList aria-label="Manage account">
+ *   <TabsTrigger value="account">Account</TabsTrigger>
+ *   <TabsTrigger value="password">Password</TabsTrigger>
+ * </TabsList>
+ * ```
+ */
+export declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/tabs/TabsTrigger.d.cts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { TabsTriggerProps } from './types.cjs';
+/**
+ * A single tab button. Renders `role="tab"` with `aria-selected` and
+ * `data-state="active" | "inactive"` for styling; selecting it (click, or
+ * focus under `activationMode="automatic"`) updates the parent `Tabs`' value.
+ *
+ * @example
+ * ```tsx
+ * <TabsTrigger value="password" disabled={!hasPassword}>Password</TabsTrigger>
+ * ```
+ */
+export declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/tabs/TabsTrigger.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { TabsTriggerProps } from './types.js';
+/**
+ * A single tab button. Renders `role="tab"` with `aria-selected` and
+ * `data-state="active" | "inactive"` for styling; selecting it (click, or
+ * focus under `activationMode="automatic"`) updates the parent `Tabs`' value.
+ *
+ * @example
+ * ```tsx
+ * <TabsTrigger value="password" disabled={!hasPassword}>Password</TabsTrigger>
+ * ```
+ */
+export declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/tabs/index.d.cts

@@ -0,0 +1,5 @@
+export * from './Tabs.cjs';
+export { TabsList } from './TabsList.cjs';
+export { TabsTrigger } from './TabsTrigger.cjs';
+export { TabsContent } from './TabsContent.cjs';
+export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps } from './types.cjs';

package/dist/tabs/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Tabs.js';
+export { TabsList } from './TabsList.js';
+export { TabsTrigger } from './TabsTrigger.js';
+export { TabsContent } from './TabsContent.js';
+export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps } from './types.js';

package/dist/tabs/types.d.cts

@@ -0,0 +1,73 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** @internal Shared state distributed from {@link Tabs} to its parts via context. Not part of the public API. */
+export interface TabsContextValue {
+    baseId: string;
+    value?: string;
+    onValueChange: (value: string) => void;
+    orientation: 'horizontal' | 'vertical';
+    activationMode: 'automatic' | 'manual';
+    /**
+     * The tablist's single tab stop, resolved against the DOM by `TabsList`: the
+     * selected tab while it is mounted and enabled, else the first enabled tab.
+     * `null` only before that has been resolved, or when every tab is disabled.
+     */
+    firstEnabledValue: string | null;
+    setFirstEnabledValue: (value: string | null) => void;
+}
+/** Props for the {@link Tabs} root. */
+export interface TabsProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Selected tab's value, for controlled usage. Pair with `onValueChange`.
+     * @default undefined — uncontrolled, tracks its own selected value internally.
+     */
+    value?: string;
+    /**
+     * Initially selected tab's value, for uncontrolled usage.
+     * @default undefined — falls back to the first enabled trigger.
+     */
+    defaultValue?: string;
+    /**
+     * Fires with the new value whenever the selected tab changes, controlled or not.
+     * @default undefined — no-op.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Layout axis, exposed as `data-orientation` and used to pick Arrow Left/Right
+     * vs Arrow Up/Down for keyboard navigation between triggers.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * `'automatic'` selects a tab as soon as it receives focus (arrow-key browsing).
+     * `'manual'` only selects on Enter/Space, letting users tab through triggers
+     * without changing panels — useful when panel content is expensive to render.
+     * @default 'automatic'
+     */
+    activationMode?: 'automatic' | 'manual';
+}
+/** Props for {@link TabsList}, the roving-focus container for `TabsTrigger`s. */
+export interface TabsListProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Whether arrow-key navigation wraps from the last trigger back to the first
+     * (and vice versa).
+     * @default true
+     */
+    loop?: boolean;
+}
+/** Props for a single {@link TabsTrigger} button. */
+export interface TabsTriggerProps extends PrimitivePropsWithRef<'button'> {
+    /** Unique identifier matched against a sibling `TabsContent`'s `value`. */
+    value: string;
+}
+/** Props for a single {@link TabsContent} panel. */
+export interface TabsContentProps extends PrimitivePropsWithRef<'div'> {
+    /** Unique identifier matched against the `TabsTrigger` that reveals this panel. */
+    value: string;
+    /**
+     * Keep this panel mounted (hidden via the `hidden` attribute) even while
+     * inactive, instead of unmounting it. Useful for animation libraries that
+     * need the outgoing panel present in the DOM during an exit transition.
+     * @default false
+     */
+    forceMount?: boolean;
+}