@krelborn/stylesui 0.0.0-stage → 0.8.1

package/dist/components/SegmentedControl/Segment.js

@@ -0,0 +1,42 @@
+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";
+//#region 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;
+}
+//#endregion
+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,20 @@
+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";
+//#region 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
+		})
+	});
+}
+//#endregion
+export { a as SegmentedControl };

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

@@ -0,0 +1,10 @@
+import './SegmentedControl.css';//#region 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
+};
+//#endregion
+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";

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,27 @@
+import type { JSX } from "react";
+import type { ControlSize } from "../../forms";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `Select`: its own props plus every native select prop
+ */
+export interface SelectProps extends Omit<BoxProps<"select">, "as" | "multiple" | "size"> {
+    /**
+     * Height of the select, 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 select takes focus.
+     */
+    size?: ControlSize;
+}
+/**
+ * Themed native select that chooses one option from a list. Its children are native `option` and `optgroup`
+ * elements. 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="Country">
+ *   <Select defaultValue="fr">
+ *     <option value="fr">France</option>
+ *     <option value="jp">Japan</option>
+ *   </Select>
+ * </Field>
+ */
+export declare function Select({ size, ...rest }: SelectProps): JSX.Element;

package/dist/components/Select/Select.js

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

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

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

package/dist/components/Sidebar/Sidebar.css

@@ -0,0 +1 @@
+.sui-sidebar-UB1qz{gap:var(--sui-sidebar-gap);flex-wrap:wrap;display:flex}.sui-sidebar-UB1qz[data-align=start]{align-items:start}.sui-sidebar-UB1qz[data-side=end]>:first-child,.sui-sidebar-UB1qz[data-side=start]>:last-child{min-inline-size:var(--sui-sidebar-content-minimum-width);flex-grow:999;flex-basis:0}.sui-sidebar-UB1qz[data-side=end]>:last-child,.sui-sidebar-UB1qz[data-side=start]>:first-child{flex-basis:var(--sui-sidebar-side-width);flex-grow:1}

package/dist/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,42 @@
+import type { JSX } from "react";
+import type { Space } from "../../layout";
+import type { BoxElement, BoxProps } from "../Box";
+interface SidebarOwnProps {
+    /**
+     * Cross-axis placement of the panes; `start` lets a sticky sidebar work. Defaults to `stretch`.
+     */
+    align?: "start" | "stretch";
+    /**
+     * Minimum width of the main pane before the panes stack, as a CSS length. Defaults to `50%`.
+     */
+    contentMinimumWidth?: string;
+    /**
+     * Space between the panes. Defaults to `4`.
+     */
+    gap?: Space;
+    /**
+     * Which child is the sidebar: the first (`start`) or last (`end`). Defaults to `end`.
+     */
+    side?: "start" | "end";
+    /**
+     * Ideal width of the sidebar, as a CSS length. Defaults to the sidebar's content width.
+     */
+    sideWidth?: string;
+}
+/**
+ * Props for `Sidebar`: its own props plus every prop supported by the element given in `as`
+ */
+export type SidebarProps<E extends BoxElement = "div"> = SidebarOwnProps & Omit<BoxProps<E>, keyof SidebarOwnProps>;
+/**
+ * Main pane and side pane that sit side by side when there is room and stack when there is not.
+ * Expects exactly two children. Wrap a nested Sidebar in an element, because a Sidebar that is itself a
+ * pane shadows this one's custom properties.
+ *
+ * @example
+ * <Sidebar sideWidth="18rem">
+ *   <article>...</article>
+ *   <aside>...</aside>
+ * </Sidebar>
+ */
+export declare function Sidebar<E extends BoxElement = "div">({ align, as, className, contentMinimumWidth, gap, side, sideWidth, ...rest }: SidebarProps<E>): JSX.Element;
+export {};

package/dist/components/Sidebar/Sidebar.js

@@ -0,0 +1,24 @@
+import { Box as e } from "../Box/Box.js";
+import { spaceValue as t } from "../../layout/spaceValue.js";
+import { withCustomProperties as n } from "../../layout/withCustomProperties.js";
+import r from "./Sidebar.module.js";
+import { clsx as i } from "clsx";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/Sidebar/Sidebar.tsx
+function o({ align: o = "stretch", as: s, className: c, contentMinimumWidth: l = "50%", gap: u = 4, side: d = "end", sideWidth: f, ...p }) {
+	let { style: m, ...h } = p;
+	return /* @__PURE__ */ a(e, {
+		...h,
+		as: s,
+		className: i(r.sidebar, c),
+		style: n({
+			"--sui-sidebar-content-minimum-width": l,
+			"--sui-sidebar-gap": t(u),
+			"--sui-sidebar-side-width": f ?? "auto"
+		}, m),
+		"data-align": o,
+		"data-side": d
+	});
+}
+//#endregion
+export { o as Sidebar };

package/dist/components/Sidebar/Sidebar.module.js

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

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

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

package/dist/components/SkipLink/SkipLink.css

@@ -0,0 +1 @@
+.sui-skipLink-lRGho{--sui-skip-link-bg:var(--sui-color-primary,#2563eb);--sui-skip-link-fg:var(--sui-color-on-primary,#fff);--sui-skip-link-z-index:1000;clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sui-skipLink-lRGho:focus-visible{z-index:var(--sui-skip-link-z-index);width:auto;height:auto;max-inline-size:calc(100% - 2 * var(--sui-space-2,.5rem));padding:var(--sui-space-2,.5rem) var(--sui-space-4,1rem);clip-path:none;border-radius:var(--sui-radius-control,4px);background-color:var(--sui-skip-link-bg);color:var(--sui-skip-link-fg);font-family:var(--sui-font-body,system-ui, sans-serif);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);white-space:normal;outline:var(--sui-focus-ring-width,2px) solid var(--sui-color-focus-ring,#3b82f6);outline-offset:2px;margin:0;text-decoration:none;position:fixed;inset-block-start:var(--sui-space-2,.5rem);inset-inline-start:var(--sui-space-2,.5rem);overflow:visible}

package/dist/components/SkipLink/SkipLink.d.ts

@@ -0,0 +1,20 @@
+import type { JSX } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `SkipLink`: its own props plus every native anchor prop
+ */
+export interface SkipLinkProps extends Omit<BoxProps<"a">, "as" | "href"> {
+    /**
+     * Fragment naming the element to skip to, such as `#main`. That element needs the matching `id`.
+     */
+    href: `#${string}`;
+}
+/**
+ * Link that skips past repeated content to the page's main content. It stays out of sight until it
+ * receives keyboard focus, then shows pinned to the top-left of the page. Render it first in the
+ * page so it is the first Tab stop.
+ *
+ * @example
+ * <SkipLink href="#main">Skip to main content</SkipLink>
+ */
+export declare function SkipLink({ children, className, ...rest }: SkipLinkProps): JSX.Element;

package/dist/components/SkipLink/SkipLink.js

@@ -0,0 +1,21 @@
+import { Box as e } from "../Box/Box.js";
+import t from "./SkipLink.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/SkipLink/SkipLink.tsx
+function a(a) {
+	let o = r(10), s, c, l;
+	o[0] === a ? (s = o[1], c = o[2], l = o[3]) : ({children: s, className: c, ...l} = a, o[0] = a, o[1] = s, o[2] = c, o[3] = l);
+	let u;
+	o[4] === c ? u = o[5] : (u = n(t.skipLink, c), o[4] = c, o[5] = u);
+	let d;
+	return o[6] !== s || o[7] !== l || o[8] !== u ? (d = /* @__PURE__ */ i(e, {
+		...l,
+		as: "a",
+		className: u,
+		children: s
+	}), o[6] = s, o[7] = l, o[8] = u, o[9] = d) : d = o[9], d;
+}
+//#endregion
+export { a as SkipLink };

package/dist/components/SkipLink/SkipLink.module.js

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

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

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

package/dist/components/Spinner/Spinner.css

@@ -0,0 +1 @@
+.sui-spinner-GpFZS{block-size:1em;inline-size:1em;animation:.8s linear infinite sui-rotate-RRVpi}@keyframes sui-rotate-RRVpi{to{transform:rotate(1turn)}}@keyframes sui-pulse-ZOhFR{50%{opacity:.4}}@media (prefers-reduced-motion:reduce){.sui-spinner-GpFZS{animation:1.6s ease-in-out infinite sui-pulse-ZOhFR}}@media (forced-colors:active){.sui-spinner-GpFZS{color:buttontext}}

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,13 @@
+import type { JSX } from "react";
+interface SpinnerProps {
+    /**
+     * Class names merged with the spinner's own, for positioning it
+     */
+    className?: string;
+}
+/**
+ * A rotating arc in `currentColor`, 1em square, hidden from assistive technology. Whatever shows it must also tell
+ * screen readers that something is happening, for example with a status message.
+ */
+export declare function Spinner({ className }: SpinnerProps): JSX.Element;
+export {};

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,33 @@
+import { Box as e } from "../Box/Box.js";
+import t from "./Spinner.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/Spinner/Spinner.tsx
+function a(a) {
+	let o = r(5), { className: s } = a, c;
+	o[0] === s ? c = o[1] : (c = n(t.spinner, s), o[0] = s, o[1] = c);
+	let l;
+	o[2] === Symbol.for("react.memo_cache_sentinel") ? (l = /* @__PURE__ */ i(e, {
+		as: "circle",
+		cx: 8,
+		cy: 8,
+		r: 6,
+		stroke: "currentColor",
+		strokeDasharray: "28 10",
+		strokeLinecap: "round",
+		strokeWidth: 2
+	}), o[2] = l) : l = o[2];
+	let u;
+	return o[3] === c ? u = o[4] : (u = /* @__PURE__ */ i(e, {
+		as: "svg",
+		className: c,
+		fill: "none",
+		focusable: "false",
+		viewBox: "0 0 16 16",
+		"aria-hidden": !0,
+		children: l
+	}), o[3] = c, o[4] = u), u;
+}
+//#endregion
+export { a as Spinner };

package/dist/components/Spinner/Spinner.module.js

@@ -0,0 +1,8 @@
+import './Spinner.css';//#region src/components/Spinner/Spinner.module.css
+var e = "sui-spinner-GpFZS", t = "sui-rotate-RRVpi", n = "sui-pulse-ZOhFR", r = {
+	spinner: e,
+	rotate: t,
+	pulse: n
+};
+//#endregion
+export { r as default, n as pulse, t as rotate, e as spinner };

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

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

package/dist/components/Stack/Stack.css

@@ -0,0 +1 @@
+.sui-stack-yUU-B{gap:var(--sui-stack-gap);flex-direction:column;display:flex}.sui-stack-yUU-B:where(ul,ol){margin:0;padding:0;list-style:none}.sui-stack-yUU-B[data-align=start]{align-items:start}.sui-stack-yUU-B[data-align=center]{align-items:center}.sui-stack-yUU-B[data-align=end]{align-items:end}.sui-stack-yUU-B[data-align=stretch]{align-items:stretch}.sui-stack-yUU-B[data-align=baseline]{align-items:baseline}

package/dist/components/Stack/Stack.d.ts

@@ -0,0 +1,25 @@
+import type { JSX } from "react";
+import type { Alignment, Space } from "../../layout";
+import type { BoxElement, BoxProps } from "../Box";
+interface StackOwnProps {
+    /**
+     * Cross-axis placement of children. Defaults to `stretch`.
+     */
+    align?: Alignment;
+    /**
+     * Space between children. Defaults to `4`.
+     */
+    gap?: Space;
+}
+/**
+ * Props for `Stack`: its own props plus every prop supported by the element given in `as`
+ */
+export type StackProps<E extends BoxElement = "div"> = StackOwnProps & Omit<BoxProps<E>, keyof StackOwnProps>;
+/**
+ * Vertical flow with a consistent gap between children
+ *
+ * @example
+ * <Stack as="article" gap={6}>...</Stack>
+ */
+export declare function Stack<E extends BoxElement = "div">({ align, as, className, gap, ...rest }: StackProps<E>): JSX.Element;
+export {};

package/dist/components/Stack/Stack.js

@@ -0,0 +1,21 @@
+import { Box as e } from "../Box/Box.js";
+import { listRole as t } from "../../layout/listRole.js";
+import { spaceValue as n } from "../../layout/spaceValue.js";
+import { withCustomProperties as r } from "../../layout/withCustomProperties.js";
+import i from "./Stack.module.js";
+import { clsx as a } from "clsx";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/Stack/Stack.tsx
+function s({ align: s = "stretch", as: c, className: l, gap: u = 4, ...d }) {
+	let { role: f, style: p, ...m } = d, h = c ?? "div";
+	return /* @__PURE__ */ o(e, {
+		...m,
+		as: h,
+		className: a(i.stack, l),
+		role: t(h, f),
+		style: r({ "--sui-stack-gap": n(u) }, p),
+		"data-align": s
+	});
+}
+//#endregion
+export { s as Stack };

package/dist/components/Stack/Stack.module.js

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

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

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

package/dist/components/StatusDot/StatusDot.css

@@ -0,0 +1 @@
+.sui-statusDot-xTHkw{--sui-status-dot-size:.5rem;--sui-status-dot-tone-color:var(--sui-color-input-border,#6b7280);inline-size:var(--sui-status-dot-size);block-size:var(--sui-status-dot-size);border:calc(var(--sui-status-dot-size) / 4) solid currentColor;color:var(--sui-status-dot-color,var(--sui-status-dot-tone-color));vertical-align:middle;border-radius:50%;flex:none;display:inline-block}.sui-statusDot-xTHkw[data-size=sm]{--sui-status-dot-size:.375rem}.sui-statusDot-xTHkw[data-variant=solid]{background-color:currentColor}.sui-statusDot-xTHkw[data-tone=danger]{--sui-status-dot-tone-color:var(--sui-color-danger-text,#b91c1c)}.sui-statusDot-xTHkw[data-tone=info]{--sui-status-dot-tone-color:var(--sui-color-info-text,#4338ca)}.sui-statusDot-xTHkw[data-tone=primary]{--sui-status-dot-tone-color:var(--sui-color-primary,#2563eb)}.sui-statusDot-xTHkw[data-tone=success]{--sui-status-dot-tone-color:var(--sui-color-success-text,#166534)}.sui-statusDot-xTHkw[data-tone=warning]{--sui-status-dot-tone-color:var(--sui-color-warning-text,#854d0e)}@media (forced-colors:active){.sui-statusDot-xTHkw{color:inherit}.sui-statusDot-xTHkw[data-variant=solid]{border-width:calc(var(--sui-status-dot-size) / 2)}}

package/dist/components/StatusDot/StatusDot.d.ts

@@ -0,0 +1,57 @@
+import type { JSX } from "react";
+import type { BadgeTone } from "../Badge";
+import type { BoxProps } from "../Box";
+/**
+ * Dot sizes: `sm` is 0.375rem across and `md` is 0.5rem
+ */
+export type StatusDotSize = "md" | "sm";
+/**
+ * Dot styles: a filled circle, or a ring that gives a second cue beside the colour
+ */
+export type StatusDotVariant = "ring" | "solid";
+/**
+ * Props for `StatusDot`: its own props plus every `span` prop except `children`, `role` and the ARIA props that name or
+ * hide it, which `label` decides
+ */
+export interface StatusDotProps extends Omit<BoxProps<"span">, "aria-hidden" | "aria-label" | "aria-labelledby" | "as" | "children" | "dangerouslySetInnerHTML" | "role"> {
+    /**
+     * Not accepted: the dot is hidden from assistive technology exactly when it has no `label`
+     */
+    "aria-hidden"?: never;
+    /**
+     * Not accepted: the `label` names the dot
+     */
+    "aria-label"?: never;
+    /**
+     * Not accepted: the `label` names the dot
+     */
+    "aria-labelledby"?: never;
+    /**
+     * What the dot means, read by screen readers. Without it, or with an empty one, the dot is hidden from them, so give
+     * it a label, or put text beside it, whenever it carries meaning.
+     */
+    label?: string;
+    /**
+     * Dot size. Defaults to `md`.
+     */
+    size?: StatusDotSize;
+    /**
+     * Colour. Each tone keeps 3:1 against the page and a surface. Defaults to `neutral`.
+     */
+    tone?: BadgeTone;
+    /**
+     * Filled or ring. Defaults to `solid`.
+     */
+    variant?: StatusDotVariant;
+}
+/**
+ * A small coloured dot for a status, such as the result of a check. Colour alone must not tell two states apart, so
+ * pair states with different variants or with text.
+ *
+ * A container sets `--sui-status-dot-color` (for example to `currentColor`) to recolour every dot inside it, such as on
+ * a selected row filled with the primary colour.
+ *
+ * @example
+ * <StatusDot label="Checks running" tone="warning" variant="ring" />
+ */
+export declare function StatusDot({ className, label, size, tone, variant, ...rest }: StatusDotProps): JSX.Element;

package/dist/components/StatusDot/StatusDot.js

@@ -0,0 +1,21 @@
+import { Box as e } from "../Box/Box.js";
+import t from "./StatusDot.module.js";
+import { clsx as n } from "clsx";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/StatusDot/StatusDot.tsx
+function i({ className: i, label: a, size: o = "md", tone: s = "neutral", variant: c = "solid", ...l }) {
+	let u = !a;
+	return /* @__PURE__ */ r(e, {
+		...l,
+		as: "span",
+		className: n(t.statusDot, i),
+		role: u ? void 0 : "img",
+		"aria-hidden": u ? !0 : void 0,
+		"aria-label": u ? void 0 : a,
+		"data-size": o,
+		"data-tone": s,
+		"data-variant": c
+	});
+}
+//#endregion
+export { i as StatusDot };

package/dist/components/StatusDot/StatusDot.module.js

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

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

@@ -0,0 +1,2 @@
+export { StatusDot } from "./StatusDot";
+export type { StatusDotProps, StatusDotSize, StatusDotVariant } from "./StatusDot";

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,24 @@
+import type { JSX, ReactNode } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `Switch`: 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 SwitchProps extends Omit<BoxProps<"input">, "as" | "children" | "dangerouslySetInnerHTML" | "role" | "type"> {
+    /**
+     * Label shown beside the track, which names the switch. Without it, give the switch an accessible name, for
+     * example with `aria-label` or the `label` of the `Field` around it. It is inline content, as a `label` holds: a child
+     * laid out as a block drops below the track.
+     */
+    children?: ReactNode;
+}
+/**
+ * Themed on/off switch: a native checkbox with the `switch` role, inside the label that names it. Use it for a
+ * setting that takes effect at once, and `Checkbox` for a choice submitted with a form. When it is required it
+ * shows an asterisk after its label. Inside a `Field` it takes its description, error, and required and disabled
+ * state from the field; give it either children or the field's `label`, not both.
+ *
+ * @example
+ * <Switch defaultChecked={true} name="notifications">Email notifications</Switch>
+ */
+export declare function Switch(props: SwitchProps): JSX.Element;

package/dist/components/Switch/Switch.js

@@ -0,0 +1,13 @@
+import { ChoiceControl as e } from "../ChoiceControl/ChoiceControl.js";
+import { c as t } from "react/compiler-runtime";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/Switch/Switch.tsx
+function r(r) {
+	let i = t(2), a;
+	return i[0] === r ? a = i[1] : (a = /* @__PURE__ */ n(e, {
+		...r,
+		kind: "switch"
+	}), i[0] = r, i[1] = a), a;
+}
+//#endregion
+export { r as Switch };

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

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

package/dist/components/Switcher/Switcher.css

@@ -0,0 +1 @@
+.sui-switcher-zWFpy{gap:var(--sui-switcher-gap);flex-wrap:wrap;display:flex}.sui-switcher-zWFpy:where(ul,ol){margin:0;padding:0;list-style:none}.sui-switcher-zWFpy>*{flex-grow:1;flex-basis:calc((var(--sui-switcher-threshold) - 100%) * 999)}

package/dist/components/Switcher/Switcher.d.ts

@@ -0,0 +1,27 @@
+import type { JSX } from "react";
+import type { Space } from "../../layout";
+import type { BoxElement, BoxProps } from "../Box";
+interface SwitcherOwnProps {
+    /**
+     * Space between items. Defaults to `4`.
+     */
+    gap?: Space;
+    /**
+     * Container width below which the items stack, as a CSS length. Defaults to `30rem`.
+     */
+    threshold?: string;
+}
+/**
+ * Props for `Switcher`: its own props plus every prop supported by the element given in `as`
+ */
+export type SwitcherProps<E extends BoxElement = "div"> = SwitcherOwnProps & Omit<BoxProps<E>, keyof SwitcherOwnProps>;
+/**
+ * Equal-width items in a row that all stack at once when the container is narrower than the
+ * threshold. Wrap a nested Switcher in an element, because a Switcher that is itself an item shadows this
+ * one's custom properties.
+ *
+ * @example
+ * <Switcher as="nav" threshold="36rem" aria-label="More posts">...</Switcher>
+ */
+export declare function Switcher<E extends BoxElement = "div">({ as, className, gap, threshold, ...rest }: SwitcherProps<E>): JSX.Element;
+export {};

package/dist/components/Switcher/Switcher.js

@@ -0,0 +1,23 @@
+import { Box as e } from "../Box/Box.js";
+import { listRole as t } from "../../layout/listRole.js";
+import { spaceValue as n } from "../../layout/spaceValue.js";
+import { withCustomProperties as r } from "../../layout/withCustomProperties.js";
+import i from "./Switcher.module.js";
+import { clsx as a } from "clsx";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/Switcher/Switcher.tsx
+function s({ as: s, className: c, gap: l = 4, threshold: u = "30rem", ...d }) {
+	let { role: f, style: p, ...m } = d, h = s ?? "div";
+	return /* @__PURE__ */ o(e, {
+		...m,
+		as: h,
+		className: a(i.switcher, c),
+		role: t(h, f),
+		style: r({
+			"--sui-switcher-gap": n(l),
+			"--sui-switcher-threshold": u
+		}, p)
+	});
+}
+//#endregion
+export { s as Switcher };

package/dist/components/Switcher/Switcher.module.js

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

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

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