@krelborn/stylesui 0.0.0-stage → 0.9.0

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,21 @@
+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";
+// 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
+	});
+}
+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,30 @@
+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";
+// 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
+		})
+	});
+}
+export { s as Tabs };

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

@@ -0,0 +1,8 @@
+import './Tabs.css';// 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
+};
+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,4 @@
+import { createContext as e } from "react";
+// src/components/Tabs/TabsContext.ts
+var t = e(null);
+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,9 @@
+import { idSegment as e } from "../../accessibility/idSegment.js";
+// src/components/Tabs/tabIds.ts
+function t(t, n) {
+	return `${t}-tab-${e(n)}`;
+}
+function n(t, n) {
+	return `${t}-panel-${e(n)}`;
+}
+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,10 @@
+import { MissingContextError as e } from "../../errors/MissingContextError.js";
+import { TabsContext as t } from "./TabsContext.js";
+import { useContext as n } from "react";
+// src/components/Tabs/useTabsContext.ts
+function r(r) {
+	let i = n(t);
+	if (i === null) throw new e(r, "Tabs");
+	return i;
+}
+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,16 @@
+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";
+// 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
+	});
+}
+export { i as Text };

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

@@ -0,0 +1,3 @@
+import './Text.css';// src/components/Text/Text.module.css
+var e = "sui-text-78lq0", t = { text: e };
+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 = "button" | "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`, `Select`, `Combobox` and `Autocomplete`. 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,27 @@
+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";
+// src/components/TextControl/TextControl.tsx
+function o(o) {
+	let s = i(20), 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, h;
+	s[5] === p ? (m = s[6], h = s[7]) : ({required: h, ...m} = p, s[5] = p, s[6] = m, s[7] = h);
+	let g;
+	s[8] !== c || s[9] !== h ? (g = c === "button" ? { "aria-required": h } : { required: h }, s[8] = c, s[9] = h, s[10] = g) : g = s[10];
+	let _ = g, v = c, y;
+	s[11] === l ? y = s[12] : (y = r(n.textControl, l), s[11] = l, s[12] = y);
+	let b;
+	return s[13] !== f || s[14] !== m || s[15] !== _ || s[16] !== d || s[17] !== v || s[18] !== y ? (b = /* @__PURE__ */ a(t, {
+		...f,
+		...m,
+		..._,
+		as: v,
+		className: y,
+		"data-size": d
+	}), s[13] = f, s[14] = m, s[15] = _, s[16] = d, s[17] = v, s[18] = y, s[19] = b) : b = s[19], b;
+}
+export { o as TextControl };

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

@@ -0,0 +1,3 @@
+import './TextControl.css';// src/components/TextControl/TextControl.module.css
+var e = "sui-textControl-gGW4a", t = { textControl: e };
+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,12 @@
+import { TextControl as e } from "../TextControl/TextControl.js";
+import { jsx as t } from "react/jsx-runtime";
+// 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
+	});
+}
+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;

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,11 @@
+import { TextControl as e } from "../TextControl/TextControl.js";
+import { jsx as t } from "react/jsx-runtime";
+// src/components/Textarea/Textarea.tsx
+function n({ size: n = "md", ...r }) {
+	return /* @__PURE__ */ t(e, {
+		...r,
+		as: "textarea",
+		size: n
+	});
+}
+export { n as Textarea };

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

@@ -0,0 +1,2 @@
+export { Textarea } from "./Textarea";
+export type { TextareaProps } from "./Textarea";

package/dist/components/Theme/Theme.d.ts

@@ -0,0 +1,46 @@
+import type { JSX } from "react";
+import type { BoxElement, BoxProps } from "../Box";
+/**
+ * Names of the themes shipped in `styles.css`
+ */
+export type ThemeName = "default" | "playful";
+/**
+ * Colour mode; `system` follows the operating system preference
+ */
+export type ThemeMode = "dark" | "light" | "system";
+/**
+ * Names of the colour palettes shipped in `styles.css`
+ */
+export type PaletteName = "bright" | "dusk" | "mist" | "paper" | "pop";
+interface ThemeOwnProps {
+    /**
+     * Colour mode for this subtree. Inherited from the nearest ancestor when omitted.
+     */
+    mode?: ThemeMode;
+    /**
+     * Colour palette for this subtree. Defaults to the theme's companion palette on an element that sets `theme`, and
+     * is inherited from the nearest ancestor otherwise.
+     */
+    palette?: PaletteName;
+    /**
+     * Theme for this subtree. Inherited from the nearest ancestor when omitted.
+     */
+    theme?: ThemeName;
+}
+/**
+ * Props for `Theme`: its own props plus every prop supported by the element given in `as`
+ */
+export type ThemeProps<E extends BoxElement = "div"> = ThemeOwnProps & Omit<BoxProps<E>, keyof ThemeOwnProps>;
+/**
+ * Sets the theme, palette and colour mode attributes for its subtree. `styles.css` paints the
+ * background, text colour and font of any element that carries these attributes, so this needs
+ * `@krelborn/stylesui/styles.css` imported once by the app.
+ *
+ * @example
+ * <Theme mode="dark" theme="playful">...</Theme>
+ *
+ * @example
+ * <Theme palette="pop" theme="default">...</Theme>
+ */
+export declare function Theme<E extends BoxElement = "div">({ as, mode, palette, theme, ...rest }: ThemeProps<E>): JSX.Element;
+export {};

package/dist/components/Theme/Theme.js

@@ -0,0 +1,17 @@
+import { Box as e } from "../Box/Box.js";
+import { c as t } from "react/compiler-runtime";
+import { jsx as n } from "react/jsx-runtime";
+// src/components/Theme/Theme.tsx
+function r(r) {
+	let i = t(12), a, o, s, c, l;
+	i[0] === r ? (a = i[1], o = i[2], s = i[3], c = i[4], l = i[5]) : ({as: a, mode: o, palette: s, theme: l, ...c} = r, i[0] = r, i[1] = a, i[2] = o, i[3] = s, i[4] = c, i[5] = l);
+	let u = c, d = a, f;
+	return i[6] !== u || i[7] !== o || i[8] !== s || i[9] !== d || i[10] !== l ? (f = /* @__PURE__ */ n(e, {
+		...u,
+		as: d,
+		"data-sui-mode": o,
+		"data-sui-palette": s,
+		"data-sui-theme": l
+	}), i[6] = u, i[7] = o, i[8] = s, i[9] = d, i[10] = l, i[11] = f) : f = i[11], f;
+}
+export { r as Theme };

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

@@ -0,0 +1,2 @@
+export { Theme } from "./Theme";
+export type { PaletteName, ThemeMode, ThemeName, ThemeProps } from "./Theme";

package/dist/components/Tooltip/Tooltip.css

@@ -0,0 +1 @@
+.sui-tooltip-UA7H9{max-inline-size:var(--sui-tooltip-max-width,20rem);padding:var(--sui-space-1,.25rem) var(--sui-space-2,.5rem);border-radius:var(--sui-radius-md,4px);background-color:var(--sui-color-tooltip,#111827);box-shadow:var(--sui-shadow-sm,0 1px 3px #0000001f);color:var(--sui-color-on-tooltip,#fff);font-family:var(--sui-font-body,system-ui, sans-serif);font-size:var(--sui-font-size-sm,.875rem);line-height:var(--sui-line-height-normal,1.5);transition:opacity .12s ease-out}@starting-style{.sui-tooltip-UA7H9{opacity:0}}@media (prefers-reduced-motion:reduce){.sui-tooltip-UA7H9{transition:none}}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,49 @@
+import type { JSX, PointerEventHandler } from "react";
+import type { OverlayPlacement } from "../../overlays";
+import type { BoxProps } from "../Box";
+/**
+ * Props `getOverlayProps` from `useTooltip` returns, which every `Tooltip` takes
+ */
+export interface TooltipOverlayProps {
+    /**
+     * `anchor-name` of the trigger the tooltip is positioned against. From `getOverlayProps`.
+     */
+    anchorName: string;
+    /**
+     * The tooltip's id, which the trigger's `aria-describedby` or `aria-labelledby` points at. From `getOverlayProps`.
+     */
+    id: string;
+    /**
+     * Keeps the tooltip open while the pointer is over it. From `getOverlayProps`.
+     */
+    onPointerEnter?: PointerEventHandler<HTMLElement>;
+    /**
+     * Hides the tooltip after the hide delay once the pointer leaves it. From `getOverlayProps`.
+     */
+    onPointerLeave?: PointerEventHandler<HTMLElement>;
+    /**
+     * Whether the tooltip is shown. From `getOverlayProps`.
+     */
+    open: boolean;
+    /**
+     * Side of the trigger the tooltip opens on. From `getOverlayProps`.
+     */
+    placement: OverlayPlacement;
+}
+/**
+ * Props for `Tooltip`: the props `getOverlayProps` returns plus every `span` prop except `popover`, `ref` and `role`
+ */
+export interface TooltipProps extends TooltipOverlayProps, Omit<BoxProps<"span">, "as" | "popover" | "ref" | "role" | keyof TooltipOverlayProps> {
+}
+/**
+ * Short text shown beside the element it belongs to while the pointer rests on that element or it has keyboard
+ * focus. `useTooltip` connects the two: spread `getTriggerProps()` on the element and `getOverlayProps()` on the
+ * tooltip, inside the same `Theme`. A tooltip holds text only, nothing interactive.
+ *
+ * @example
+ * const tooltip = useTooltip();
+ *
+ * <Button {...tooltip.getTriggerProps()}>Publish</Button>
+ * <Tooltip {...tooltip.getOverlayProps()}>Sends to all subscribers</Tooltip>
+ */
+export declare function Tooltip({ className, ...rest }: TooltipProps): JSX.Element;