@stll/ui 0.55.1 → 0.57.0

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

@@ -0,0 +1,6 @@
+//#region src/components/separator.shared.d.ts
+/** The props every separator renderer accepts, with one meaning. */
+export type SeparatorContract = {
+  orientation?: "horizontal" | "vertical";
+};
+//#endregion

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

@@ -0,0 +1,27 @@
+import { Button } from "./button.native.js";
+import { ComponentProps } from "react";
+import { ScrollView, ViewProps } from "react-native";
+import { SheetContract } from "./sheet.shared.js";
+import { Text as Text$1 } from "./text.native.js";
+//#region src/components/sheet.native.d.ts
+/**
+ * The web's `Sheet` (./sheet.tsx) on a phone: the platform's page sheet,
+ * sliding up over the screen. A swipe down or the system back gesture asks
+ * to close it through `onOpenChange(false)`, as Escape does on the web.
+ */
+export declare const Sheet: ({ children, onOpenChange, open }: SheetContract) => import("react").JSX.Element;
+/** The sheet's surface: the background, inset, and room for the keyboard. */
+export declare const SheetPopup: ({ className, ...props }: ViewProps & {
+  className?: string | undefined;
+}) => import("react").JSX.Element;
+/** The title row: the title leading, a close or done action trailing. */
+export declare const SheetHeader: ({ className, ...props }: ViewProps & {
+  className?: string | undefined;
+}) => import("react").JSX.Element;
+export declare const SheetTitle: (props: ComponentProps<typeof Text$1>) => import("react").JSX.Element;
+export declare const SheetDescription: (props: ComponentProps<typeof Text$1>) => import("react").JSX.Element;
+/** The sheet's body, scrolling when it outgrows the sheet. */
+export declare const SheetPanel: ({ contentContainerClassName, ...props }: ComponentProps<typeof ScrollView>) => import("react").JSX.Element;
+/** A button that closes the sheet, after its own `onPress`. */
+export declare const SheetClose: ({ onPress, size, variant, ...props }: ComponentProps<typeof Button>) => import("react").JSX.Element;
+//#endregion

package/dist/components/sheet.native.js

@@ -0,0 +1,69 @@
+import { Text as Text$1 } from "./text.native.js";
+import { Button } from "./button.native.js";
+import { jsx } from "react/jsx-runtime";
+import { createContext, use } from "react";
+import { KeyboardAvoidingView, Modal, Platform, ScrollView, View } from "react-native";
+//#region src/components/sheet.native.tsx
+/** Closes the sheet that holds it; nothing outside a sheet. */
+const SheetCloseContext = createContext(() => void 0);
+/**
+* The web's `Sheet` (./sheet.tsx) on a phone: the platform's page sheet,
+* sliding up over the screen. A swipe down or the system back gesture asks
+* to close it through `onOpenChange(false)`, as Escape does on the web.
+*/
+const Sheet = ({ children, onOpenChange, open = false }) => {
+	const close = () => {
+		onOpenChange?.(false);
+	};
+	return /* @__PURE__ */ jsx(Modal, {
+		animationType: "slide",
+		onRequestClose: close,
+		presentationStyle: "pageSheet",
+		visible: open,
+		children: /* @__PURE__ */ jsx(SheetCloseContext, {
+			value: close,
+			children
+		})
+	});
+};
+/** The sheet's surface: the background, inset, and room for the keyboard. */
+const SheetPopup = ({ className, ...props }) => /* @__PURE__ */ jsx(KeyboardAvoidingView, {
+	behavior: Platform.OS === "ios" ? "padding" : void 0,
+	className: `bg-background flex-1 gap-4 px-5 pt-5 ${className ?? ""}`,
+	...props
+});
+/** The title row: the title leading, a close or done action trailing. */
+const SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx(View, {
+	className: `flex-row items-center justify-between gap-4 ${className ?? ""}`,
+	...props
+});
+const SheetTitle = (props) => /* @__PURE__ */ jsx(Text$1, {
+	accessibilityRole: "header",
+	variant: "headline",
+	...props
+});
+const SheetDescription = (props) => /* @__PURE__ */ jsx(Text$1, {
+	variant: "caption",
+	...props
+});
+/** The sheet's body, scrolling when it outgrows the sheet. */
+const SheetPanel = ({ contentContainerClassName, ...props }) => /* @__PURE__ */ jsx(ScrollView, {
+	contentContainerClassName: `gap-4 ${contentContainerClassName ?? ""}`,
+	keyboardShouldPersistTaps: "handled",
+	...props
+});
+/** A button that closes the sheet, after its own `onPress`. */
+const SheetClose = ({ onPress, size = "sm", variant = "ghost", ...props }) => {
+	const close = use(SheetCloseContext);
+	return /* @__PURE__ */ jsx(Button, {
+		onPress: (event) => {
+			onPress?.(event);
+			close();
+		},
+		size,
+		variant,
+		...props
+	});
+};
+//#endregion
+export { Sheet, SheetClose, SheetDescription, SheetHeader, SheetPanel, SheetPopup, SheetTitle };

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

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+//#region src/components/sheet.shared.d.ts
+/** The props every sheet root accepts, with one meaning. */
+export type SheetContract = {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+};
+//#endregion

package/dist/components/sidebar.js

@@ -346,7 +346,7 @@ const SidebarMenuButton = ({ asChild = false, isActive = false, variant = "defau
 };
 const SidebarMenuAction = ({ className, asChild = false, showOnHover = false, ...props }) => {
 	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
-		className: cn("text-sidebar-foreground ring-sidebar-ring peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute end-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "after:absolute after:-inset-2 md:after:hidden", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", showOnHover && "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0", className),
+		className: cn("text-sidebar-foreground ring-sidebar-ring peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute end-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "after:absolute after:-inset-2 md:after:hidden", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", showOnHover && "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0 pointer-coarse:opacity-100", className),
 		"data-sidebar": "menu-action",
 		"data-slot": "sidebar-menu-action",
 		...props

package/dist/components/stella-wordmark.js

@@ -1,21 +1,13 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { STELLA_WORDMARK } from "./stella-wordmark.shared.js";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/stella-wordmark.tsx
-const StellaWordmarkLatin = (props) => /* @__PURE__ */ jsxs("svg", {
+const StellaWordmarkLatin = (props) => /* @__PURE__ */ jsx("svg", {
 	"aria-hidden": "true",
 	fill: "currentColor",
-	viewBox: "0 0 573 151",
+	viewBox: STELLA_WORDMARK.viewBox,
 	xmlns: "http://www.w3.org/2000/svg",
 	...props,
-	children: [
-		/* @__PURE__ */ jsx("path", { d: "M23.54 44.93L59.65 22.32C63.19 20.1 67.28 18.94 71.49 18.94C75.7 18.94 79.79 20.1 83.32 22.32L135.77 55.14V37.56L91.2 9.63C85.32 5.96 78.5 3.99 71.49 3.99C64.48 3.99 57.63 5.93 51.74 9.63L15.63 32.24C5.85 38.39 0 48.96 0 60.52C0 72.08 5.85 82.65 15.63 88.77L27.27 96.05L67.11 121.04C67.63 121.36 68.08 121.59 68.5 121.75C70.94 122.68 73.58 122.42 75.77 121.07L110.05 99.62C110.05 99.62 110.3 99.46 110.4 99.36L117.8 94.72L107.73 88.48L103.78 86L71.55 106.13L70.07 105.26L23.57 76.11C18.11 72.66 14.95 66.99 14.95 60.52C14.95 54.05 18.11 48.38 23.57 44.93H23.54Z" }),
-		/* @__PURE__ */ jsx("path", { d: "M119.18 109.86L83.07 132.47C79.53 134.7 75.44 135.85 71.23 135.85C67.02 135.85 62.93 134.7 59.4 132.47L6.91 99.65V117.24L51.49 145.13C57.37 148.8 64.19 150.77 71.2 150.77C78.21 150.77 85.06 148.84 90.94 145.13L127.06 122.52C136.83 116.4 142.69 105.84 142.69 94.27C142.69 82.71 136.83 72.15 127.06 66.03L115.42 58.75L75.57 33.75C75.06 33.43 74.61 33.21 74.19 33.05C71.75 32.11 69.11 32.37 66.92 33.72L32.64 55.17C32.64 55.17 32.38 55.33 32.29 55.43L24.89 60.07L34.96 66.32L38.91 68.8L71.13 48.67L72.61 49.54L119.12 78.69C124.58 82.13 127.73 87.8 127.73 94.27C127.73 100.75 124.58 106.42 119.12 109.86H119.18Z" }),
-		/* @__PURE__ */ jsx("path", { d: "M230.38 123.02C212.11 123.02 195.46 115.06 189.49 98.78L200.89 89.91C203.96 99.87 213.55 109.82 230.92 109.82C241.23 109.82 248.11 105.84 248.11 98.06C248.11 90.1 240.15 87.56 229.83 85.21L218.26 82.5C205.77 79.6 192.2 73.63 192.2 57.53C192.2 41.61 204.51 31.84 223.5 31.84C241.96 31.84 254.8 41.61 259.69 53.19L247.75 62.05C243.4 51.74 235.08 45.23 222.6 45.23C213.55 45.23 207.04 49.21 207.04 56.63C207.04 64.41 212.83 67.12 224.77 70.01L235.99 72.91C255.71 77.61 262.22 85.75 262.22 97.88C262.22 115.24 247.38 123.02 230.38 123.02Z" }),
-		/* @__PURE__ */ jsx("path", { d: "M304.21 123.2C289.92 123.2 279.79 113.8 279.79 98.78V45.95H265.67V33.65H279.79V22.43L295.52 10.85V33.65H324.29V45.95H295.52V94.08C295.52 105.29 300.77 108.01 307.65 108.01C315.43 108.01 320.85 101.49 323.21 96.07L328.45 111.63C324.65 117.6 316.33 123.2 304.21 123.2Z" }),
-		/* @__PURE__ */ jsx("path", { d: "M371.45 123.02C346.66 123.02 329.48 105.29 329.48 77.43C329.48 49.75 346.48 31.84 370.54 31.84C395.33 31.84 410.34 48.3 410.34 73.99C410.34 76.71 409.98 79.42 409.62 81.05H344.67C345.58 99.5 355.89 110 371.45 110C389 110 396.05 100.41 399.49 92.81L409.08 103.66C402.57 114.16 390.44 123.02 371.45 123.02ZM370.54 45.05C356.43 45.05 347.02 53.37 345.03 69.65H396.23C394.6 53.55 385.2 45.05 370.54 45.05Z" }),
-		/* @__PURE__ */ jsx("path", { d: "M442.77 121.21H427.03V0H442.77V121.21Z" }),
-		/* @__PURE__ */ jsx("path", { d: "M478.55 121.21H462.81V0H478.55V121.21Z" }),
-		/* @__PURE__ */ jsx("path", { d: "M516.68 123.02C501.84 123.02 493.52 114.52 493.52 102.94C493.52 91.18 502.39 83.76 514.87 78.16L546.53 64.04C545.99 53.73 541.1 46.13 527.35 46.13C514.87 46.13 506.55 53.37 502.02 62.96L491.35 51.92C496.6 42.88 509.62 31.84 529.16 31.84C550.69 31.84 562.27 44.69 562.27 65.49V101.49C562.27 105.66 563.9 106.92 567.15 106.92H572.76V121.21H562.63C553.58 121.21 547.07 116.87 547.07 104.57V98.42C544.18 110 534.77 123.02 516.68 123.02ZM509.44 100.41C509.44 106.38 513.6 110 521.74 110C536.58 110 547.07 100.23 547.07 87.56V75.44L521.56 87.38C513.24 91.36 509.44 94.98 509.44 100.41Z" })
-	]
+	children: STELLA_WORDMARK.paths.map((d) => /* @__PURE__ */ jsx("path", { d }, d))
 });
 //#endregion
 export { StellaWordmarkLatin };

package/dist/components/stella-wordmark.native.d.ts

@@ -0,0 +1,9 @@
+//#region src/components/stella-wordmark.native.d.ts
+/**
+ * The web's `StellaWordmarkLatin` (./stella-wordmark.tsx) on a phone: the
+ * same paths, in the foreground colour, `height` points tall.
+ */
+export declare const StellaWordmarkLatin: ({ height }: {
+  height?: number | undefined;
+}) => import("react").JSX.Element;
+//#endregion

package/dist/components/stella-wordmark.native.js

@@ -0,0 +1,27 @@
+import { STELLA_WORDMARK } from "./stella-wordmark.shared.js";
+import { jsx } from "react/jsx-runtime";
+import Svg, { Path } from "react-native-svg";
+import { useCSSVariable } from "uniwind";
+//#region src/components/stella-wordmark.native.tsx
+const BOX = STELLA_WORDMARK.viewBox.split(" ").map(Number);
+const WIDTH = BOX[2] ?? 1;
+const HEIGHT = BOX[3] ?? 1;
+/**
+* The web's `StellaWordmarkLatin` (./stella-wordmark.tsx) on a phone: the
+* same paths, in the foreground colour, `height` points tall.
+*/
+const StellaWordmarkLatin = ({ height = 20 }) => {
+	const foreground = useCSSVariable("--color-foreground");
+	return /* @__PURE__ */ jsx(Svg, {
+		accessibilityLabel: "stella",
+		height,
+		viewBox: STELLA_WORDMARK.viewBox,
+		width: height * WIDTH / HEIGHT,
+		children: STELLA_WORDMARK.paths.map((d) => /* @__PURE__ */ jsx(Path, {
+			d,
+			fill: typeof foreground === "string" ? foreground : "currentColor"
+		}, d))
+	});
+};
+//#endregion
+export { StellaWordmarkLatin };

package/dist/components/stella-wordmark.shared.d.ts

@@ -0,0 +1,6 @@
+//#region src/components/stella-wordmark.shared.d.ts
+export declare const STELLA_WORDMARK: {
+  readonly viewBox: "0 0 573 151";
+  readonly paths: readonly ["M23.54 44.93L59.65 22.32C63.19 20.1 67.28 18.94 71.49 18.94C75.7 18.94 79.79 20.1 83.32 22.32L135.77 55.14V37.56L91.2 9.63C85.32 5.96 78.5 3.99 71.49 3.99C64.48 3.99 57.63 5.93 51.74 9.63L15.63 32.24C5.85 38.39 0 48.96 0 60.52C0 72.08 5.85 82.65 15.63 88.77L27.27 96.05L67.11 121.04C67.63 121.36 68.08 121.59 68.5 121.75C70.94 122.68 73.58 122.42 75.77 121.07L110.05 99.62C110.05 99.62 110.3 99.46 110.4 99.36L117.8 94.72L107.73 88.48L103.78 86L71.55 106.13L70.07 105.26L23.57 76.11C18.11 72.66 14.95 66.99 14.95 60.52C14.95 54.05 18.11 48.38 23.57 44.93H23.54Z", "M119.18 109.86L83.07 132.47C79.53 134.7 75.44 135.85 71.23 135.85C67.02 135.85 62.93 134.7 59.4 132.47L6.91 99.65V117.24L51.49 145.13C57.37 148.8 64.19 150.77 71.2 150.77C78.21 150.77 85.06 148.84 90.94 145.13L127.06 122.52C136.83 116.4 142.69 105.84 142.69 94.27C142.69 82.71 136.83 72.15 127.06 66.03L115.42 58.75L75.57 33.75C75.06 33.43 74.61 33.21 74.19 33.05C71.75 32.11 69.11 32.37 66.92 33.72L32.64 55.17C32.64 55.17 32.38 55.33 32.29 55.43L24.89 60.07L34.96 66.32L38.91 68.8L71.13 48.67L72.61 49.54L119.12 78.69C124.58 82.13 127.73 87.8 127.73 94.27C127.73 100.75 124.58 106.42 119.12 109.86H119.18Z", "M230.38 123.02C212.11 123.02 195.46 115.06 189.49 98.78L200.89 89.91C203.96 99.87 213.55 109.82 230.92 109.82C241.23 109.82 248.11 105.84 248.11 98.06C248.11 90.1 240.15 87.56 229.83 85.21L218.26 82.5C205.77 79.6 192.2 73.63 192.2 57.53C192.2 41.61 204.51 31.84 223.5 31.84C241.96 31.84 254.8 41.61 259.69 53.19L247.75 62.05C243.4 51.74 235.08 45.23 222.6 45.23C213.55 45.23 207.04 49.21 207.04 56.63C207.04 64.41 212.83 67.12 224.77 70.01L235.99 72.91C255.71 77.61 262.22 85.75 262.22 97.88C262.22 115.24 247.38 123.02 230.38 123.02Z", "M304.21 123.2C289.92 123.2 279.79 113.8 279.79 98.78V45.95H265.67V33.65H279.79V22.43L295.52 10.85V33.65H324.29V45.95H295.52V94.08C295.52 105.29 300.77 108.01 307.65 108.01C315.43 108.01 320.85 101.49 323.21 96.07L328.45 111.63C324.65 117.6 316.33 123.2 304.21 123.2Z", "M371.45 123.02C346.66 123.02 329.48 105.29 329.48 77.43C329.48 49.75 346.48 31.84 370.54 31.84C395.33 31.84 410.34 48.3 410.34 73.99C410.34 76.71 409.98 79.42 409.62 81.05H344.67C345.58 99.5 355.89 110 371.45 110C389 110 396.05 100.41 399.49 92.81L409.08 103.66C402.57 114.16 390.44 123.02 371.45 123.02ZM370.54 45.05C356.43 45.05 347.02 53.37 345.03 69.65H396.23C394.6 53.55 385.2 45.05 370.54 45.05Z", "M442.77 121.21H427.03V0H442.77V121.21Z", "M478.55 121.21H462.81V0H478.55V121.21Z", "M516.68 123.02C501.84 123.02 493.52 114.52 493.52 102.94C493.52 91.18 502.39 83.76 514.87 78.16L546.53 64.04C545.99 53.73 541.1 46.13 527.35 46.13C514.87 46.13 506.55 53.37 502.02 62.96L491.35 51.92C496.6 42.88 509.62 31.84 529.16 31.84C550.69 31.84 562.27 44.69 562.27 65.49V101.49C562.27 105.66 563.9 106.92 567.15 106.92H572.76V121.21H562.63C553.58 121.21 547.07 116.87 547.07 104.57V98.42C544.18 110 534.77 123.02 516.68 123.02ZM509.44 100.41C509.44 106.38 513.6 110 521.74 110C536.58 110 547.07 100.23 547.07 87.56V75.44L521.56 87.38C513.24 91.36 509.44 94.98 509.44 100.41Z"];
+};
+//#endregion

package/dist/components/stella-wordmark.shared.js

@@ -0,0 +1,16 @@
+//#region src/components/stella-wordmark.shared.ts
+const STELLA_WORDMARK = {
+	viewBox: "0 0 573 151",
+	paths: [
+		"M23.54 44.93L59.65 22.32C63.19 20.1 67.28 18.94 71.49 18.94C75.7 18.94 79.79 20.1 83.32 22.32L135.77 55.14V37.56L91.2 9.63C85.32 5.96 78.5 3.99 71.49 3.99C64.48 3.99 57.63 5.93 51.74 9.63L15.63 32.24C5.85 38.39 0 48.96 0 60.52C0 72.08 5.85 82.65 15.63 88.77L27.27 96.05L67.11 121.04C67.63 121.36 68.08 121.59 68.5 121.75C70.94 122.68 73.58 122.42 75.77 121.07L110.05 99.62C110.05 99.62 110.3 99.46 110.4 99.36L117.8 94.72L107.73 88.48L103.78 86L71.55 106.13L70.07 105.26L23.57 76.11C18.11 72.66 14.95 66.99 14.95 60.52C14.95 54.05 18.11 48.38 23.57 44.93H23.54Z",
+		"M119.18 109.86L83.07 132.47C79.53 134.7 75.44 135.85 71.23 135.85C67.02 135.85 62.93 134.7 59.4 132.47L6.91 99.65V117.24L51.49 145.13C57.37 148.8 64.19 150.77 71.2 150.77C78.21 150.77 85.06 148.84 90.94 145.13L127.06 122.52C136.83 116.4 142.69 105.84 142.69 94.27C142.69 82.71 136.83 72.15 127.06 66.03L115.42 58.75L75.57 33.75C75.06 33.43 74.61 33.21 74.19 33.05C71.75 32.11 69.11 32.37 66.92 33.72L32.64 55.17C32.64 55.17 32.38 55.33 32.29 55.43L24.89 60.07L34.96 66.32L38.91 68.8L71.13 48.67L72.61 49.54L119.12 78.69C124.58 82.13 127.73 87.8 127.73 94.27C127.73 100.75 124.58 106.42 119.12 109.86H119.18Z",
+		"M230.38 123.02C212.11 123.02 195.46 115.06 189.49 98.78L200.89 89.91C203.96 99.87 213.55 109.82 230.92 109.82C241.23 109.82 248.11 105.84 248.11 98.06C248.11 90.1 240.15 87.56 229.83 85.21L218.26 82.5C205.77 79.6 192.2 73.63 192.2 57.53C192.2 41.61 204.51 31.84 223.5 31.84C241.96 31.84 254.8 41.61 259.69 53.19L247.75 62.05C243.4 51.74 235.08 45.23 222.6 45.23C213.55 45.23 207.04 49.21 207.04 56.63C207.04 64.41 212.83 67.12 224.77 70.01L235.99 72.91C255.71 77.61 262.22 85.75 262.22 97.88C262.22 115.24 247.38 123.02 230.38 123.02Z",
+		"M304.21 123.2C289.92 123.2 279.79 113.8 279.79 98.78V45.95H265.67V33.65H279.79V22.43L295.52 10.85V33.65H324.29V45.95H295.52V94.08C295.52 105.29 300.77 108.01 307.65 108.01C315.43 108.01 320.85 101.49 323.21 96.07L328.45 111.63C324.65 117.6 316.33 123.2 304.21 123.2Z",
+		"M371.45 123.02C346.66 123.02 329.48 105.29 329.48 77.43C329.48 49.75 346.48 31.84 370.54 31.84C395.33 31.84 410.34 48.3 410.34 73.99C410.34 76.71 409.98 79.42 409.62 81.05H344.67C345.58 99.5 355.89 110 371.45 110C389 110 396.05 100.41 399.49 92.81L409.08 103.66C402.57 114.16 390.44 123.02 371.45 123.02ZM370.54 45.05C356.43 45.05 347.02 53.37 345.03 69.65H396.23C394.6 53.55 385.2 45.05 370.54 45.05Z",
+		"M442.77 121.21H427.03V0H442.77V121.21Z",
+		"M478.55 121.21H462.81V0H478.55V121.21Z",
+		"M516.68 123.02C501.84 123.02 493.52 114.52 493.52 102.94C493.52 91.18 502.39 83.76 514.87 78.16L546.53 64.04C545.99 53.73 541.1 46.13 527.35 46.13C514.87 46.13 506.55 53.37 502.02 62.96L491.35 51.92C496.6 42.88 509.62 31.84 529.16 31.84C550.69 31.84 562.27 44.69 562.27 65.49V101.49C562.27 105.66 563.9 106.92 567.15 106.92H572.76V121.21H562.63C553.58 121.21 547.07 116.87 547.07 104.57V98.42C544.18 110 534.77 123.02 516.68 123.02ZM509.44 100.41C509.44 106.38 513.6 110 521.74 110C536.58 110 547.07 100.23 547.07 87.56V75.44L521.56 87.38C513.24 91.36 509.44 94.98 509.44 100.41Z"
+	]
+};
+//#endregion
+export { STELLA_WORDMARK };

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

@@ -0,0 +1,13 @@
+import { SwitchContract } from "./switch.shared.js";
+import { SwitchProps } from "react-native";
+//#region src/components/switch.native.d.ts
+type SwitchProps$1 = Omit<SwitchProps, "value" | "onValueChange" | "disabled" | keyof SwitchContract> & SwitchContract;
+/**
+ * The web's `Switch` (./switch.tsx) on a phone: the platform's own switch, in
+ * the web's colours (the primary fill when on, the input fill when off).
+ * Controlled through `checked`, or holding its own state from
+ * `defaultChecked`.
+ */
+export declare const Switch: ({ checked, defaultChecked, disabled, onCheckedChange, ...props }: SwitchProps$1) => import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/switch.native.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Switch as Switch$1 } from "react-native";
+//#region src/components/switch.native.tsx
+/**
+* The web's `Switch` (./switch.tsx) on a phone: the platform's own switch, in
+* the web's colours (the primary fill when on, the input fill when off).
+* Controlled through `checked`, or holding its own state from
+* `defaultChecked`.
+*/
+const Switch = ({ checked, defaultChecked = false, disabled = false, onCheckedChange, ...props }) => {
+	const [own, setOwn] = useState(defaultChecked);
+	const value = checked ?? own;
+	return /* @__PURE__ */ jsx(Switch$1, {
+		...props,
+		accessibilityState: {
+			checked: value,
+			disabled
+		},
+		disabled,
+		ios_backgroundColorClassName: "accent-input",
+		onValueChange: (next) => {
+			setOwn(next);
+			onCheckedChange?.(next);
+		},
+		thumbColorClassName: "accent-background",
+		trackColorOffClassName: "accent-input",
+		trackColorOnClassName: "accent-primary",
+		value
+	});
+};
+//#endregion
+export { Switch };

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

@@ -0,0 +1,9 @@
+//#region src/components/switch.shared.d.ts
+/** The props every switch renderer accepts, with one meaning. */
+export type SwitchContract = {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+};
+//#endregion

package/dist/components/table.d.ts

@@ -1,20 +1,98 @@
 import * as React$1 from "react";
 //#region src/components/table.d.ts
-declare const Table: ({ className, ...props }: React$1.ComponentProps<"table">) => React$1.JSX.Element;
-declare const TableHeader: ({ className, ...props }: React$1.ComponentProps<"thead">) => React$1.JSX.Element;
+/**
+ * How far cells pad their content from the column edges.
+ *
+ * `card` pads 16px, the inset of a card's header and body, so a table set
+ * directly inside a bordered card lines its columns up with the card's title.
+ */
+type TableInset = "default" | "card";
+/**
+ * Who scrolls a table wider or taller than its box. `self` wraps it in its own
+ * horizontal scroller. `parent` renders the bare table for a page that already
+ * scrolls it (a `ScrollArea`, a scrolling pane): a scroller of its own would
+ * become the reference box of a sticky header and stop it from sticking.
+ */
+type TableScroll = "self" | "parent";
+type TableProps = React$1.ComponentProps<"table"> & {
+  inset?: TableInset;
+  scroll?: TableScroll;
+};
+declare const Table: ({ className, inset, scroll, ...props }: TableProps) => React$1.JSX.Element;
+type TableHeaderProps = React$1.ComponentProps<"thead"> & {
+  /**
+   * `muted` lays the header row on a muted band, separating it from the rows
+   * of a long list.
+   */
+  surface?: "plain" | "muted";
+  /**
+   * Keeps the header in view while the rows scroll under it, on a translucent
+   * muted band. The table must scroll with its parent (`scroll="parent"`).
+   */
+  sticky?: boolean;
+};
+declare const TableHeader: ({ className, surface, sticky, ...props }: TableHeaderProps) => React$1.JSX.Element;
 declare const TableBody: ({ className, ...props }: React$1.ComponentProps<"tbody">) => React$1.JSX.Element;
 declare const TableFooter: ({ className, ...props }: React$1.ComponentProps<"tfoot">) => React$1.JSX.Element;
-declare const TableRow: ({ className, ...props }: React$1.ComponentProps<"tr">) => React$1.JSX.Element;
-declare const TableHead: ({ className, ...props }: React$1.ComponentProps<"th">) => React$1.JSX.Element;
-declare const TableCell: ({ className, ...props }: React$1.ComponentProps<"td">) => React$1.JSX.Element;
+/**
+ * `muted` greys out a row or a cell whose value no longer counts (a voided
+ * payment) or that only supports its neighbours (a secondary column).
+ */
+type TableTone = "default" | "muted";
+declare const TableRow: ({ className, tone, ...props }: React$1.ComponentProps<"tr"> & {
+  tone?: TableTone | undefined;
+}) => React$1.JSX.Element;
+/**
+ * Where a column sets its content. `end` lines up figures and amounts;
+ * `start` is the default reading edge. A `numeric` head or cell sets to the
+ * end unless it names an alignment, so a figures column needs one prop.
+ */
+type TableAlign = "start" | "center" | "end";
+type TableHeadProps = Omit<React$1.ComponentProps<"th">, "align"> & {
+  align?: TableAlign | undefined;
+  /**
+   * Heads a column of figures: tabular numerals, like its cells, set to the
+   * end unless `align` says otherwise.
+   */
+  numeric?: boolean | undefined;
+};
+declare const TableHead: ({ className, align, numeric, ...props }: TableHeadProps) => React$1.JSX.Element;
+type TableCellProps = Omit<React$1.ComponentProps<"td">, "align"> & {
+  align?: TableAlign | undefined;
+  tone?: TableTone | undefined;
+  /**
+   * Figures set in tabular numerals and to the end of the cell (unless
+   * `align` says otherwise), so digits line up down the column.
+   */
+  numeric?: boolean | undefined;
+  /**
+   * Cuts text that overflows the cell with an ellipsis; the caller bounds the
+   * cell's width (`max-w-xs`).
+   */
+  truncate?: boolean;
+  /**
+   * The cell holds one control that fills it edge to edge and pads itself (a
+   * button that opens the row's record), so the cell adds no padding and the
+   * control's hover band reaches the cell's borders.
+   */
+  flush?: boolean;
+};
+declare const TableCell: ({ className, align, tone, numeric, truncate, flush, ...props }: TableCellProps) => React$1.JSX.Element;
 type SortDirection = "asc" | "desc" | null;
-type SortableHeadProps = Omit<React$1.ComponentProps<"th">, "onClick"> & {
+type SortableHeadProps = Omit<TableHeadProps, "onClick"> & {
   sortDirection?: SortDirection;
   onSort: () => void;
   /** Rendered next to the sort button inside the same cell (e.g. filter icon). */
   trailing?: React$1.ReactNode;
 };
-declare const SortableHead: ({ children, sortDirection, onSort, trailing, className, ...props }: SortableHeadProps) => React$1.JSX.Element;
+/**
+ * A column head the reader sorts by. The label is a quiet `Button`, so it
+ * has the design system's hover band, focus ring and touch target; its
+ * padding is pulled back so the label still lines up with the cells below.
+ * In an end-aligned (numeric) column the arrow sits before the label, keeping
+ * the label flush with the figures.
+ */
+declare const SortableHead: ({ children, sortDirection, onSort, trailing, className, align, numeric, ...props }: SortableHeadProps) => React$1.JSX.Element;
 declare const TableCaption: ({ className, ...props }: React$1.ComponentProps<"caption">) => React$1.JSX.Element;
 //#endregion
-export { type SortDirection, SortableHead, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+export { type SortDirection, SortableHead, Table, type TableAlign, TableBody, TableCaption, TableCell, type TableCellProps, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableInset, type TableProps, TableRow, type TableScroll, type TableTone };

package/dist/components/table.js

@@ -1,18 +1,24 @@
 import { ArrowDownIcon, ArrowUpIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/table.tsx
-const Table = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: "relative w-full overflow-x-auto",
-	"data-slot": "table-container",
-	children: /* @__PURE__ */ jsx("table", {
+const Table = ({ className, inset = "default", scroll = "self", ...props }) => {
+	const table = /* @__PURE__ */ jsx("table", {
 		className: cn("w-full caption-bottom text-sm in-data-[slot=frame]:border-separate in-data-[slot=frame]:border-spacing-0", className),
+		"data-inset": inset,
 		"data-slot": "table",
 		...props
-	})
-});
-const TableHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("thead", {
-	className: cn("[&_tr]:border-b in-data-[slot=frame]:**:[th]:h-9 in-data-[slot=frame]:*:[tr]:border-none in-data-[slot=frame]:*:[tr]:hover:bg-transparent", className),
+	});
+	if (scroll === "parent") return table;
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative w-full overflow-x-auto",
+		"data-slot": "table-container",
+		children: table
+	});
+};
+const TableHeader = ({ className, surface = "plain", sticky = false, ...props }) => /* @__PURE__ */ jsx("thead", {
+	className: cn("[&_tr]:border-b in-data-[slot=frame]:**:[th]:h-9 in-data-[slot=frame]:*:[tr]:border-none in-data-[slot=frame]:*:[tr]:hover:bg-transparent", surface === "muted" && "bg-muted/50", sticky && "bg-muted/80 sticky top-0 z-10 backdrop-blur", className),
 	"data-slot": "table-header",
 	...props
 });
@@ -26,22 +32,39 @@ const TableFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("tfoot", {
 	"data-slot": "table-footer",
 	...props
 });
-const TableRow = ({ className, ...props }) => /* @__PURE__ */ jsx("tr", {
-	className: cn("hover:bg-muted/72 data-[state=selected]:bg-muted/72 border-b in-data-[slot=frame]:hover:bg-transparent in-data-[slot=frame]:data-[state=selected]:bg-transparent", className),
+const TableRow = ({ className, tone = "default", ...props }) => /* @__PURE__ */ jsx("tr", {
+	className: cn("hover:bg-muted/72 data-[state=selected]:bg-muted/72 border-b in-data-[slot=frame]:hover:bg-transparent in-data-[slot=frame]:data-[state=selected]:bg-transparent", tone === "muted" && "text-muted-foreground", className),
 	"data-slot": "table-row",
 	...props
 });
-const TableHead = ({ className, ...props }) => /* @__PURE__ */ jsx("th", {
-	className: cn("text-muted-foreground h-10 px-2.5 text-start align-middle leading-none font-medium whitespace-nowrap has-[[role=checkbox]]:w-px has-[[role=checkbox]]:pe-0", className),
+const TABLE_ALIGN_CLASS = {
+	center: "text-center",
+	end: "text-end",
+	start: "text-start"
+};
+const resolveTableAlign = (align, numeric) => align ?? (numeric ? "end" : void 0);
+const TableHead = ({ className, align, numeric = false, ...props }) => /* @__PURE__ */ jsx("th", {
+	className: cn("text-muted-foreground h-10 px-2.5 align-middle leading-none font-medium whitespace-nowrap in-data-[inset=card]:px-4 has-[[role=checkbox]]:w-px has-[[role=checkbox]]:pe-0", TABLE_ALIGN_CLASS[resolveTableAlign(align, numeric) ?? "start"], numeric && "tabular-nums", className),
 	"data-slot": "table-head",
 	...props
 });
-const TableCell = ({ className, ...props }) => /* @__PURE__ */ jsx("td", {
-	className: cn("p-2.5 align-middle leading-none whitespace-nowrap in-data-[slot=frame]:first:p-[calc(--spacing(2.5)-1px)] in-data-[slot=frame]:last:p-[calc(--spacing(2.5)-1px)] has-[[role=checkbox]]:pe-0", className),
-	"data-slot": "table-cell",
-	...props
-});
-const SortableHead = ({ children, sortDirection = null, onSort, trailing, className, ...props }) => {
+const TableCell = ({ className, align, tone = "default", numeric = false, truncate = false, flush = false, ...props }) => {
+	const resolvedAlign = resolveTableAlign(align, numeric);
+	return /* @__PURE__ */ jsx("td", {
+		className: cn("align-middle leading-none whitespace-nowrap has-[[role=checkbox]]:pe-0", flush ? "p-0" : "p-2.5 in-data-[inset=card]:px-4 in-data-[slot=frame]:first:p-[calc(--spacing(2.5)-1px)] in-data-[slot=frame]:last:p-[calc(--spacing(2.5)-1px)]", resolvedAlign !== void 0 && TABLE_ALIGN_CLASS[resolvedAlign], tone === "muted" && "text-muted-foreground", numeric && "tabular-nums", truncate && "truncate", className),
+		"data-slot": "table-cell",
+		...props
+	});
+};
+/**
+* A column head the reader sorts by. The label is a quiet `Button`, so it
+* has the design system's hover band, focus ring and touch target; its
+* padding is pulled back so the label still lines up with the cells below.
+* In an end-aligned (numeric) column the arrow sits before the label, keeping
+* the label flush with the figures.
+*/
+const SortableHead = ({ children, sortDirection = null, onSort, trailing, className, align, numeric = false, ...props }) => {
+	const endAligned = resolveTableAlign(align, numeric) === "end";
 	let ariaSort = "none";
 	if (sortDirection === "asc") ariaSort = "ascending";
 	else if (sortDirection === "desc") ariaSort = "descending";
@@ -49,16 +72,19 @@ const SortableHead = ({ children, sortDirection = null, onSort, trailing, classN
 	if (sortDirection === "asc") sortIcon = /* @__PURE__ */ jsx(ArrowUpIcon, { className: "size-3" });
 	else if (sortDirection === "desc") sortIcon = /* @__PURE__ */ jsx(ArrowDownIcon, { className: "size-3" });
 	return /* @__PURE__ */ jsx(TableHead, {
+		align,
 		"aria-sort": ariaSort,
 		className,
+		numeric,
 		...props,
 		onClick: void 0,
 		children: /* @__PURE__ */ jsxs("span", {
 			className: "inline-flex items-center gap-1",
-			children: [/* @__PURE__ */ jsxs("button", {
-				className: "text-muted-foreground hover:text-foreground inline-flex cursor-pointer items-center gap-1 font-medium select-none",
+			children: [/* @__PURE__ */ jsxs(Button, {
+				className: cn("min-w-0 gap-1", endAligned ? "-me-3 flex-row-reverse" : "-ms-3"),
 				onClick: onSort,
 				type: "button",
+				variant: "muted",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "truncate",
 					children

package/dist/components/text.d.ts

@@ -0,0 +1,11 @@
+import { ComponentProps } from "react";
+import { TextContract, TextVariant } from "./text.shared.js";
+//#region src/components/text.d.ts
+/**
+ * Text in one of the design system's roles (./text.shared.ts), the same role
+ * the React Native renderer (./text.native.tsx) sets on a phone. Inline, so a
+ * role can sit inside a paragraph; a block of prose is `Prose`.
+ */
+declare const Text: ({ className, variant, ...props }: Omit<ComponentProps<"span">, keyof TextContract> & TextContract) => import("react").JSX.Element;
+//#endregion
+export { Text, type TextVariant };

package/dist/components/text.js

@@ -0,0 +1,25 @@
+import { cn } from "../lib/utils.js";
+import { TEXT_VARIANT_CLASS_NAMES, TEXT_VARIANT_FACES } from "./text.shared.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/text.tsx
+const WEIGHT_CLASS_NAMES = {
+	light: "font-light",
+	regular: "font-normal",
+	medium: "font-medium",
+	semibold: "font-semibold",
+	bold: "font-bold"
+};
+const faceClassName = (face) => cn(face.family === "serif" && "font-serif", WEIGHT_CLASS_NAMES[face.weight], face.italic === true && "italic");
+/**
+* Text in one of the design system's roles (./text.shared.ts), the same role
+* the React Native renderer (./text.native.tsx) sets on a phone. Inline, so a
+* role can sit inside a paragraph; a block of prose is `Prose`.
+*/
+const Text = ({ className, variant = "body", ...props }) => /* @__PURE__ */ jsx("span", {
+	className: cn("text-foreground", TEXT_VARIANT_CLASS_NAMES[variant], faceClassName(TEXT_VARIANT_FACES[variant]), className),
+	"data-slot": "text",
+	"data-variant": variant,
+	...props
+});
+//#endregion
+export { Text };

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

@@ -0,0 +1,15 @@
+import { TextContract, TextVariant } from "./text.shared.js";
+import { TextProps } from "react-native";
+//#region src/components/text.native.d.ts
+/** The font a role is set in, for a native control that draws its own text. */
+export declare const textFontFamily: (variant: TextContract["variant"]) => string;
+/**
+ * Text in one of the design system's roles (./text.shared.ts), as the web
+ * renderer (./text.tsx) sets it: the same size and colour, in the role's
+ * embedded face.
+ */
+export declare const Text: ({ className, style, variant, ...props }: Omit<TextProps, keyof TextContract> & TextContract & {
+  className?: string | undefined;
+}) => import("react").JSX.Element;
+//#endregion
+export type { TextVariant };

package/dist/components/text.native.js

@@ -0,0 +1,46 @@
+import { TEXT_VARIANT_CLASS_NAMES, TEXT_VARIANT_FACES } from "./text.shared.js";
+import { jsx } from "react/jsx-runtime";
+import { Text as Text$1 } from "react-native";
+//#region src/components/text.native.tsx
+/**
+* The embedded font each face is, by the name the app registers it under:
+* DM Sans, the web's typeface, for the interface; the platform's Georgia for
+* reading, since the web reader's Source Serif 4 ships only as web fonts.
+*/
+const faceName = ({ family, weight, italic }) => {
+	if (family === "serif") {
+		if (weight === "bold" || weight === "semibold") return italic === true ? "Georgia-BoldItalic" : "Georgia-Bold";
+		return italic === true ? "Georgia-Italic" : "Georgia";
+	}
+	return SANS_FACES[weight];
+};
+const SANS_FACES = {
+	light: "DMSans-Light",
+	regular: "DMSans-Regular",
+	medium: "DMSans-Medium",
+	semibold: "DMSans-SemiBold",
+	bold: "DMSans-Bold"
+};
+/** `text-` utilities that set a size, alignment or wrapping, not a colour. */
+const NOT_A_COLOUR = /^text-(?:xs|sm|base|lg|\d*xl|\[|left|center|right|justify|start|end|wrap|nowrap|balance|pretty|ellipsis|clip)/u;
+/**
+* `classes` with the foreground colour first, unless they name a colour of
+* their own. Both would be one utility, and the stylesheet orders utilities
+* by name, so `text-foreground` would otherwise win over `text-destructive`
+* whatever order they were written in.
+*/
+const withForeground = (classes) => classes.split(/\s+/u).some((name) => name.startsWith("text-") && !NOT_A_COLOUR.test(name)) ? classes : `text-foreground ${classes}`;
+/** The font a role is set in, for a native control that draws its own text. */
+const textFontFamily = (variant) => faceName(TEXT_VARIANT_FACES[variant ?? "body"]);
+/**
+* Text in one of the design system's roles (./text.shared.ts), as the web
+* renderer (./text.tsx) sets it: the same size and colour, in the role's
+* embedded face.
+*/
+const Text = ({ className, style, variant = "body", ...props }) => /* @__PURE__ */ jsx(Text$1, {
+	className: withForeground(`${TEXT_VARIANT_CLASS_NAMES[variant]} ${className ?? ""}`),
+	style: [{ fontFamily: textFontFamily(variant) }, style],
+	...props
+});
+//#endregion
+export { Text, textFontFamily };