@krelborn/stylesui 0.0.0-stage → 0.8.1

package/dist/components/Tabs/Tab.d.ts

@@ -0,0 +1,26 @@
+import type { JSX } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `Tab`: its own props plus every native button prop except `hidden`, `inert` and those the tab pattern sets
+ */
+export interface TabProps extends Omit<BoxProps<"button">, "aria-controls" | "aria-disabled" | "aria-selected" | "as" | "disabled" | "hidden" | "id" | "inert" | "role" | "tabIndex" | "type" | "value"> {
+    /**
+     * Whether the tab cannot be selected. A disabled tab stays reachable with the arrow keys, so its label is read, but
+     * focus and clicks never select it. Defaults to `false`.
+     */
+    disabled?: boolean;
+    /**
+     * The value this tab stands for, matching one `TabPanel`'s `value`
+     */
+    value: string;
+}
+/**
+ * One tab in a `TabList`. The arrow keys move between tabs, wrapping at both ends, and Home and End go to the first
+ * and last. Your `onBlur`, `onClick`, `onFocus`, `onKeyDown`, `onPointerCancel` and `onPointerDown` run first;
+ * preventing a click's or key's default stops the tab handling it. A disabled tab ignores clicks, so your `onClick`
+ * does not run for it. To leave a tab out, do not render it: a hidden selected tab would leave the list no tab stop.
+ *
+ * @example
+ * <Tab value="issues">Issues</Tab>
+ */
+export declare function Tab({ className, disabled, onBlur, onClick, onFocus, onKeyDown, onPointerCancel, onPointerDown, value, ...rest }: TabProps): JSX.Element;

package/dist/components/Tabs/Tab.js

@@ -0,0 +1,61 @@
+import { Box as e } from "../Box/Box.js";
+import { targetIndexForKey as t } from "../../collections/targetIndexForKey.js";
+import { panelId as n, tabId as r } from "./tabIds.js";
+import i from "./Tabs.module.js";
+import { useTabsContext as a } from "./useTabsContext.js";
+import { clsx as o } from "clsx";
+import { useRef as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/components/Tabs/Tab.tsx
+function l({ className: l, disabled: u = !1, onBlur: d, onClick: f, onFocus: p, onKeyDown: m, onPointerCancel: h, onPointerDown: g, value: _, ...v }) {
+	let y = a("Tab"), b = y.selectedValue === _, x = s(!1);
+	function S(e) {
+		d?.(e), x.current = !1;
+	}
+	function C(e) {
+		x.current = !1, !u && (f?.(e), e.defaultPrevented || y.select(_));
+	}
+	function w(e) {
+		p?.(e), y.activation === "automatic" && !u && !x.current && y.select(_);
+	}
+	function T(e) {
+		if (m?.(e), e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey) return;
+		let n = Array.from(e.currentTarget.closest("[role=\"tablist\"]")?.querySelectorAll("[role=\"tab\"]") ?? []).filter((e) => e.closest("[hidden], [inert]") === null), r = t({
+			count: n.length,
+			currentIndex: n.indexOf(e.currentTarget),
+			direction: e.currentTarget.matches(":dir(rtl)") ? "rtl" : "ltr",
+			key: e.key,
+			orientation: y.orientation,
+			wraps: !0
+		});
+		r !== null && (e.preventDefault(), n[r].focus());
+	}
+	function E(e) {
+		h?.(e), x.current = !1;
+	}
+	function D(e) {
+		g?.(e), x.current = !0;
+	}
+	return /* @__PURE__ */ c(e, {
+		...v,
+		as: "button",
+		className: o(i.tab, l),
+		id: r(y.baseId, _),
+		onBlur: S,
+		onClick: C,
+		onFocus: w,
+		onKeyDown: T,
+		onPointerCancel: E,
+		onPointerDown: D,
+		role: "tab",
+		tabIndex: b ? 0 : -1,
+		type: "button",
+		"aria-controls": n(y.baseId, _),
+		"aria-disabled": u ? !0 : void 0,
+		"aria-selected": b,
+		"data-size": y.size,
+		"data-variant": y.variant
+	});
+}
+//#endregion
+export { l as Tab };

package/dist/components/Tabs/TabList.d.ts

@@ -0,0 +1,16 @@
+import type { JSX } from "react";
+import type { RequiredAccessibleName } from "../../accessibility";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `TabList`: a required `aria-label` or `aria-labelledby` and every other `div` prop except `role`
+ */
+export type TabListProps = RequiredAccessibleName & Omit<BoxProps<"div">, "aria-label" | "aria-labelledby" | "aria-orientation" | "as" | "role">;
+/**
+ * The row or column of `Tab`s inside `Tabs`. Name it with `aria-label` or `aria-labelledby`.
+ *
+ * @example
+ * <TabList aria-label="Repository">
+ *   <Tab value="code">Code</Tab>
+ * </TabList>
+ */
+export declare function TabList({ className, ...rest }: TabListProps): JSX.Element;

package/dist/components/Tabs/TabList.js

@@ -0,0 +1,23 @@
+import { Box as e } from "../Box/Box.js";
+import t from "./Tabs.module.js";
+import { useTabsContext as n } from "./useTabsContext.js";
+import { clsx as r } from "clsx";
+import { c as i } from "react/compiler-runtime";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/Tabs/TabList.tsx
+function o(o) {
+	let s = i(10), c, l;
+	s[0] === o ? (c = s[1], l = s[2]) : ({className: c, ...l} = o, s[0] = o, s[1] = c, s[2] = l);
+	let u = n("TabList"), d;
+	s[3] === c ? d = s[4] : (d = r(t.tabList, c), s[3] = c, s[4] = d);
+	let f = u.orientation === "vertical" ? "vertical" : void 0, p;
+	return s[5] !== l || s[6] !== d || s[7] !== f || s[8] !== u.variant ? (p = /* @__PURE__ */ a(e, {
+		...l,
+		className: d,
+		role: "tablist",
+		"aria-orientation": f,
+		"data-variant": u.variant
+	}), s[5] = l, s[6] = d, s[7] = f, s[8] = u.variant, s[9] = p) : p = s[9], p;
+}
+//#endregion
+export { o as TabList };

package/dist/components/Tabs/TabPanel.d.ts

@@ -0,0 +1,24 @@
+import type { JSX } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `TabPanel`: its own props plus every `div` prop except those the tab pattern sets
+ */
+export interface TabPanelProps extends Omit<BoxProps<"div">, "aria-labelledby" | "as" | "hidden" | "id" | "role"> {
+    /**
+     * Whether the panel is in the tab order. Keep the default, 0, when the panel starts with text, and pass -1 when its
+     * first content is a control that takes focus itself.
+     */
+    tabIndex?: number;
+    /**
+     * The value of the `Tab` that shows this panel
+     */
+    value: string;
+}
+/**
+ * The content shown while its `Tab` is selected. It is named by its tab, and renders its children only while
+ * selected, so a panel's content mounts when its tab is selected.
+ *
+ * @example
+ * <TabPanel value="issues">…</TabPanel>
+ */
+export declare function TabPanel({ children, className, tabIndex, value, ...rest }: TabPanelProps): JSX.Element;

package/dist/components/Tabs/TabPanel.js

@@ -0,0 +1,22 @@
+import { Box as e } from "../Box/Box.js";
+import { panelId as t, tabId as n } from "./tabIds.js";
+import r from "./Tabs.module.js";
+import { useTabsContext as i } from "./useTabsContext.js";
+import { clsx as a } from "clsx";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/Tabs/TabPanel.tsx
+function s({ children: s, className: c, tabIndex: l = 0, value: u, ...d }) {
+	let f = i("TabPanel"), p = f.selectedValue === u;
+	return /* @__PURE__ */ o(e, {
+		...d,
+		className: a(r.tabPanel, c),
+		hidden: !p,
+		id: t(f.baseId, u),
+		role: "tabpanel",
+		tabIndex: l,
+		"aria-labelledby": n(f.baseId, u),
+		children: p ? s : null
+	});
+}
+//#endregion
+export { s as TabPanel };

package/dist/components/Tabs/Tabs.css

@@ -0,0 +1 @@
+.sui-tabs-QzIkz{gap:var(--sui-space-3,.75rem);flex-direction:column;display:flex}.sui-tabs-QzIkz[data-orientation=vertical]{flex-direction:row;align-items:flex-start}.sui-tabList-yw6gS{gap:var(--sui-space-1,.25rem);flex-wrap:wrap;display:flex}.sui-tabList-yw6gS[aria-orientation=vertical]{flex-flow:column;flex:none}.sui-tabList-yw6gS[data-variant=underline]{border-block-end:var(--sui-border-width,1px) solid var(--sui-color-border,#d1d5db)}.sui-tabList-yw6gS[data-variant=underline][aria-orientation=vertical]{border-block-end:0;border-inline-end:var(--sui-border-width,1px) solid var(--sui-color-border,#d1d5db)}.sui-tab-IdDYc{--sui-tab-padding-x:var(--sui-space-4,1rem);--sui-tab-padding-y:var(--sui-space-2,.5rem);--sui-tab-font-size:var(--sui-font-size-md,1rem);--sui-tab-indicator:calc(var(--sui-border-width,1px) * 2);--sui-tab-spring:var(--sui-motion-spring,.12s ease-out);padding:var(--sui-tab-padding-y) var(--sui-tab-padding-x);border:var(--sui-border-width,1px) solid transparent;color:var(--sui-color-text-muted,#4b5563);font-family:var(--sui-font-body,system-ui, sans-serif);font-size:var(--sui-tab-font-size);font-weight:var(--sui-font-weight-control,500);line-height:var(--sui-line-height-tight,1.25);cursor:pointer;background-color:#0000;justify-content:center;align-items:center;transition:background-color .12s,border-color .12s,color .12s,box-shadow .12s ease-out,transform .12s ease-out;display:inline-flex;position:relative}.sui-tab-IdDYc[data-size=sm]{--sui-tab-padding-x:var(--sui-space-3,.75rem);--sui-tab-padding-y:var(--sui-space-1,.25rem);--sui-tab-font-size:var(--sui-font-size-sm,.875rem)}.sui-tab-IdDYc[data-size=lg]{--sui-tab-padding-x:var(--sui-space-6,1.5rem);--sui-tab-padding-y:var(--sui-space-3,.75rem);--sui-tab-font-size:var(--sui-font-size-lg,1.125rem)}.sui-tab-IdDYc:hover:not([aria-disabled=true]),.sui-tab-IdDYc[aria-selected=true]{color:var(--sui-color-text,#111827)}.sui-tab-IdDYc[data-variant=underline]:after{block-size:var(--sui-tab-indicator);background-color:var(--sui-color-primary,#2563eb);content:"";transition:transform .12s ease-out;position:absolute;inset-block-end:calc(var(--sui-border-width,1px) * -2);inset-inline:0;transform:scale(0)}.sui-tabList-yw6gS[aria-orientation=vertical] .sui-tab-IdDYc[data-variant=underline]:after{inset-block:0;inset-inline:auto calc(var(--sui-border-width,1px) * -2);inline-size:var(--sui-tab-indicator);block-size:auto}.sui-tab-IdDYc[data-variant=underline][aria-selected=true]:after{transition:transform var(--sui-tab-spring);transform:scale(1)}.sui-tab-IdDYc[data-variant=pill]{border-radius:var(--sui-radius-control,4px)}.sui-tab-IdDYc[data-variant=pill]:hover:not([aria-disabled=true],[aria-selected=true]){background-color:var(--sui-color-secondary-subtle,#f3f4f6)}.sui-tab-IdDYc[data-variant=pill][aria-selected=true]{border-color:var(--sui-color-control-border,transparent);background-color:var(--sui-color-primary,#2563eb);box-shadow:0 var(--sui-control-depth,0px) 0 var(--sui-color-shadow,transparent);color:var(--sui-color-on-primary,#fff);transform:translateY(calc(var(--sui-control-depth,0px) / -2));transition:background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow var(--sui-tab-spring), transform var(--sui-tab-spring)}.sui-tab-IdDYc[aria-disabled=true]{color:color-mix(in srgb, var(--sui-color-text-muted,#4b5563) 50%, transparent);cursor:not-allowed}.sui-tab-IdDYc:focus-visible,.sui-tabPanel-eAxHF:focus-visible{outline:var(--sui-focus-ring-width,2px) solid var(--sui-color-focus-ring,#3b82f6);outline-offset:2px}.sui-tabPanel-eAxHF{flex:1;min-inline-size:0}.sui-tabPanel-eAxHF[hidden]{display:none}@media (prefers-reduced-motion:reduce){.sui-tab-IdDYc,.sui-tab-IdDYc[data-variant=pill][aria-selected=true]{transition:background-color .12s,border-color .12s,color .12s}.sui-tab-IdDYc[data-variant=underline]:after,.sui-tab-IdDYc[data-variant=underline][aria-selected=true]:after{transition:none}}@media (forced-colors:active){.sui-tab-IdDYc[data-variant=underline]:after{forced-color-adjust:none;background-color:highlight}.sui-tab-IdDYc[data-variant=pill][aria-selected=true]{box-shadow:none;color:highlighttext;forced-color-adjust:none;background-color:highlight;border-color:highlight}.sui-tab-IdDYc[data-variant=pill][aria-selected=true]:focus-visible{outline-color:highlight}.sui-tab-IdDYc[aria-disabled=true]{color:graytext}}

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,81 @@
+import type { JSX, ReactNode } from "react";
+import type { ControlSize } from "../../forms";
+import type { BoxProps } from "../Box";
+/**
+ * When a tab is selected: `automatic` as it takes focus, `manual` only when a click, Enter or Space activates it
+ */
+export type TabsActivation = "automatic" | "manual";
+/**
+ * Direction the tabs run in: `horizontal` in a row above the panels, `vertical` in a column beside them
+ */
+export type TabsOrientation = "horizontal" | "vertical";
+/**
+ * Tab looks: an `underline` under the selected tab, or a `pill` filled with the primary colour
+ */
+export type TabsVariant = "pill" | "underline";
+interface TabsOwnProps {
+    /**
+     * When a tab is selected. Defaults to `automatic`.
+     */
+    activation?: TabsActivation;
+    /**
+     * One `TabList` and a `TabPanel` for each `Tab`
+     */
+    children?: ReactNode;
+    /**
+     * Called with the value of the tab the user selects, when it differs from the selected one
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Direction the tabs run in. Defaults to `horizontal`.
+     */
+    orientation?: TabsOrientation;
+    /**
+     * Tab size, matching the `Button` sizes. Defaults to `md`.
+     */
+    size?: ControlSize;
+    /**
+     * Look of the tabs. Defaults to `underline`.
+     */
+    variant?: TabsVariant;
+}
+type TabsSelection = {
+    /**
+     * The tab selected at first. It leaves `Tabs` uncontrolled.
+     */
+    defaultValue: string;
+    /**
+     * Not accepted with `defaultValue`
+     */
+    value?: never;
+} | {
+    /**
+     * Not accepted with `value`
+     */
+    defaultValue?: never;
+    /**
+     * The selected tab, which makes `Tabs` controlled: update it from `onValueChange`
+     */
+    value: string;
+};
+/**
+ * Props for `Tabs`: its own props, `value` or `defaultValue`, and every other `div` prop
+ */
+export type TabsProps = TabsOwnProps & TabsSelection & Omit<BoxProps<"div">, "as" | "defaultValue" | keyof TabsOwnProps>;
+/**
+ * Tabs that switch between panels of content, following the WAI-ARIA tabs pattern. Give it a `TabList` of `Tab`s and
+ * a `TabPanel` for each, matched by `value`. One tab is always selected: pass `defaultValue`, or `value` with
+ * `onValueChange`, matching a `Tab`.
+ *
+ * @example
+ * <Tabs defaultValue="code" onValueChange={setTab}>
+ *   <TabList aria-label="Repository">
+ *     <Tab value="code">Code</Tab>
+ *     <Tab value="issues">Issues</Tab>
+ *   </TabList>
+ *   <TabPanel value="code">…</TabPanel>
+ *   <TabPanel value="issues">…</TabPanel>
+ * </Tabs>
+ */
+export declare function Tabs({ activation, className, defaultValue, onValueChange, orientation, size, value, variant, ...rest }: TabsProps): JSX.Element;
+export {};

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,31 @@
+import { Box as e } from "../Box/Box.js";
+import t from "./Tabs.module.js";
+import { TabsContext as n } from "./TabsContext.js";
+import { clsx as r } from "clsx";
+import { useId as i, useState as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/Tabs/Tabs.tsx
+function s({ activation: s = "automatic", className: c, defaultValue: l, onValueChange: u, orientation: d = "horizontal", size: f = "md", value: p, variant: m = "underline", ...h }) {
+	let g = i(), [_, v] = a(l), y = p ?? _;
+	function b(e) {
+		e !== y && (p === void 0 && v(e), u?.(e));
+	}
+	return /* @__PURE__ */ o(n.Provider, {
+		value: {
+			activation: s,
+			baseId: g,
+			orientation: d,
+			select: b,
+			selectedValue: y,
+			size: f,
+			variant: m
+		},
+		children: /* @__PURE__ */ o(e, {
+			...h,
+			className: r(t.tabs, c),
+			"data-orientation": d
+		})
+	});
+}
+//#endregion
+export { s as Tabs };

package/dist/components/Tabs/Tabs.module.js

@@ -0,0 +1,9 @@
+import './Tabs.css';//#region src/components/Tabs/Tabs.module.css
+var e = "sui-tabs-QzIkz", t = "sui-tabList-yw6gS", n = "sui-tab-IdDYc", r = "sui-tabPanel-eAxHF", i = {
+	tabs: e,
+	tabList: t,
+	tab: n,
+	tabPanel: r
+};
+//#endregion
+export { i as default, n as tab, t as tabList, r as tabPanel, e as tabs };

package/dist/components/Tabs/TabsContext.d.ts

@@ -0,0 +1,39 @@
+import type { ControlSize } from "../../forms";
+import type { TabsActivation, TabsOrientation, TabsVariant } from "./Tabs";
+/**
+ * State a `Tabs` shares with its tab list, tabs and panels
+ */
+export interface TabsContextValue {
+    /**
+     * Whether a tab is selected as it takes focus, or only when it is pressed
+     */
+    activation: TabsActivation;
+    /**
+     * The generated id every tab and panel id starts with
+     */
+    baseId: string;
+    /**
+     * Direction the tabs run in, which decides the arrow keys
+     */
+    orientation: TabsOrientation;
+    /**
+     * Selects the tab with the given value, reporting it to `onValueChange` when it changes
+     */
+    select: (value: string) => void;
+    /**
+     * The selected tab's value
+     */
+    selectedValue: string | undefined;
+    /**
+     * Size of every tab
+     */
+    size: ControlSize;
+    /**
+     * Look of the tab list and its tabs
+     */
+    variant: TabsVariant;
+}
+/**
+ * Carries a `Tabs`'s state to its parts; null outside a `Tabs`
+ */
+export declare const TabsContext: import("react").Context<TabsContextValue | null>;

package/dist/components/Tabs/TabsContext.js

@@ -0,0 +1,5 @@
+import { createContext as e } from "react";
+//#region src/components/Tabs/TabsContext.ts
+var t = e(null);
+//#endregion
+export { t as TabsContext };

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,8 @@
+export { Tab } from "./Tab";
+export type { TabProps } from "./Tab";
+export { TabList } from "./TabList";
+export type { TabListProps } from "./TabList";
+export { TabPanel } from "./TabPanel";
+export type { TabPanelProps } from "./TabPanel";
+export { Tabs } from "./Tabs";
+export type { TabsActivation, TabsOrientation, TabsProps, TabsVariant } from "./Tabs";

package/dist/components/Tabs/tabIds.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Builds the id of the tab for a value
+ *
+ * @param baseId the `Tabs`'s generated id
+ * @param value the tab's value
+ * @returns an id unique to the value within its `Tabs`, whatever characters the value holds
+ */
+export declare function tabId(baseId: string, value: string): string;
+/**
+ * Builds the id of the panel for a value
+ *
+ * @param baseId the `Tabs`'s generated id
+ * @param value the panel's value
+ * @returns an id unique to the value within its `Tabs`, whatever characters the value holds
+ */
+export declare function panelId(baseId: string, value: string): string;

package/dist/components/Tabs/tabIds.js

@@ -0,0 +1,10 @@
+import { idSegment as e } from "../../accessibility/idSegment.js";
+//#region src/components/Tabs/tabIds.ts
+function t(t, n) {
+	return `${t}-tab-${e(n)}`;
+}
+function n(t, n) {
+	return `${t}-panel-${e(n)}`;
+}
+//#endregion
+export { n as panelId, t as tabId };

package/dist/components/Tabs/useTabsContext.d.ts

@@ -0,0 +1,9 @@
+import type { TabsContextValue } from "./TabsContext";
+/**
+ * Reads the state of the surrounding `Tabs`
+ *
+ * @param part the name of the part reading it, for the error message
+ * @returns the surrounding `Tabs`'s state
+ * @throws MissingContextError when the part is not inside a `Tabs`
+ */
+export declare function useTabsContext(part: string): TabsContextValue;

package/dist/components/Tabs/useTabsContext.js

@@ -0,0 +1,11 @@
+import { MissingContextError as e } from "../../errors/MissingContextError.js";
+import { TabsContext as t } from "./TabsContext.js";
+import { useContext as n } from "react";
+//#region src/components/Tabs/useTabsContext.ts
+function r(r) {
+	let i = n(t);
+	if (i === null) throw new e(r, "Tabs");
+	return i;
+}
+//#endregion
+export { r as useTabsContext };

package/dist/components/Text/Text.css

@@ -0,0 +1 @@
+.sui-text-78lq0{font-family:var(--sui-font-body,system-ui, sans-serif);line-height:var(--sui-line-height-normal,1.5);margin:0}.sui-text-78lq0[data-size=xs]{font-size:var(--sui-font-size-xs,.75rem)}.sui-text-78lq0[data-size=sm]{font-size:var(--sui-font-size-sm,.875rem)}.sui-text-78lq0[data-size=md]{font-size:var(--sui-font-size-md,1rem)}.sui-text-78lq0[data-size=lg]{font-size:var(--sui-font-size-lg,1.125rem)}.sui-text-78lq0[data-size=xl]{font-size:var(--sui-font-size-xl,1.25rem)}.sui-text-78lq0[data-weight=regular]{font-weight:var(--sui-font-weight-regular,400)}.sui-text-78lq0[data-weight=medium]{font-weight:var(--sui-font-weight-medium,500)}.sui-text-78lq0[data-weight=bold]{font-weight:var(--sui-font-weight-bold,700)}.sui-text-78lq0[data-tone=muted]{color:var(--sui-color-text-muted,#4b5563)}

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,40 @@
+import type { JSX } from "react";
+import type { BoxElement, BoxProps } from "../Box";
+/**
+ * Body text sizes, mapped to the `--sui-font-size-*` tokens
+ */
+export type TextSize = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * Text colour; `default` inherits the surrounding text colour
+ */
+export type TextTone = "default" | "muted";
+/**
+ * Font weights, mapped to the `--sui-font-weight-*` tokens
+ */
+export type TextWeight = "bold" | "medium" | "regular";
+interface TextOwnProps {
+    /**
+     * Font size. Defaults to `md`.
+     */
+    size?: TextSize;
+    /**
+     * Text colour. Defaults to `default`.
+     */
+    tone?: TextTone;
+    /**
+     * Font weight. Defaults to `regular`.
+     */
+    weight?: TextWeight;
+}
+/**
+ * Props for `Text`: its own props plus every prop supported by the element given in `as`
+ */
+export type TextProps<E extends BoxElement = "span"> = TextOwnProps & Omit<BoxProps<E>, keyof TextOwnProps>;
+/**
+ * Body text in the theme's body font
+ *
+ * @example
+ * <Text as="p" size="sm" tone="muted">Last updated today</Text>
+ */
+export declare function Text<E extends BoxElement = "span">({ as, className, size, tone, weight, ...rest }: TextProps<E>): JSX.Element;
+export {};

package/dist/components/Text/Text.js

@@ -0,0 +1,17 @@
+import { Box as e } from "../Box/Box.js";
+import t from "./Text.module.js";
+import { clsx as n } from "clsx";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Text/Text.tsx
+function i({ as: i, className: a, size: o = "md", tone: s = "default", weight: c = "regular", ...l }) {
+	return /* @__PURE__ */ r(e, {
+		...l,
+		as: i ?? "span",
+		className: n(t.text, a),
+		"data-size": o,
+		"data-tone": s,
+		"data-weight": c
+	});
+}
+//#endregion
+export { i as Text };

package/dist/components/Text/Text.module.js

@@ -0,0 +1,4 @@
+import './Text.css';//#region src/components/Text/Text.module.css
+var e = "sui-text-78lq0", t = { text: e };
+//#endregion
+export { t as default, e as text };

package/dist/components/Text/index.d.ts

@@ -0,0 +1,2 @@
+export { Text } from "./Text";
+export type { TextProps, TextSize, TextTone, TextWeight } from "./Text";

package/dist/components/TextControl/TextControl.css

@@ -0,0 +1 @@
+.sui-textControl-gGW4a{--sui-text-control-bg:var(--sui-color-field,#fff);--sui-text-control-fg:var(--sui-color-text,#111827);--sui-text-control-border:var(--sui-color-input-border,#6b7280);--sui-text-control-border-width:var(--sui-border-width,1px);--sui-text-control-radius:var(--sui-radius-control,4px);--sui-text-control-padding-x:var(--sui-space-4,1rem);--sui-text-control-padding-y:var(--sui-space-2,.5rem);--sui-text-control-font-size:var(--sui-font-size-md,1rem);padding:var(--sui-text-control-padding-y) var(--sui-text-control-padding-x);border:var(--sui-text-control-border-width) solid var(--sui-text-control-border);border-radius:var(--sui-text-control-radius);background-color:var(--sui-text-control-bg);color:var(--sui-text-control-fg);font-family:var(--sui-font-body,system-ui, sans-serif);font-size:var(--sui-text-control-font-size);line-height:var(--sui-line-height-tight,1.25);transition:border-color .12s}.sui-textControl-gGW4a[data-size=sm]{--sui-text-control-padding-x:var(--sui-space-3,.75rem);--sui-text-control-padding-y:var(--sui-space-1,.25rem);--sui-text-control-font-size:var(--sui-font-size-sm,.875rem)}.sui-textControl-gGW4a[data-size=lg]{--sui-text-control-padding-x:var(--sui-space-6,1.5rem);--sui-text-control-padding-y:var(--sui-space-3,.75rem);--sui-text-control-font-size:var(--sui-font-size-lg,1.125rem)}.sui-textControl-gGW4a:where(textarea){--sui-text-control-radius:var(--sui-radius-md,4px);line-height:var(--sui-line-height-normal,1.5);resize:vertical}.sui-textControl-gGW4a:where(select){--sui-text-control-chevron-size:.375em;background-image:linear-gradient(45deg,#0000 calc(50% - 1px),currentColor calc(50% - 1px) calc(50% + 1px),#0000 calc(50% + 1px)),linear-gradient(135deg,#0000 calc(50% - 1px),currentColor calc(50% - 1px) calc(50% + 1px),#0000 calc(50% + 1px));background-position:right calc(var(--sui-text-control-padding-x) + var(--sui-text-control-chevron-size) - 1px) center, right var(--sui-text-control-padding-x) center;background-repeat:no-repeat;background-size:var(--sui-text-control-chevron-size) var(--sui-text-control-chevron-size);appearance:none;padding-inline-end:calc(var(--sui-text-control-padding-x) + var(--sui-text-control-chevron-size) * 3)}.sui-textControl-gGW4a:where(select):dir(rtl){background-position:left var(--sui-text-control-padding-x) center, left calc(var(--sui-text-control-padding-x) + var(--sui-text-control-chevron-size) - 1px) center}@media (forced-colors:active){.sui-textControl-gGW4a:where(select){appearance:auto;padding-inline-end:var(--sui-text-control-padding-x)}}.sui-textControl-gGW4a::placeholder{color:var(--sui-color-text-muted,#4b5563);opacity:1}.sui-textControl-gGW4a:focus-visible{outline:var(--sui-focus-ring-width,2px) solid var(--sui-color-focus-ring,#3b82f6);outline-offset:2px}.sui-textControl-gGW4a[aria-invalid=true]{--sui-text-control-border:var(--sui-color-danger-text,#b91c1c)}.sui-textControl-gGW4a:disabled{cursor:not-allowed;opacity:.5}

package/dist/components/TextControl/TextControl.d.ts

@@ -0,0 +1,22 @@
+import type { JSX } from "react";
+import type { ControlSize } from "../../forms";
+import type { BoxProps } from "../Box";
+type TextControlElement = "input" | "select" | "textarea";
+interface TextControlOwnProps<E extends TextControlElement> {
+    /**
+     * Native element to render
+     */
+    as: E;
+    /**
+     * Padding and font size of the control, matching the `Button` sizes. Takes the place of the native `size`
+     * attribute.
+     */
+    size: ControlSize;
+}
+type TextControlProps<E extends TextControlElement> = TextControlOwnProps<E> & Omit<BoxProps<E>, keyof TextControlOwnProps<E>>;
+/**
+ * Themed text-entry element shared by `TextInput`, `Textarea` and `Select`. Inside a `Field` it takes its id,
+ * description, and invalid, disabled and required state from the field.
+ */
+export declare function TextControl<E extends TextControlElement>({ as, className, size, ...rest }: TextControlProps<E>): JSX.Element;
+export {};

package/dist/components/TextControl/TextControl.js

@@ -0,0 +1,23 @@
+import { useFieldControl as e } from "../../forms/useFieldControl.js";
+import { Box as t } from "../Box/Box.js";
+import n from "./TextControl.module.js";
+import { clsx as r } from "clsx";
+import { c as i } from "react/compiler-runtime";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/TextControl/TextControl.tsx
+function o(o) {
+	let s = i(13), c, l, u, d;
+	s[0] === o ? (c = s[1], l = s[2], u = s[3], d = s[4]) : ({as: c, className: l, size: d, ...u} = o, s[0] = o, s[1] = c, s[2] = l, s[3] = u, s[4] = d);
+	let f = u, p = e(f), m = c, h;
+	s[5] === l ? h = s[6] : (h = r(n.textControl, l), s[5] = l, s[6] = h);
+	let g;
+	return s[7] !== f || s[8] !== p || s[9] !== d || s[10] !== m || s[11] !== h ? (g = /* @__PURE__ */ a(t, {
+		...f,
+		...p,
+		as: m,
+		className: h,
+		"data-size": d
+	}), s[7] = f, s[8] = p, s[9] = d, s[10] = m, s[11] = h, s[12] = g) : g = s[12], g;
+}
+//#endregion
+export { o as TextControl };

package/dist/components/TextControl/TextControl.module.js

@@ -0,0 +1,4 @@
+import './TextControl.css';//#region src/components/TextControl/TextControl.module.css
+var e = "sui-textControl-gGW4a", t = { textControl: e };
+//#endregion
+export { t as default, e as textControl };

package/dist/components/TextControl/index.d.ts

@@ -0,0 +1 @@
+export { TextControl } from "./TextControl";

package/dist/components/TextInput/TextInput.d.ts

@@ -0,0 +1,31 @@
+import type { JSX } from "react";
+import type { ControlSize } from "../../forms";
+import type { BoxProps } from "../Box";
+/**
+ * Input types `TextInput` supports: the ones that take a line of typed text
+ */
+export type TextInputType = "email" | "number" | "password" | "search" | "tel" | "text" | "url";
+/**
+ * Props for `TextInput`: its own props plus every native input prop
+ */
+export interface TextInputProps extends Omit<BoxProps<"input">, "as" | "children" | "dangerouslySetInnerHTML" | "size" | "type"> {
+    /**
+     * Height of the input, matching the `Button` sizes. Takes the place of the native `size` attribute. Defaults
+     * to `md`. The `sm` text is under 16px, which makes iOS Safari zoom the page when the input takes focus.
+     */
+    size?: ControlSize;
+    /**
+     * Kind of text the input takes. Defaults to `text`.
+     */
+    type?: TextInputType;
+}
+/**
+ * Themed single-line text input. Inside a `Field` it takes its label, description, error, and required and
+ * disabled state from the field. Outside one, give it an accessible name, for example with `aria-label`.
+ *
+ * @example
+ * <Field label="Email">
+ *   <TextInput autoComplete="email" type="email" />
+ * </Field>
+ */
+export declare function TextInput({ size, type, ...rest }: TextInputProps): JSX.Element;

package/dist/components/TextInput/TextInput.js

@@ -0,0 +1,13 @@
+import { TextControl as e } from "../TextControl/TextControl.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/TextInput/TextInput.tsx
+function n({ size: n = "md", type: r = "text", ...i }) {
+	return /* @__PURE__ */ t(e, {
+		...i,
+		as: "input",
+		size: n,
+		type: r
+	});
+}
+//#endregion
+export { n as TextInput };

package/dist/components/TextInput/index.d.ts

@@ -0,0 +1,2 @@
+export { TextInput } from "./TextInput";
+export type { TextInputProps, TextInputType } from "./TextInput";

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,24 @@
+import type { JSX } from "react";
+import type { ControlSize } from "../../forms";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `Textarea`: its own props plus every native textarea prop
+ */
+export interface TextareaProps extends Omit<BoxProps<"textarea">, "as" | "children" | "dangerouslySetInnerHTML"> {
+    /**
+     * Padding and font size of the textarea, matching the `Button` sizes. Defaults to `md`. The `sm` text is under
+     * 16px, which makes iOS Safari zoom the page when the textarea takes focus.
+     */
+    size?: ControlSize;
+}
+/**
+ * Themed multi-line text input that the user can resize vertically. Set its height with `rows` and its text
+ * with `value` or `defaultValue`. Inside a `Field` it takes its label, description, error, and required and
+ * disabled state from the field. Outside one, give it an accessible name, for example with `aria-label`.
+ *
+ * @example
+ * <Field label="Message">
+ *   <Textarea rows={4} />
+ * </Field>
+ */
+export declare function Textarea({ size, ...rest }: TextareaProps): JSX.Element;