@passui/react 0.1.46 → 0.2.0

package/dist/stepper.d.ts

@@ -0,0 +1,22 @@
+export type StepperSize = "sm" | "md" | "lg";
+export interface StepperProps {
+  value: number;
+  onChange: (value: number) => void;
+  label: string;
+  /** Localized accessible names for each action. */
+  labels: {
+    decrement: string;
+    increment: string;
+  };
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  className?: string;
+  /** Formats the displayed value. */
+  formatValue?: (value: number) => string;
+  /** Label, output and +/- button scale. @default "md" */
+  size?: StepperSize;
+}
+/** Discrete increments with disabled boundary actions and a spoken value. */
+export declare function Stepper({ value, onChange, label, labels, min, max, step, disabled, className, formatValue, size }: StepperProps): import("react").JSX.Element;

package/dist/stepper.js

@@ -0,0 +1,98 @@
+import { cx } from "./lib/cx.js";
+import { clampRange, stepRange } from "./lib/range-value.js";
+import { RollingDigit } from "./lib/rolling-digit.js";
+import { Button } from "./button.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/stepper.tsx
+const labelText = {
+	sm: "min-w-0 text-footnote text-label",
+	md: "min-w-0 text-subheadline text-label",
+	lg: "min-w-0 text-body text-label"
+};
+const outputText = {
+	sm: "text-footnote tabular-nums text-label",
+	md: "text-subheadline tabular-nums text-label",
+	lg: "text-body tabular-nums text-label"
+};
+const buttonSizes = {
+	sm: {
+		size: "icon-sm",
+		cls: "size-7! rounded-none! text-subheadline text-accent-text [@media(pointer:coarse)]:size-10!"
+	},
+	md: {
+		size: "icon",
+		cls: "size-8! rounded-none! text-title3 text-accent-text [@media(pointer:coarse)]:size-11!"
+	},
+	lg: {
+		size: "icon-lg",
+		cls: "size-9! rounded-none! text-title2 text-accent-text [@media(pointer:coarse)]:size-12!"
+	}
+};
+/** Discrete increments with disabled boundary actions and a spoken value. */
+function Stepper({ value, onChange, label, labels, min = 0, max = 100, step = 1, disabled = false, className, formatValue, size = "md" }) {
+	const id = useId();
+	const upper = Math.max(min, max);
+	const current = clampRange(value, min, upper);
+	const decrement = stepRange(current, -1, min, upper, step > 0 ? step : 1);
+	const increment = stepRange(current, 1, min, upper, step > 0 ? step : 1);
+	const displayed = formatValue?.(current) ?? String(current);
+	const digits = displayed.replace(/[^0-9]/g, "");
+	let digitIndex = 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "stepper",
+		className: cx("flex min-w-0 items-center justify-between gap-3", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			id,
+			className: labelText[size],
+			children: label
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex shrink-0 items-center gap-3",
+			children: [/* @__PURE__ */ jsxs("output", {
+				"aria-live": "polite",
+				"aria-labelledby": id,
+				className: outputText[size],
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "inline-flex items-center",
+					children: Array.from(displayed).map((character) => {
+						if (!/[0-9]/.test(character)) return /* @__PURE__ */ jsx("span", { children: character }, `sep-${character}`);
+						const prefix = digits.slice(0, ++digitIndex);
+						const place = digits.length - digitIndex;
+						return /* @__PURE__ */ jsx(RollingDigit, {
+							count: Number(prefix),
+							place
+						}, `place-${place}`);
+					})
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: displayed
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "divide-separator bg-fill flex items-center divide-x overflow-hidden rounded-lg",
+				children: [/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: buttonSizes[size].size,
+					"aria-label": labels.decrement,
+					"aria-describedby": id,
+					disabled: disabled || decrement === current,
+					onClick: () => onChange(decrement),
+					className: buttonSizes[size].cls,
+					children: "−"
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: buttonSizes[size].size,
+					"aria-label": labels.increment,
+					"aria-describedby": id,
+					disabled: disabled || increment === current,
+					onClick: () => onChange(increment),
+					className: buttonSizes[size].cls,
+					children: "+"
+				})]
+			})]
+		})]
+	});
+}
+export { Stepper };

package/dist/swatch-picker.d.ts

@@ -0,0 +1,22 @@
+export interface SwatchPickerOption<T extends string> {
+  value: T;
+  label: string;
+  /** Swatch background color. */
+  color: string;
+  /** Color of the selected checkmark. */
+  ink: string;
+}
+export type SwatchPickerSize = "sm" | "md" | "lg";
+export interface SwatchPickerProps<T extends string> {
+  value: T;
+  options: ReadonlyArray<SwatchPickerOption<T>>;
+  onChange: (value: T) => void;
+  /** Accessible name for the group. */
+  label: string;
+  /** Custom classes for the swatch container. */
+  className?: string;
+  /** Swatch diameter, check icon and caption scale. @default "md" */
+  size?: SwatchPickerSize;
+}
+/** Colour swatches with a check on the chosen one, built on `RadioGroup` so keyboard and form behaviour match. */
+export declare function SwatchPicker<T extends string>({ value, options, onChange, label, className, size }: SwatchPickerProps<T>): import("react").JSX.Element;

package/dist/swatch-picker.js

@@ -0,0 +1,70 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import { RadioGroup, RadioGroupItem } from "./radio-group.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "@passui/icons/check";
+// src/components/swatch-picker.tsx
+const swatchSizes = {
+	sm: "size-6",
+	md: "size-8",
+	lg: "size-10"
+};
+const checkSizes = {
+	sm: 13,
+	md: 16,
+	lg: 19
+};
+const captionText = {
+	sm: "text-caption2",
+	md: "text-caption2",
+	lg: "text-caption"
+};
+const fieldsetGaps = {
+	sm: "gap-2",
+	md: "gap-3",
+	lg: "gap-4"
+};
+const labelGaps = {
+	sm: "gap-1",
+	md: "gap-1.5",
+	lg: "gap-2"
+};
+/** Colour swatches with a check on the chosen one, built on `RadioGroup` so keyboard and form behaviour match. */
+function SwatchPicker({ value, options, onChange, label, className, size = "md" }) {
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		"aria-label": label,
+		value,
+		onValueChange: (next) => {
+			if (!next) return;
+			onChange(next);
+		},
+		className,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cx("flex flex-wrap", fieldsetGaps[size]),
+			children: options.map((option) => {
+				const selected = option.value === value;
+				return /* @__PURE__ */ jsxs(RadioGroupItem, {
+					value: option.value,
+					bare: true,
+					className: cx("flex flex-col items-center", labelGaps[size]),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cx("ring-offset-elevated duration-fast group-focus-within:ring-accent flex items-center justify-center rounded-full ring-offset-1 transition-[box-shadow,transform] group-focus-within:ring-2 group-active:scale-95", swatchSizes[size], selected ? "ring-label/70 ring-[1.5px]" : "group-hover:ring-separator ring-0 group-hover:ring-[1.5px]"),
+						style: { background: option.color },
+						children: selected && /* @__PURE__ */ jsx("span", {
+							className: "passui-swatch-check",
+							children: /* @__PURE__ */ jsx(CheckIcon, {
+								size: checkSizes[size],
+								strokeWidth: 2.6,
+								style: { color: option.ink }
+							})
+						})
+					}), /* @__PURE__ */ jsx("span", {
+						className: cx(captionText[size], selected ? "text-label font-semibold" : "text-label-tertiary"),
+						children: option.label
+					})]
+				}, option.value);
+			})
+		})
+	});
+}
+export { SwatchPicker };

package/dist/switch.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import * as zagSwitch from "@zag-js/switch";
+export interface SwitchProps extends Omit<zagSwitch.Props, "id" | "ids" | "onCheckedChange"> {
+  onCheckedChange?: (checked: boolean) => void;
+  children?: ReactNode;
+  className?: string;
+  "aria-label"?: string;
+}
+/** An on or off switch. Renders a native hidden checkbox with `role="switch"`. */
+export declare function Switch({ onCheckedChange, children, className, "aria-label": ariaLabel, ...props }: SwitchProps): import("react").JSX.Element;

package/dist/switch.js

@@ -0,0 +1,44 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as zagSwitch from "@zag-js/switch";
+// src/components/switch.tsx
+/** An on or off switch. Renders a native hidden checkbox with `role="switch"`. */
+function Switch({ onCheckedChange, children, className, "aria-label": ariaLabel, ...props }) {
+	const id = useId();
+	const service = useMachine(zagSwitch.machine, {
+		id,
+		onCheckedChange: ({ checked }) => onCheckedChange?.(checked),
+		...props
+	});
+	const api = zagSwitch.connect(service, normalizeProps);
+	return /* @__PURE__ */ jsxs("label", {
+		...api.getRootProps(),
+		"data-slot": "switch",
+		className: cx("group inline-flex cursor-pointer items-center gap-2.5 text-footnote data-disabled:cursor-not-allowed data-disabled:opacity-40", className),
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				...api.getHiddenInputProps(),
+				role: "switch",
+				"aria-label": ariaLabel
+			}),
+			/* @__PURE__ */ jsx("span", {
+				...api.getControlProps(),
+				"data-slot": "switch-control",
+				className: "bg-fill spring-smooth group-focus-within:ring-accent/70 data-[state=checked]:bg-success inline-flex h-8 w-13 shrink-0 items-center rounded-full p-0.5 shadow-[inset_0_0_0_0.5px_var(--color-separator)] transition group-focus-within:ring-2 motion-reduce:transition-none",
+				children: /* @__PURE__ */ jsx("span", {
+					...api.getThumbProps(),
+					"data-slot": "switch-thumb",
+					className: "spring-bouncy block size-7 origin-left rounded-full bg-white shadow-[0_2px_6px_rgb(0_0_0/0.25)] transition-[transform,width] group-active:w-8.5 data-[state=checked]:origin-right data-[state=checked]:translate-x-5 group-active:data-[state=checked]:translate-x-3.5 motion-reduce:transition-none"
+				})
+			}),
+			children ? /* @__PURE__ */ jsx("span", {
+				...api.getLabelProps(),
+				children
+			}) : null
+		]
+	});
+}
+export { Switch };

package/dist/tab-bar.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps, ReactNode } from "react";
+export type TabBarProps = ComponentProps<"nav"> & {
+  /** Shrinks to icons only, like iOS 26 while you scroll down. Pair with `useMinimizeOnScroll`. */
+  minimized?: boolean;
+};
+/** The bottom tab bar: a floating glass capsule of destinations. */
+export declare function TabBar({ minimized, className, ...props }: TabBarProps): import("react").JSX.Element;
+export type TabBarItemProps = Omit<ComponentProps<"button">, "children"> & {
+  icon: ReactNode;
+  /** The visible name. Always kept for assistive technology, even when minimized. */
+  label: string;
+  /** The current destination. */
+  active?: boolean;
+};
+export declare function TabBarItem({ icon, label, active, className, ...props }: TabBarItemProps): import("react").JSX.Element;

package/dist/tab-bar.js

@@ -0,0 +1,34 @@
+import { cx } from "./lib/cx.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/tab-bar.tsx
+/** The bottom tab bar: a floating glass capsule of destinations. */
+function TabBar({ minimized, className, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"data-slot": "tab-bar",
+		"data-minimized": minimized || void 0,
+		className: cx("glass spring-smooth mx-auto flex w-fit items-stretch gap-0.5 rounded-full p-1.5 shadow-floating transition-[padding,gap] motion-reduce:transition-none data-[minimized]:gap-0 data-[minimized]:p-1", className),
+		...props
+	});
+}
+function TabBarItem({ icon, label, active, className, ...props }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"data-slot": "tab-bar-item",
+		"aria-current": active ? "page" : void 0,
+		"aria-label": label,
+		className: cx("group spring-snappy text-caption text-label-secondary hover:text-label focus-visible:ring-accent/70 aria-[current=page]:text-accent-text relative isolate flex min-w-18 flex-col items-center justify-center gap-0.5 rounded-full px-4 py-1.5 font-medium outline-none transition focus-visible:ring-2 active:scale-[0.94] motion-reduce:transition-none [&_svg]:size-6", "in-data-[minimized]:min-w-11 in-data-[minimized]:py-2.5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "glass-lens spring-smooth absolute inset-0 -z-10 scale-75 rounded-full opacity-0 transition group-aria-[current=page]:scale-100 group-aria-[current=page]:opacity-100 motion-reduce:transition-none"
+			}),
+			icon,
+			/* @__PURE__ */ jsx("span", {
+				className: "in-data-[minimized]:hidden",
+				children: label
+			})
+		]
+	});
+}
+export { TabBar, TabBarItem };

package/dist/{types/src/components/table/table.d.ts → table.d.ts}

@@ -1,7 +1,7 @@
-import type * as React from "react";
+import * as React from "react";
 export type TableSize = "sm" | "md" | "lg";
 declare function Table({ className, size, ...props }: React.ComponentProps<"table"> & {
-    /** Row height, cell padding and text scale. @default "md" */ size?: TableSize;
+  /** Row height, cell padding and text scale. @default "md" */ size?: TableSize;
 }): React.JSX.Element;
 declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.JSX.Element;
 declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;
@@ -10,4 +10,4 @@ declare function TableRow({ className, ...props }: React.ComponentProps<"tr">):
 declare function TableHead({ className, ...props }: React.ComponentProps<"th">): React.JSX.Element;
 declare function TableCell({ className, ...props }: React.ComponentProps<"td">): React.JSX.Element;
 declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): React.JSX.Element;
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, };
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/table.js

@@ -0,0 +1,93 @@
+import { cx } from "./lib/cx.js";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/table.tsx
+const tableText = {
+	sm: "text-footnote text-label",
+	md: "text-subheadline text-label",
+	lg: "text-body text-label"
+};
+const headCell = {
+	sm: "h-8 px-2 text-start align-middle text-caption2 font-semibold whitespace-nowrap",
+	md: "h-8.5 px-3 text-start align-middle text-footnote font-semibold whitespace-nowrap",
+	lg: "h-9.5 px-4 text-start align-middle text-subheadline font-semibold whitespace-nowrap"
+};
+const bodyCell = {
+	sm: "px-2 py-1.5 align-middle whitespace-nowrap",
+	md: "px-3 py-2.5 align-middle whitespace-nowrap",
+	lg: "px-4 py-3.5 align-middle whitespace-nowrap"
+};
+const captionText = {
+	sm: "mt-3 text-caption2 text-label-secondary",
+	md: "mt-4 text-footnote text-label-secondary",
+	lg: "mt-5 text-subheadline text-label-secondary"
+};
+const TableSizeContext = createContext("md");
+const useTableSize = () => useContext(TableSizeContext);
+function Table({ className, size = "md", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "table-container",
+		className: "relative w-full overflow-x-auto",
+		children: /* @__PURE__ */ jsx(TableSizeContext, {
+			value: size,
+			children: /* @__PURE__ */ jsx("table", {
+				"data-slot": "table",
+				className: cx("w-full", tableText[size], className),
+				...props
+			})
+		})
+	});
+}
+function TableHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("thead", {
+		"data-slot": "table-header",
+		className: cx("[&_tr]:border-separator [&_tr]:border-b", className),
+		...props
+	});
+}
+function TableBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tbody", {
+		"data-slot": "table-body",
+		className: cx("[&_tr:last-child]:border-0", className),
+		...props
+	});
+}
+function TableFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tfoot", {
+		"data-slot": "table-footer",
+		className: cx("border-separator bg-fill/50 border-t font-semibold [&>tr]:last:border-b-0", className),
+		...props
+	});
+}
+function TableRow({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tr", {
+		"data-slot": "table-row",
+		className: cx("border-separator duration-fast hover:bg-fill/50 has-aria-expanded:bg-fill/50 border-b transition-colors", "data-[state=selected]:bg-accent-soft/60", className),
+		...props
+	});
+}
+function TableHead({ className, ...props }) {
+	const size = useTableSize();
+	return /* @__PURE__ */ jsx("th", {
+		"data-slot": "table-head",
+		className: cx(headCell[size], "text-label-secondary has-[[role=checkbox]]:pe-0", className),
+		...props
+	});
+}
+function TableCell({ className, ...props }) {
+	const size = useTableSize();
+	return /* @__PURE__ */ jsx("td", {
+		"data-slot": "table-cell",
+		className: cx(bodyCell[size], "has-[[role=checkbox]]:pe-0", className),
+		...props
+	});
+}
+function TableCaption({ className, ...props }) {
+	const size = useTableSize();
+	return /* @__PURE__ */ jsx("caption", {
+		"data-slot": "table-caption",
+		className: cx(captionText[size], className),
+		...props
+	});
+}
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/tabs.d.ts

@@ -0,0 +1,32 @@
+import { ComponentProps, ReactNode } from "react";
+import * as zagTabs from "@zag-js/tabs";
+/**
+ * `glass` is the pill with a gliding lens, `line` is quiet text over an
+ * underline, `solid` is a filled track with a raised thumb (a segmented
+ * control), and `pill` is bare text with a soft accent chip behind the
+ * selection. Every variant also runs vertically with `orientation="vertical"`.
+ */
+export type TabsVariant = "glass" | "line" | "solid" | "pill";
+/**
+ * Which theme role colors the selection. `neutral` keeps the quiet glass,
+ * `accent` follows the app's chosen accent, `primary` is the inverse ink used
+ * by primary buttons.
+ */
+export type TabsTone = "neutral" | "accent" | "primary";
+export interface TabsProps extends Omit<zagTabs.Props, "id" | "ids" | "onValueChange"> {
+  onValueChange?: (value: string) => void;
+  /** The look of the tab strip. @default "glass" */
+  variant?: TabsVariant;
+  /** The theme role that colors the selection. @default "neutral" */
+  tone?: TabsTone;
+  children?: ReactNode;
+  className?: string;
+}
+export declare function Tabs({ onValueChange, variant, tone, children, className, ...props }: TabsProps): import("react").JSX.Element;
+export declare function TabsList({ className, children, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function TabsTrigger({ value, disabled, className, ...props }: Omit<ComponentProps<"button">, "value"> & {
+  value: string;
+}): import("react").JSX.Element;
+export declare function TabsContent({ value, className, ...props }: Omit<ComponentProps<"div">, "value"> & {
+  value: string;
+}): import("react").JSX.Element;

package/dist/tabs.js

@@ -0,0 +1,131 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { createContext, useContext, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as zagTabs from "@zag-js/tabs";
+// src/components/tabs.tsx
+const listStyles = {
+	glass: "glass w-fit gap-1 rounded-full p-1",
+	line: "w-full gap-5 border-b border-separator/60 data-[orientation=vertical]:w-auto data-[orientation=vertical]:gap-1 data-[orientation=vertical]:border-s data-[orientation=vertical]:border-b-0",
+	solid: "bg-fill/70 w-fit gap-0.5 rounded-xl p-0.5",
+	pill: "w-fit gap-1"
+};
+const indicatorStyles = {
+	glass: "glass-lens rounded-full",
+	line: "bg-accent rounded-full top-auto! -bottom-px h-0.5! data-[orientation=vertical]:top-(--top)! data-[orientation=vertical]:bottom-auto! data-[orientation=vertical]:-left-px data-[orientation=vertical]:h-(--height)! data-[orientation=vertical]:w-0.5!",
+	solid: "bg-elevated rounded-[10px] shadow-[0_1px_2px_rgb(0_0_0/0.12),0_0_0_0.5px_var(--color-separator)]",
+	pill: "bg-accent-soft rounded-full"
+};
+const triggerStyles = {
+	glass: "h-7.5 rounded-full px-3 font-semibold transition spring-snappy active:scale-[0.96]",
+	line: "h-9 rounded-md px-0.5 font-medium transition-colors data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-3",
+	solid: "h-7 rounded-[10px] px-3 font-medium transition spring-snappy active:scale-[0.96]",
+	pill: "h-7.5 rounded-full px-3 font-medium transition spring-snappy active:scale-[0.96]"
+};
+/** Indicator fill and the selected label for each tone; `null` keeps the variant's own look. */
+const toneStyles = {
+	accent: {
+		glass: {
+			indicator: "bg-accent rounded-full",
+			selected: "data-selected:text-on-accent"
+		},
+		solid: {
+			indicator: "bg-accent rounded-[10px]",
+			selected: "data-selected:text-on-accent"
+		},
+		pill: {
+			indicator: "bg-accent rounded-full",
+			selected: "data-selected:text-on-accent"
+		},
+		line: {
+			indicator: indicatorStyles.line,
+			selected: "data-selected:text-accent-text"
+		}
+	},
+	primary: {
+		glass: {
+			indicator: "bg-inverse rounded-full",
+			selected: "data-selected:text-on-inverse"
+		},
+		solid: {
+			indicator: "bg-inverse rounded-[10px]",
+			selected: "data-selected:text-on-inverse"
+		},
+		pill: {
+			indicator: "bg-inverse rounded-full",
+			selected: "data-selected:text-on-inverse"
+		},
+		line: {
+			indicator: indicatorStyles.line.replace("bg-accent", "bg-inverse"),
+			selected: "data-selected:text-label"
+		}
+	}
+};
+const Context = createContext(null);
+function useTabs() {
+	const ctx = useContext(Context);
+	if (!ctx) throw new Error("Tabs parts must be used inside <Tabs>.");
+	return ctx;
+}
+function Tabs({ onValueChange, variant = "glass", tone = "neutral", children, className, ...props }) {
+	const id = useId();
+	const service = useMachine(zagTabs.machine, {
+		id,
+		onValueChange: ({ value }) => onValueChange?.(value),
+		...props
+	});
+	const api = zagTabs.connect(service, normalizeProps);
+	return /* @__PURE__ */ jsx(Context.Provider, {
+		value: {
+			api,
+			variant,
+			tone
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			...api.getRootProps(),
+			"data-slot": "tabs",
+			"data-tone": tone,
+			className: cx("flex flex-col gap-3 data-[orientation=vertical]:flex-row", className),
+			children
+		})
+	});
+}
+function TabsList({ className, children, ...props }) {
+	const { api, variant, tone } = useTabs();
+	return /* @__PURE__ */ jsxs("div", {
+		...api.getListProps(),
+		"data-slot": "tabs-list",
+		"data-variant": variant,
+		className: cx("relative inline-flex items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch", listStyles[variant], className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			...api.getIndicatorProps(),
+			"aria-hidden": "true",
+			"data-slot": "tabs-indicator",
+			className: cx("spring-smooth absolute z-0 left-(--left) top-(--top) h-(--height) w-(--width) transition-[left,top,width,height] motion-reduce:transition-none", tone === "neutral" ? indicatorStyles[variant] : toneStyles[tone][variant].indicator)
+		}), children]
+	});
+}
+function TabsTrigger({ value, disabled, className, ...props }) {
+	const { api, variant, tone } = useTabs();
+	return /* @__PURE__ */ jsx("button", {
+		...api.getTriggerProps({
+			value,
+			disabled
+		}),
+		"data-slot": "tabs-trigger",
+		className: cx("relative z-10 inline-flex items-center justify-center gap-2 whitespace-nowrap text-footnote text-label-secondary outline-none hover:text-label focus-visible:ring-2 focus-visible:ring-accent/70 disabled:opacity-40 motion-reduce:transition-none", triggerStyles[variant], tone === "neutral" ? variant === "pill" ? "data-selected:text-accent-text" : "data-selected:text-label" : toneStyles[tone][variant].selected, className),
+		...props
+	});
+}
+function TabsContent({ value, className, ...props }) {
+	const { api } = useTabs();
+	return /* @__PURE__ */ jsx("div", {
+		...api.getContentProps({ value }),
+		"data-slot": "tabs-content",
+		className: cx("outline-none", className),
+		...props
+	});
+}
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/text.d.ts

@@ -0,0 +1,25 @@
+import { ComponentProps } from "react";
+/** Apple's Dynamic Type styles, from the smallest caption to a screen title. */
+export type TextSize = "caption2" | "caption" | "footnote" | "subheadline" | "callout" | "body" | "headline" | "title3" | "title2" | "title" | "large-title";
+/** The theme role that colors the text. */
+export type TextTone = "default" | "secondary" | "tertiary" | "accent" | "success" | "warning" | "danger";
+export type TextWeight = "normal" | "medium" | "semibold" | "bold";
+export type TextElement = "p" | "span" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "strong" | "em" | "small";
+export type TextProps = Omit<ComponentProps<"p">, "color"> & {
+  /** The element to render, so a heading keeps its place in the outline. @default "p" */
+  as?: TextElement;
+  /** A Dynamic Type style. @default "subheadline" */
+  size?: TextSize;
+  /** The theme role that colors it. @default "default" */
+  tone?: TextTone;
+  /** @default "normal" */
+  weight?: TextWeight;
+  /** Cuts it to one line with an ellipsis. @default false */
+  truncate?: boolean;
+};
+/**
+ * Text set in the theme's type scale and roles, so words on a page follow the
+ * app's text size and colors without raw sizes or hex values. Pick the element
+ * with `as`; the style and the element are separate choices.
+ */
+export declare function Text({ as, size, tone, weight, truncate, className, ...props }: TextProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/text.js

@@ -0,0 +1,44 @@
+import { cx } from "./lib/cx.js";
+import { createElement } from "react";
+// src/components/text.tsx
+const sizes = {
+	caption2: "text-caption2 leading-caption2",
+	caption: "text-caption leading-caption",
+	footnote: "text-footnote leading-footnote",
+	subheadline: "text-subheadline leading-subheadline",
+	callout: "text-callout leading-callout",
+	body: "text-body leading-body",
+	headline: "text-headline leading-headline",
+	title3: "text-title3 leading-title3",
+	title2: "text-title2 leading-title2",
+	title: "text-title leading-title",
+	"large-title": "text-large-title leading-large-title"
+};
+const tones = {
+	default: "text-label",
+	secondary: "text-label-secondary",
+	tertiary: "text-label-tertiary",
+	accent: "text-accent-text",
+	success: "text-success",
+	warning: "text-warning",
+	danger: "text-danger"
+};
+const weights = {
+	normal: "font-normal",
+	medium: "font-medium",
+	semibold: "font-semibold",
+	bold: "font-bold"
+};
+/**
+* Text set in the theme's type scale and roles, so words on a page follow the
+* app's text size and colors without raw sizes or hex values. Pick the element
+* with `as`; the style and the element are separate choices.
+*/
+function Text({ as = "p", size = "subheadline", tone = "default", weight = "normal", truncate, className, ...props }) {
+	return createElement(as, {
+		"data-slot": "text",
+		className: cx("m-0", sizes[size], tones[tone], weights[weight], truncate && "truncate", className),
+		...props
+	});
+}
+export { Text };