@yarcl/react 0.1.0 → 0.2.0

package/dist/components/Slider.js

@@ -0,0 +1,166 @@
+import { useDefaults } from "../runtime.js";
+import { colorClass, cx, radiusClass, sizeClass } from "../classes.js";
+import { useControllable } from "../hooks.js";
+import { FieldContext, useFieldProps } from "../field-context.js";
+import { useContext, useId, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Slider.tsx
+var clamp = (value, low, high) => Math.min(Math.max(value, low), high);
+function decimals(value) {
+	const text = String(value);
+	const exponent = text.match(/e-(\d+)$/);
+	if (exponent) return Number(exponent[1]);
+	return text.split(".")[1]?.length ?? 0;
+}
+var DEFAULT_THUMB_LABELS = ["Minimum", "Maximum"];
+/**
+* Picks a number, or a range with two thumbs, by dragging along a track.
+* Each thumb has `role="slider"` and supports the arrow keys, Home, End, PageUp and PageDown.
+* Shares the size scale with the other controls. Works inside a {@link Field}; outside one, give it an `aria-label`.
+*
+* @example
+* ```tsx
+* <Field label="Volume">
+*   <Slider defaultValue={40} />
+* </Field>
+* ```
+*/
+function SliderRoot(props) {
+	const own = useDefaults("Slider");
+	const field = useContext(FieldContext);
+	const uid = useId();
+	const { value: valueProp, defaultValue, onValueChange, min = 0, max = 100, step = 1, largeStep, disabled = false, name, formatValue, thumbLabels = DEFAULT_THUMB_LABELS, size, radius, color, className, style, id, required: _required, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, onPointerDown, onPointerMove, onPointerUp, onLostPointerCapture, ...rest } = useFieldProps(props);
+	const [value, setValue] = useControllable(valueProp, defaultValue ?? min, onValueChange);
+	const trackRef = useRef(null);
+	const thumbRefs = useRef([]);
+	const dragging = useRef(null);
+	const range = Array.isArray(value);
+	const values = (range ? value : [value]).map((v) => clamp(v, min, max));
+	const precision = decimals(step);
+	const big = largeStep ?? Math.max(step, Math.round((max - min) / 10 / step) * step);
+	const snap = (raw) => Number(clamp(min + Math.round((raw - min) / step) * step, min, max).toFixed(precision));
+	const lowerBound = (index) => range && index === 1 ? values[0] : min;
+	const upperBound = (index) => range && index === 0 ? values[1] : max;
+	const percent = (v) => max > min ? (v - min) / (max - min) * 100 : 0;
+	function update(index, raw) {
+		const next = clamp(snap(raw), lowerBound(index), upperBound(index));
+		if (next === values[index]) return;
+		const nextValues = values.slice();
+		nextValues[index] = next;
+		setValue(range ? [nextValues[0], nextValues[1]] : nextValues[0]);
+	}
+	const rtl = () => trackRef.current != null && getComputedStyle(trackRef.current).direction === "rtl";
+	function valueAt(clientX) {
+		const rect = trackRef.current.getBoundingClientRect();
+		const ratio = rect.width > 0 ? clamp((clientX - rect.left) / rect.width, 0, 1) : 0;
+		return min + (rtl() ? 1 - ratio : ratio) * (max - min);
+	}
+	function handlePointerDown(event) {
+		onPointerDown?.(event);
+		if (disabled || event.defaultPrevented || event.button !== 0) return;
+		event.preventDefault();
+		const raw = valueAt(event.clientX);
+		let index = 0;
+		if (range) {
+			const [start, end] = values;
+			const toStart = Math.abs(raw - start);
+			const toEnd = Math.abs(raw - end);
+			index = toEnd < toStart || toEnd === toStart && raw > end ? 1 : 0;
+		}
+		dragging.current = index;
+		event.currentTarget.setPointerCapture(event.pointerId);
+		thumbRefs.current[index]?.focus();
+		update(index, raw);
+	}
+	function handlePointerMove(event) {
+		onPointerMove?.(event);
+		if (dragging.current != null) update(dragging.current, valueAt(event.clientX));
+	}
+	function handlePointerUp(event) {
+		onPointerUp?.(event);
+		dragging.current = null;
+	}
+	function handleLostPointerCapture(event) {
+		onLostPointerCapture?.(event);
+		dragging.current = null;
+	}
+	function handleKeyDown(index, event) {
+		if (disabled) return;
+		const current = values[index];
+		const forward = rtl() ? -step : step;
+		const moves = {
+			ArrowRight: current + forward,
+			ArrowLeft: current - forward,
+			ArrowUp: current + step,
+			ArrowDown: current - step,
+			PageUp: current + big,
+			PageDown: current - big,
+			Home: lowerBound(index),
+			End: upperBound(index)
+		};
+		if (!(event.key in moves)) return;
+		event.preventDefault();
+		update(index, moves[event.key]);
+	}
+	const outerLabelledBy = ariaLabelledBy ?? (field ? field.labelId : void 0);
+	const start = range ? percent(values[0]) : 0;
+	const end = percent(values[values.length - 1]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("yarcl-slider", sizeClass(size ?? own.size, "Slider"), radiusClass(radius ?? own.radius, size ?? own.size), colorClass(color ?? own.color), className),
+		style: {
+			...style,
+			"--yarcl-slider-start": `${start}%`,
+			"--yarcl-slider-end": `${end}%`
+		},
+		"data-disabled": disabled || void 0,
+		onPointerDown: handlePointerDown,
+		onPointerMove: handlePointerMove,
+		onPointerUp: handlePointerUp,
+		onLostPointerCapture: handleLostPointerCapture,
+		...rest,
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: trackRef,
+			className: "yarcl-slider-track",
+			children: [/* @__PURE__ */ jsx("div", { className: "yarcl-slider-range" }), values.map((v, index) => {
+				const thumbId = index === 0 && id ? id : `${uid}-thumb-${index}`;
+				const thumbLabel = range ? thumbLabels[index] : void 0;
+				return /* @__PURE__ */ jsx("div", {
+					ref: (el) => {
+						thumbRefs.current[index] = el;
+					},
+					id: thumbId,
+					role: "slider",
+					tabIndex: disabled ? void 0 : 0,
+					className: "yarcl-slider-thumb",
+					style: { "--yarcl-slider-position": `${percent(v)}%` },
+					"aria-valuemin": lowerBound(index),
+					"aria-valuemax": upperBound(index),
+					"aria-valuenow": v,
+					"aria-valuetext": formatValue?.(v),
+					"aria-orientation": "horizontal",
+					"aria-disabled": disabled || void 0,
+					"aria-invalid": ariaInvalid,
+					"aria-describedby": ariaDescribedBy,
+					"aria-label": thumbLabel && !outerLabelledBy && ariaLabel ? `${ariaLabel} ${thumbLabel}` : thumbLabel ?? ariaLabel,
+					"aria-labelledby": outerLabelledBy && (thumbLabel ? `${outerLabelledBy} ${thumbId}` : outerLabelledBy),
+					onKeyDown: (event) => handleKeyDown(index, event)
+				}, index);
+			})]
+		}), name != null && values.map((v, index) => /* @__PURE__ */ jsx("input", {
+			type: "hidden",
+			name,
+			value: v,
+			disabled
+		}, index))]
+	});
+}
+function SliderRange(props) {
+	return /* @__PURE__ */ jsx(SliderRoot, { ...props });
+}
+/**
+* Picks a number, or a range with two thumbs, by dragging along a track.
+* Use `Slider.Range` for an explicitly range-only API.
+*/
+var Slider = Object.assign(SliderRoot, { Range: SliderRange });
+//#endregion
+export { Slider };

package/dist/components/Spinner.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps } from 'react';
+import type { Color, ComponentSize } from '../types';
+/** Props for {@link Spinner}. */
+export interface SpinnerProps extends Omit<ComponentProps<'span'>, 'color'> {
+    /** Diameter from the size's `iconSize`, from the `sizes` config. Inherits the surrounding control's size when omitted. */
+    size?: ComponentSize<'Spinner'>;
+    /** Semantic color, from the `colors` config. Uses the current text color when omitted. */
+    color?: Color;
+    /**
+     * Accessible label announced to screen readers.
+     * @default 'Loading'
+     */
+    label?: string;
+}
+/**
+ * An indeterminate loading indicator. Sized like an icon, so it fits inside controls of the same size.
+ *
+ * @example
+ * ```tsx
+ * <Spinner size="lg" color="brand" />
+ * ```
+ */
+export declare function Spinner({ size, color, label, className, ...props }: SpinnerProps): import("react").JSX.Element;

package/dist/components/Spinner.js

@@ -0,0 +1,23 @@
+import { useDefaults } from "../runtime.js";
+import { colorClass, cx, sizeClass } from "../classes.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Spinner.tsx
+/**
+* An indeterminate loading indicator. Sized like an icon, so it fits inside controls of the same size.
+*
+* @example
+* ```tsx
+* <Spinner size="lg" color="brand" />
+* ```
+*/
+function Spinner({ size, color, label = "Loading", className, ...props }) {
+	const own = useDefaults("Spinner");
+	return /* @__PURE__ */ jsx("span", {
+		role: "status",
+		"aria-label": label,
+		className: cx("yarcl-spinner", (size ?? own.size) && sizeClass(size ?? own.size, "Spinner"), (color ?? own.color) && cx("yarcl-spinner-colored", colorClass(color ?? own.color)), className),
+		...props
+	});
+}
+//#endregion
+export { Spinner };

package/dist/components/Stack.d.ts

@@ -0,0 +1,35 @@
+import type { ComponentProps } from 'react';
+import type { Align, Justify, Spacing } from '../types';
+/** Elements layout components can render as. */
+export type LayoutElement = 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'main' | 'nav' | 'form' | 'ul' | 'ol';
+/** Props shared by {@link Stack} and {@link Inline}. */
+export interface LayoutProps extends ComponentProps<'div'> {
+    /**
+     * Element to render.
+     * @default 'div'
+     */
+    as?: LayoutElement;
+    /**
+     * Space between children, from the `spacing` config.
+     * @default config.defaults.gap
+     */
+    gap?: Spacing;
+    /** Cross-axis alignment of children. */
+    align?: Align;
+    /** Main-axis distribution of children. */
+    justify?: Justify;
+}
+/** Props for {@link Stack}. */
+export type StackProps = LayoutProps;
+/**
+ * Lays out children vertically with a gap from the spacing scale.
+ *
+ * @example
+ * ```tsx
+ * <Stack gap="loose">
+ *   <Heading level={2}>Profile</Heading>
+ *   <Field label="Name"><Input /></Field>
+ * </Stack>
+ * ```
+ */
+export declare function Stack({ as, gap, align, justify, className, ...props }: StackProps): import("react").JSX.Element;

package/dist/components/Stack.js

@@ -0,0 +1,24 @@
+import { useDefaults } from "../runtime.js";
+import { cx, gapClass } from "../classes.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Stack.tsx
+/**
+* Lays out children vertically with a gap from the spacing scale.
+*
+* @example
+* ```tsx
+* <Stack gap="loose">
+*   <Heading level={2}>Profile</Heading>
+*   <Field label="Name"><Input /></Field>
+* </Stack>
+* ```
+*/
+function Stack({ as = "div", gap, align, justify, className, ...props }) {
+	const own = useDefaults("Stack");
+	return /* @__PURE__ */ jsx(as, {
+		className: cx("yarcl-stack", gapClass(gap ?? own.gap), align && `yarcl-align-${align}`, justify && `yarcl-justify-${justify}`, className),
+		...props
+	});
+}
+//#endregion
+export { Stack };

package/dist/components/Switch.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { Color, ComponentSize } from '../types';
+/** Props for {@link Switch}. Accepts all native `<input>` attributes except `type`, `color` and `size`. */
+export interface SwitchProps extends Omit<ComponentProps<'input'>, 'type' | 'color' | 'size' | 'children'> {
+    /** Label shown next to the switch. */
+    children?: ReactNode;
+    /**
+     * Switch size, from the `sizes` config (scaled from the size's `iconSize`).
+     * @default config.defaults.size
+     */
+    size?: ComponentSize<'Switch'>;
+    /**
+     * Track color when on, from the `colors` config.
+     * @default config.defaults.color
+     */
+    color?: Color;
+}
+/**
+ * An on/off toggle. A native checkbox with `role="switch"`, so `checked`,
+ * `defaultChecked` and `onChange` work as usual.
+ *
+ * @example
+ * ```tsx
+ * <Switch defaultChecked>Notifications</Switch>
+ * ```
+ */
+export declare function Switch(props: SwitchProps): import("react").JSX.Element;

package/dist/components/Switch.js

@@ -0,0 +1,33 @@
+import { useDefaults } from "../runtime.js";
+import { colorClass, cx, sizeClass } from "../classes.js";
+import { useFieldProps } from "../field-context.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Switch.tsx
+/**
+* An on/off toggle. A native checkbox with `role="switch"`, so `checked`,
+* `defaultChecked` and `onChange` work as usual.
+*
+* @example
+* ```tsx
+* <Switch defaultChecked>Notifications</Switch>
+* ```
+*/
+function Switch(props) {
+	const own = useDefaults("Switch");
+	const { children, size, color, className, style, ...rest } = useFieldProps(props);
+	return /* @__PURE__ */ jsxs("label", {
+		className: cx("yarcl-switch", sizeClass(size ?? own.size, "Switch"), colorClass(color ?? own.color), className),
+		style,
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "checkbox",
+			role: "switch",
+			className: "yarcl-switch-input",
+			...rest
+		}), children != null && /* @__PURE__ */ jsx("span", {
+			className: "yarcl-switch-label",
+			children
+		})]
+	});
+}
+//#endregion
+export { Switch };

package/dist/components/Table.d.ts

@@ -0,0 +1,71 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { Density, Radius } from '../types';
+/** Props for {@link Table}. */
+export interface TableProps extends ComponentProps<'table'> {
+    /**
+     * Cell padding and font size, from the `density` config.
+     * @default config.defaults.density
+     */
+    density?: Density;
+    /**
+     * Corner radius of the table frame, from the `radii` config.
+     * @default config.components.Table.radius ?? config.defaults.radius
+     */
+    radius?: Radius;
+    /** Shades every other row. */
+    striped?: boolean;
+    /** Highlights the row under the pointer. Use when rows are clickable. */
+    interactive?: boolean;
+    /** Visible caption describing the table. Also its accessible name. */
+    caption?: ReactNode;
+}
+declare function TableRoot({ density, radius, striped, interactive, caption, className, children, ...props }: TableProps): import("react").JSX.Element;
+/** Horizontal alignment of a cell's content. `end` also uses tabular numbers, for numeric columns. */
+export type CellAlign = 'start' | 'center' | 'end';
+/** Props for `Table.HeaderCell`. */
+export interface TableHeaderCellProps extends Omit<ComponentProps<'th'>, 'align'> {
+    /**
+     * Content alignment.
+     * @default 'start'
+     */
+    align?: CellAlign;
+}
+declare function TableHeaderCell({ align, scope, className, ...props }: TableHeaderCellProps): import("react").JSX.Element;
+/** Props for `Table.Cell`. */
+export interface TableCellProps extends Omit<ComponentProps<'td'>, 'align'> {
+    /**
+     * Content alignment.
+     * @default 'start'
+     */
+    align?: CellAlign;
+}
+declare function TableCell({ align, className, ...props }: TableCellProps): import("react").JSX.Element;
+/**
+ * A data table with density from the config. Scrolls horizontally when it doesn't fit.
+ *
+ * @example
+ * ```tsx
+ * <Table density="compact" striped caption="Invoices">
+ *   <Table.Head>
+ *     <Table.Row>
+ *       <Table.HeaderCell>Customer</Table.HeaderCell>
+ *       <Table.HeaderCell align="end">Amount</Table.HeaderCell>
+ *     </Table.Row>
+ *   </Table.Head>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <Table.Cell>Ada</Table.Cell>
+ *       <Table.Cell align="end">$120.00</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ * </Table>
+ * ```
+ */
+export declare const Table: typeof TableRoot & {
+    Head: (props: ComponentProps<"thead">) => import("react").JSX.Element;
+    Body: (props: ComponentProps<"tbody">) => import("react").JSX.Element;
+    Row: (props: ComponentProps<"tr">) => import("react").JSX.Element;
+    HeaderCell: typeof TableHeaderCell;
+    Cell: typeof TableCell;
+};
+export {};

package/dist/components/Table.js

@@ -0,0 +1,61 @@
+import { useDefaults } from "../runtime.js";
+import { cx, densityClass, radiusClass } from "../classes.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Table.tsx
+function TableRoot({ density, radius, striped, interactive, caption, className, children, ...props }) {
+	const own = useDefaults("Table");
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("yarcl-table-wrap", radiusClass(radius ?? own.radius)),
+		children: /* @__PURE__ */ jsxs("table", {
+			className: cx("yarcl-table", densityClass(density ?? own.density), striped && "yarcl-table-striped", interactive && "yarcl-table-interactive", className),
+			...props,
+			children: [caption != null && /* @__PURE__ */ jsx("caption", {
+				className: "yarcl-table-caption",
+				children: caption
+			}), children]
+		})
+	});
+}
+function TableHeaderCell({ align = "start", scope = "col", className, ...props }) {
+	return /* @__PURE__ */ jsx("th", {
+		scope,
+		className: cx(`yarcl-cell-${align}`, className),
+		...props
+	});
+}
+function TableCell({ align = "start", className, ...props }) {
+	return /* @__PURE__ */ jsx("td", {
+		className: cx(`yarcl-cell-${align}`, className),
+		...props
+	});
+}
+/**
+* A data table with density from the config. Scrolls horizontally when it doesn't fit.
+*
+* @example
+* ```tsx
+* <Table density="compact" striped caption="Invoices">
+*   <Table.Head>
+*     <Table.Row>
+*       <Table.HeaderCell>Customer</Table.HeaderCell>
+*       <Table.HeaderCell align="end">Amount</Table.HeaderCell>
+*     </Table.Row>
+*   </Table.Head>
+*   <Table.Body>
+*     <Table.Row>
+*       <Table.Cell>Ada</Table.Cell>
+*       <Table.Cell align="end">$120.00</Table.Cell>
+*     </Table.Row>
+*   </Table.Body>
+* </Table>
+* ```
+*/
+var Table = Object.assign(TableRoot, {
+	Head: (props) => /* @__PURE__ */ jsx("thead", { ...props }),
+	Body: (props) => /* @__PURE__ */ jsx("tbody", { ...props }),
+	Row: (props) => /* @__PURE__ */ jsx("tr", { ...props }),
+	HeaderCell: TableHeaderCell,
+	Cell: TableCell
+});
+//#endregion
+export { Table };

package/dist/components/Tabs.d.ts

@@ -0,0 +1,66 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import type { Color, ComponentSize } from '../types';
+/** Props shared by both forms of {@link TabsProps}. */
+export interface TabsBaseProps extends Omit<ComponentProps<'div'>, 'defaultValue' | 'color'> {
+    /** Called with the newly selected tab's value. */
+    onValueChange?: (value: string) => void;
+    /**
+     * Tab height and font size, from the `sizes` config.
+     * @default config.defaults.size
+     */
+    size?: ComponentSize<'Tabs'>;
+    /**
+     * Color of the selected tab's indicator, from the `colors` config.
+     * @default config.defaults.color
+     */
+    color?: Color;
+}
+/** Props for {@link Tabs}. Pass `value` (controlled) or `defaultValue` (uncontrolled). */
+export type TabsProps = TabsBaseProps & ({
+    value: string;
+    defaultValue?: never;
+} | {
+    value?: never; /** Initially selected tab (uncontrolled). */
+    defaultValue: string;
+});
+declare function TabsRoot({ value: valueProp, defaultValue, onValueChange, size, color, className, ...props }: TabsProps): import("react").JSX.Element;
+/** Props for `Tabs.List`. */
+export interface TabsListProps extends ComponentProps<'div'> {
+    /** `Tabs.Trigger`s. */
+    children?: ReactNode;
+}
+declare function TabsList({ className, onKeyDown, ...props }: TabsListProps): import("react").JSX.Element;
+/** Props for `Tabs.Trigger`. */
+export interface TabsTriggerProps extends Omit<ComponentProps<'button'>, 'value'> {
+    /** Identifies the tab; matches a `Tabs.Panel`'s `value`. */
+    value: string;
+}
+declare function TabsTrigger({ value, className, onClick, ...props }: TabsTriggerProps): import("react").JSX.Element;
+/** Props for `Tabs.Panel`. */
+export interface TabsPanelProps extends Omit<ComponentProps<'div'>, 'value'> {
+    /** Matches the `value` of the `Tabs.Trigger` that shows this panel. */
+    value: string;
+}
+declare function TabsPanel({ value, className, ...props }: TabsPanelProps): import("react").JSX.Element;
+/**
+ * Switches between panels of content. Arrow keys move between tabs, Home and End jump to the ends.
+ * Tab height comes from the shared size scale.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="overview">
+ *   <Tabs.List aria-label="Project">
+ *     <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
+ *     <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
+ *   </Tabs.List>
+ *   <Tabs.Panel value="overview">…</Tabs.Panel>
+ *   <Tabs.Panel value="settings">…</Tabs.Panel>
+ * </Tabs>
+ * ```
+ */
+export declare const Tabs: typeof TabsRoot & {
+    List: typeof TabsList;
+    Trigger: typeof TabsTrigger;
+    Panel: typeof TabsPanel;
+};
+export {};

package/dist/components/Tabs.js

@@ -0,0 +1,109 @@
+import { useDefaults } from "../runtime.js";
+import { colorClass, cx, sizeClass } from "../classes.js";
+import { useControllable } from "../hooks.js";
+import { createContext, useContext, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Tabs.tsx
+var TabsContext = createContext(null);
+function useTabsContext(component) {
+	const context = useContext(TabsContext);
+	if (!context) throw new Error(`yarcl: <${component}> must be inside <Tabs>`);
+	return context;
+}
+function TabsRoot({ value: valueProp, defaultValue, onValueChange, size, color, className, ...props }) {
+	const own = useDefaults("Tabs");
+	const [value, select] = useControllable(valueProp, defaultValue ?? "", onValueChange);
+	const baseId = useId();
+	const idFor = (kind, v) => `${baseId}-${kind}-${v.replace(/[^\w-]/g, "_")}`;
+	return /* @__PURE__ */ jsx(TabsContext.Provider, {
+		value: {
+			value,
+			select,
+			idFor
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: cx("yarcl-tabs", sizeClass(size ?? own.size, "Tabs"), colorClass(color ?? own.color), className),
+			...props
+		})
+	});
+}
+function TabsList({ className, onKeyDown, ...props }) {
+	const { select } = useTabsContext("Tabs.List");
+	function handleKeyDown(event) {
+		onKeyDown?.(event);
+		const tabs = [...event.currentTarget.querySelectorAll("[role=\"tab\"]:not(:disabled)")];
+		const current = tabs.indexOf(document.activeElement);
+		if (current === -1) return;
+		const next = {
+			ArrowRight: (current + 1) % tabs.length,
+			ArrowLeft: (current - 1 + tabs.length) % tabs.length,
+			Home: 0,
+			End: tabs.length - 1
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		tabs[next].focus();
+		select(tabs[next].dataset.value);
+	}
+	return /* @__PURE__ */ jsx("div", {
+		role: "tablist",
+		className: cx("yarcl-tabs-list", className),
+		onKeyDown: handleKeyDown,
+		...props
+	});
+}
+function TabsTrigger({ value, className, onClick, ...props }) {
+	const context = useTabsContext("Tabs.Trigger");
+	const selected = context.value === value;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		role: "tab",
+		id: context.idFor("tab", value),
+		"aria-controls": context.idFor("panel", value),
+		"aria-selected": selected,
+		tabIndex: selected ? 0 : -1,
+		"data-value": value,
+		className: cx("yarcl-tabs-trigger", className),
+		onClick: (event) => {
+			onClick?.(event);
+			context.select(value);
+		},
+		...props
+	});
+}
+function TabsPanel({ value, className, ...props }) {
+	const context = useTabsContext("Tabs.Panel");
+	const selected = context.value === value;
+	return /* @__PURE__ */ jsx("div", {
+		role: "tabpanel",
+		id: context.idFor("panel", value),
+		"aria-labelledby": context.idFor("tab", value),
+		tabIndex: 0,
+		hidden: !selected,
+		className: cx("yarcl-tabs-panel", className),
+		...props
+	});
+}
+/**
+* Switches between panels of content. Arrow keys move between tabs, Home and End jump to the ends.
+* Tab height comes from the shared size scale.
+*
+* @example
+* ```tsx
+* <Tabs defaultValue="overview">
+*   <Tabs.List aria-label="Project">
+*     <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
+*     <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
+*   </Tabs.List>
+*   <Tabs.Panel value="overview">…</Tabs.Panel>
+*   <Tabs.Panel value="settings">…</Tabs.Panel>
+* </Tabs>
+* ```
+*/
+var Tabs = Object.assign(TabsRoot, {
+	List: TabsList,
+	Trigger: TabsTrigger,
+	Panel: TabsPanel
+});
+//#endregion
+export { Tabs };

package/dist/components/Text.d.ts

@@ -0,0 +1,32 @@
+import type { ComponentProps } from 'react';
+import type { Color, TextStyle } from '../types';
+/** Elements {@link Text} can render as. */
+export type TextElement = 'span' | 'p' | 'div' | 'strong' | 'em' | 'small' | 'code' | 'label';
+/** Props for {@link Text}. */
+export interface TextProps extends Omit<ComponentProps<'span'>, 'color'> {
+    /**
+     * Element to render.
+     * @default 'span'
+     */
+    as?: TextElement;
+    /**
+     * Text style, from the `typography.styles` config.
+     * @default config.defaults.textStyle
+     */
+    textStyle?: TextStyle;
+    /** Semantic color, from the `colors` config. Inherits the surrounding color when omitted. */
+    color?: Color;
+    /** Uses the muted neutral color, for secondary text. */
+    muted?: boolean;
+    /** Truncates with an ellipsis: `true` for one line, a number for that many lines. */
+    truncate?: boolean | number;
+}
+/**
+ * Text in one of the consumer's text styles.
+ *
+ * @example
+ * ```tsx
+ * <Text as="p" textStyle="caption" muted>Updated 2 minutes ago</Text>
+ * ```
+ */
+export declare function Text({ as, textStyle, color, muted, truncate, className, style, ...props }: TextProps): import("react").JSX.Element;