@stll/ui 0.65.1 → 0.66.0

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

@@ -2,7 +2,7 @@ import { STELLA_MARK } from "./stella-mark.shared.js";
 import { jsx } from "react/jsx-runtime";
 import Svg, { Path } from "react-native-svg";
 import { useCSSVariable } from "uniwind";
-//#region src/components/stella-mark.native.tsx
+// src/components/stella-mark.native.tsx
 const BOX = STELLA_MARK.viewBox.split(" ").map(Number);
 const WIDTH = BOX[2] ?? 1;
 const HEIGHT = BOX[3] ?? 1;
@@ -24,5 +24,4 @@ const StellaMark = ({ size = 28 }) => {
 		}, d))
 	});
 };
-//#endregion
 export { StellaMark };

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

@@ -1,6 +1,4 @@
-//#region src/components/stella-mark.shared.d.ts
 export declare const STELLA_MARK: {
   readonly viewBox: "0 0 40 41";
   readonly paths: readonly ["M6.58 11.3 16.69 5.05a5.9 5.9 0 0 1 6.62.01l14.68 9.07V9.26L25.52 1.55A11.8 11.8 0 0 0 20 0c-1.97 0-3.88.54-5.53 1.56L4.37 7.81A9.3 9.3 0 0 0 0 15.61a9.3 9.3 0 0 0 4.37 7.8l3.26 2.02-.01.01 11.15 6.9c.14.09.27.16.39.2.68.26 1.42.19 2.03-.19l9.59-5.93.1-.07 2.07-1.28-2.82-1.72-1.1-.69-9.02 5.56-.41-.24-13.01-8.05a5.57 5.57 0 0 1-2.41-4.31c0-1.79.88-3.36 2.41-4.3Z", "M33.34 29.25 23.24 35.5a5.9 5.9 0 0 1-6.63-.01L1.94 26.43v4.86l12.47 7.71a11.8 11.8 0 0 0 5.52 1.55c1.97 0 3.88-.54 5.53-1.56l10.1-6.25a9.3 9.3 0 0 0 4.37-7.8 9.3 9.3 0 0 0-4.37-7.8l-3.26-2.02.01-.01-11.15-6.9a1.6 1.6 0 0 0-.39-.2 1.64 1.64 0 0 0-2.03.19l-9.59 5.93-.1.07-2.07 1.28 2.82 1.72 1.1.69 9.02-5.56.41.24 13.01 8.05a5.57 5.57 0 0 1 2.41 4.31c0 1.79-.88 3.36-2.41 4.3Z"];
-};
-//#endregion
+};

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

@@ -1,7 +1,6 @@
-//#region src/components/stella-mark.shared.ts
+// src/components/stella-mark.shared.ts
 const STELLA_MARK = {
 	viewBox: "0 0 40 41",
 	paths: ["M6.58 11.3 16.69 5.05a5.9 5.9 0 0 1 6.62.01l14.68 9.07V9.26L25.52 1.55A11.8 11.8 0 0 0 20 0c-1.97 0-3.88.54-5.53 1.56L4.37 7.81A9.3 9.3 0 0 0 0 15.61a9.3 9.3 0 0 0 4.37 7.8l3.26 2.02-.01.01 11.15 6.9c.14.09.27.16.39.2.68.26 1.42.19 2.03-.19l9.59-5.93.1-.07 2.07-1.28-2.82-1.72-1.1-.69-9.02 5.56-.41-.24-13.01-8.05a5.57 5.57 0 0 1-2.41-4.31c0-1.79.88-3.36 2.41-4.3Z", "M33.34 29.25 23.24 35.5a5.9 5.9 0 0 1-6.63-.01L1.94 26.43v4.86l12.47 7.71a11.8 11.8 0 0 0 5.52 1.55c1.97 0 3.88-.54 5.53-1.56l10.1-6.25a9.3 9.3 0 0 0 4.37-7.8 9.3 9.3 0 0 0-4.37-7.8l-3.26-2.02.01-.01-11.15-6.9a1.6 1.6 0 0 0-.39-.2 1.64 1.64 0 0 0-2.03.19l-9.59 5.93-.1.07-2.07 1.28 2.82 1.72 1.1.69 9.02-5.56.41.24 13.01 8.05a5.57 5.57 0 0 1 2.41 4.31c0 1.79-.88 3.36-2.41 4.3Z"]
 };
-//#endregion
 export { STELLA_MARK };

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

@@ -1,4 +1,2 @@
 import { SVGProps } from "react";
-//#region src/components/stella-wordmark.d.ts
-export declare const StellaWordmarkLatin: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
+export declare const StellaWordmarkLatin: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;

package/dist/components/stella-wordmark.js

@@ -1,6 +1,6 @@
 import { STELLA_WORDMARK } from "./stella-wordmark.shared.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/stella-wordmark.tsx
+// src/components/stella-wordmark.tsx
 const StellaWordmarkLatin = (props) => /* @__PURE__ */ jsx("svg", {
 	"aria-hidden": "true",
 	fill: "currentColor",
@@ -9,5 +9,4 @@ const StellaWordmarkLatin = (props) => /* @__PURE__ */ jsx("svg", {
 	...props,
 	children: STELLA_WORDMARK.paths.map((d) => /* @__PURE__ */ jsx("path", { d }, d))
 });
-//#endregion
 export { StellaWordmarkLatin };

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

@@ -1,9 +1,7 @@
-//#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
+}) => import("react").JSX.Element;

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

@@ -2,7 +2,7 @@ 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
+// src/components/stella-wordmark.native.tsx
 const BOX = STELLA_WORDMARK.viewBox.split(" ").map(Number);
 const WIDTH = BOX[2] ?? 1;
 const HEIGHT = BOX[3] ?? 1;
@@ -23,5 +23,4 @@ const StellaWordmarkLatin = ({ height = 20 }) => {
 		}, d))
 	});
 };
-//#endregion
 export { StellaWordmarkLatin };

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

@@ -1,6 +1,4 @@
-//#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

@@ -1,4 +1,4 @@
-//#region src/components/stella-wordmark.shared.ts
+// src/components/stella-wordmark.shared.ts
 const STELLA_WORDMARK = {
 	viewBox: "0 0 573 151",
 	paths: [
@@ -12,5 +12,4 @@ const STELLA_WORDMARK = {
 		"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/steps.d.ts

@@ -1,6 +1,5 @@
 import * as React$1 from "react";
 import { VariantProps } from "class-variance-authority";
-//#region src/components/steps.d.ts
 declare const stepsVariants: (props?: ({
   variant?: "compact" | "default" | "progress" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -14,5 +13,4 @@ declare const stepVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type StepProps = React$1.ComponentProps<"li"> & VariantProps<typeof stepVariants>;
 declare const Step: ({ className, status, ...props }: StepProps) => React$1.JSX.Element;
-//#endregion
 export { Step, Steps };

package/dist/components/steps.js

@@ -1,7 +1,7 @@
 import { cn } from "../lib/utils.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-//#region src/components/steps.tsx
+// src/components/steps.tsx
 const stepsVariants = cva("list-decimal ps-6 marker:font-medium", {
 	variants: { variant: {
 		default: "space-y-4",
@@ -30,5 +30,4 @@ const Step = ({ className, status, ...props }) => /* @__PURE__ */ jsx("li", {
 	"data-slot": "step",
 	...props
 });
-//#endregion
 export { Step, Steps };

package/dist/components/swap-text.d.ts

@@ -1,4 +1,3 @@
-//#region src/components/swap-text.d.ts
 /**
  * A short label that changes in place (a live status line): the old text
  * lifts out with a slight blur while the new one rises into the same cell,
@@ -12,5 +11,4 @@ declare const SwapText: ({ className, text }: {
   className?: string;
   text: string;
 }) => import("react").JSX.Element;
-//#endregion
 export { SwapText };

package/dist/components/swap-text.js

@@ -2,7 +2,7 @@
 import { cn } from "../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-//#region src/components/swap-text.tsx
+// src/components/swap-text.tsx
 /**
 * A short label that changes in place (a live status line): the old text
 * lifts out with a slight blur while the new one rises into the same cell,
@@ -48,5 +48,4 @@ const SwapText = ({ className, text }) => {
 		}, `in-${state.generation}`)]
 	});
 };
-//#endregion
 export { SwapText };

package/dist/components/switch.d.ts

@@ -1,6 +1,5 @@
 import * as React$1 from "react";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
-//#region src/components/switch.d.ts
 /**
  * `default` is a setting's own control; `sm` sits in a dense row or a menu
  * beside small type.
@@ -20,5 +19,4 @@ declare const SwitchField: ({ className, description, label, size, ...props }: S
   label: React$1.ReactNode;
   description?: React$1.ReactNode;
 }) => React$1.JSX.Element;
-//#endregion
 export { Switch, SwitchField, type SwitchProps, type SwitchSize };

package/dist/components/switch.js

@@ -3,7 +3,7 @@ import { cn } from "../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
-//#region src/components/switch.tsx
+// src/components/switch.tsx
 const SWITCH_ROOT_SIZE_CLASS_NAME = {
 	default: "h-5 w-9",
 	sm: "h-4 w-7"
@@ -51,5 +51,4 @@ const SwitchField = ({ className, description, label, size, ...props }) => {
 		})]
 	});
 };
-//#endregion
 export { Switch, SwitchField };

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

@@ -1,6 +1,5 @@
 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
@@ -9,5 +8,4 @@ type SwitchProps$1 = Omit<SwitchProps, "value" | "onValueChange" | "disabled" |
  * `defaultChecked`.
  */
 export declare const Switch: ({ checked, defaultChecked, disabled, onCheckedChange, ...props }: SwitchProps$1) => import("react").JSX.Element;
-//#endregion
 export {};

package/dist/components/switch.native.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { Switch as Switch$1 } from "react-native";
-//#region src/components/switch.native.tsx
+// 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).
@@ -29,5 +29,4 @@ const Switch = ({ checked, defaultChecked = false, disabled = false, onCheckedCh
 		value
 	});
 };
-//#endregion
 export { Switch };

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

@@ -1,9 +1,7 @@
-//#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-chart.d.ts

@@ -1,4 +1,3 @@
-//#region src/components/table-chart.d.ts
 export type TableChartKind = "bar" | "line" | "pie" | "scatter";
 export type TableChartPoint = {
   label: string;
@@ -16,5 +15,4 @@ export type TableChartProps = {
   xMode?: "numeric" | "category";
   formatNumber: (value: number) => string;
 };
-export declare const TableChart: ({ kind, points, title, summary, xLabel, yLabel, xMode, formatNumber }: TableChartProps) => import("react").JSX.Element;
-//#endregion
+export declare const TableChart: ({ kind, points, title, summary, xLabel, yLabel, xMode, formatNumber }: TableChartProps) => import("react").JSX.Element;

package/dist/components/table-chart.js

@@ -2,7 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { panic } from "better-result";
-//#region src/components/table-chart.tsx
+// src/components/table-chart.tsx
 const WIDTH = 640;
 const HEIGHT = 360;
 const PLOT = {
@@ -270,5 +270,4 @@ const TableChart = ({ kind, points, title, summary, xLabel, yLabel, xMode = "num
 		]
 	});
 };
-//#endregion
 export { TableChart };

package/dist/components/table.d.ts

@@ -1,5 +1,4 @@
 import * as React$1 from "react";
-//#region src/components/table.d.ts
 /**
  * How far cells pad their content from the column edges.
  *
@@ -108,5 +107,4 @@ type SortableHeadProps = Omit<TableHeadProps, "onClick"> & {
  */
 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, type TableAlign, TableBody, TableCaption, TableCell, type TableCellProps, type TableDensity, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableInset, type TableProps, TableRow, type TableScroll, type TableTone };

package/dist/components/table.js

@@ -2,7 +2,7 @@ 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
+// src/components/table.tsx
 const Table = ({ className, density = "default", 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),
@@ -103,5 +103,4 @@ const TableCaption = ({ className, ...props }) => /* @__PURE__ */ jsx("caption",
 	"data-slot": "table-caption",
 	...props
 });
-//#endregion
 export { SortableHead, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/components/tabs.d.ts

@@ -1,5 +1,4 @@
 import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
-//#region src/components/tabs.d.ts
 type TabsVariant = "default" | "underline";
 declare const Tabs: ({ className, ...props }: Tabs$1.Root.Props) => import("react").JSX.Element;
 declare const TabsList: ({ variant, className, children, ref, ...props }: Tabs$1.List.Props & {
@@ -7,5 +6,4 @@ declare const TabsList: ({ variant, className, children, ref, ...props }: Tabs$1
 }) => import("react").JSX.Element;
 declare const TabsTab: ({ className, ...props }: Tabs$1.Tab.Props) => import("react").JSX.Element;
 declare const TabsPanel: ({ className, ...props }: Tabs$1.Panel.Props) => import("react").JSX.Element;
-//#endregion
 export { Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger };

package/dist/components/tabs.js

@@ -4,7 +4,7 @@ import { hasTabOrderChanged, revealActiveTab } from "../lib/tab-order.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
-//#region src/components/tabs.tsx
+// src/components/tabs.tsx
 const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 const Tabs = ({ className, ...props }) => /* @__PURE__ */ jsx(Tabs$1.Root, {
 	className: cn("flex flex-col gap-2 data-[orientation=vertical]:flex-row", className),
@@ -53,5 +53,4 @@ const TabsPanel = ({ className, ...props }) => /* @__PURE__ */ jsx(Tabs$1.Panel,
 	"data-slot": "tabs-content",
 	...props
 });
-//#endregion
 export { Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger };

package/dist/components/text.d.ts

@@ -1,11 +1,9 @@
 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

@@ -1,7 +1,7 @@
 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
+// src/components/text.tsx
 const WEIGHT_CLASS_NAMES = {
 	light: "font-light",
 	regular: "font-normal",
@@ -21,5 +21,4 @@ const Text = ({ className, variant = "body", ...props }) => /* @__PURE__ */ jsx(
 	"data-variant": variant,
 	...props
 });
-//#endregion
 export { Text };

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

@@ -1,6 +1,5 @@
 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;
 /**
@@ -11,5 +10,4 @@ export declare const textFontFamily: (variant: TextContract["variant"]) => strin
 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

@@ -1,7 +1,7 @@
 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
+// src/components/text.native.tsx
 /**
 * The embedded DM Sans face, the web's typeface, for each weight, by the
 * name the app registers it under.
@@ -34,5 +34,4 @@ const Text = ({ className, style, variant = "body", ...props }) => /* @__PURE__
 	style: [{ fontFamily: textFontFamily(variant) }, style],
 	...props
 });
-//#endregion
 export { Text, textFontFamily };

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

@@ -1,5 +1,4 @@
 import { ReactNode } from "react";
-//#region src/components/text.shared.d.ts
 /** Each role's size, colour and spacing, as Tailwind classes. */
 export declare const TEXT_VARIANT_CLASS_NAMES: {
   readonly body: "text-base";
@@ -45,5 +44,4 @@ export declare const TEXT_VARIANT_FACES: {
 export type TextContract = {
   variant?: TextVariant;
   children?: ReactNode;
-};
-//#endregion
+};

package/dist/components/text.shared.js

@@ -1,4 +1,4 @@
-//#region src/components/text.shared.ts
+// src/components/text.shared.ts
 /** Each role's size, colour and spacing, as Tailwind classes. */
 const TEXT_VARIANT_CLASS_NAMES = {
 	body: "text-base",
@@ -37,5 +37,4 @@ const TEXT_VARIANT_FACES = {
 	badge: sans("medium"),
 	link: sans("regular")
 };
-//#endregion
 export { TEXT_VARIANT_CLASS_NAMES, TEXT_VARIANT_FACES };

package/dist/components/textarea.d.ts

@@ -1,6 +1,5 @@
 import * as React$1 from "react";
 import { ControlSize } from "../lib/control-size.js";
-//#region src/components/textarea.d.ts
 type TextareaProps = React$1.ComponentProps<"textarea"> & {
   size?: ControlSize | number;
   unstyled?: boolean;
@@ -17,7 +16,16 @@ type TextareaProps = React$1.ComponentProps<"textarea"> & {
    * table cell or a row must not push its neighbours around.
    */
   fieldSizing?: "content" | "fixed";
+  /**
+   * The most lines it grows to before it scrolls. Without it the field grows
+   * with its content without end.
+   */
+  maxRows?: number | undefined;
+  /**
+   * Shows `length / maxLength` under the end of the field. Needs `maxLength`;
+   * the browser still enforces the limit.
+   */
+  showCount?: boolean | undefined;
 };
-declare const Textarea: ({ className, size, unstyled, inline, fieldSizing, dir, onChange, ...props }: TextareaProps) => React$1.JSX.Element;
-//#endregion
+declare const Textarea: ({ className, size, unstyled, inline, fieldSizing, maxRows, showCount, dir, onChange, style, ...props }: TextareaProps) => React$1.JSX.Element;
 export { Textarea, type TextareaProps };

package/dist/components/textarea.js

@@ -3,42 +3,80 @@ import { cn } from "../lib/utils.js";
 import { CONTROL_SIZE } from "../lib/control-size.js";
 import { useContentDir } from "../hooks/use-content-dir.js";
 import { INLINE_FIELD_CLASS_NAME } from "./input-control.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { Field } from "@base-ui/react/field";
-//#region src/components/textarea.tsx
-const Textarea = ({ className, size = CONTROL_SIZE.default, unstyled = false, inline = false, fieldSizing = "content", dir, onChange, ...props }) => {
+// src/components/textarea.tsx
+const Textarea = ({ className, size = CONTROL_SIZE.default, unstyled = false, inline = false, fieldSizing = "content", maxRows, showCount = false, dir, onChange, style, ...props }) => {
 	const controlSize = typeof size === "number" ? CONTROL_SIZE.default : size;
 	const contentDir = useContentDir({
 		dir,
 		value: props.value,
 		defaultValue: props.defaultValue
 	});
+	const [typedLength, setTypedLength] = useState(() => textLength(props.defaultValue));
+	const length = props.value === void 0 ? typedLength : textLength(props.value);
+	const counted = showCount && props.maxLength !== void 0;
 	const handleChange = (event) => {
 		contentDir.trackValue(event.currentTarget.value);
+		if (counted) setTypedLength(event.currentTarget.value.length);
 		onChange?.(event);
 	};
-	return /* @__PURE__ */ jsx("span", {
-		className: cn(inline && "relative inline-flex w-full", !unstyled && !inline && "border-input bg-background text-foreground ring-ring/24 has-focus-visible:border-ring has-aria-invalid:border-destructive/36 has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 relative inline-flex w-full rounded-lg border text-base shadow-xs/5 not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:ring-[3px] has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none sm:text-sm dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]", className) || void 0,
+	const syncCountOnFormReset = (control) => {
+		const textarea = control?.querySelector("textarea");
+		const form = textarea?.form;
+		if (!counted || props.value !== void 0 || !textarea || !form) return;
+		const handleReset = () => {
+			setTimeout(() => {
+				contentDir.trackValue(textarea.value);
+				setTypedLength(textarea.value.length);
+			}, 0);
+		};
+		form.addEventListener("reset", handleReset);
+		return () => {
+			form.removeEventListener("reset", handleReset);
+		};
+	};
+	const textareaStyle = maxRows === void 0 ? style : {
+		...style,
+		"--textarea-max-rows": maxRows
+	};
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn(inline && "relative inline-flex w-full", counted && "relative", !unstyled && !inline && "border-input bg-background text-foreground ring-ring/24 has-focus-visible:border-ring has-aria-invalid:border-destructive/36 has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 relative inline-flex w-full rounded-lg border text-base shadow-xs/5 not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:ring-[3px] has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none sm:text-sm dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]", className) || void 0,
 		"data-size": size,
 		"data-slot": "textarea-control",
-		children: /* @__PURE__ */ jsx(Field.Control, { render: (defaultProps) => /* @__PURE__ */ jsx("textarea", {
-			className: cn(inline ? cn(INLINE_FIELD_CLASS_NAME, "resize-none") : cn("w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none", TEXTAREA_SIZE_CLASS_NAMES[controlSize], fieldSizing === "content" && TEXTAREA_FLOOR_CLASS_NAMES[controlSize]), fieldSizing === "content" ? "field-sizing-content" : "field-sizing-fixed resize-none"),
+		ref: syncCountOnFormReset,
+		children: [/* @__PURE__ */ jsx(Field.Control, { render: (defaultProps) => /* @__PURE__ */ jsx("textarea", {
+			className: cn(inline ? cn(INLINE_FIELD_CLASS_NAME, "resize-none [--textarea-pb:0px] [--textarea-pt:0px]") : cn("w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] outline-none", TEXTAREA_SIZE_CLASS_NAMES[controlSize], fieldSizing === "content" && TEXTAREA_FLOOR_CLASS_NAMES[controlSize]), fieldSizing === "content" ? "field-sizing-content" : "field-sizing-fixed resize-none", "pt-(--textarea-pt) pb-(--textarea-pb)", counted && "[--textarea-pb:--spacing(6)]", maxRows !== void 0 && "max-h-[calc(var(--textarea-max-rows)*1lh+var(--textarea-pt)+var(--textarea-pb))] min-h-0 max-sm:min-h-0"),
 			"data-slot": "textarea",
 			...mergeProps(defaultProps, props, { onChange: handleChange }),
-			dir: contentDir.dir
-		}) })
+			dir: contentDir.dir,
+			style: textareaStyle
+		}) }), counted ? /* @__PURE__ */ jsxs("span", {
+			className: "text-muted-foreground pointer-events-none absolute end-3 bottom-1.5 text-xs tabular-nums",
+			"data-slot": "textarea-count",
+			children: [
+				length,
+				"/",
+				props.maxLength
+			]
+		}) : null]
 	});
 };
+/** Each size's block padding, as the variables the padding and cap read. */
 const TEXTAREA_SIZE_CLASS_NAMES = {
-	[CONTROL_SIZE.sm]: "px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)]",
-	[CONTROL_SIZE.default]: void 0,
-	[CONTROL_SIZE.lg]: "py-[calc(--spacing(2)-1px)]"
+	[CONTROL_SIZE.sm]: "px-[calc(--spacing(2.5)-1px)] [--textarea-pb:calc(--spacing(1)-1px)] [--textarea-pt:calc(--spacing(1)-1px)]",
+	[CONTROL_SIZE.default]: "[--textarea-pb:calc(--spacing(1.5)-1px)] [--textarea-pt:calc(--spacing(1.5)-1px)]",
+	[CONTROL_SIZE.lg]: "[--textarea-pb:calc(--spacing(2)-1px)] [--textarea-pt:calc(--spacing(2)-1px)]"
 };
 const TEXTAREA_FLOOR_CLASS_NAMES = {
 	[CONTROL_SIZE.sm]: "min-h-16.5 max-sm:min-h-19.5",
 	[CONTROL_SIZE.default]: "min-h-17.5 max-sm:min-h-20.5",
 	[CONTROL_SIZE.lg]: "min-h-18.5 max-sm:min-h-21.5"
 };
-//#endregion
+function textLength(value) {
+	if (value === void 0) return 0;
+	return String(value).length;
+}
 export { Textarea };

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

@@ -1,10 +1,8 @@
 import { ComponentProps } from "react";
 import { NativeField } from "./input.native.js";
-//#region src/components/textarea.native.d.ts
 /**
  * The web's `Textarea` (./textarea.tsx) on a phone: text that wraps and grows,
  * in the web's box, or none for a field inside a container that draws one
  * (the composer).
  */
-export declare const Textarea: ({ size, unstyled, ...props }: Omit<ComponentProps<typeof NativeField>, "box" | "multiline">) => import("react").JSX.Element;
-//#endregion
+export declare const Textarea: ({ size, unstyled, ...props }: Omit<ComponentProps<typeof NativeField>, "box" | "multiline">) => import("react").JSX.Element;

package/dist/components/textarea.native.js

@@ -1,6 +1,6 @@
 import { NativeField } from "./input.native.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/textarea.native.tsx
+// src/components/textarea.native.tsx
 /** The web textarea's box at each control size: its border and inset. */
 const BOX = {
 	sm: "min-h-16 rounded-lg border border-input bg-card px-2.5 py-1.5",
@@ -24,5 +24,4 @@ const Textarea = ({ size = "default", unstyled = false, ...props }) => /* @__PUR
 	multiline: true,
 	size
 });
-//#endregion
 export { Textarea };

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

@@ -1,4 +1,2 @@
 import { TextFieldContract } from "./input.shared.js";
-//#region src/components/textarea.shared.d.ts
-export type TextareaContract = Omit<TextFieldContract, "onValueChange">;
-//#endregion
+export type TextareaContract = Omit<TextFieldContract, "onValueChange">;

package/dist/components/time-field.d.ts

@@ -0,0 +1,25 @@
+import * as React$1 from "react";
+import { PickerClock } from "./date-picker-popover.logic.js";
+/**
+ * Stacks time fields on one grid, so their labels, hours and minutes line up
+ * whatever each label's length. A lone TimeField makes its own group.
+ */
+declare const TimeFieldGroup: ({ children, className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+type TimeFieldProps = {
+  className?: string | undefined;
+  disabled: boolean;
+  /** Ties the field to an error or hint shown next to it. */
+  describedBy?: string | undefined;
+  invalid?: boolean;
+  label: string;
+  locale: string;
+  onChange: (clock: PickerClock) => void;
+  /** A wall-clock `HH:mm` time, or `null` while there is none. */
+  time: string | null;
+};
+/**
+ * A wall-clock time to the minute: hour and minute selects in the locale's
+ * own clock and numerals, so `2 PM` and `14` read as each locale writes them.
+ */
+declare const TimeField: ({ className, ...props }: TimeFieldProps) => React$1.JSX.Element;
+export { TimeField, TimeFieldGroup, type TimeFieldProps };