@stll/ui 0.59.0 → 0.60.0

package/dist/components/button.js

@@ -3,7 +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 { BUTTON_PLAIN_VARIANT, 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";
@@ -44,7 +44,9 @@ const BUTTON_SIZE_CLASS_NAMES = {
 	"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-2xs": "size-5 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-4 [&_svg:not([class*='size-'])]:size-3.5 sm:[&_svg:not([class*='size-'])]:size-3",
 	"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",
+	inline: "inline h-auto rounded-sm border-0 p-0 text-start text-[length:inherit] leading-[inherit] font-normal whitespace-normal select-text before:rounded-[calc(var(--radius-sm)-1px)] sm:text-[length:inherit] [&_svg]:mx-0 [&_svg]:inline [&_svg]:align-[-0.125em] [&_svg:not(:last-child)]:me-1",
 	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",
@@ -52,26 +54,68 @@ const BUTTON_SIZE_CLASS_NAMES = {
 	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`
+	default: `${tokens("default")} shadow-primary/24 data-pressed:bg-primary/80 [:hover:not([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 data-pressed:border-destructive/56 data-pressed:bg-destructive/20 [:hover:not([data-pressed])]:border-destructive/40 [:hover:not([data-pressed])]:bg-destructive/14 active: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 data-pressed:border-destructive/56 data-pressed:bg-destructive/8 [:hover:not([data-pressed])]:border-destructive/32 [:hover:not([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/14 data-pressed:inset-ring-destructive/32 [:hover:not([data-pressed])]:bg-destructive/10 data-pressed:inset-ring`,
+	ghost: `${tokens("ghost")} data-pressed:bg-accent data-pressed:inset-ring-input [:hover:not([data-pressed])]:bg-accent data-pressed:shadow-xs/5 data-pressed:inset-ring`,
+	link: `${tokens("link")} underline-offset-4 data-pressed:underline data-pressed:decoration-2 [:hover:not([data-pressed])]:underline`,
+	"muted-destructive": `${tokens("muted-destructive")} data-pressed:bg-destructive/14 data-pressed:text-destructive data-pressed:inset-ring-destructive/32 [:hover:not([data-pressed])]:bg-destructive/10 [:hover:not([data-pressed])]:text-destructive data-pressed:inset-ring`,
+	muted: `${tokens("muted")} data-pressed:bg-accent data-pressed:text-foreground data-pressed:inset-ring-input [:hover:not([data-pressed])]:bg-accent [:hover:not([data-pressed])]:text-foreground data-pressed:shadow-xs/5 data-pressed:inset-ring`,
+	outline: `${tokens("outline")} dark:bg-input/32 data-pressed:border-primary/48 data-pressed:bg-accent dark:data-pressed:bg-input/64 [:hover:not([data-pressed])]:bg-accent/50 dark:[:hover:not([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")} data-pressed:bg-background data-pressed:inset-ring-input active:bg-secondary/80 [:hover:not([data-pressed])]:bg-secondary/90 data-pressed:shadow-xs/5 data-pressed:inset-ring`
 };
 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", {
+	compoundVariants: [{
+		className: "[:hover:not([data-pressed])]:bg-transparent",
+		size: "inline",
+		variant: [
+			"destructive-ghost",
+			"ghost",
+			"link",
+			"muted",
+			"muted-destructive"
+		]
+	}, {
+		className: "underline",
+		size: "inline",
+		variant: "link"
+	}],
 	defaultVariants: {
 		size: BUTTON_DEFAULT_SIZE,
 		variant: "default"
 	},
 	variants: {
 		size: BUTTON_SIZE_CLASS_NAMES,
+		layout: { wrap: "h-auto min-h-11 items-start justify-start py-2 text-start whitespace-normal sm:h-auto" },
 		variant: BUTTON_VARIANT_CLASS_NAMES
 	}
 });
+/**
+* `plain` (./button.shared.ts) on the web. It bypasses `buttonVariants` and
+* its box, border, type and press motion instead of undoing them class by
+* class, and keeps the disabled disposition, the tooltip and the focus ring.
+* It lays out like a native button (`inline-block`, content flowing from the
+* start), so a card's children stack as they would in a `div`; `className`
+* places it (`w-full`, `block`). `shape` gives it the outline its focus ring
+* follows. Like a native button it does not dim when disabled: the content
+* says it is unavailable.
+*
+* Selected, it draws the inset edge the other variants draw, as an outline
+* inside the box: an outline paints above the content, so a card's own
+* surface cannot cover it the way it would cover an inset shadow.
+*/
+const BUTTON_PLAIN_CLASS = "focus-visible:ring-ring focus-visible:ring-offset-background data-pressed:outline-primary/48 relative inline-block cursor-pointer text-start outline-none focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-default data-pressed:outline-2 data-pressed:-outline-offset-2 data-pressed:outline-solid";
+/**
+* The outline a plain button's focus ring follows, matching its content:
+* `box` for a card, row or block of text (the container radius), `round` for
+* an avatar, a dot or a pill.
+*/
+const BUTTON_PLAIN_SHAPE_CLASS = {
+	box: "rounded-lg",
+	round: "rounded-full"
+};
+const BUTTON_FOCUS_RING_INSIDE_CLASS = "focus-visible:ring-inset focus-visible:ring-offset-0";
 /** What a button's box holds: a glyph alone, or a visible label. */
 const BUTTON_CONTENT = {
 	icon: "icon",
@@ -95,7 +139,9 @@ const BUTTON_SIZE_CONTENT = {
 	"icon-lg": BUTTON_CONTENT.icon,
 	"icon-sm": BUTTON_CONTENT.icon,
 	"icon-xl": BUTTON_CONTENT.icon,
+	"icon-2xs": BUTTON_CONTENT.icon,
 	"icon-xs": BUTTON_CONTENT.icon,
+	inline: BUTTON_CONTENT.text,
 	lg: BUTTON_CONTENT.text,
 	row: BUTTON_CONTENT.text,
 	sm: BUTTON_CONTENT.text,
@@ -110,7 +156,8 @@ const implicitTooltip = (size, accessibleName) => {
 		default: return panic(`Unhandled button content: ${String(content)}`);
 	}
 };
-function Button({ className, variant, size, render, loading, icon, children, disabled, tooltip, "data-accessible-disabled": accessibleDisabled, ...props }) {
+function Button({ className, variant: variantProp, size, render, layout, loading, icon, children, disabled, tooltip, selected, focusRing = "outside", shape = "box", "data-accessible-disabled": accessibleDisabled, ...props }) {
+	const variant = variantProp ?? (size === "inline" ? "link" : void 0);
 	const typeValue = render ? void 0 : "button";
 	const tooltipContent = tooltip ?? implicitTooltip(size, props["aria-label"] ?? props.title);
 	const disposition = resolveButtonDisposition({
@@ -128,12 +175,14 @@ function Button({ className, variant, size, render, loading, icon, children, dis
 			size: "sm",
 			variant: "decorative"
 		}) : icon, children] }),
-		className: cn(disposition === BUTTON_DISPOSITION.enabled && !isActivationPreservingDisabled && size !== "row" && variant !== "link" && buttonPressClass, buttonVariants({
+		className: cn(variant === "plain" ? cn(BUTTON_PLAIN_CLASS, BUTTON_PLAIN_SHAPE_CLASS[shape], className) : cn(disposition === BUTTON_DISPOSITION.enabled && !isActivationPreservingDisabled && size !== "row" && size !== "inline" && variant !== "link" && buttonPressClass, buttonVariants({
 			className,
 			size,
-			variant
-		}), (isAccessibleDisabled || isActivationPreservingDisabled) && "cursor-not-allowed opacity-64"),
+			variant,
+			layout
+		})), focusRing === "inside" && BUTTON_FOCUS_RING_INSIDE_CLASS, (isAccessibleDisabled || isActivationPreservingDisabled) && "cursor-not-allowed opacity-64"),
 		"data-slot": "button",
+		"data-pressed": selected === true ? "" : void 0,
 		"aria-busy": loading || void 0,
 		...isAccessibleDisabled || isActivationPreservingDisabled ? {
 			"aria-disabled": true,
@@ -159,5 +208,38 @@ function Button({ className, variant, size, render, loading, icon, children, dis
 		trigger: button
 	});
 }
+/**
+* The run is the visible target: underlined like a link, ringed while its
+* button has keyboard focus (per line, so a wrapped run rings each line).
+*/
+const BUTTON_TEXT_RUN_CLASS = "has-focus-visible:ring-ring cursor-pointer rounded-xs underline underline-offset-2 box-decoration-clone select-text hover:decoration-2 has-focus-visible:ring-2 has-disabled:cursor-not-allowed has-disabled:opacity-64";
+const BUTTON_TEXT_RUN_TARGET_CLASS = "absolute size-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]";
+/**
+* A long run of prose that acts as one button: a citation or a
+* cross-reference in reader text. A <button> is an atomic box even at
+* `display: inline`, so its label cannot break across the paragraph's lines;
+* here the text sits in a native <label>, an inline box that wraps and copies
+* with the prose, and the label forwards a press anywhere on the run to the
+* <button> it holds, which takes its accessible name from the label. Use
+* `Button size="inline"` for a short action.
+*/
+const ButtonTextRun = ({ children, className, disabled, ...props }) => /* @__PURE__ */ jsxs("label", {
+	className: cn(BUTTON_TEXT_RUN_CLASS, className),
+	"data-slot": "button-text-run",
+	children: [/* @__PURE__ */ jsx(Button, {
+		...props,
+		className: BUTTON_TEXT_RUN_TARGET_CLASS,
+		disabled,
+		focusRing: "outside",
+		icon: void 0,
+		loading: false,
+		render: void 0,
+		selected: false,
+		shape: "box",
+		size: void 0,
+		tooltip: void 0,
+		variant: BUTTON_PLAIN_VARIANT
+	}), children]
+});
 //#endregion
-export { BUTTON_CONTENT, BUTTON_SIZE_CONTENT, Button, buttonAccessibleDisabledClass, buttonVariants };
+export { BUTTON_CONTENT, BUTTON_SIZE_CONTENT, Button, ButtonTextRun, buttonAccessibleDisabledClass, buttonVariants };

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

@@ -0,0 +1,17 @@
+import { ButtonSize, ButtonVariant } from "./button.shared.js";
+//#region src/components/button.native-classes.d.ts
+type NativeButtonClassNamesOptions = {
+  className?: string | undefined;
+  inactive: boolean;
+  selected: boolean;
+  size?: ButtonSize | null | undefined;
+  variant?: ButtonVariant | null | undefined;
+};
+/** The Pressable's and the label's classes, and the touch slop, for a button. */
+export declare const nativeButtonClassNames: ({ className, inactive, selected, size, variant }: NativeButtonClassNamesOptions) => {
+  label: string;
+  pressable: string;
+  slop: 0 | 6 | 8 | 12;
+};
+//#endregion
+export {};

package/dist/components/button.native-classes.js

@@ -0,0 +1,176 @@
+import { BUTTON_PLAIN_VARIANT, BUTTON_VARIANT_TOKENS } from "./button.shared.js";
+//#region src/components/button.native-classes.ts
+/** 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-2xs": {
+		box: `${CONTROL} size-5 rounded-md`,
+		label: "",
+		slop: 12
+	},
+	"icon-xs": {
+		box: `${CONTROL} size-7 rounded-md`,
+		label: "",
+		slop: 8
+	},
+	inline: {
+		box: "items-center gap-1",
+		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"
+	},
+	"muted-destructive": {
+		pressed: "active:bg-destructive/10",
+		selected: "bg-destructive/10"
+	},
+	outline: {
+		pressed: "active:bg-accent",
+		selected: "bg-accent"
+	},
+	secondary: {
+		pressed: "active:bg-secondary/80",
+		selected: ""
+	},
+	plain: {
+		pressed: "active:opacity-80",
+		selected: "border-primary"
+	}
+};
+/**
+* `plain` has no fill, no label colour and no size; like the web's, it does
+* not dim when disabled, because its content says it is unavailable. It keeps
+* a transparent border that only `selected` colours, the phone's stand-in for
+* the web's inset ring.
+*/
+const PLAIN = {
+	shape: {
+		box: "rounded-lg border-2 border-transparent",
+		label: "",
+		slop: 0
+	},
+	tokens: {
+		surface: "",
+		label: ""
+	}
+};
+/** The Pressable's and the label's classes, and the touch slop, for a button. */
+const nativeButtonClassNames = ({ className, inactive, selected, size, variant }) => {
+	const plain = variant === BUTTON_PLAIN_VARIANT;
+	const shape = plain ? PLAIN.shape : SIZES[size ?? "default"];
+	const tokens = plain ? PLAIN.tokens : BUTTON_VARIANT_TOKENS[variant ?? "default"];
+	const press = PRESS[variant ?? "default"];
+	const dimmed = plain ? "" : "opacity-64";
+	const join = (names) => names.filter((name) => name !== "").join(" ");
+	return {
+		label: join([
+			tokens.label,
+			variant === "link" ? "text-foreground underline" : "",
+			shape.label
+		]),
+		pressable: join([
+			plain ? "" : "flex-row",
+			tokens.surface,
+			shape.box,
+			inactive ? dimmed : press.pressed,
+			selected ? press.selected : "",
+			className ?? ""
+		]),
+		slop: shape.slop
+	};
+};
+//#endregion
+export { nativeButtonClassNames };

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

@@ -8,8 +8,11 @@ type ButtonProps = Omit<PressableProps, "children" | "disabled"> & ButtonContrac
  * 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.
+ * given, which is how a row holds a glyph beside two lines of text. A
+ * `plain` button paints no fill or label colour and ignores `size`: its
+ * children are its look, stacked as in a View, inside a border that shows
+ * only when it is selected. Its classes come from ./button.native-classes.ts.
  */
-export declare const Button: ({ accessibilityState, children, className, disabled, hitSlop, icon, loading, size, variant, ...props }: ButtonProps) => import("react").JSX.Element;
+export declare const Button: ({ accessibilityState, children, className, disabled, hitSlop, icon, loading, selected: selectedProp, size, variant: variantProp, ...props }: ButtonProps) => import("react").JSX.Element;
 //#endregion
 export {};

package/dist/components/button.native.js

@@ -1,138 +1,28 @@
-import { BUTTON_VARIANT_TOKENS } from "./button.shared.js";
+import { nativeButtonClassNames } from "./button.native-classes.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.
+* given, which is how a row holds a glyph beside two lines of text. A
+* `plain` button paints no fill or label colour and ignores `size`: its
+* children are its look, stacked as in a View, inside a border that shows
+* only when it is selected. Its classes come from ./button.native-classes.ts.
 */
-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 Button = ({ accessibilityState, children, className, disabled = false, hitSlop, icon, loading = false, selected: selectedProp, size, variant: variantProp, ...props }) => {
+	const variant = variantProp ?? (size === "inline" ? "link" : void 0);
 	const inactive = disabled || loading;
-	const selected = accessibilityState?.selected === true;
-	const label = [
-		tokens.label,
-		variant === "link" ? "text-foreground underline" : "",
-		shape.label
-	].filter((name) => name !== "").join(" ");
+	const look = nativeButtonClassNames({
+		className,
+		inactive,
+		selected: selectedProp === true || accessibilityState?.selected === true,
+		size,
+		variant
+	});
 	return /* @__PURE__ */ jsxs(Pressable, {
 		accessibilityRole: "button",
 		accessibilityState: {
@@ -140,22 +30,15 @@ const Button = ({ accessibilityState, children, className, disabled = false, hit
 			busy: loading,
 			disabled: inactive
 		},
-		className: [
-			"flex-row",
-			tokens.surface,
-			shape.box,
-			inactive ? "opacity-64" : press.pressed,
-			selected ? press.selected : "",
-			className ?? ""
-		].filter((name) => name !== "").join(" "),
+		className: look.pressable,
 		disabled: inactive,
-		hitSlop: hitSlop ?? (shape.slop === 0 ? void 0 : shape.slop),
+		hitSlop: hitSlop ?? (look.slop === 0 ? void 0 : look.slop),
 		...props,
 		children: [loading ? /* @__PURE__ */ jsx(Loader, {
 			size: "sm",
 			variant: "decorative"
 		}) : icon, typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Text$1, {
-			className: label,
+			className: look.label,
 			variant: "button",
 			children
 		}) : children]

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

@@ -34,6 +34,10 @@ export declare const BUTTON_VARIANT_TOKENS: {
     readonly surface: "border-transparent";
     readonly label: "text-muted-foreground";
   };
+  readonly "muted-destructive": {
+    readonly surface: "border-transparent";
+    readonly label: "text-muted-foreground";
+  };
   readonly outline: {
     readonly surface: "border-input bg-popover";
     readonly label: "text-foreground";
@@ -43,9 +47,19 @@ export declare const BUTTON_VARIANT_TOKENS: {
     readonly label: "text-secondary-foreground";
   };
 };
-export type ButtonVariant = keyof typeof BUTTON_VARIANT_TOKENS;
+/** A variant painted from its shared tokens above. */
+export type ButtonTokenVariant = keyof typeof BUTTON_VARIANT_TOKENS;
+/**
+ * `plain`: a click target whose look is its content (a card, a thumbnail, a
+ * cell, a passage). It has no tokens: neither renderer paints a box, border,
+ * type or press motion for it, and each keeps everything else its button
+ * owns (the disabled disposition, and on the web the tooltip and the focus
+ * ring). A `size` does not apply to it.
+ */
+export declare const BUTTON_PLAIN_VARIANT = "plain";
+export type ButtonVariant = ButtonTokenVariant | typeof BUTTON_PLAIN_VARIANT;
 /** 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 declare const BUTTON_SIZES: readonly ["chip", "default", "icon", "icon-lg", "icon-sm", "icon-xl", "icon-2xs", "icon-xs", "inline", "lg", "row", "sm", "xl", "xs"];
 export type ButtonSize = (typeof BUTTON_SIZES)[number];
 /**
  * The props every button renderer accepts, with one meaning. A renderer adds
@@ -60,6 +74,14 @@ export type ButtonContract = {
   disabled?: boolean;
   /** A glyph before the label. */
   icon?: ReactNode;
+  /**
+   * The current choice in a set (a picked option, the active filter tab, the
+   * open item of a list): shows the variant's selected treatment, which is
+   * distinct from its hover or press. The accessibility state stays the
+   * caller's, because which one is right depends on the widget the button is
+   * part of.
+   */
+  selected?: boolean | undefined;
   children?: ReactNode;
 };
 //#endregion

package/dist/components/button.shared.js

@@ -33,6 +33,10 @@ const BUTTON_VARIANT_TOKENS = {
 		surface: "border-transparent",
 		label: "text-muted-foreground"
 	},
+	"muted-destructive": {
+		surface: "border-transparent",
+		label: "text-muted-foreground"
+	},
 	outline: {
 		surface: "border-input bg-popover",
 		label: "text-foreground"
@@ -42,6 +46,14 @@ const BUTTON_VARIANT_TOKENS = {
 		label: "text-secondary-foreground"
 	}
 };
+/**
+* `plain`: a click target whose look is its content (a card, a thumbnail, a
+* cell, a passage). It has no tokens: neither renderer paints a box, border,
+* type or press motion for it, and each keeps everything else its button
+* owns (the disabled disposition, and on the web the tooltip and the focus
+* ring). A `size` does not apply to it.
+*/
+const BUTTON_PLAIN_VARIANT = "plain";
 /** Every size a button comes in, on every platform. */
 const BUTTON_SIZES = [
 	"chip",
@@ -50,7 +62,9 @@ const BUTTON_SIZES = [
 	"icon-lg",
 	"icon-sm",
 	"icon-xl",
+	"icon-2xs",
 	"icon-xs",
+	"inline",
 	"lg",
 	"row",
 	"sm",
@@ -58,4 +72,4 @@ const BUTTON_SIZES = [
 	"xs"
 ];
 //#endregion
-export { BUTTON_SIZES, BUTTON_VARIANT_TOKENS };
+export { BUTTON_PLAIN_VARIANT, BUTTON_SIZES, BUTTON_VARIANT_TOKENS };

package/dist/components/combobox.d.ts

@@ -14,7 +14,9 @@ declare const ComboboxInput: ({ className, showTrigger, showClear, startAddon, s
   size?: ControlSize | number;
   ref?: React$1.Ref<HTMLInputElement>;
 }) => React$1.JSX.Element;
-declare const ComboboxTrigger: ({ className, ...props }: Combobox$1.Trigger.Props) => React$1.JSX.Element;
+declare const ComboboxTrigger: ({ className, variant, ...props }: Combobox$1.Trigger.Props & {
+  variant?: "plain" | "field";
+}) => React$1.JSX.Element;
 declare const ComboboxPopup: ({ className, children, side, sideOffset, alignOffset, align, ...props }: Combobox$1.Popup.Props & {
   align?: Combobox$1.Positioner.Props["align"];
   sideOffset?: Combobox$1.Positioner.Props["sideOffset"];