@stll/ui 0.55.1 → 0.57.0

package/README.md

@@ -13,6 +13,9 @@ export map below is what "part of the design system" means.
 Peer dependencies: `react`, `react-dom`, `@base-ui/react`, `tailwindcss` (v4),
 and `@tanstack/react-virtual`.
 
+Derived in part from [coss ui](https://github.com/cosscom/ui) (MIT); see
+`THIRD_PARTY_NOTICES`.
+
 ## Import
 
 Every module has its own subpath, and the package declares `sideEffects: false`,

package/THIRD_PARTY_NOTICES

@@ -0,0 +1,24 @@
+Portions of @stll/ui are derived from coss ui (https://github.com/cosscom/ui):
+
+MIT License
+
+Copyright (c) 2025 coss.com
+Originally Copyright (c) 2025 Origin UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/badge.d.ts

@@ -0,0 +1,28 @@
+import { StatusTone } from "./list.js";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/badge.d.ts
+/**
+ * A short label that classifies the thing beside it: a status, a type, a
+ * count. The words carry the meaning; the tone and the optional dot only
+ * reinforce it, so colour is never the sole signal.
+ *
+ * The tones are the ones `ListItemStatus` uses, plus `info`, so a row that
+ * shows a status as a dot and label and a card that shows it as a badge read
+ * as the same colour.
+ */
+declare function Badge({ className, tone, size, dot, children, render, ...props }: BadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type BadgeTone = StatusTone | "info";
+/** `sm` stands on its own beside a title; `xs` sits in a line of meta text. */
+type BadgeSize = "xs" | "sm";
+type BadgeProps = useRender.ComponentProps<"span"> & {
+  tone?: BadgeTone;
+  size?: BadgeSize;
+  /** A leading dot in the tone's colour, for a status rather than a type. */
+  dot?: boolean;
+};
+declare const badgeVariants: (props?: ({
+  size?: "sm" | "xs" | null | undefined;
+  tone?: "destructive" | "info" | "neutral" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+export { Badge, type BadgeProps, type BadgeSize, type BadgeTone, badgeVariants };

package/dist/components/badge.js

@@ -0,0 +1,64 @@
+import { cn } from "../lib/utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+//#region src/components/badge.tsx
+/**
+* A short label that classifies the thing beside it: a status, a type, a
+* count. The words carry the meaning; the tone and the optional dot only
+* reinforce it, so colour is never the sole signal.
+*
+* The tones are the ones `ListItemStatus` uses, plus `info`, so a row that
+* shows a status as a dot and label and a card that shows it as a badge read
+* as the same colour.
+*/
+function Badge({ className, tone = "neutral", size = "sm", dot = false, children, render, ...props }) {
+	const defaultProps = {
+		className: cn(badgeVariants({
+			size,
+			tone
+		}), className),
+		"data-slot": "badge",
+		"data-tone": tone,
+		"data-size": size,
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [dot ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: cn("size-1.5 shrink-0 rounded-full", BADGE_DOT_CLASS[tone]),
+			"data-slot": "badge-dot"
+		}) : null, children] })
+	};
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+const badgeVariants = cva("inline-flex w-fit shrink-0 items-center rounded-md font-medium whitespace-nowrap tabular-nums [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+	defaultVariants: {
+		size: "sm",
+		tone: "neutral"
+	},
+	variants: {
+		size: {
+			sm: "h-5 gap-1.5 px-2 text-xs [&_svg:not([class*='size-'])]:size-3.5",
+			xs: "text-2xs h-4 gap-1 px-1.5 [&_svg:not([class*='size-'])]:size-3"
+		},
+		tone: {
+			destructive: "bg-destructive/12 text-destructive-foreground",
+			info: "bg-info/12 text-info-foreground",
+			neutral: "bg-muted text-muted-foreground",
+			success: "bg-success/12 text-success-foreground",
+			warning: "bg-warning/12 text-warning-foreground"
+		}
+	}
+});
+const BADGE_DOT_CLASS = {
+	destructive: "bg-destructive",
+	info: "bg-info",
+	neutral: "bg-foreground-disabled",
+	success: "bg-success",
+	warning: "bg-warning"
+};
+//#endregion
+export { Badge, badgeVariants };

package/dist/components/button.d.ts

@@ -1,5 +1,5 @@
+import { ButtonContract } from "./button.shared.js";
 import { ReactNode } from "react";
-import { VariantProps } from "class-variance-authority";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/button.d.ts
 /**
@@ -46,11 +46,7 @@ declare const BUTTON_SIZE_CONTENT: {
   readonly xl: "text";
   readonly xs: "text";
 };
-type ButtonProps = {
-  variant?: VariantProps<typeof buttonVariants>["variant"];
-  size?: VariantProps<typeof buttonVariants>["size"];
-  loading?: boolean;
-  icon?: ReactNode;
+type ButtonProps = Omit<ButtonContract, "children" | "disabled"> & {
   tooltip?: ReactNode;
   "data-accessible-disabled"?: "";
 } & useRender.ComponentProps<"button">;

package/dist/components/button.js

@@ -3,6 +3,7 @@ import { cn } from "../lib/utils.js";
 import { renderTooltipTrigger } from "./tooltip-trigger-helper.js";
 import { BUTTON_DISPOSITION, blockDisabledActivation, blockDisabledKeyActivation, resolveButtonDisposition } from "../lib/button-disposition.js";
 import { MENU_ROW_CLASS_NAME } from "../lib/menu-row.js";
+import { BUTTON_VARIANT_TOKENS } from "./button.shared.js";
 import { Loader } from "./loader.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
@@ -31,37 +32,44 @@ const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 */
 const buttonPressClass = "motion-safe:transition-transform motion-safe:duration-150 ease-out motion-safe:active:scale-[0.98]";
 const BUTTON_DEFAULT_SIZE = "default";
+/** A variant's shared colours (./button.shared.ts), before the web's states. */
+const tokens = (variant) => {
+	const { surface, label } = BUTTON_VARIANT_TOKENS[variant];
+	return label === "" ? surface : `${surface} ${label}`;
+};
+const BUTTON_SIZE_CLASS_NAMES = {
+	chip: "h-7 gap-1.5 rounded-full px-2.5 text-xs before:rounded-full sm:text-xs",
+	default: "h-9 px-[calc(--spacing(3)-1px)] sm:h-8",
+	icon: "size-9 sm:size-8",
+	"icon-lg": "size-10 sm:size-9",
+	"icon-sm": "size-8 sm:size-7",
+	"icon-xl": "size-11 sm:size-10 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
+	"icon-xs": "size-7 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-6 not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-4 sm:not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5",
+	lg: "h-10 px-[calc(--spacing(3.5)-1px)] sm:h-9",
+	row: `${MENU_ROW_CLASS_NAME} [&_svg]:mx-0`,
+	sm: "h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] text-sm sm:h-7 sm:text-xs",
+	xl: "h-11 px-[calc(--spacing(4)-1px)] text-lg sm:h-10 sm:text-base [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
+	xs: "h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5"
+};
+const BUTTON_VARIANT_CLASS_NAMES = {
+	default: `${tokens("default")} shadow-primary/24 [:hover,[data-pressed]]:bg-primary/90 shadow-xs not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none`,
+	destructive: `${tokens("destructive")} shadow-destructive/8 [:hover,[data-pressed]]:border-destructive/40 [:hover,[data-pressed]]:bg-destructive/14 [:active,[data-pressed]]:bg-destructive/18 shadow-xs not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] [:disabled,:active,[data-pressed]]:shadow-none`,
+	"destructive-outline": `${tokens("destructive-outline")} dark:bg-input/32 [:hover,[data-pressed]]:border-destructive/32 [:hover,[data-pressed]]:bg-destructive/4 shadow-xs/5 not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none`,
+	"destructive-ghost": `${tokens("destructive-ghost")} data-pressed:bg-destructive/10 [:hover,[data-pressed]]:bg-destructive/10`,
+	ghost: `${tokens("ghost")} data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent`,
+	link: `${tokens("link")} underline-offset-4 [:hover,[data-pressed]]:underline`,
+	muted: `${tokens("muted")} data-pressed:bg-accent data-pressed:text-foreground [:hover,[data-pressed]]:bg-accent [:hover,[data-pressed]]:text-foreground`,
+	outline: `${tokens("outline")} dark:bg-input/32 [:hover,[data-pressed]]:bg-accent/50 dark:[:hover,[data-pressed]]:bg-input/64 shadow-xs/5 not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none`,
+	secondary: `${tokens("secondary")} [:active,[data-pressed]]:bg-secondary/80 [:hover,[data-pressed]]:bg-secondary/90`
+};
 const buttonVariants = cva("focus-visible:ring-ring focus-visible:ring-offset-background relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg border text-base font-medium whitespace-nowrap outline-none select-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-64 sm:text-sm pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", {
 	defaultVariants: {
 		size: BUTTON_DEFAULT_SIZE,
 		variant: "default"
 	},
 	variants: {
-		size: {
-			chip: "h-7 gap-1.5 rounded-full px-2.5 text-xs before:rounded-full sm:text-xs",
-			default: "h-9 px-[calc(--spacing(3)-1px)] sm:h-8",
-			icon: "size-9 sm:size-8",
-			"icon-lg": "size-10 sm:size-9",
-			"icon-sm": "size-8 sm:size-7",
-			"icon-xl": "size-11 sm:size-10 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
-			"icon-xs": "size-7 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-6 not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-4 sm:not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5",
-			lg: "h-10 px-[calc(--spacing(3.5)-1px)] sm:h-9",
-			row: `${MENU_ROW_CLASS_NAME} [&_svg]:mx-0`,
-			sm: "h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] text-sm sm:h-7 sm:text-xs",
-			xl: "h-11 px-[calc(--spacing(4)-1px)] text-lg sm:h-10 sm:text-base [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
-			xs: "h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5"
-		},
-		variant: {
-			default: "border-primary bg-primary text-primary-foreground shadow-primary/24 [:hover,[data-pressed]]:bg-primary/90 shadow-xs not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none",
-			destructive: "border-destructive/32 bg-destructive/10 text-destructive-foreground shadow-destructive/8 [:hover,[data-pressed]]:border-destructive/40 [:hover,[data-pressed]]:bg-destructive/14 [:active,[data-pressed]]:bg-destructive/18 shadow-xs not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] [:disabled,:active,[data-pressed]]:shadow-none",
-			"destructive-outline": "border-input bg-popover text-destructive-foreground dark:bg-input/32 [:hover,[data-pressed]]:border-destructive/32 [:hover,[data-pressed]]:bg-destructive/4 shadow-xs/5 not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none",
-			"destructive-ghost": "text-destructive data-pressed:bg-destructive/10 [:hover,[data-pressed]]:bg-destructive/10 border-transparent",
-			ghost: "text-foreground data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent border-transparent",
-			link: "border-transparent underline-offset-4 [:hover,[data-pressed]]:underline",
-			muted: "text-muted-foreground data-pressed:bg-accent data-pressed:text-foreground [:hover,[data-pressed]]:bg-accent [:hover,[data-pressed]]:text-foreground border-transparent",
-			outline: "border-input bg-popover text-foreground dark:bg-input/32 [:hover,[data-pressed]]:bg-accent/50 dark:[:hover,[data-pressed]]:bg-input/64 shadow-xs/5 not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none",
-			secondary: "bg-secondary text-secondary-foreground [:active,[data-pressed]]:bg-secondary/80 [:hover,[data-pressed]]:bg-secondary/90 border-transparent"
-		}
+		size: BUTTON_SIZE_CLASS_NAMES,
+		variant: BUTTON_VARIANT_CLASS_NAMES
 	}
 });
 /** What a button's box holds: a glyph alone, or a visible label. */

package/dist/components/button.native.d.ts

@@ -0,0 +1,15 @@
+import { ButtonContract } from "./button.shared.js";
+import { PressableProps } from "react-native";
+//#region src/components/button.native.d.ts
+type ButtonProps = Omit<PressableProps, "children" | "disabled"> & ButtonContract & {
+  className?: string | undefined;
+};
+/**
+ * The web's `Button` (./button.tsx) on a phone: the same variants and sizes,
+ * read from ./button.shared.ts, on a Pressable. A string child is set as the
+ * button's label in its variant's colour; any other child is laid out as
+ * given, which is how a row holds a glyph beside two lines of text.
+ */
+export declare const Button: ({ accessibilityState, children, className, disabled, hitSlop, icon, loading, size, variant, ...props }: ButtonProps) => import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/button.native.js

@@ -0,0 +1,165 @@
+import { BUTTON_VARIANT_TOKENS } from "./button.shared.js";
+import { Loader } from "./loader.native.js";
+import { Text as Text$1 } from "./text.native.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Pressable } from "react-native";
+//#region src/components/button.native.tsx
+/** A control's box: centred content inside the variant's border. */
+const CONTROL = "items-center justify-center border";
+/**
+* Every shared size in a phone's metrics. A text size grows to the platform's
+* 44-point touch target where the web relies on a coarse-pointer hit area; a
+* smaller control keeps its look and reaches the target through `slop`.
+*/
+const SIZES = {
+	chip: {
+		box: `${CONTROL} min-h-7 gap-1.5 rounded-full px-2.5`,
+		label: "text-xs",
+		slop: 8
+	},
+	default: {
+		box: `${CONTROL} min-h-11 gap-2 rounded-lg px-4`,
+		label: "",
+		slop: 0
+	},
+	icon: {
+		box: `${CONTROL} size-11 rounded-lg`,
+		label: "",
+		slop: 0
+	},
+	"icon-lg": {
+		box: `${CONTROL} size-12 rounded-lg`,
+		label: "",
+		slop: 0
+	},
+	"icon-sm": {
+		box: `${CONTROL} size-8 rounded-lg`,
+		label: "",
+		slop: 6
+	},
+	"icon-xl": {
+		box: `${CONTROL} size-11 rounded-full`,
+		label: "",
+		slop: 0
+	},
+	"icon-xs": {
+		box: `${CONTROL} size-7 rounded-md`,
+		label: "",
+		slop: 8
+	},
+	lg: {
+		box: `${CONTROL} min-h-12 gap-2 rounded-lg px-5`,
+		label: "",
+		slop: 0
+	},
+	row: {
+		box: "min-h-11 w-full items-start gap-3 py-3",
+		label: "",
+		slop: 0
+	},
+	sm: {
+		box: `${CONTROL} min-h-9 gap-1.5 rounded-lg px-3`,
+		label: "text-sm",
+		slop: 0
+	},
+	xl: {
+		box: `${CONTROL} min-h-14 gap-2 rounded-lg px-6`,
+		label: "text-lg",
+		slop: 0
+	},
+	xs: {
+		box: `${CONTROL} min-h-7 gap-1 rounded-md px-2`,
+		label: "text-sm",
+		slop: 8
+	}
+};
+/**
+* A phone has no hover: a pressed button answers with the fill the web shows
+* on hover, or dims when it already has one. `selected` is the pressed state
+* held (a row open beside the list, a chosen option).
+*/
+const PRESS = {
+	default: {
+		pressed: "active:opacity-80",
+		selected: ""
+	},
+	destructive: {
+		pressed: "active:bg-destructive/18",
+		selected: ""
+	},
+	"destructive-outline": {
+		pressed: "active:bg-destructive/4",
+		selected: ""
+	},
+	"destructive-ghost": {
+		pressed: "active:bg-destructive/10",
+		selected: "bg-destructive/10"
+	},
+	ghost: {
+		pressed: "active:bg-accent",
+		selected: "bg-accent"
+	},
+	link: {
+		pressed: "active:opacity-60",
+		selected: ""
+	},
+	muted: {
+		pressed: "active:bg-accent",
+		selected: "bg-accent"
+	},
+	outline: {
+		pressed: "active:bg-accent",
+		selected: "bg-accent"
+	},
+	secondary: {
+		pressed: "active:bg-secondary/80",
+		selected: ""
+	}
+};
+/**
+* The web's `Button` (./button.tsx) on a phone: the same variants and sizes,
+* read from ./button.shared.ts, on a Pressable. A string child is set as the
+* button's label in its variant's colour; any other child is laid out as
+* given, which is how a row holds a glyph beside two lines of text.
+*/
+const Button = ({ accessibilityState, children, className, disabled = false, hitSlop, icon, loading = false, size, variant, ...props }) => {
+	const shape = SIZES[size ?? "default"];
+	const tokens = BUTTON_VARIANT_TOKENS[variant ?? "default"];
+	const press = PRESS[variant ?? "default"];
+	const inactive = disabled || loading;
+	const selected = accessibilityState?.selected === true;
+	const label = [
+		tokens.label,
+		variant === "link" ? "text-foreground underline" : "",
+		shape.label
+	].filter((name) => name !== "").join(" ");
+	return /* @__PURE__ */ jsxs(Pressable, {
+		accessibilityRole: "button",
+		accessibilityState: {
+			...accessibilityState,
+			busy: loading,
+			disabled: inactive
+		},
+		className: [
+			"flex-row",
+			tokens.surface,
+			shape.box,
+			inactive ? "opacity-64" : press.pressed,
+			selected ? press.selected : "",
+			className ?? ""
+		].filter((name) => name !== "").join(" "),
+		disabled: inactive,
+		hitSlop: hitSlop ?? (shape.slop === 0 ? void 0 : shape.slop),
+		...props,
+		children: [loading ? /* @__PURE__ */ jsx(Loader, {
+			size: "sm",
+			variant: "decorative"
+		}) : icon, typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Text$1, {
+			className: label,
+			variant: "button",
+			children
+		}) : children]
+	});
+};
+//#endregion
+export { Button };

package/dist/components/button.shared.d.ts

@@ -0,0 +1,65 @@
+import { ReactNode } from "react";
+//#region src/components/button.shared.d.ts
+/**
+ * Each variant's colours: the box (`surface`: border and fill) and the
+ * label. Neither carries state; each renderer adds its own hover, press and
+ * focus treatment on top.
+ */
+export declare const BUTTON_VARIANT_TOKENS: {
+  readonly default: {
+    readonly surface: "border-primary bg-primary";
+    readonly label: "text-primary-foreground";
+  };
+  readonly destructive: {
+    readonly surface: "border-destructive/32 bg-destructive/10";
+    readonly label: "text-destructive-foreground";
+  };
+  readonly "destructive-outline": {
+    readonly surface: "border-input bg-popover";
+    readonly label: "text-destructive-foreground";
+  };
+  readonly "destructive-ghost": {
+    readonly surface: "border-transparent";
+    readonly label: "text-destructive";
+  };
+  readonly ghost: {
+    readonly surface: "border-transparent";
+    readonly label: "text-foreground";
+  };
+  readonly link: {
+    readonly surface: "border-transparent";
+    readonly label: "";
+  };
+  readonly muted: {
+    readonly surface: "border-transparent";
+    readonly label: "text-muted-foreground";
+  };
+  readonly outline: {
+    readonly surface: "border-input bg-popover";
+    readonly label: "text-foreground";
+  };
+  readonly secondary: {
+    readonly surface: "border-transparent bg-secondary";
+    readonly label: "text-secondary-foreground";
+  };
+};
+export type ButtonVariant = keyof typeof BUTTON_VARIANT_TOKENS;
+/** Every size a button comes in, on every platform. */
+export declare const BUTTON_SIZES: readonly ["chip", "default", "icon", "icon-lg", "icon-sm", "icon-xl", "icon-xs", "lg", "row", "sm", "xl", "xs"];
+export type ButtonSize = (typeof BUTTON_SIZES)[number];
+/**
+ * The props every button renderer accepts, with one meaning. A renderer adds
+ * its platform's own props (a web button's `type` and `render`, a Pressable's
+ * `onPress` and `hitSlop`) on top.
+ */
+export type ButtonContract = {
+  variant?: ButtonVariant | null | undefined;
+  size?: ButtonSize | null | undefined;
+  /** Busy: a spinner takes the icon's place and the button cannot act. */
+  loading?: boolean;
+  disabled?: boolean;
+  /** A glyph before the label. */
+  icon?: ReactNode;
+  children?: ReactNode;
+};
+//#endregion

package/dist/components/button.shared.js

@@ -0,0 +1,61 @@
+//#region src/components/button.shared.ts
+/**
+* Each variant's colours: the box (`surface`: border and fill) and the
+* label. Neither carries state; each renderer adds its own hover, press and
+* focus treatment on top.
+*/
+const BUTTON_VARIANT_TOKENS = {
+	default: {
+		surface: "border-primary bg-primary",
+		label: "text-primary-foreground"
+	},
+	destructive: {
+		surface: "border-destructive/32 bg-destructive/10",
+		label: "text-destructive-foreground"
+	},
+	"destructive-outline": {
+		surface: "border-input bg-popover",
+		label: "text-destructive-foreground"
+	},
+	"destructive-ghost": {
+		surface: "border-transparent",
+		label: "text-destructive"
+	},
+	ghost: {
+		surface: "border-transparent",
+		label: "text-foreground"
+	},
+	link: {
+		surface: "border-transparent",
+		label: ""
+	},
+	muted: {
+		surface: "border-transparent",
+		label: "text-muted-foreground"
+	},
+	outline: {
+		surface: "border-input bg-popover",
+		label: "text-foreground"
+	},
+	secondary: {
+		surface: "border-transparent bg-secondary",
+		label: "text-secondary-foreground"
+	}
+};
+/** Every size a button comes in, on every platform. */
+const BUTTON_SIZES = [
+	"chip",
+	"default",
+	"icon",
+	"icon-lg",
+	"icon-sm",
+	"icon-xl",
+	"icon-xs",
+	"lg",
+	"row",
+	"sm",
+	"xl",
+	"xs"
+];
+//#endregion
+export { BUTTON_SIZES, BUTTON_VARIANT_TOKENS };

package/dist/components/dialog.d.ts

@@ -6,7 +6,10 @@ import { OverlayLayer } from "../lib/overlay-layer.js";
 declare const DialogCreateHandle: typeof Dialog$1.createHandle;
 type DialogLabels = {
   close: string;
+  /** The hint after Escape on unsaved changes: press it again to discard. */
   unsavedChanges: string;
+  /** The hint after a click outside or on a close button: close again. */
+  unsavedChangesClose: string;
 };
 declare const DialogProvider: ({ labels, children }: React$1.PropsWithChildren<{
   labels: DialogLabels;
@@ -38,7 +41,22 @@ declare const DIALOG_MOBILE_LAYOUT: {
   readonly fullscreen: "fullscreen";
 };
 type DialogMobileLayout = (typeof DIALOG_MOBILE_LAYOUT)[keyof typeof DIALOG_MOBILE_LAYOUT];
-declare const DialogPopup: ({ backdropClassName, className, children, showCloseButton, mobileLayout, layer, viewportClassName, ...props }: Dialog$1.Popup.Props & {
+/**
+ * How wide the popup may grow. `sm` is a confirmation or a single field,
+ * `default` a short form, `lg` a form with two columns or a table, `xl` a
+ * review or a document picker. Unprefixed like the width it replaces, so a
+ * caller's own `max-w-*` still wins; below `sm` the bottom-sheet and
+ * fullscreen layouts lift the cap and a centred popup keeps it.
+ */
+type DialogSize = "sm" | "default" | "lg" | "xl";
+declare const DIALOG_SIZE_CLASS_NAMES: {
+  readonly sm: "max-w-sm";
+  readonly default: "max-w-lg";
+  readonly lg: "max-w-2xl";
+  readonly xl: "max-w-4xl";
+};
+declare const DialogPopup: ({ backdropClassName, className, children, showCloseButton, mobileLayout, layer, size, viewportClassName, ...props }: Dialog$1.Popup.Props & {
+  size?: DialogSize | undefined;
   backdropClassName?: string;
   showCloseButton?: boolean;
   mobileLayout?: DialogMobileLayout;
@@ -55,4 +73,4 @@ declare const DialogPanel: ({ className, scrollFade, ...props }: React$1.Compone
   scrollFade?: boolean;
 }) => React$1.JSX.Element;
 //#endregion
-export { DIALOG_MOBILE_LAYOUT, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogFormState, DialogHeader, type DialogMobileLayout, DialogPanel, DialogPortal, DialogProvider, DialogTitle, DialogTrigger, DialogViewport };
+export { DIALOG_MOBILE_LAYOUT, DIALOG_SIZE_CLASS_NAMES, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogFormState, DialogHeader, type DialogLabels, type DialogMobileLayout, DialogPanel, DialogPortal, DialogProvider, type DialogSize, DialogTitle, DialogTrigger, DialogViewport };