@krelborn/stylesui 0.0.0-stage → 0.9.0

package/dist/components/Popover/usePopover.d.ts

@@ -0,0 +1,96 @@
+import type { CSSProperties, RefObject } from "react";
+import type { OverlayPlacement } from "../../overlays";
+import type { PopoverOverlayProps } from "./Popover";
+/**
+ * Options for `usePopover`
+ */
+export interface UsePopoverOptions {
+    /**
+     * Whether the popover starts open when uncontrolled. Defaults to `false`.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Element to focus when the popover opens, such as the safe choice in a confirmation. Without one, focus stays where
+     * it is.
+     */
+    initialFocus?: RefObject<HTMLElement | null>;
+    /**
+     * Called with the new open state when the popover opens or closes; when controlled, also with `true` when the user
+     * asks to open it
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Controls whether the popover is open. The hook then cancels openings and reports them through `onOpenChange`; a
+     * close the browser makes is reported after it happens, and the popover shows again if `open` stays true. Only one
+     * popover can be open at a time, so two held open this way keep closing each other.
+     */
+    open?: boolean;
+    /**
+     * Side of the trigger the popover opens on. It flips to the opposite side when there is no room. Defaults to
+     * `bottom`.
+     */
+    placement?: OverlayPlacement;
+}
+/**
+ * Props `getTriggerProps` sets on the trigger
+ */
+interface PopoverTriggerProps {
+    /**
+     * The popover's id
+     */
+    "aria-controls": string;
+    /**
+     * Whether the popover is open
+     */
+    "aria-expanded": boolean;
+    /**
+     * The popover's id, which makes the button open and close it without script
+     */
+    popoverTarget: string;
+    /**
+     * Names the trigger as the popover's anchor
+     */
+    style: CSSProperties;
+}
+/**
+ * Prop getters for a popover's trigger and the `Popover`, whether it is open, and a way to close it
+ */
+export interface UsePopoverResult {
+    /**
+     * Closes the popover: hides it when uncontrolled, and reports `false` through `onOpenChange` either way. Focus moves
+     * as when the browser closes it, and also to the trigger when it is lost to the page as the popover hides, as Safari
+     * loses it when a button is clicked. Focus the caller moves elsewhere stays there.
+     */
+    close: () => void;
+    /**
+     * Returns the props to spread on the `Popover`, merged with any given
+     */
+    getOverlayProps: <Props extends object>(props?: Props & Partial<PopoverOverlayProps>) => Omit<Props, keyof PopoverOverlayProps> & PopoverOverlayProps;
+    /**
+     * Returns the props to spread on the trigger, which must be a button, merged with any given: where both set a
+     * handler, both run, the given one first, and `style` objects merge
+     */
+    getTriggerProps: <Props extends object>(props?: Props & Partial<PopoverTriggerProps>) => Omit<Props, keyof PopoverTriggerProps> & PopoverTriggerProps;
+    /**
+     * Whether the popover is open
+     */
+    open: boolean;
+}
+/**
+ * Connects a `Popover` to the button that opens it. Clicking the button toggles the popover, and Escape or a click
+ * outside closes it, all handled by the browser. Opening another popover closes this one. When the popover closes with
+ * focus inside it, the browser returns focus to whatever had it before the popover opened, usually the button; where
+ * the browser leaves focus on the page or in the hidden popover, as Safari does, the hook moves it to the button. A
+ * click outside leaves focus where the click put it.
+ *
+ * @param options open state, the change callback, placement and the element to focus on opening
+ * @returns prop getters for the trigger and the `Popover`, whether it is open, and `close`
+ *
+ * @example
+ * const popover = usePopover({ placement: "top" });
+ *
+ * <Button {...popover.getTriggerProps()} variant="ghost">2 problems</Button>
+ * <Popover {...popover.getOverlayProps()}>…</Popover>
+ */
+export declare function usePopover({ defaultOpen, initialFocus, onOpenChange, open: controlledOpen, placement, }?: UsePopoverOptions): UsePopoverResult;
+export {};

package/dist/components/Popover/usePopover.js

@@ -0,0 +1,71 @@
+import { anchorNameFor as e } from "../../overlays/anchorNameFor.js";
+import { mergeProps as t } from "../../overlays/mergeProps.js";
+import { syncPopover as n } from "../../overlays/syncPopover.js";
+import { useEffect as r, useId as i, useRef as a, useState as o } from "react";
+// src/components/Popover/usePopover.ts
+function s({ defaultOpen: s = !1, initialFocus: d, onOpenChange: f, open: p, placement: m = "bottom" } = {}) {
+	let h = i(), [g, _] = o(s), [v, y] = o(0), b = a(null), x = a(!1), S = a(!1), C = p !== void 0, w = p ?? g, T = e(h);
+	r(() => {
+		let e = b.current;
+		if (v !== 0 && w && e !== null && e.isConnected) return n(e, !0);
+	}, [w, v]);
+	function E(e) {
+		C || _(e), f?.(e);
+	}
+	function D(e) {
+		if (!c(e)) {
+			if (e.newState === "closed") {
+				let t = e.currentTarget;
+				x.current = t.contains(t.ownerDocument.activeElement) || S.current && u(t.ownerDocument);
+			}
+			S.current = !1, C && !w && e.newState === "open" && (e.preventDefault(), f?.(!0));
+		}
+	}
+	function O(e) {
+		if (c(e)) return;
+		let t = e.newState === "open";
+		t ? d?.current?.focus() : x.current && (x.current = !1, l(e.currentTarget)), t !== w && (E(t), C && (b.current = e.currentTarget, y((e) => e + 1)));
+	}
+	function k() {
+		w && (S.current = !0, E(!1));
+	}
+	let A = {
+		anchorName: T,
+		id: h,
+		onBeforeToggle: D,
+		onToggle: O,
+		open: w,
+		placement: m
+	}, j = {
+		"aria-controls": h,
+		"aria-expanded": w,
+		popoverTarget: h,
+		style: { anchorName: T }
+	};
+	function M(e) {
+		return t(e, A);
+	}
+	function N(e) {
+		return t(e, j);
+	}
+	return {
+		close: k,
+		getOverlayProps: M,
+		getTriggerProps: N,
+		open: w
+	};
+}
+function c(e) {
+	return e.target !== e.currentTarget;
+}
+function l(e) {
+	(u(e.ownerDocument) || e.contains(e.ownerDocument.activeElement)) && d(e)?.focus();
+}
+function u(e) {
+	return e.activeElement === null || e.activeElement === e.body;
+}
+function d(e) {
+	let t = e.ownerDocument.querySelectorAll("[popovertarget]");
+	return Array.from(t).find((t) => t.getAttribute("popovertarget") === e.id && !e.contains(t)) ?? null;
+}
+export { s as usePopover };

package/dist/components/Prose/Prose.css

@@ -0,0 +1 @@
+.sui-prose-Obc4t{--sui-prose-font-size:var(--sui-font-size-md,1rem);--sui-prose-flow:var(--sui-space-4,1rem);color:var(--sui-color-text,#111827);font-family:var(--sui-font-body,system-ui, sans-serif);font-size:var(--sui-prose-font-size);line-height:var(--sui-prose-line-height,var(--sui-line-height-normal,1.5));overflow-wrap:anywhere}.sui-prose-Obc4t[data-size=sm]{--sui-prose-font-size:var(--sui-font-size-sm,.875rem)}.sui-prose-Obc4t[data-size=lg]{--sui-prose-font-size:var(--sui-font-size-lg,1.125rem)}:where(.sui-prose-Obc4t) p,:where(.sui-prose-Obc4t) ul,:where(.sui-prose-Obc4t) ol,:where(.sui-prose-Obc4t) blockquote,:where(.sui-prose-Obc4t) pre,:where(.sui-prose-Obc4t) figure,:where(.sui-prose-Obc4t) table,:where(.sui-prose-Obc4t) hr{margin:var(--sui-prose-flow) 0 0}:where(.sui-prose-Obc4t) h1,:where(.sui-prose-Obc4t) h2,:where(.sui-prose-Obc4t) h3,:where(.sui-prose-Obc4t) h4,:where(.sui-prose-Obc4t) h5,:where(.sui-prose-Obc4t) h6{margin:calc(var(--sui-prose-flow) * 2) 0 0;font-family:var(--sui-font-heading,system-ui, sans-serif);font-weight:var(--sui-font-weight-bold,700);line-height:var(--sui-line-height-tight,1.25)}:where(.sui-prose-Obc4t) h1{font-size:var(--sui-font-size-3xl,1.875rem)}:where(.sui-prose-Obc4t) h2{font-size:var(--sui-font-size-2xl,1.5rem)}:where(.sui-prose-Obc4t) h3{font-size:var(--sui-font-size-xl,1.25rem)}:where(.sui-prose-Obc4t) h4{font-size:var(--sui-font-size-lg,1.125rem)}:where(.sui-prose-Obc4t) h5{font-size:var(--sui-font-size-md,1rem)}:where(.sui-prose-Obc4t) h6{font-size:var(--sui-font-size-sm,.875rem)}:where(.sui-prose-Obc4t) li{margin-block-start:calc(var(--sui-prose-flow) / 4)}:where(.sui-prose-Obc4t) figcaption{color:var(--sui-color-text-muted,#4b5563);margin-block-start:calc(var(--sui-prose-flow) / 2);font-size:.875em}:where(.sui-prose-Obc4t) p:where(:first-child),:where(.sui-prose-Obc4t) ul:where(:first-child),:where(.sui-prose-Obc4t) ol:where(:first-child),:where(.sui-prose-Obc4t) blockquote:where(:first-child),:where(.sui-prose-Obc4t) pre:where(:first-child),:where(.sui-prose-Obc4t) figure:where(:first-child),:where(.sui-prose-Obc4t) table:where(:first-child),:where(.sui-prose-Obc4t) hr:where(:first-child),:where(.sui-prose-Obc4t) h1:where(:first-child),:where(.sui-prose-Obc4t) h2:where(:first-child),:where(.sui-prose-Obc4t) h3:where(:first-child),:where(.sui-prose-Obc4t) h4:where(:first-child),:where(.sui-prose-Obc4t) h5:where(:first-child),:where(.sui-prose-Obc4t) h6:where(:first-child),:where(.sui-prose-Obc4t) li:where(:first-child),:where(.sui-prose-Obc4t) figcaption:where(:first-child){margin-block-start:0}:where(.sui-prose-Obc4t) a{color:var(--sui-link-color,var(--sui-color-primary,#2563eb));text-decoration-line:underline;text-decoration-thickness:var(--sui-border-width,1px);text-underline-offset:.2em}:where(.sui-prose-Obc4t) a:where(:hover){text-decoration-thickness:calc(var(--sui-border-width,1px) * 2)}:where(.sui-prose-Obc4t) a:where(:focus-visible){outline:var(--sui-focus-ring-width,2px) solid var(--sui-color-focus-ring,#3b82f6);outline-offset:2px}:where(.sui-prose-Obc4t) ul,:where(.sui-prose-Obc4t) ol{padding-inline-start:var(--sui-space-6,1.5rem)}:where(.sui-prose-Obc4t) ul:where(:not([type])),:where(.sui-prose-Obc4t) ol:where(:not([type])){list-style-type:revert}:where(.sui-prose-Obc4t) blockquote{border-inline-start:calc(var(--sui-border-width,1px) * 3) solid var(--sui-color-border,#d1d5db);color:var(--sui-color-text-muted,#4b5563);padding-inline-start:var(--sui-space-4,1rem)}:where(.sui-prose-Obc4t) hr{border:0;border-block-start:var(--sui-border-width,1px) solid var(--sui-color-border,#d1d5db)}:where(.sui-prose-Obc4t) code{padding:0 var(--sui-space-1,.25rem);border-radius:var(--sui-radius-sm,2px);background-color:var(--sui-color-sunken,#f3f4f6);font-family:var(--sui-font-mono,ui-monospace, SFMono-Regular, Menlo, monospace);font-size:.875em}:where(.sui-prose-Obc4t) kbd{padding:0 var(--sui-space-1,.25rem);border:var(--sui-border-width,1px) solid var(--sui-color-border,#d1d5db);border-block-end-width:calc(var(--sui-border-width,1px) * 2);border-radius:var(--sui-radius-sm,2px);background-color:var(--sui-color-sunken,#f3f4f6);color:var(--sui-color-text,#111827);font-family:var(--sui-font-mono,ui-monospace, SFMono-Regular, Menlo, monospace);white-space:nowrap;font-size:.875em}:where(.sui-prose-Obc4t) pre{padding:var(--sui-space-4,1rem);border-radius:var(--sui-radius-md,4px);background-color:var(--sui-color-sunken,#f3f4f6);font-family:var(--sui-font-mono,ui-monospace, SFMono-Regular, Menlo, monospace);font-size:.875em;line-height:var(--sui-line-height-normal,1.5);overflow-wrap:anywhere;white-space:pre-wrap}:where(.sui-prose-Obc4t[data-code-overflow=scroll]) pre{white-space:pre;overflow-x:auto}:where(.sui-prose-Obc4t) pre code{font-size:inherit;background-color:#0000;border-radius:0;padding:0}:where(.sui-prose-Obc4t) img{block-size:auto;max-inline-size:100%}:where(.sui-prose-Obc4t) table{border-collapse:collapse;overflow-wrap:break-word;inline-size:max-content;max-inline-size:100%;display:block;overflow:auto}:where(.sui-prose-Obc4t) pre:where(:focus-visible),:where(.sui-prose-Obc4t) table:where(:focus-visible){outline:var(--sui-focus-ring-width,2px) solid var(--sui-color-focus-ring,#3b82f6);outline-offset:2px}:where(.sui-prose-Obc4t) th,:where(.sui-prose-Obc4t) td{padding:var(--sui-space-2,.5rem) var(--sui-space-3,.75rem);border:var(--sui-border-width,1px) solid var(--sui-color-border,#d1d5db)}:where(.sui-prose-Obc4t) th{background-color:var(--sui-color-sunken,#f3f4f6);font-weight:var(--sui-font-weight-bold,700)}

package/dist/components/Prose/Prose.d.ts

@@ -0,0 +1,50 @@
+import type { JSX } from "react";
+import type { BoxElement, BoxProps } from "../Box";
+/**
+ * Body text sizes of prose, mapped to the `--sui-font-size-*` tokens
+ */
+export type ProseSize = "sm" | "md" | "lg";
+/**
+ * What a code block in prose does with a line wider than the column
+ */
+export type ProseCodeOverflow = "wrap" | "scroll";
+interface ProseOwnProps {
+    /**
+     * What a code block does with a line wider than the column: `wrap` breaks it onto the next line,
+     * and `scroll` keeps it whole and scrolls the block sideways, so wrapping cannot break indentation
+     * or a diagram drawn in text. Defaults to `wrap`.
+     */
+    codeOverflow?: ProseCodeOverflow;
+    /**
+     * Body text size. Defaults to `md`.
+     */
+    size?: ProseSize;
+}
+/**
+ * Props for `Prose`: its own props plus every prop supported by the element given in `as`
+ */
+export type ProseProps<E extends BoxElement = "div"> = ProseOwnProps & Omit<BoxProps<E>, keyof ProseOwnProps>;
+/**
+ * Styles the raw HTML inside it: headings, paragraphs, links, lists, quotes, code, images, figures
+ * and tables. It is for content that cannot be written one component per element, such as rendered
+ * markdown or CMS output.
+ *
+ * A StylesUI component inside prose keeps its own styles. Two things are still styled as prose: a
+ * raw element inside that component, and, for the properties it does not set itself, a component
+ * rendered through `as` as an element prose styles, such as `<Text as="code">`.
+ *
+ * A table wider than the column scrolls sideways inside its own box, as does a code block when
+ * `codeOverflow` is `scroll`; give each one that scrolls `tabIndex={0}` so a keyboard can scroll it.
+ * Set `--sui-prose-line-height` on the prose or an ancestor to space out long lines of text. Code
+ * keeps `--sui-line-height-normal`.
+ *
+ * @example
+ * <Prose as="article" size="lg">
+ *   <h2>Release notes</h2>
+ *   <p>
+ *     Read the <a href="#changelog">changelog</a> before you upgrade.
+ *   </p>
+ * </Prose>
+ */
+export declare function Prose<E extends BoxElement = "div">({ as, className, codeOverflow, size, ...rest }: ProseProps<E>): JSX.Element;
+export {};

package/dist/components/Prose/Prose.js

@@ -0,0 +1,15 @@
+import { Box as e } from "../Box/Box.js";
+import t from "./Prose.module.js";
+import { clsx as n } from "clsx";
+import { jsx as r } from "react/jsx-runtime";
+// src/components/Prose/Prose.tsx
+function i({ as: i, className: a, codeOverflow: o = "wrap", size: s = "md", ...c }) {
+	return /* @__PURE__ */ r(e, {
+		...c,
+		as: i,
+		className: n(t.prose, a),
+		"data-code-overflow": o,
+		"data-size": s
+	});
+}
+export { i as Prose };

package/dist/components/Prose/Prose.module.js

@@ -0,0 +1,3 @@
+import './Prose.css';// src/components/Prose/Prose.module.css
+var e = "sui-prose-Obc4t", t = { prose: e };
+export { t as default, e as prose };

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

@@ -0,0 +1,2 @@
+export { Prose } from "./Prose";
+export type { ProseCodeOverflow, ProseProps, ProseSize } from "./Prose";

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,29 @@
+import type { JSX, ReactNode } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `Radio`: its own props plus every native input prop. `className` and `style` go to the wrapping
+ * label; `ref` and every other prop go to the input.
+ */
+export interface RadioProps extends Omit<BoxProps<"input">, "as" | "children" | "dangerouslySetInnerHTML" | "type" | "value"> {
+    /**
+     * Label shown beside the button, which names the radio. Without it, give the radio an accessible name, for
+     * example with `aria-label`. It is inline content, as a `label` holds: a child laid out as a block drops below the
+     * button, so put a description after the radio, padded by `var(--sui-space-6)`.
+     */
+    children?: ReactNode;
+    /**
+     * The value this radio stands for: what a form submits when it is selected, and what a `RadioGroup` reports
+     * and matches against its own value
+     */
+    value: string;
+}
+/**
+ * Themed native radio button inside the label that names it. On its own it is a plain native radio: radios
+ * that share a `name` allow one selection. Inside a `RadioGroup` it takes its `name` and `required` state from
+ * the group, its selection from the group's `value` or `defaultValue`, and reports its `value` to the group's
+ * `onValueChange` after its own `onChange`.
+ *
+ * @example
+ * <Radio name="plan" value="monthly">Pay monthly</Radio>
+ */
+export declare function Radio({ children, onChange, value, ...rest }: RadioProps): JSX.Element;

package/dist/components/Radio/Radio.js

@@ -0,0 +1,23 @@
+import { useRadioGroupItem as e } from "../../forms/useRadioGroupItem.js";
+import { ChoiceControl as t } from "../ChoiceControl/ChoiceControl.js";
+import { c as n } from "react/compiler-runtime";
+import { jsx as r } from "react/jsx-runtime";
+// src/components/Radio/Radio.tsx
+function i(i) {
+	let a = n(13), o, s, c, l;
+	a[0] === i ? (o = a[1], s = a[2], c = a[3], l = a[4]) : ({children: o, onChange: s, value: l, ...c} = i, a[0] = i, a[1] = o, a[2] = s, a[3] = c, a[4] = l);
+	let u;
+	a[5] !== s || a[6] !== l ? (u = {
+		onChange: s,
+		value: l
+	}, a[5] = s, a[6] = l, a[7] = u) : u = a[7];
+	let d = e(u), f;
+	return a[8] !== o || a[9] !== d || a[10] !== c || a[11] !== l ? (f = /* @__PURE__ */ r(t, {
+		...c,
+		...d,
+		kind: "radio",
+		value: l,
+		children: o
+	}), a[8] = o, a[9] = d, a[10] = c, a[11] = l, a[12] = f) : f = a[12], f;
+}
+export { i as Radio };

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

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

package/dist/components/RadioGroup/RadioGroup.css

@@ -0,0 +1 @@
+.sui-radioGroup-pO2pz{--sui-radio-group-gap:var(--sui-space-2,.5rem);gap:var(--sui-radio-group-gap);display:flex}.sui-radioGroup-pO2pz[data-orientation=vertical]{flex-direction:column}.sui-radioGroup-pO2pz[data-orientation=horizontal]{gap:var(--sui-radio-group-gap) var(--sui-space-4,1rem);flex-flow:wrap}

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,58 @@
+import type { JSX } from "react";
+import type { FieldsetProps } from "../Fieldset";
+/**
+ * Direction a group lays its radios out: `vertical` in a column, `horizontal` in a row that wraps
+ */
+export type RadioGroupOrientation = "horizontal" | "vertical";
+/**
+ * Props for `RadioGroup`: its own props plus every native fieldset prop
+ */
+export interface RadioGroupProps extends Omit<FieldsetProps, "aria-invalid" | "aria-required" | "defaultValue" | "name" | "role"> {
+    /**
+     * Not accepted: an `error` marks the group invalid
+     */
+    "aria-invalid"?: never;
+    /**
+     * Not accepted: `required` marks the group required
+     */
+    "aria-required"?: never;
+    /**
+     * The value selected at first. It leaves the group uncontrolled, so the radios keep the user's choices.
+     */
+    defaultValue?: string;
+    /**
+     * Name every radio submits its value under. Defaults to a generated name that is unique to the group.
+     */
+    name?: string;
+    /**
+     * Called with the value of the radio the user selects, after that radio's own `onChange`
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * How the radios are laid out. Defaults to `vertical`.
+     */
+    orientation?: RadioGroupOrientation;
+    /**
+     * Whether one radio must be selected. It marks the group and every radio required and adds an asterisk
+     * to the label. Defaults to `false`.
+     */
+    required?: boolean;
+    /**
+     * The selected value, which makes the group controlled: the selection follows it, so update it from
+     * `onValueChange`. Give a value that matches no radio to select none.
+     */
+    value?: string;
+}
+/**
+ * Groups `Radio` components under a label so they share a name and one selection. The label names the group,
+ * `description` and `error` are linked to it, and an `error` marks the group and its radios invalid. The
+ * native `disabled` prop disables every radio. The group holds no state of its own: it is uncontrolled with
+ * `defaultValue` and controlled with `value`.
+ *
+ * @example
+ * <RadioGroup defaultValue="monthly" label="Billing" onValueChange={setBilling}>
+ *   <Radio value="monthly">Pay monthly</Radio>
+ *   <Radio value="yearly">Pay yearly</Radio>
+ * </RadioGroup>
+ */
+export declare function RadioGroup({ children, defaultValue, error, label, name, onValueChange, orientation, required, value, ...rest }: RadioGroupProps): JSX.Element;

package/dist/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,36 @@
+import { hasContent as e } from "../../forms/hasContent.js";
+import { RadioGroupContext as t } from "../../forms/RadioGroupContext.js";
+import { Box as n } from "../Box/Box.js";
+import { Fieldset as r } from "../Fieldset/Fieldset.js";
+import { RequiredIndicator as i } from "../RequiredIndicator/RequiredIndicator.js";
+import a from "./RadioGroup.module.js";
+import { useId as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+// src/components/RadioGroup/RadioGroup.tsx
+function u({ children: u, defaultValue: d, error: f, label: p, name: m, onValueChange: h, orientation: g = "vertical", required: _ = !1, value: v, ...y }) {
+	let b = o(), x = e(f);
+	return /* @__PURE__ */ c(t.Provider, {
+		value: {
+			defaultValue: d,
+			invalid: x,
+			name: m ?? b,
+			onValueChange: h,
+			required: _,
+			value: v
+		},
+		children: /* @__PURE__ */ c(r, {
+			...y,
+			error: f,
+			label: _ ? /* @__PURE__ */ l(s, { children: [p, /* @__PURE__ */ c(i, {})] }) : p,
+			role: "radiogroup",
+			"aria-invalid": x ? !0 : void 0,
+			"aria-required": _ ? !0 : void 0,
+			children: /* @__PURE__ */ c(n, {
+				className: a.radioGroup,
+				"data-orientation": g,
+				children: u
+			})
+		})
+	});
+}
+export { u as RadioGroup };

package/dist/components/RadioGroup/RadioGroup.module.js

@@ -0,0 +1,3 @@
+import './RadioGroup.css';// src/components/RadioGroup/RadioGroup.module.css
+var e = "sui-radioGroup-pO2pz", t = { radioGroup: e };
+export { t as default, e as radioGroup };

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

@@ -0,0 +1,2 @@
+export { RadioGroup } from "./RadioGroup";
+export type { RadioGroupOrientation, RadioGroupProps } from "./RadioGroup";

package/dist/components/RequiredIndicator/RequiredIndicator.css

@@ -0,0 +1 @@
+.sui-requiredIndicator-11-gH{color:var(--sui-color-danger-text,#b91c1c);margin-inline-start:var(--sui-space-1,.25rem)}

package/dist/components/RequiredIndicator/RequiredIndicator.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from "react";
+/**
+ * Asterisk that marks a required field's label. Hidden from assistive technology, since the control itself is
+ * marked required.
+ */
+export declare function RequiredIndicator(): JSX.Element;

package/dist/components/RequiredIndicator/RequiredIndicator.js

@@ -0,0 +1,15 @@
+import { Box as e } from "../Box/Box.js";
+import t from "./RequiredIndicator.module.js";
+import { c as n } from "react/compiler-runtime";
+import { jsx as r } from "react/jsx-runtime";
+// src/components/RequiredIndicator/RequiredIndicator.tsx
+function i() {
+	let i = n(1), a;
+	return i[0] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ r(e, {
+		as: "span",
+		className: t.requiredIndicator,
+		"aria-hidden": "true",
+		children: "*"
+	}), i[0] = a) : a = i[0], a;
+}
+export { i as RequiredIndicator };

package/dist/components/RequiredIndicator/RequiredIndicator.module.js

@@ -0,0 +1,3 @@
+import './RequiredIndicator.css';// src/components/RequiredIndicator/RequiredIndicator.module.css
+var e = "sui-requiredIndicator-11-gH", t = { requiredIndicator: e };
+export { t as default, e as requiredIndicator };

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

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

package/dist/components/Row/Row.d.ts

@@ -0,0 +1,29 @@
+import type { JSX } from "react";
+import type { Alignment, Justification, Space } from "../../layout";
+import type { BoxElement, BoxProps } from "../Box";
+interface RowOwnProps {
+    /**
+     * Cross-axis placement of children. Defaults to `center`.
+     */
+    align?: Alignment;
+    /**
+     * Space between children. Defaults to `2`.
+     */
+    gap?: Space;
+    /**
+     * Main-axis distribution of children. Defaults to `start`.
+     */
+    justify?: Justification;
+}
+/**
+ * Props for `Row`: its own props plus every prop supported by the element given in `as`
+ */
+export type RowProps<E extends BoxElement = "div"> = RowOwnProps & Omit<BoxProps<E>, keyof RowOwnProps>;
+/**
+ * Horizontal flow that keeps its children on one line. Use `Cluster` when they should wrap.
+ *
+ * @example
+ * <Row as="header" justify="between">...</Row>
+ */
+export declare function Row<E extends BoxElement = "div">({ align, gap, justify, ...rest }: RowProps<E>): JSX.Element;
+export {};

package/dist/components/Row/Row.js

@@ -0,0 +1,13 @@
+import { HorizontalFlow as e } from "../HorizontalFlow/HorizontalFlow.js";
+import { jsx as t } from "react/jsx-runtime";
+// src/components/Row/Row.tsx
+function n({ align: n = "center", gap: r = 2, justify: i = "start", ...a }) {
+	return /* @__PURE__ */ t(e, {
+		...a,
+		align: n,
+		gap: r,
+		justify: i,
+		wrap: !1
+	});
+}
+export { n as Row };

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

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

package/dist/components/SegmentedControl/Segment.d.ts

@@ -0,0 +1,24 @@
+import type { JSX, ReactNode } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `Segment`: its own props plus every native input prop. `className` and `style` go to the label; `ref`
+ * and every other prop go to the input.
+ */
+export interface SegmentProps extends Omit<BoxProps<"input">, "as" | "children" | "dangerouslySetInnerHTML" | "type" | "value"> {
+    /**
+     * The segment's label, which names it. Without it, give the segment an accessible name, for example with
+     * `aria-label`.
+     */
+    children?: ReactNode;
+    /**
+     * The value this segment stands for, which the `SegmentedControl` reports and a form submits
+     */
+    value: string;
+}
+/**
+ * One choice in a `SegmentedControl`: a native radio drawn as a joined button
+ *
+ * @example
+ * <Segment value="dark">Dark</Segment>
+ */
+export declare function Segment({ children, className, onChange, style, value, ...rest }: SegmentProps): JSX.Element;

package/dist/components/SegmentedControl/Segment.js

@@ -0,0 +1,41 @@
+import { useRadioGroupItem as e } from "../../forms/useRadioGroupItem.js";
+import { Box as t } from "../Box/Box.js";
+import n from "./SegmentedControl.module.js";
+import { clsx as r } from "clsx";
+import { c as i } from "react/compiler-runtime";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+// src/components/SegmentedControl/Segment.tsx
+function s(s) {
+	let c = i(23), l, u, d, f, p, m;
+	c[0] === s ? (l = c[1], u = c[2], d = c[3], f = c[4], p = c[5], m = c[6]) : ({children: l, className: u, onChange: d, style: p, value: m, ...f} = s, c[0] = s, c[1] = l, c[2] = u, c[3] = d, c[4] = f, c[5] = p, c[6] = m);
+	let h;
+	c[7] !== d || c[8] !== m ? (h = {
+		onChange: d,
+		value: m
+	}, c[7] = d, c[8] = m, c[9] = h) : h = c[9];
+	let g = e(h), _;
+	c[10] === u ? _ = c[11] : (_ = r(n.segment, u), c[10] = u, c[11] = _);
+	let v;
+	c[12] !== g || c[13] !== f || c[14] !== m ? (v = /* @__PURE__ */ a(t, {
+		...f,
+		...g,
+		as: "input",
+		className: n.input,
+		type: "radio",
+		value: m
+	}), c[12] = g, c[13] = f, c[14] = m, c[15] = v) : v = c[15];
+	let y;
+	c[16] === l ? y = c[17] : (y = /* @__PURE__ */ a(t, {
+		as: "span",
+		className: n.text,
+		children: l
+	}), c[16] = l, c[17] = y);
+	let b;
+	return c[18] !== p || c[19] !== _ || c[20] !== v || c[21] !== y ? (b = /* @__PURE__ */ o(t, {
+		as: "label",
+		className: _,
+		style: p,
+		children: [v, y]
+	}), c[18] = p, c[19] = _, c[20] = v, c[21] = y, c[22] = b) : b = c[22], b;
+}
+export { s as Segment };

package/dist/components/SegmentedControl/SegmentedControl.css

@@ -0,0 +1 @@
+.sui-track-wz5iS{--sui-segmented-control-inset:2px;--sui-segmented-control-depth:var(--sui-control-depth,0px);--sui-segment-padding-x:var(--sui-space-4,1rem);--sui-segment-padding-y:var(--sui-space-2,.5rem);--sui-segment-font-size:var(--sui-font-size-md,1rem);gap:var(--sui-segmented-control-inset);padding:var(--sui-segmented-control-inset);border:var(--sui-border-width,1px) solid var(--sui-color-input-border,#6b7280);border-radius:var(--sui-radius-control,4px);padding-block-end:calc(var(--sui-segmented-control-inset) + var(--sui-segmented-control-depth));display:inline-flex}.sui-track-wz5iS[data-size=sm]{--sui-segment-padding-x:var(--sui-space-3,.75rem);--sui-segment-padding-y:var(--sui-space-1,.25rem);--sui-segment-font-size:var(--sui-font-size-sm,.875rem)}.sui-track-wz5iS[data-size=lg]{--sui-segment-padding-x:var(--sui-space-6,1.5rem);--sui-segment-padding-y:var(--sui-space-3,.75rem);--sui-segment-font-size:var(--sui-font-size-lg,1.125rem)}.sui-segmentedControl-ocGwO[aria-invalid=true] .sui-track-wz5iS{border-color:var(--sui-color-danger-text,#b91c1c)}.sui-segment-cu-EL{padding:calc(var(--sui-segment-padding-y,var(--sui-space-2,.5rem)) - var(--sui-segmented-control-inset,2px)) calc(var(--sui-segment-padding-x,var(--sui-space-4,1rem)) - var(--sui-segmented-control-inset,2px));color:var(--sui-color-text,#111827);font-family:var(--sui-font-body,system-ui, sans-serif);font-size:var(--sui-segment-font-size,var(--sui-font-size-md,1rem));font-weight:var(--sui-font-weight-control,500);line-height:var(--sui-line-height-tight,1.25);place-items:center;display:inline-grid;position:relative}.sui-input-IEP3u{border:var(--sui-border-width,1px) solid transparent;border-radius:calc(var(--sui-radius-control,4px) - var(--sui-segmented-control-inset,2px));cursor:pointer;appearance:none;background-color:#0000;margin:0;transition:background-color .12s,border-color .12s,box-shadow .12s ease-out;position:absolute;inset:0}.sui-text-5WlQL{pointer-events:none;transition:color .12s;position:relative}.sui-input-IEP3u:hover:not(:checked,:disabled){background-color:var(--sui-color-secondary-subtle,#f3f4f6)}.sui-input-IEP3u:checked{border-color:var(--sui-color-control-border,transparent);background-color:var(--sui-color-primary,#2563eb);box-shadow:0 var(--sui-segmented-control-depth,var(--sui-control-depth,0px)) 0 var(--sui-color-shadow,transparent);transition:background-color .12s ease, border-color .12s ease, box-shadow var(--sui-motion-spring,.12s ease-out)}.sui-input-IEP3u:checked+.sui-text-5WlQL{color:var(--sui-color-on-primary,#fff)}.sui-input-IEP3u:focus-visible{outline:var(--sui-focus-ring-width,2px) solid var(--sui-color-focus-ring,#3b82f6);outline-offset:2px}.sui-input-IEP3u:disabled,.sui-input-IEP3u:disabled+.sui-text-5WlQL{cursor:not-allowed;opacity:.5}@media (prefers-reduced-motion:reduce){.sui-input-IEP3u,.sui-input-IEP3u:checked{transition:background-color .12s,border-color .12s}}@media (forced-colors:active){.sui-input-IEP3u:checked{background-color:highlight;border-color:highlight}.sui-input-IEP3u:checked+.sui-text-5WlQL{color:highlighttext;forced-color-adjust:none}}

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,25 @@
+import type { JSX } from "react";
+import type { ControlSize } from "../../forms";
+import type { RadioGroupProps } from "../RadioGroup";
+/**
+ * Props for `SegmentedControl`: `RadioGroup`'s props except `orientation`, plus `size`
+ */
+export interface SegmentedControlProps extends Omit<RadioGroupProps, "orientation"> {
+    /**
+     * Height of the control, matching the `Button` sizes. Defaults to `md`.
+     */
+    size?: ControlSize;
+}
+/**
+ * Chooses one value from a few, drawn as a row of joined `Segment`s. It is a `RadioGroup`, so it takes the same
+ * label, description, error and value props, and works with the keyboard and in a form as native radios do. To switch
+ * between views rather than choose a value, use pill `Tabs`.
+ *
+ * @example
+ * <SegmentedControl defaultValue="system" label="Appearance" onValueChange={setAppearance}>
+ *   <Segment value="light">Light</Segment>
+ *   <Segment value="dark">Dark</Segment>
+ *   <Segment value="system">System</Segment>
+ * </SegmentedControl>
+ */
+export declare function SegmentedControl({ children, className, size, ...rest }: SegmentedControlProps): JSX.Element;

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,19 @@
+import { Box as e } from "../Box/Box.js";
+import { RadioGroup as t } from "../RadioGroup/RadioGroup.js";
+import n from "./SegmentedControl.module.js";
+import { clsx as r } from "clsx";
+import { jsx as i } from "react/jsx-runtime";
+// src/components/SegmentedControl/SegmentedControl.tsx
+function a({ children: a, className: o, size: s = "md", ...c }) {
+	return /* @__PURE__ */ i(t, {
+		...c,
+		className: r(n.segmentedControl, o),
+		orientation: "horizontal",
+		children: /* @__PURE__ */ i(e, {
+			className: n.track,
+			"data-size": s,
+			children: a
+		})
+	});
+}
+export { a as SegmentedControl };

package/dist/components/SegmentedControl/SegmentedControl.module.js

@@ -0,0 +1,9 @@
+import './SegmentedControl.css';// src/components/SegmentedControl/SegmentedControl.module.css
+var e = "sui-track-wz5iS", t = "sui-segmentedControl-ocGwO", n = "sui-segment-cu-EL", r = "sui-input-IEP3u", i = "sui-text-5WlQL", a = {
+	track: e,
+	segmentedControl: t,
+	segment: n,
+	input: r,
+	text: i
+};
+export { a as default, r as input, n as segment, t as segmentedControl, i as text, e as track };

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

@@ -0,0 +1,4 @@
+export { Segment } from "./Segment";
+export type { SegmentProps } from "./Segment";
+export { SegmentedControl } from "./SegmentedControl";
+export type { SegmentedControlProps } from "./SegmentedControl";