@krelborn/stylesui 0.0.0-stage → 0.9.0

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,11 @@
+import { TextControl as e } from "../TextControl/TextControl.js";
+import { jsx as t } from "react/jsx-runtime";
+// src/components/Select/Select.tsx
+function n({ size: n = "md", ...r }) {
+	return /* @__PURE__ */ t(e, {
+		...r,
+		as: "select",
+		size: n
+	});
+}
+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,23 @@
+import { spaceValue as e } from "../../layout/spaceValue.js";
+import { withCustomProperties as t } from "../../layout/withCustomProperties.js";
+import { Box as n } from "../Box/Box.js";
+import r from "./Sidebar.module.js";
+import { clsx as i } from "clsx";
+import { jsx as a } from "react/jsx-runtime";
+// 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(n, {
+		...h,
+		as: s,
+		className: i(r.sidebar, c),
+		style: t({
+			"--sui-sidebar-content-minimum-width": l,
+			"--sui-sidebar-gap": e(u),
+			"--sui-sidebar-side-width": f ?? "auto"
+		}, m),
+		"data-align": o,
+		"data-side": d
+	});
+}
+export { o as Sidebar };

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

@@ -0,0 +1,3 @@
+import './Sidebar.css';// src/components/Sidebar/Sidebar.module.css
+var e = "sui-sidebar-UB1qz", t = { sidebar: e };
+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,20 @@
+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";
+// 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;
+}
+export { a as SkipLink };

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

@@ -0,0 +1,3 @@
+import './SkipLink.css';// src/components/SkipLink/SkipLink.module.css
+var e = "sui-skipLink-lRGho", t = { skipLink: e };
+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,32 @@
+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";
+// 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;
+}
+export { a as Spinner };

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

@@ -0,0 +1,7 @@
+import './Spinner.css';// 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
+};
+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,20 @@
+import { listRole as e } from "../../layout/listRole.js";
+import { spaceValue as t } from "../../layout/spaceValue.js";
+import { withCustomProperties as n } from "../../layout/withCustomProperties.js";
+import { Box as r } from "../Box/Box.js";
+import i from "./Stack.module.js";
+import { clsx as a } from "clsx";
+import { jsx as o } from "react/jsx-runtime";
+// 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(r, {
+		...m,
+		as: h,
+		className: a(i.stack, l),
+		role: e(h, f),
+		style: n({ "--sui-stack-gap": t(u) }, p),
+		"data-align": s
+	});
+}
+export { s as Stack };

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

@@ -0,0 +1,3 @@
+import './Stack.css';// src/components/Stack/Stack.module.css
+var e = "sui-stack-yUU-B", t = { stack: e };
+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,20 @@
+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";
+// 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
+	});
+}
+export { i as StatusDot };

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

@@ -0,0 +1,3 @@
+import './StatusDot.css';// src/components/StatusDot/StatusDot.module.css
+var e = "sui-statusDot-xTHkw", t = { statusDot: e };
+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,12 @@
+import { ChoiceControl as e } from "../ChoiceControl/ChoiceControl.js";
+import { c as t } from "react/compiler-runtime";
+import { jsx as n } from "react/jsx-runtime";
+// 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;
+}
+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,22 @@
+import { listRole as e } from "../../layout/listRole.js";
+import { spaceValue as t } from "../../layout/spaceValue.js";
+import { withCustomProperties as n } from "../../layout/withCustomProperties.js";
+import { Box as r } from "../Box/Box.js";
+import i from "./Switcher.module.js";
+import { clsx as a } from "clsx";
+import { jsx as o } from "react/jsx-runtime";
+// 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(r, {
+		...m,
+		as: h,
+		className: a(i.switcher, c),
+		role: e(h, f),
+		style: n({
+			"--sui-switcher-gap": t(l),
+			"--sui-switcher-threshold": u
+		}, p)
+	});
+}
+export { s as Switcher };

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

@@ -0,0 +1,3 @@
+import './Switcher.css';// src/components/Switcher/Switcher.module.css
+var e = "sui-switcher-zWFpy", t = { switcher: e };
+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";

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

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

package/dist/components/Tabs/Tab.js

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

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

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

package/dist/components/Tabs/TabList.js

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