@krelborn/stylesui 0.0.0-stage → 0.9.0

package/dist/components/Icon/PaletteIcon.js

@@ -0,0 +1,48 @@
+import { Box as e } from "../Box/Box.js";
+import { Icon as t } from "./Icon.js";
+import { c as n } from "react/compiler-runtime";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+// src/components/Icon/PaletteIcon.tsx
+function a(a) {
+	let o = n(7), s, c, l, u, d;
+	o[0] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"
+	}), c = /* @__PURE__ */ r(e, {
+		as: "circle",
+		cx: "13.5",
+		cy: "6.5",
+		fill: "currentColor",
+		r: ".5"
+	}), l = /* @__PURE__ */ r(e, {
+		as: "circle",
+		cx: "17.5",
+		cy: "10.5",
+		fill: "currentColor",
+		r: ".5"
+	}), u = /* @__PURE__ */ r(e, {
+		as: "circle",
+		cx: "6.5",
+		cy: "12.5",
+		fill: "currentColor",
+		r: ".5"
+	}), d = /* @__PURE__ */ r(e, {
+		as: "circle",
+		cx: "8.5",
+		cy: "7.5",
+		fill: "currentColor",
+		r: ".5"
+	}), o[0] = s, o[1] = c, o[2] = l, o[3] = u, o[4] = d) : (s = o[0], c = o[1], l = o[2], u = o[3], d = o[4]);
+	let f;
+	return o[5] === a ? f = o[6] : (f = /* @__PURE__ */ i(t, {
+		...a,
+		children: [
+			s,
+			c,
+			l,
+			u,
+			d
+		]
+	}), o[5] = a, o[6] = f), f;
+}
+export { a as PaletteIcon };

package/dist/components/Icon/RefreshIcon.d.ts

@@ -0,0 +1,13 @@
+import type { JSX } from "react";
+import type { IconProps } from "./Icon";
+/**
+ * Two arrows chasing round a circle, for reloading or syncing. To show that a refresh is running, make the
+ * `IconButton` holding it `busy`, which shows a spinner in its place. It is hidden from assistive technology unless it
+ * has a `label`, so inside a button, name the button instead.
+ *
+ * @example
+ * <IconButton busy={isRefreshing} label="Refresh" onClick={refresh}>
+ *   <RefreshIcon />
+ * </IconButton>
+ */
+export declare function RefreshIcon(props: IconProps): JSX.Element;

package/dist/components/Icon/RefreshIcon.js

@@ -0,0 +1,32 @@
+import { Box as e } from "../Box/Box.js";
+import { Icon as t } from "./Icon.js";
+import { c as n } from "react/compiler-runtime";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+// src/components/Icon/RefreshIcon.tsx
+function a(a) {
+	let o = n(6), s, c, l, u;
+	o[0] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
+	}), c = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M21 3v5h-5"
+	}), l = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
+	}), u = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M8 16H3v5"
+	}), o[0] = s, o[1] = c, o[2] = l, o[3] = u) : (s = o[0], c = o[1], l = o[2], u = o[3]);
+	let d;
+	return o[4] === a ? d = o[5] : (d = /* @__PURE__ */ i(t, {
+		...a,
+		children: [
+			s,
+			c,
+			l,
+			u
+		]
+	}), o[4] = a, o[5] = d), d;
+}
+export { a as RefreshIcon };

package/dist/components/Icon/RemoveIcon.d.ts

@@ -0,0 +1,11 @@
+import type { JSX } from "react";
+import type { IconProps } from "./Icon";
+/**
+ * A minus sign, for removing something, such as an item from a list, or taking one away from a count. It is hidden from assistive technology unless it has a `label`, so inside a button, name the button instead.
+ *
+ * @example
+ * <IconButton label="Remove item" onClick={removeItem}>
+ *   <RemoveIcon />
+ * </IconButton>
+ */
+export declare function RemoveIcon(props: IconProps): JSX.Element;

package/dist/components/Icon/RemoveIcon.js

@@ -0,0 +1,18 @@
+import { Box as e } from "../Box/Box.js";
+import { Icon as t } from "./Icon.js";
+import { c as n } from "react/compiler-runtime";
+import { jsx as r } from "react/jsx-runtime";
+// src/components/Icon/RemoveIcon.tsx
+function i(i) {
+	let a = n(3), o;
+	a[0] === Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M5 12h14"
+	}), a[0] = o) : o = a[0];
+	let s;
+	return a[1] === i ? s = a[2] : (s = /* @__PURE__ */ r(t, {
+		...i,
+		children: o
+	}), a[1] = i, a[2] = s), s;
+}
+export { i as RemoveIcon };

package/dist/components/Icon/SendIcon.d.ts

@@ -0,0 +1,11 @@
+import type { JSX } from "react";
+import type { IconProps } from "./Icon";
+/**
+ * A paper plane pointing along the line, for sending a message. It points the way the text runs, so it is mirrored in right-to-left text. It is hidden from assistive technology unless it has a `label`, so inside a button, name the button instead.
+ *
+ * @example
+ * <IconButton label="Send" type="submit">
+ *   <SendIcon />
+ * </IconButton>
+ */
+export declare function SendIcon(props: IconProps): JSX.Element;

package/dist/components/Icon/SendIcon.js

@@ -0,0 +1,22 @@
+import { Box as e } from "../Box/Box.js";
+import { Icon as t } from "./Icon.js";
+import { c as n } from "react/compiler-runtime";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+// src/components/Icon/SendIcon.tsx
+function a(a) {
+	let o = n(4), s, c;
+	o[0] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M3.714 3.048a.498.498 0 0 0-.683.627l2.843 7.627a2 2 0 0 1 0 1.396l-2.842 7.627a.498.498 0 0 0 .682.627l18-8.5a.5.5 0 0 0 0-.904z"
+	}), c = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M6 12h16"
+	}), o[0] = s, o[1] = c) : (s = o[0], c = o[1]);
+	let l;
+	return o[2] === a ? l = o[3] : (l = /* @__PURE__ */ i(t, {
+		...a,
+		mirrored: !0,
+		children: [s, c]
+	}), o[2] = a, o[3] = l), l;
+}
+export { a as SendIcon };

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

@@ -0,0 +1,16 @@
+export { AddIcon } from "./AddIcon";
+export { CheckIcon } from "./CheckIcon";
+export { ChevronDownIcon } from "./ChevronDownIcon";
+export { ChevronRightIcon } from "./ChevronRightIcon";
+export { CloseIcon } from "./CloseIcon";
+export { ColorModeIcon } from "./ColorModeIcon";
+export { DeleteIcon } from "./DeleteIcon";
+export type { IconProps } from "./Icon";
+export { InfoIcon } from "./InfoIcon";
+export { MenuIcon } from "./MenuIcon";
+export { MoreHorizontalIcon } from "./MoreHorizontalIcon";
+export { MoreVerticalIcon } from "./MoreVerticalIcon";
+export { PaletteIcon } from "./PaletteIcon";
+export { RefreshIcon } from "./RefreshIcon";
+export { RemoveIcon } from "./RemoveIcon";
+export { SendIcon } from "./SendIcon";

package/dist/components/IconButton/IconButton.css

@@ -0,0 +1 @@
+.sui-iconButton-JAF-a[data-size]{padding:var(--sui-button-padding-y)}.sui-icon-2DDWy{block-size:1.25em;inline-size:1.25em;display:inline-flex}.sui-icon-2DDWy>svg{block-size:100%;inline-size:100%}.sui-shortcut-LCwpq{margin-inline-start:var(--sui-space-2,.5rem)}

package/dist/components/IconButton/IconButton.d.ts

@@ -0,0 +1,45 @@
+import type { JSX, ReactNode } from "react";
+import type { OverlayPlacement } from "../../overlays";
+import type { ButtonProps } from "../Button";
+/**
+ * Props for `IconButton`: its own props plus `Button`'s, except the name and children a label replaces
+ */
+export interface IconButtonProps extends Omit<ButtonProps, "aria-label" | "aria-labelledby" | "children"> {
+    /**
+     * Not accepted: `label` names the button
+     */
+    "aria-label"?: never;
+    /**
+     * Not accepted: the tooltip names the button
+     */
+    "aria-labelledby"?: never;
+    /**
+     * The icon, hidden from assistive technology and sized to 1.25em
+     */
+    children: ReactNode;
+    /**
+     * What the button does. It is the tooltip's text and the button's accessible name.
+     */
+    label: string;
+    /**
+     * Side of the button the tooltip opens on. Defaults to `top`.
+     */
+    placement?: OverlayPlacement;
+    /**
+     * Keyboard shortcut shown after the label in the tooltip, such as "⌘R". It is not part of the name: add
+     * `aria-keyshortcuts` (for example `"Meta+R"`) so screen readers announce it.
+     */
+    shortcut?: string;
+}
+/**
+ * A square button showing only an icon, named by a tooltip that shows on hover and keyboard focus. Use a `Button` with
+ * text when the label fits. A native `disabled` button cannot take focus, so keyboard users never see its tooltip:
+ * prefer `aria-disabled` when they need it. With `aria-disabled` the button still calls `onClick`, so ignore presses
+ * there and show the state yourself.
+ *
+ * @example
+ * <IconButton busy={isSyncing} label="Refresh" onClick={refresh} shortcut="⌘R" aria-keyshortcuts="Meta+R">
+ *   <RefreshIcon />
+ * </IconButton>
+ */
+export declare function IconButton({ children, className, label, placement, shortcut, variant, ...rest }: IconButtonProps): JSX.Element;

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,40 @@
+import { Box as e } from "../Box/Box.js";
+import { Button as t } from "../Button/Button.js";
+import { Kbd as n } from "../Kbd/Kbd.js";
+import { Tooltip as r } from "../Tooltip/Tooltip.js";
+import { useTooltip as i } from "../Tooltip/useTooltip.js";
+import a from "./IconButton.module.js";
+import { clsx as o } from "clsx";
+import { useId as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+// src/components/IconButton/IconButton.tsx
+function d({ children: d, className: f, label: p, placement: m = "top", shortcut: h, variant: g = "ghost", ..._ }) {
+	let v = i({
+		placement: m,
+		relationship: "label"
+	}), y = s(), b = h !== void 0 && h !== "";
+	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(t, {
+		...v.getTriggerProps(_),
+		className: o(a.iconButton, f),
+		variant: g,
+		"aria-labelledby": y,
+		children: /* @__PURE__ */ l(e, {
+			as: "span",
+			className: a.icon,
+			"aria-hidden": !0,
+			children: d
+		})
+	}), /* @__PURE__ */ u(r, {
+		...v.getOverlayProps(),
+		children: [/* @__PURE__ */ l(e, {
+			as: "span",
+			id: y,
+			children: p
+		}), b && /* @__PURE__ */ l(n, {
+			className: a.shortcut,
+			"aria-hidden": !0,
+			children: h
+		})]
+	})] });
+}
+export { d as IconButton };

package/dist/components/IconButton/IconButton.module.js

@@ -0,0 +1,7 @@
+import './IconButton.css';// src/components/IconButton/IconButton.module.css
+var e = "sui-iconButton-JAF-a", t = "sui-icon-2DDWy", n = "sui-shortcut-LCwpq", r = {
+	iconButton: e,
+	icon: t,
+	shortcut: n
+};
+export { r as default, t as icon, e as iconButton, n as shortcut };

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

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

package/dist/components/Kbd/Kbd.css

@@ -0,0 +1 @@
+.sui-kbd-jgbYx{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}

package/dist/components/Kbd/Kbd.d.ts

@@ -0,0 +1,13 @@
+import type { JSX } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `Kbd`: every native `kbd` prop
+ */
+export type KbdProps = Omit<BoxProps<"kbd">, "as">;
+/**
+ * A key on the keyboard, drawn as a small keycap. Write a combination as one `Kbd` per key.
+ *
+ * @example
+ * <Text as="p">Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to search.</Text>
+ */
+export declare function Kbd({ className, ...rest }: KbdProps): JSX.Element;

package/dist/components/Kbd/Kbd.js

@@ -0,0 +1,19 @@
+import { Box as e } from "../Box/Box.js";
+import t from "./Kbd.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/Kbd/Kbd.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.kbd, s), o[3] = s, o[4] = l);
+	let u;
+	return o[5] !== c || o[6] !== l ? (u = /* @__PURE__ */ i(e, {
+		...c,
+		as: "kbd",
+		className: l
+	}), o[5] = c, o[6] = l, o[7] = u) : u = o[7], u;
+}
+export { a as Kbd };

package/dist/components/Kbd/Kbd.module.js

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

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

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

package/dist/components/Link/Link.css

@@ -0,0 +1 @@
+.sui-link-Ly-e3{box-sizing:border-box;color:var(--sui-link-color,var(--sui-color-primary,#2563eb));font:inherit;text-decoration-line:underline;text-decoration-thickness:var(--sui-border-width,1px);text-underline-offset:.2em}.sui-link-Ly-e3[data-tone=inherit]{color:inherit}.sui-link-Ly-e3[data-underline=always]:hover{text-decoration-thickness:calc(var(--sui-border-width,1px) * 2)}.sui-link-Ly-e3[data-underline=hover]{text-decoration-line:none}.sui-link-Ly-e3[data-underline=hover]:hover,.sui-link-Ly-e3[data-underline=hover]:focus-visible{text-decoration-line:underline}.sui-link-Ly-e3[aria-current]:not([aria-current=false]){font-weight:var(--sui-font-weight-bold,700)}.sui-link-Ly-e3:focus-visible{outline:var(--sui-focus-ring-width,2px) solid var(--sui-color-focus-ring,#3b82f6);outline-offset:2px}

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,52 @@
+import type { ComponentPropsWithRef, JSX, JSXElementConstructor } from "react";
+/**
+ * What `Link` can render: an anchor, or a component that renders one, such as a router's link
+ */
+export type LinkElement = "a" | JSXElementConstructor<never>;
+/**
+ * Link colours: the theme's link colour, or `inherit` to take the surrounding text colour
+ */
+export type LinkTone = "inherit" | "primary";
+/**
+ * When a link's underline shows. `hover` also shows it on keyboard focus, and is for navigation:
+ * in running text a link needs its underline to be told apart from the text around it.
+ */
+export type LinkUnderline = "always" | "hover";
+interface LinkOwnProps {
+    /**
+     * Link colour. Defaults to `primary`.
+     */
+    tone?: LinkTone;
+    /**
+     * When the underline shows. Defaults to `always`.
+     */
+    underline?: LinkUnderline;
+}
+interface LinkElementOwnProps<E extends LinkElement> {
+    /**
+     * What to render: `a`, or a component that renders an anchor. Defaults to `a`.
+     */
+    as?: E;
+    /**
+     * Class names merged with the component's base class.
+     */
+    className?: string;
+}
+type LinkElementProps<E extends LinkElement> = E extends JSXElementConstructor<infer Props> ? Props : ComponentPropsWithRef<"a">;
+type OmitFromEach<Props, Name extends PropertyKey> = Props extends unknown ? Omit<Props, Name> : never;
+/**
+ * Props for `Link`: its own props plus every prop of the anchor or component given in `as`
+ */
+export type LinkProps<E extends LinkElement = "a"> = LinkOwnProps & LinkElementOwnProps<E> & OmitFromEach<LinkElementProps<E>, keyof LinkOwnProps | keyof LinkElementOwnProps<E>>;
+/**
+ * Themed link. Renders an anchor, or the component given in `as`, such as a router's link. That
+ * component must pass `className` and the `data-*` attributes it is given on to its anchor.
+ *
+ * @example
+ * <Link href="/docs">Documentation</Link>
+ *
+ * @example
+ * <Link as={RouterLink} to="/settings" underline="hover">Settings</Link>
+ */
+export declare function Link<E extends LinkElement = "a">({ as, className, tone, underline, ...rest }: LinkProps<E>): JSX.Element;
+export {};

package/dist/components/Link/Link.js

@@ -0,0 +1,26 @@
+import { Box as e } from "../Box/Box.js";
+import t from "./Link.module.js";
+import { clsx as n } from "clsx";
+import { jsx as r } from "react/jsx-runtime";
+// src/components/Link/Link.tsx
+function i({ as: i, className: a, tone: o = "primary", underline: s = "always", ...c }) {
+	let l = {
+		className: n(t.link, a),
+		"data-tone": o,
+		"data-underline": s
+	};
+	if (i === void 0 || i === "a") {
+		let { children: t, ...n } = c;
+		return /* @__PURE__ */ r(e, {
+			...n,
+			...l,
+			as: "a",
+			children: t
+		});
+	}
+	return /* @__PURE__ */ r(i, {
+		...c,
+		...l
+	});
+}
+export { i as Link };

package/dist/components/Link/Link.module.js

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

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

@@ -0,0 +1,2 @@
+export { Link } from "./Link";
+export type { LinkElement, LinkProps, LinkTone, LinkUnderline } from "./Link";

package/dist/components/Listbox/Listbox.css

@@ -0,0 +1 @@
+.sui-listbox-lSHQo{padding:calc(var(--sui-focus-ring-width,2px) + 2px);border-radius:var(--sui-radius-md,4px);font-family:var(--sui-font-body,system-ui, sans-serif);flex-direction:column;gap:2px;display:flex}.sui-listbox-lSHQo:focus-visible{outline:var(--sui-focus-ring-width,2px) solid var(--sui-color-focus-ring,#3b82f6);outline-offset:calc(var(--sui-focus-ring-width,2px) * -1)}.sui-option-sCJLx{padding:var(--sui-space-2,.5rem);border-radius:var(--sui-radius-md,4px);color:var(--sui-color-text,#111827);cursor:default;scroll-margin-block:calc(var(--sui-focus-ring-width,2px) + 2px);-webkit-user-select:none;user-select:none;padding-inline-start:calc(var(--sui-space-2,.5rem) + var(--sui-border-width,1px) * 2);transition:background-color .12s,color .12s;position:relative}.sui-option-sCJLx:before{inset-block:var(--sui-space-1,.25rem);inline-size:calc(var(--sui-border-width,1px) * 2);border-radius:var(--sui-radius-full,9999px);content:"";background-color:#0000;position:absolute;inset-inline-start:0}.sui-option-sCJLx:hover:not([aria-selected=true],[aria-disabled=true]){background-color:var(--sui-color-secondary-subtle,#f3f4f6)}.sui-option-sCJLx[aria-selected=true]{--sui-color-text-muted:currentColor;--sui-status-dot-color:currentColor;background-color:var(--sui-listbox-inactive-selection,var(--sui-color-primary-subtle,#edf5ff));color:var(--sui-listbox-on-inactive-selection,var(--sui-color-primary,#2563eb))}.sui-option-sCJLx[aria-selected=true]:before{background-color:var(--sui-listbox-inactive-selection-bar,var(--sui-color-primary,#2563eb))}.sui-listbox-lSHQo:focus .sui-option-sCJLx[aria-selected=true]{background-color:var(--sui-listbox-selection,var(--sui-color-primary,#2563eb));color:var(--sui-listbox-on-selection,var(--sui-color-on-primary,#fff))}.sui-listbox-lSHQo:focus-visible .sui-option-sCJLx[data-active]:not([aria-selected=true]){outline:var(--sui-focus-ring-width,2px) solid var(--sui-color-focus-ring,#3b82f6);outline-offset:calc(var(--sui-focus-ring-width,2px) * -1)}.sui-option-sCJLx[aria-disabled=true]{cursor:not-allowed}.sui-option-sCJLx[aria-disabled=true]:not([aria-selected=true]){color:color-mix(in srgb, var(--sui-color-text,#111827) 50%, transparent)}:where(.sui-option-sCJLx[aria-disabled=true]:not([aria-selected=true]))>*{color:var(--sui-color-text,#111827);opacity:.5}@media (forced-colors:active){.sui-option-sCJLx[aria-selected=true],.sui-listbox-lSHQo:focus .sui-option-sCJLx[aria-selected=true]{color:highlighttext;forced-color-adjust:none;background-color:highlight}.sui-option-sCJLx[aria-selected=true]:before{background-color:highlight}.sui-option-sCJLx[aria-disabled=true]:not([aria-selected=true]),.sui-option-sCJLx[aria-disabled=true]:not([aria-selected=true]) *{color:graytext}:where(.sui-option-sCJLx[aria-disabled=true]:not([aria-selected=true]))>*{opacity:1}}

package/dist/components/Listbox/Listbox.d.ts

@@ -0,0 +1,46 @@
+import type { JSX, ReactNode } from "react";
+import type { RequiredAccessibleName } from "../../accessibility";
+import type { BoxProps } from "../Box";
+interface ListboxOwnProps {
+    /**
+     * The `ListboxOption`s
+     */
+    children?: ReactNode;
+    /**
+     * The option selected at first, which leaves the listbox uncontrolled. Defaults to none.
+     */
+    defaultValue?: string | null;
+    /**
+     * Called with an option's value when Enter or a double-click acts on it, such as to open it
+     */
+    onAction?: (value: string) => void;
+    /**
+     * Called with the value of the option the user selects
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * The selected option, or null for none, which makes the listbox controlled: update it from `onValueChange`
+     */
+    value?: string | null;
+}
+/**
+ * Props for `Listbox`: its own props, a required `aria-label` or `aria-labelledby`, and every other `div` prop except
+ * those the listbox pattern sets
+ */
+export type ListboxProps = ListboxOwnProps & RequiredAccessibleName & Omit<BoxProps<"div">, "aria-activedescendant" | "aria-label" | "aria-labelledby" | "as" | "defaultValue" | "role" | "tabIndex" | keyof ListboxOwnProps>;
+/**
+ * A list of options with one selected, following the WAI-ARIA listbox pattern, for a list whose selection shows
+ * details. It is one tab stop. The arrow keys, Home, End and type-ahead move the selection; Space selects the active
+ * option, or joins type-ahead text typed within the last 500ms; Enter or a double-click calls `onAction`. Name it with
+ * `aria-label` or `aria-labelledby`. Options hold no interactive content. Your `onKeyDown` runs first; preventing its
+ * default stops the listbox handling the key.
+ *
+ * @example
+ * <Listbox aria-label="Needs you" onAction={open} onValueChange={select} value={selectedId}>
+ *   {pullRequests.map((pullRequest) => (
+ *     <ListboxOption key={pullRequest.id} value={pullRequest.id}>{pullRequest.title}</ListboxOption>
+ *   ))}
+ * </Listbox>
+ */
+export declare function Listbox({ className, defaultValue, onAction, onBlur, onFocus, onKeyDown, onPointerCancel, onPointerDown, onValueChange, value, ...rest }: ListboxProps): JSX.Element;
+export {};

package/dist/components/Listbox/Listbox.js

@@ -0,0 +1,55 @@
+import { optionId as e } from "../../collections/optionId.js";
+import { Box as t } from "../Box/Box.js";
+import n from "./Listbox.module.js";
+import { ListboxContext as r } from "./ListboxContext.js";
+import { useListbox as i } from "./useListbox.js";
+import { clsx as a } from "clsx";
+import { jsx as o } from "react/jsx-runtime";
+// src/components/Listbox/Listbox.tsx
+function s({ className: s, defaultValue: c = null, onAction: l, onBlur: u, onFocus: d, onKeyDown: f, onPointerCancel: p, onPointerDown: m, onValueChange: h, value: g, ..._ }) {
+	let v = i({
+		defaultValue: c,
+		onAction: l,
+		onValueChange: h,
+		value: g
+	}), { act: y, activeValue: b, baseId: x, choose: S, claim: C, selectedValue: w, setActiveValue: T } = v;
+	function E(e) {
+		u?.(e), v.handleBlur();
+	}
+	function D(e) {
+		d?.(e), v.handleFocus(e);
+	}
+	function O(e) {
+		f?.(e), e.defaultPrevented || v.handleKeyDown(e);
+	}
+	function k(e) {
+		p?.(e), v.handlePointerCancel();
+	}
+	function A(e) {
+		m?.(e), v.handlePointerDown();
+	}
+	return /* @__PURE__ */ o(r.Provider, {
+		value: {
+			act: y,
+			activeValue: b,
+			baseId: x,
+			choose: S,
+			claim: C,
+			selectedValue: w,
+			setActiveValue: T
+		},
+		children: /* @__PURE__ */ o(t, {
+			..._,
+			className: a(n.listbox, s),
+			onBlur: E,
+			onFocus: D,
+			onKeyDown: O,
+			onPointerCancel: k,
+			onPointerDown: A,
+			role: "listbox",
+			tabIndex: 0,
+			"aria-activedescendant": b === null ? void 0 : e(x, b)
+		})
+	});
+}
+export { s as Listbox };

package/dist/components/Listbox/Listbox.module.js

@@ -0,0 +1,6 @@
+import './Listbox.css';// src/components/Listbox/Listbox.module.css
+var e = "sui-listbox-lSHQo", t = "sui-option-sCJLx", n = {
+	listbox: e,
+	option: t
+};
+export { n as default, e as listbox, t as option };

package/dist/components/Listbox/ListboxContext.d.ts

@@ -0,0 +1,38 @@
+import type { Dispatch, SetStateAction } from "react";
+/**
+ * State a `Listbox` shares with its options
+ */
+export interface ListboxContextValue {
+    /**
+     * Acts on an option, as Enter does
+     */
+    act: (value: string) => void;
+    /**
+     * The value of the option keyboard focus is on, or null for none
+     */
+    activeValue: string | null;
+    /**
+     * The generated id every option id starts with
+     */
+    baseId: string;
+    /**
+     * Handles a click on an option: focuses the listbox, makes the option active and selects it unless it is disabled
+     */
+    choose: (option: HTMLElement, value: string, disabled: boolean) => void;
+    /**
+     * Makes the option with this value active while the listbox has focus, as a newly selected option does
+     */
+    claim: (value: string) => void;
+    /**
+     * The selected option's value, or null for none
+     */
+    selectedValue: string | null;
+    /**
+     * Sets the value of the option keyboard focus is on, or null for none
+     */
+    setActiveValue: Dispatch<SetStateAction<string | null>>;
+}
+/**
+ * Carries a `Listbox`'s state to its options; null outside a `Listbox`
+ */
+export declare const ListboxContext: import("react").Context<ListboxContextValue | null>;

package/dist/components/Listbox/ListboxContext.js

@@ -0,0 +1,4 @@
+import { createContext as e } from "react";
+// src/components/Listbox/ListboxContext.ts
+var t = e(null);
+export { t as ListboxContext };

package/dist/components/Listbox/ListboxOption.d.ts

@@ -0,0 +1,31 @@
+import type { JSX } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `ListboxOption`: its own props plus every `div` prop except those the listbox pattern sets
+ */
+export interface ListboxOptionProps extends Omit<BoxProps<"div">, "aria-disabled" | "aria-selected" | "as" | "id" | "role" | "tabIndex"> {
+    /**
+     * Whether the option cannot be selected. A disabled option is still reached with the arrow keys, so it is read.
+     * Defaults to `false`.
+     */
+    disabled?: boolean;
+    /**
+     * The text type-ahead matches. Defaults to the text of the elements the option's `aria-labelledby` names, or to the
+     * option's own text when it has none.
+     */
+    textValue?: string;
+    /**
+     * The value this option stands for
+     */
+    value: string;
+}
+/**
+ * One option in a `Listbox`. For a rich option, name it with `aria-labelledby` pointing at its title and describe it
+ * with `aria-describedby`. Your `onClick` and `onDoubleClick` run first; preventing their default stops the option
+ * handling them. To leave an option out, do not render it or give it `hidden`: an option hidden only by CSS can still
+ * be reached with the keyboard.
+ *
+ * @example
+ * <ListboxOption aria-describedby={metaId} aria-labelledby={titleId} value={pullRequest.id}>…</ListboxOption>
+ */
+export declare function ListboxOption({ className, disabled, onClick, onDoubleClick, textValue, value, ...rest }: ListboxOptionProps): JSX.Element;