@krelborn/stylesui 0.0.0-stage → 0.8.1

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

@@ -0,0 +1,52 @@
+import type { JSX, ToggleEventHandler } from "react";
+import type { OverlayPlacement } from "../../overlays";
+import type { BoxProps } from "../Box";
+/**
+ * Props `getOverlayProps` from `usePopover` returns, which every `Popover` takes
+ */
+export interface PopoverOverlayProps {
+    /**
+     * `anchor-name` of the trigger the popover is positioned against. From `getOverlayProps`.
+     */
+    anchorName: string;
+    /**
+     * The popover's id, which the trigger's `popoverTarget` and `aria-controls` point at. From `getOverlayProps`.
+     */
+    id: string;
+    /**
+     * Cancels an opening the parent of a controlled popover has not asked for. From `getOverlayProps`.
+     */
+    onBeforeToggle: ToggleEventHandler<HTMLElement>;
+    /**
+     * Keeps the hook's state in step with the browser. From `getOverlayProps`.
+     */
+    onToggle: ToggleEventHandler<HTMLElement>;
+    /**
+     * Whether the popover is shown. From `getOverlayProps`.
+     */
+    open: boolean;
+    /**
+     * Side of the trigger the popover opens on. From `getOverlayProps`.
+     */
+    placement: OverlayPlacement;
+}
+/**
+ * Props for `Popover`: the props `getOverlayProps` returns plus every `div` prop except `popover` and `ref`
+ */
+export interface PopoverProps extends PopoverOverlayProps, Omit<BoxProps<"div">, "as" | "popover" | "ref" | keyof PopoverOverlayProps> {
+}
+/**
+ * A surface that opens beside a button and holds more content than a tooltip can, such as a short list or a few
+ * actions. `usePopover` connects the two: spread `getTriggerProps()` on a `Button` or `IconButton` and
+ * `getOverlayProps()` on the popover, inside the same `Theme`. It closes on Escape and on a click outside. Closing it
+ * with focus inside gives focus back to what had it before it opened, usually the button, or to the button when the
+ * browser leaves it on the page, and `usePopover`'s `initialFocus` moves focus in as it opens. It has no role of its
+ * own: give it `role="dialog"` and a name when it holds a form or asks for confirmation.
+ *
+ * @example
+ * const popover = usePopover({ placement: "top" });
+ *
+ * <Button {...popover.getTriggerProps()} variant="ghost">2 problems</Button>
+ * <Popover {...popover.getOverlayProps()}>…</Popover>
+ */
+export declare function Popover({ className, ...rest }: PopoverProps): JSX.Element;

package/dist/components/Popover/Popover.js

@@ -0,0 +1,21 @@
+import { Overlay as e } from "../Overlay/Overlay.js";
+import t from "./Popover.module.js";
+import { clsx as n } from "clsx";
+import { c as r } from "react/compiler-runtime";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/Popover/Popover.tsx
+function a(a) {
+	let o = r(8), s, c;
+	o[0] === a ? (s = o[1], c = o[2]) : ({className: s, ...c} = a, o[0] = a, o[1] = s, o[2] = c);
+	let l;
+	o[3] === s ? l = o[4] : (l = n(t.popover, s), o[3] = s, o[4] = l);
+	let u;
+	return o[5] !== c || o[6] !== l ? (u = /* @__PURE__ */ i(e, {
+		...c,
+		as: "div",
+		className: l,
+		popover: "auto"
+	}), o[5] = c, o[6] = l, o[7] = u) : u = o[7], u;
+}
+//#endregion
+export { a as Popover };

package/dist/components/Popover/Popover.module.js

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

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

@@ -0,0 +1,4 @@
+export { Popover } from "./Popover";
+export type { PopoverProps } from "./Popover";
+export { usePopover } from "./usePopover";
+export type { UsePopoverOptions, UsePopoverResult } from "./usePopover";

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

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

@@ -0,0 +1,4 @@
+import './Prose.css';//#region src/components/Prose/Prose.module.css
+var e = "sui-prose-Obc4t", t = { prose: e };
+//#endregion
+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,24 @@
+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";
+//#region 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;
+}
+//#endregion
+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,37 @@
+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 { RequiredIndicator as r } from "../RequiredIndicator/RequiredIndicator.js";
+import { Fieldset as i } from "../Fieldset/Fieldset.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";
+//#region 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(i, {
+			...y,
+			error: f,
+			label: _ ? /* @__PURE__ */ l(s, { children: [p, /* @__PURE__ */ c(r, {})] }) : 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
+			})
+		})
+	});
+}
+//#endregion
+export { u as RadioGroup };

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

@@ -0,0 +1,4 @@
+import './RadioGroup.css';//#region src/components/RadioGroup/RadioGroup.module.css
+var e = "sui-radioGroup-pO2pz", t = { radioGroup: e };
+//#endregion
+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,16 @@
+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";
+//#region 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;
+}
+//#endregion
+export { i as RequiredIndicator };

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

@@ -0,0 +1,4 @@
+import './RequiredIndicator.css';//#region src/components/RequiredIndicator/RequiredIndicator.module.css
+var e = "sui-requiredIndicator-11-gH", t = { requiredIndicator: e };
+//#endregion
+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,14 @@
+import { HorizontalFlow as e } from "../HorizontalFlow/HorizontalFlow.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region 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
+	});
+}
+//#endregion
+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;