@burtson-labs/ui 0.13.1 → 0.14.1

package/dist/components/switch.js

@@ -1,20 +1,98 @@
-import { cn } from "../lib/utils.js";
-import { Switch } from "radix-ui";
-import "react";
-import { jsx } from "react/jsx-runtime";
+"use client";
+import { cn, focusRingClasses, touchTargetClasses } from "../lib/utils.js";
+import { Root as Switch$1, SwitchThumb } from "../primitives/vendor/radix/react-switch/switch.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/switch.tsx
-function Switch$1({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Switch.Root, {
+/**
+* A 36×20 toggle with a 44px hit area on touch screens; the off track is the
+* field border tone (`input`, 3:1 on the page), the on track primary in light
+* mode and brand in dark mode (see Checkbox), focus the shared 2px outline.
+*/
+var Switch = React.forwardRef(function Switch({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Switch$1, {
+		ref,
 		"data-slot": "switch",
-		className: cn("peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-border-strong", className),
+		className: cn("peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-colors disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input data-[state=unchecked]:hover:bg-muted-foreground/70 dark:data-[state=checked]:bg-brand", focusRingClasses, touchTargetClasses, className),
 		...props,
-		children: /* @__PURE__ */ jsx(Switch.Thumb, {
+		children: /* @__PURE__ */ jsx(SwitchThumb, {
 			"data-slot": "switch-thumb",
-			className: "pointer-events-none block size-4 rounded-full bg-background shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-1px)] data-[state=unchecked]:translate-x-px dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground/80"
+			className: "pointer-events-none block size-4 rounded-full bg-background shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-1px)] data-[state=unchecked]:translate-x-px dark:data-[state=checked]:bg-background dark:data-[state=unchecked]:bg-foreground/80"
 		})
 	});
-}
+});
+/**
+* A setting that is on or off: what it is (and what it does) on the left,
+* the switch on the right, level with the first line of the label. Several
+* of them stack in a SwitchList.
+*/
+var SwitchRow = React.forwardRef(function SwitchRow({ label, description, badge, inset, before, id: idProp, className, rowClassName, children, ...props }, ref) {
+	const auto = React.useId();
+	const id = idProp ?? auto;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "switch-row",
+		className: cn("grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-4", before && "gap-y-2 sm:grid-cols-[minmax(0,1fr)_auto_auto]", inset && "px-4 py-3.5 sm:px-5 sm:py-4", rowClassName),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid min-w-0 gap-1",
+				children: [
+					/* @__PURE__ */ jsxs("label", {
+						htmlFor: id,
+						className: "flex min-h-5 flex-wrap items-center gap-x-2 gap-y-1 text-sm leading-5 font-medium",
+						children: [label, badge]
+					}),
+					description && /* @__PURE__ */ jsx("p", {
+						id: `${id}-description`,
+						className: "text-[13px] leading-5 text-muted-foreground",
+						children: description
+					}),
+					children
+				]
+			}),
+			before && /* @__PURE__ */ jsx("div", {
+				className: "col-start-1 row-start-2 flex items-center sm:col-start-2 sm:row-start-1 sm:-my-2",
+				children: before
+			}),
+			/* @__PURE__ */ jsx(Switch, {
+				ref,
+				id,
+				"aria-describedby": description ? `${id}-description` : void 0,
+				className: cn("col-start-2 row-start-1", before && "sm:col-start-3", className),
+				...props
+			})
+		]
+	});
+});
+/** SwitchRows (with `inset`) divided by rules, in a Card or a bordered box. */
+var SwitchList = React.forwardRef(function SwitchList({ bordered, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "switch-list",
+		className: cn("grid divide-y divide-border", bordered && "rounded-lg border", className),
+		...props
+	});
+});
+/**
+* A filter that is on or off, in a row of filters: the switch first, its
+* label after it, at least 44px tall on touch screens. (Settings put the
+* switch on the right: SwitchRow.)
+*/
+var InlineSwitch = React.forwardRef(function InlineSwitch({ label, id: idProp, className, rowClassName, ...props }, ref) {
+	const auto = React.useId();
+	const id = idProp ?? auto;
+	return /* @__PURE__ */ jsxs("label", {
+		htmlFor: id,
+		"data-slot": "inline-switch",
+		className: cn("flex min-h-5 cursor-pointer items-center gap-2.5 text-sm leading-5 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60 pointer-coarse:min-h-11", rowClassName),
+		children: [/* @__PURE__ */ jsx(Switch, {
+			ref,
+			id,
+			className,
+			...props
+		}), label]
+	});
+});
 //#endregion
-export { Switch$1 as Switch };
+export { InlineSwitch, Switch, SwitchList, SwitchRow };
 
 //# sourceMappingURL=switch.js.map

package/dist/components/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":["Switch","SwitchPrimitive"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { Switch as SwitchPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        'peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-border-strong',\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"pointer-events-none block size-4 rounded-full bg-background shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-1px)] data-[state=unchecked]:translate-x-px dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground/80\"\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch };\n"],"mappings":";;;;;AAKA,SAASA,SAAO,EAAE,WAAW,GAAG,SAA4D;CAC1F,OACE,oBAACC,OAAgB,MAAjB;EACE,aAAU;EACV,WAAW,GACT,8SACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAACA,OAAgB,OAAjB;GACE,aAAU;GACV,WAAU;EACX,CAAA;CACmB,CAAA;AAE1B"}
+{"version":3,"file":"switch.js","names":["SwitchPrimitive.Root","SwitchPrimitive.Thumb"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn, focusRingClasses, touchTargetClasses } from '../lib/utils';\nimport * as SwitchPrimitive from '../primitives/vendor/radix/react-switch';\n\n/**\n * A 36×20 toggle with a 44px hit area on touch screens; the off track is the\n * field border tone (`input`, 3:1 on the page), the on track primary in light\n * mode and brand in dark mode (see Checkbox), focus the shared 2px outline.\n */\nconst Switch = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof SwitchPrimitive.Root>\n>(function Switch({ className, ...props }, ref) {\n  return (\n    <SwitchPrimitive.Root\n      ref={ref}\n      data-slot=\"switch\"\n      className={cn(\n        'peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-colors disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input data-[state=unchecked]:hover:bg-muted-foreground/70 dark:data-[state=checked]:bg-brand',\n        focusRingClasses,\n        touchTargetClasses,\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"pointer-events-none block size-4 rounded-full bg-background shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-1px)] data-[state=unchecked]:translate-x-px dark:data-[state=checked]:bg-background dark:data-[state=unchecked]:bg-foreground/80\"\n      />\n    </SwitchPrimitive.Root>\n  );\n});\n\nexport interface SwitchRowProps extends Omit<\n  React.ComponentProps<typeof SwitchPrimitive.Root>,\n  'children'\n> {\n  /** The setting's name. */\n  label: React.ReactNode;\n  /** What it does, under the name. */\n  description?: React.ReactNode;\n  /** Beside the label: a Badge such as \"Always on\". */\n  badge?: React.ReactNode;\n  /** Padding for a row in a SwitchList. */\n  inset?: boolean;\n  /** A control that belongs to the switch (a minutes field for \"Alert when late\"), beside it on wide screens and under the label on phones. */\n  before?: React.ReactNode;\n  /** Extra classes for the row; className goes to the switch. */\n  rowClassName?: string;\n  /** Extra lines under the description. */\n  children?: React.ReactNode;\n}\n\n/**\n * A setting that is on or off: what it is (and what it does) on the left,\n * the switch on the right, level with the first line of the label. Several\n * of them stack in a SwitchList.\n */\nconst SwitchRow = React.forwardRef<HTMLButtonElement, SwitchRowProps>(function SwitchRow(\n  {\n    label,\n    description,\n    badge,\n    inset,\n    before,\n    id: idProp,\n    className,\n    rowClassName,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const auto = React.useId();\n  const id = idProp ?? auto;\n  return (\n    <div\n      data-slot=\"switch-row\"\n      className={cn(\n        'grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-4',\n        before && 'gap-y-2 sm:grid-cols-[minmax(0,1fr)_auto_auto]',\n        inset && 'px-4 py-3.5 sm:px-5 sm:py-4',\n        rowClassName,\n      )}\n    >\n      <div className=\"grid min-w-0 gap-1\">\n        <label\n          htmlFor={id}\n          className=\"flex min-h-5 flex-wrap items-center gap-x-2 gap-y-1 text-sm leading-5 font-medium\"\n        >\n          {label}\n          {badge}\n        </label>\n        {description && (\n          <p id={`${id}-description`} className=\"text-[13px] leading-5 text-muted-foreground\">\n            {description}\n          </p>\n        )}\n        {children}\n      </div>\n      {before && (\n        <div className=\"col-start-1 row-start-2 flex items-center sm:col-start-2 sm:row-start-1 sm:-my-2\">\n          {before}\n        </div>\n      )}\n      <Switch\n        ref={ref}\n        id={id}\n        aria-describedby={description ? `${id}-description` : undefined}\n        className={cn('col-start-2 row-start-1', before && 'sm:col-start-3', className)}\n        {...props}\n      />\n    </div>\n  );\n});\n\nexport interface SwitchListProps extends React.ComponentProps<'div'> {\n  /** A rounded border around the list, for a list that is not already in a Card. */\n  bordered?: boolean;\n}\n\n/** SwitchRows (with `inset`) divided by rules, in a Card or a bordered box. */\nconst SwitchList = React.forwardRef<HTMLDivElement, SwitchListProps>(function SwitchList(\n  { bordered, className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"switch-list\"\n      className={cn('grid divide-y divide-border', bordered && 'rounded-lg border', className)}\n      {...props}\n    />\n  );\n});\n\nexport interface InlineSwitchProps extends Omit<\n  React.ComponentProps<typeof SwitchPrimitive.Root>,\n  'children'\n> {\n  label: React.ReactNode;\n  /** Extra classes for the label; className goes to the switch. */\n  rowClassName?: string;\n}\n\n/**\n * A filter that is on or off, in a row of filters: the switch first, its\n * label after it, at least 44px tall on touch screens. (Settings put the\n * switch on the right: SwitchRow.)\n */\nconst InlineSwitch = React.forwardRef<HTMLButtonElement, InlineSwitchProps>(function InlineSwitch(\n  { label, id: idProp, className, rowClassName, ...props },\n  ref,\n) {\n  const auto = React.useId();\n  const id = idProp ?? auto;\n  return (\n    <label\n      htmlFor={id}\n      data-slot=\"inline-switch\"\n      className={cn(\n        'flex min-h-5 cursor-pointer items-center gap-2.5 text-sm leading-5 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60 pointer-coarse:min-h-11',\n        rowClassName,\n      )}\n    >\n      <Switch ref={ref} id={id} className={className} {...props} />\n      {label}\n    </label>\n  );\n});\n\nexport { InlineSwitch, Switch, SwitchList, SwitchRow };\n"],"mappings":";;;;;;;;;;;AAUA,IAAM,SAAS,MAAM,WAGnB,SAAS,OAAO,EAAE,WAAW,GAAG,SAAS,KAAK;CAC9C,OACE,oBAACA,UAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,4TACA,kBACA,oBACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAACC,aAAD;GACE,aAAU;GACV,WAAU;EACX,CAAA;CACmB,CAAA;AAE1B,CAAC;;;;;;AA2BD,IAAM,YAAY,MAAM,WAA8C,SAAS,UAC7E,EACE,OACA,aACA,OACA,OACA,QACA,IAAI,QACJ,WACA,cACA,UACA,GAAG,SAEL,KACA;CACA,MAAM,OAAO,MAAM,MAAM;CACzB,MAAM,KAAK,UAAU;CACrB,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,2DACA,UAAU,kDACV,SAAS,+BACT,YACF;EAPF,UAAA;GASE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,qBAAC,SAAD;MACE,SAAS;MACT,WAAU;MAFZ,UAAA,CAIG,OACA,KACI;;KACN,eACC,oBAAC,KAAD;MAAG,IAAI,GAAG,GAAG;MAAe,WAAU;MACnC,UAAA;KACA,CAAA;KAEJ;IACE;;GACJ,UACC,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA;GACE,CAAA;GAEP,oBAAC,QAAD;IACO;IACD;IACJ,oBAAkB,cAAc,GAAG,GAAG,gBAAgB,KAAA;IACtD,WAAW,GAAG,2BAA2B,UAAU,kBAAkB,SAAS;IAC9E,GAAI;GACL,CAAA;EACE;;AAET,CAAC;;AAQD,IAAM,aAAa,MAAM,WAA4C,SAAS,WAC5E,EAAE,UAAU,WAAW,GAAG,SAC1B,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,+BAA+B,YAAY,qBAAqB,SAAS;EACvF,GAAI;CACL,CAAA;AAEL,CAAC;;;;;;AAgBD,IAAM,eAAe,MAAM,WAAiD,SAAS,aACnF,EAAE,OAAO,IAAI,QAAQ,WAAW,cAAc,GAAG,SACjD,KACA;CACA,MAAM,OAAO,MAAM,MAAM;CACzB,MAAM,KAAK,UAAU;CACrB,OACE,qBAAC,SAAD;EACE,SAAS;EACT,aAAU;EACV,WAAW,GACT,4JACA,YACF;EANF,UAAA,CAQE,oBAAC,QAAD;GAAa;GAAS;GAAe;GAAW,GAAI;EAAQ,CAAA,GAC3D,KACI;;AAEX,CAAC"}

package/dist/components/table.d.ts

@@ -17,21 +17,38 @@ export interface TableProps extends React.ComponentProps<'table'> {
      * can scroll it (WCAG 2.1.1, axe scrollable-region-focusable).
      */
     scrollLabel?: string;
+    /**
+     * Keep the first column in view while the table scrolls sideways (a name
+     * column beside numbers). The pinned cells take the surface colour.
+     */
+    pinFirstColumn?: boolean;
+    /**
+     * The line under a table that scrolls sideways, until it is scrolled to the
+     * end. Shown on touch screens only (a mouse has a scrollbar). `false`
+     * turns it off.
+     */
+    overflowHint?: React.ReactNode | false;
 }
-declare function Table({ className, density, stickyHeader, containerClassName, containerProps, scrollLabel, ...props }: TableProps): React.JSX.Element;
-declare function TableHeader({ className, ...props }: React.ComponentProps<'thead'>): React.JSX.Element;
-declare function TableBody({ className, ...props }: React.ComponentProps<'tbody'>): React.JSX.Element;
-declare function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>): React.JSX.Element;
-/** Set `data-state="selected"` (or `selected`) to mark a chosen row. */
-declare function TableRow({ className, selected, ...props }: React.ComponentProps<'tr'> & {
+/** How a box overflows sideways: more to the `end`, more to the `start`, or `both`. */
+export declare function overflowState(el: {
+    scrollLeft: number;
+    scrollWidth: number;
+    clientWidth: number;
+}): 'start' | 'end' | 'both' | undefined;
+declare const Table: React.ForwardRefExoticComponent<Omit<TableProps, "ref"> & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
+/** Set `selected` to mark a chosen row: a soft fill and a brand bar on its left edge. */
+declare const TableRow: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLTableRowElement> & React.HTMLAttributes<HTMLTableRowElement> & {
     selected?: boolean;
-}): React.JSX.Element;
+}, "ref"> & React.RefAttributes<HTMLTableRowElement>>;
 /** `numeric` right-aligns with tabular figures, for counts, money and durations. */
-declare function TableHead({ className, numeric, ...props }: React.ComponentProps<'th'> & {
+declare const TableHead: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLTableHeaderCellElement> & React.ThHTMLAttributes<HTMLTableHeaderCellElement> & {
     numeric?: boolean;
-}): React.JSX.Element;
-declare function TableCell({ className, numeric, ...props }: React.ComponentProps<'td'> & {
+}, "ref"> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLTableDataCellElement> & React.TdHTMLAttributes<HTMLTableDataCellElement> & {
     numeric?: boolean;
-}): React.JSX.Element;
-declare function TableCaption({ className, ...props }: React.ComponentProps<'caption'>): React.JSX.Element;
+}, "ref"> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLTableCaptionElement>>;
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/components/table.js

@@ -1,28 +1,58 @@
-import { cn } from "../lib/utils.js";
+"use client";
+import { cn, focusRingClasses } from "../lib/utils.js";
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/table.tsx
-/** True while the element's content is larger than its box. */
-function useOverflows(ref, enabled) {
+/** How a box overflows sideways: more to the `end`, more to the `start`, or `both`. */
+function overflowState(el) {
+	const max = el.scrollWidth - el.clientWidth;
+	if (max <= 1) return void 0;
+	if (el.scrollLeft <= 1) return "end";
+	if (el.scrollLeft >= max - 1) return "start";
+	return "both";
+}
+/**
+* Tracks whether the element's content is larger than its box, and which way
+* it scrolls sideways. Nothing is measured on the server or in jsdom.
+*/
+function useOverflow(ref) {
 	const [overflows, setOverflows] = React.useState(false);
+	const [horizontal, setHorizontal] = React.useState();
 	React.useEffect(() => {
 		const el = ref.current;
-		if (!enabled || !el) return;
-		const update = () => setOverflows(el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight);
+		if (!el) return;
+		const update = () => {
+			setOverflows(el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight);
+			setHorizontal(overflowState(el));
+		};
 		update();
-		if (typeof ResizeObserver === "undefined") return;
+		el.addEventListener("scroll", update, { passive: true });
+		if (typeof ResizeObserver === "undefined") return () => el.removeEventListener("scroll", update);
 		const ro = new ResizeObserver(update);
 		ro.observe(el);
 		if (el.firstElementChild) ro.observe(el.firstElementChild);
-		return () => ro.disconnect();
-	}, [ref, enabled]);
-	return overflows;
+		return () => {
+			ro.disconnect();
+			el.removeEventListener("scroll", update);
+		};
+	}, [ref]);
+	return {
+		overflows,
+		horizontal
+	};
 }
 function assignRef(ref, node) {
 	if (typeof ref === "function") ref(node);
 	else if (ref) ref.current = node;
 }
-function Table({ className, density = "default", stickyHeader = false, containerClassName, containerProps, scrollLabel, ...props }) {
+/**
+* The scroll container fades on the side with more to see (never over a
+* pinned column), shows its focus outline inside the box (the frame around
+* it would clip an offset one), and drops the fade while focused so the
+* whole outline shows.
+*/
+var containerClasses = cn("group/table relative w-full overflow-auto", "data-[overflow=end]:[mask-image:linear-gradient(to_right,#000_calc(100%-2rem),transparent)]", "data-[overflow=start]:[mask-image:linear-gradient(to_left,#000_calc(100%-2rem),transparent)]", "data-[overflow=both]:[mask-image:linear-gradient(to_right,transparent,#000_2rem,#000_calc(100%-2rem),transparent)]", "data-[pinned]:data-[overflow=start]:[mask-image:none] data-[pinned]:data-[overflow=both]:[mask-image:linear-gradient(to_right,#000_calc(100%-2rem),transparent)]", focusRingClasses, "focus-visible:outline-offset-[-2px] focus-visible:[mask-image:none]");
+var Table = React.forwardRef(function Table({ className, density = "default", stickyHeader = false, containerClassName, containerProps, scrollLabel, pinFirstColumn = false, overflowHint = "Swipe for more", ...props }, ref) {
 	const { className: containerPropsClassName, ref: containerRef, ...wrapperProps } = containerProps ?? {};
 	const local = React.useRef(null);
 	const setRef = React.useCallback((node) => {
@@ -30,78 +60,94 @@ function Table({ className, density = "default", stickyHeader = false, container
 		assignRef(containerRef, node);
 	}, [containerRef]);
 	const named = Boolean(scrollLabel || wrapperProps["aria-label"] || wrapperProps["aria-labelledby"]);
-	const overflows = useOverflows(local, named);
-	return /* @__PURE__ */ jsx("div", {
+	const { overflows, horizontal } = useOverflow(local);
+	const hint = overflowHint !== false && (horizontal === "end" || horizontal === "both");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 		"data-slot": "table-container",
 		"data-density": density,
 		"data-sticky": stickyHeader || void 0,
+		"data-pinned": pinFirstColumn || void 0,
+		"data-overflow": horizontal,
 		role: named ? "region" : void 0,
 		"aria-label": scrollLabel,
 		tabIndex: named && overflows ? 0 : void 0,
 		...wrapperProps,
 		ref: setRef,
-		className: cn("group/table relative w-full overflow-auto", containerClassName, containerPropsClassName),
+		className: cn(containerClasses, containerClassName, containerPropsClassName),
 		children: /* @__PURE__ */ jsx("table", {
+			ref,
 			"data-slot": "table",
 			className: cn("w-full caption-bottom text-[13px]", className),
 			...props
 		})
-	});
-}
-function TableHeader({ className, ...props }) {
+	}), hint && /* @__PURE__ */ jsxs("p", {
+		"data-slot": "table-overflow-hint",
+		"aria-hidden": true,
+		className: "hidden w-full px-3 py-1.5 text-right text-[11.5px] text-muted-foreground pointer-coarse:block",
+		children: [overflowHint, " →"]
+	})] });
+});
+var TableHeader = React.forwardRef(function TableHeader({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("thead", {
+		ref,
 		"data-slot": "table-header",
 		className: cn("bg-surface-muted [&_tr]:border-b group-data-[sticky]/table:sticky group-data-[sticky]/table:top-0 group-data-[sticky]/table:z-10", className),
 		...props
 	});
-}
-function TableBody({ className, ...props }) {
+});
+var TableBody = React.forwardRef(function TableBody({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("tbody", {
+		ref,
 		"data-slot": "table-body",
 		className: cn("[&_tr:last-child]:border-0", className),
 		...props
 	});
-}
-function TableFooter({ className, ...props }) {
+});
+var TableFooter = React.forwardRef(function TableFooter({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("tfoot", {
+		ref,
 		"data-slot": "table-footer",
 		className: cn("border-t bg-surface-muted font-medium [&>tr]:last:border-b-0", className),
 		...props
 	});
-}
-/** Set `data-state="selected"` (or `selected`) to mark a chosen row. */
-function TableRow({ className, selected, ...props }) {
+});
+/** Set `selected` to mark a chosen row: a soft fill and a brand bar on its left edge. */
+var TableRow = React.forwardRef(function TableRow({ className, selected, ...props }, ref) {
 	return /* @__PURE__ */ jsx("tr", {
+		ref,
 		"data-slot": "table-row",
 		"data-state": selected ? "selected" : void 0,
 		"aria-selected": selected || void 0,
 		className: cn("border-b transition-colors hover:bg-muted/60 data-[state=selected]:bg-brand-soft/60 data-[state=selected]:shadow-[inset_2px_0_0_var(--color-brand)]", className),
 		...props
 	});
-}
+});
 /** `numeric` right-aligns with tabular figures, for counts, money and durations. */
-function TableHead({ className, numeric, ...props }) {
+var TableHead = React.forwardRef(function TableHead({ className, numeric, ...props }, ref) {
 	return /* @__PURE__ */ jsx("th", {
+		ref,
 		"data-slot": "table-head",
-		className: cn("h-9 px-3 text-left align-middle text-[11px] font-semibold tracking-[0.06em] whitespace-nowrap text-muted-foreground uppercase group-data-[density=compact]/table:h-8 [&:has([role=checkbox])]:w-10 [&:has([role=checkbox])]:pr-0", numeric && "text-right tabular-nums", className),
+		className: cn("h-9 px-3 text-left align-middle text-[11px] font-semibold tracking-[0.06em] whitespace-nowrap text-muted-foreground uppercase group-data-[density=compact]/table:h-8 [&:has([role=checkbox])]:w-10 [&:has([role=checkbox])]:pr-0", "first:group-data-[pinned]/table:sticky first:group-data-[pinned]/table:left-0 first:group-data-[pinned]/table:z-[2] first:group-data-[pinned]/table:bg-surface-muted first:group-data-[pinned]/table:shadow-[inset_-1px_0_0_var(--border)]", numeric && "text-right tabular-nums", className),
 		...props
 	});
-}
-function TableCell({ className, numeric, ...props }) {
+});
+var TableCell = React.forwardRef(function TableCell({ className, numeric, ...props }, ref) {
 	return /* @__PURE__ */ jsx("td", {
+		ref,
 		"data-slot": "table-cell",
-		className: cn("h-10 px-3 align-middle whitespace-nowrap group-data-[density=compact]/table:h-8 [&:has([role=checkbox])]:pr-0", numeric && "text-right font-mono text-[12.5px] tabular-nums", className),
+		className: cn("h-10 px-3 align-middle whitespace-nowrap group-data-[density=compact]/table:h-8 pointer-coarse:group-data-[density=default]/table:h-11 [&:has([role=checkbox])]:pr-0", "first:group-data-[pinned]/table:sticky first:group-data-[pinned]/table:left-0 first:group-data-[pinned]/table:z-[1] first:group-data-[pinned]/table:bg-surface first:group-data-[pinned]/table:shadow-[inset_-1px_0_0_var(--border)] first:group-data-[pinned]/table:max-w-[min(11rem,45vw)] first:group-data-[pinned]/table:whitespace-normal", numeric && "text-right font-mono text-[12.5px] tabular-nums", className),
 		...props
 	});
-}
-function TableCaption({ className, ...props }) {
+});
+var TableCaption = React.forwardRef(function TableCaption({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("caption", {
+		ref,
 		"data-slot": "table-caption",
 		className: cn("mt-3 text-xs text-muted-foreground", className),
 		...props
 	});
-}
+});
 //#endregion
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, overflowState };
 
 //# sourceMappingURL=table.js.map

package/dist/components/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","names":[],"sources":["../../src/components/table.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nexport interface TableProps extends React.ComponentProps<'table'> {\n  /** `compact` for dense ops screens (32px rows), `default` 40px. */\n  density?: 'compact' | 'default';\n  /** Keep the header visible while the container scrolls; give it a height. */\n  stickyHeader?: boolean;\n  containerClassName?: string;\n  /**\n   * Props for the scrolling wrapper (`tabIndex`, `role`, `aria-*`, `ref`, ...).\n   * Anything set here wins over what `scrollLabel` sets.\n   */\n  containerProps?: React.ComponentProps<'div'>;\n  /**\n   * Accessible name for the scroll container. With it (or an `aria-label` /\n   * `aria-labelledby` in `containerProps`) the wrapper becomes a named region\n   * that joins the tab order while its content overflows, so keyboard users\n   * can scroll it (WCAG 2.1.1, axe scrollable-region-focusable).\n   */\n  scrollLabel?: string;\n}\n\n/** True while the element's content is larger than its box. */\nfunction useOverflows(ref: React.RefObject<HTMLElement | null>, enabled: boolean): boolean {\n  const [overflows, setOverflows] = React.useState(false);\n  React.useEffect(() => {\n    const el = ref.current;\n    if (!enabled || !el) return;\n    const update = () =>\n      setOverflows(el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight);\n    update();\n    if (typeof ResizeObserver === 'undefined') return;\n    const ro = new ResizeObserver(update);\n    ro.observe(el);\n    if (el.firstElementChild) ro.observe(el.firstElementChild);\n    return () => ro.disconnect();\n  }, [ref, enabled]);\n  return overflows;\n}\n\nfunction assignRef<T>(ref: React.Ref<T> | undefined, node: T | null) {\n  if (typeof ref === 'function') ref(node);\n  else if (ref) ref.current = node;\n}\n\nfunction Table({\n  className,\n  density = 'default',\n  stickyHeader = false,\n  containerClassName,\n  containerProps,\n  scrollLabel,\n  ...props\n}: TableProps) {\n  const {\n    className: containerPropsClassName,\n    ref: containerRef,\n    ...wrapperProps\n  } = containerProps ?? {};\n  const local = React.useRef<HTMLDivElement | null>(null);\n  const setRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      local.current = node;\n      assignRef(containerRef, node);\n    },\n    [containerRef],\n  );\n  const named = Boolean(\n    scrollLabel || wrapperProps['aria-label'] || wrapperProps['aria-labelledby'],\n  );\n  const overflows = useOverflows(local, named);\n  return (\n    <div\n      data-slot=\"table-container\"\n      data-density={density}\n      data-sticky={stickyHeader || undefined}\n      role={named ? 'region' : undefined}\n      aria-label={scrollLabel}\n      // A scrollable region must be reachable by keyboard; only while it scrolls.\n      tabIndex={named && overflows ? 0 : undefined}\n      {...wrapperProps}\n      ref={setRef}\n      className={cn(\n        'group/table relative w-full overflow-auto',\n        containerClassName,\n        containerPropsClassName,\n      )}\n    >\n      <table\n        data-slot=\"table\"\n        className={cn('w-full caption-bottom text-[13px]', className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\n        'bg-surface-muted [&_tr]:border-b group-data-[sticky]/table:sticky group-data-[sticky]/table:top-0 group-data-[sticky]/table:z-10',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn('[&_tr:last-child]:border-0', className)}\n      {...props}\n    />\n  );\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn('border-t bg-surface-muted font-medium [&>tr]:last:border-b-0', className)}\n      {...props}\n    />\n  );\n}\n\n/** Set `data-state=\"selected\"` (or `selected`) to mark a chosen row. */\nfunction TableRow({\n  className,\n  selected,\n  ...props\n}: React.ComponentProps<'tr'> & { selected?: boolean }) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      data-state={selected ? 'selected' : undefined}\n      aria-selected={selected || undefined}\n      className={cn(\n        'border-b transition-colors hover:bg-muted/60 data-[state=selected]:bg-brand-soft/60 data-[state=selected]:shadow-[inset_2px_0_0_var(--color-brand)]',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** `numeric` right-aligns with tabular figures, for counts, money and durations. */\nfunction TableHead({\n  className,\n  numeric,\n  ...props\n}: React.ComponentProps<'th'> & { numeric?: boolean }) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        'h-9 px-3 text-left align-middle text-[11px] font-semibold tracking-[0.06em] whitespace-nowrap text-muted-foreground uppercase group-data-[density=compact]/table:h-8 [&:has([role=checkbox])]:w-10 [&:has([role=checkbox])]:pr-0',\n        numeric && 'text-right tabular-nums',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TableCell({\n  className,\n  numeric,\n  ...props\n}: React.ComponentProps<'td'> & { numeric?: boolean }) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        'h-10 px-3 align-middle whitespace-nowrap group-data-[density=compact]/table:h-8 [&:has([role=checkbox])]:pr-0',\n        numeric && 'text-right font-mono text-[12.5px] tabular-nums',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn('mt-3 text-xs text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };\n"],"mappings":"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"}
+{"version":3,"file":"table.js","names":["_Fragment"],"sources":["../../src/components/table.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn, focusRingClasses } from '../lib/utils';\n\nexport interface TableProps extends React.ComponentProps<'table'> {\n  /** `compact` for dense ops screens (32px rows), `default` 40px. */\n  density?: 'compact' | 'default';\n  /** Keep the header visible while the container scrolls; give it a height. */\n  stickyHeader?: boolean;\n  containerClassName?: string;\n  /**\n   * Props for the scrolling wrapper (`tabIndex`, `role`, `aria-*`, `ref`, ...).\n   * Anything set here wins over what `scrollLabel` sets.\n   */\n  containerProps?: React.ComponentProps<'div'>;\n  /**\n   * Accessible name for the scroll container. With it (or an `aria-label` /\n   * `aria-labelledby` in `containerProps`) the wrapper becomes a named region\n   * that joins the tab order while its content overflows, so keyboard users\n   * can scroll it (WCAG 2.1.1, axe scrollable-region-focusable).\n   */\n  scrollLabel?: string;\n  /**\n   * Keep the first column in view while the table scrolls sideways (a name\n   * column beside numbers). The pinned cells take the surface colour.\n   */\n  pinFirstColumn?: boolean;\n  /**\n   * The line under a table that scrolls sideways, until it is scrolled to the\n   * end. Shown on touch screens only (a mouse has a scrollbar). `false`\n   * turns it off.\n   */\n  overflowHint?: React.ReactNode | false;\n}\n\n/** How a box overflows sideways: more to the `end`, more to the `start`, or `both`. */\nexport function overflowState(el: {\n  scrollLeft: number;\n  scrollWidth: number;\n  clientWidth: number;\n}): 'start' | 'end' | 'both' | undefined {\n  const max = el.scrollWidth - el.clientWidth;\n  if (max <= 1) return undefined;\n  if (el.scrollLeft <= 1) return 'end';\n  if (el.scrollLeft >= max - 1) return 'start';\n  return 'both';\n}\n\n/**\n * Tracks whether the element's content is larger than its box, and which way\n * it scrolls sideways. Nothing is measured on the server or in jsdom.\n */\nfunction useOverflow(ref: React.RefObject<HTMLElement | null>) {\n  const [overflows, setOverflows] = React.useState(false);\n  const [horizontal, setHorizontal] = React.useState<ReturnType<typeof overflowState>>();\n  React.useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const update = () => {\n      setOverflows(el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight);\n      setHorizontal(overflowState(el));\n    };\n    update();\n    el.addEventListener('scroll', update, { passive: true });\n    if (typeof ResizeObserver === 'undefined')\n      return () => el.removeEventListener('scroll', update);\n    const ro = new ResizeObserver(update);\n    ro.observe(el);\n    if (el.firstElementChild) ro.observe(el.firstElementChild);\n    return () => {\n      ro.disconnect();\n      el.removeEventListener('scroll', update);\n    };\n  }, [ref]);\n  return { overflows, horizontal };\n}\n\nfunction assignRef<T>(ref: React.Ref<T> | undefined, node: T | null) {\n  if (typeof ref === 'function') ref(node);\n  else if (ref) ref.current = node;\n}\n\n/**\n * The scroll container fades on the side with more to see (never over a\n * pinned column), shows its focus outline inside the box (the frame around\n * it would clip an offset one), and drops the fade while focused so the\n * whole outline shows.\n */\nconst containerClasses = cn(\n  'group/table relative w-full overflow-auto',\n  'data-[overflow=end]:[mask-image:linear-gradient(to_right,#000_calc(100%-2rem),transparent)]',\n  'data-[overflow=start]:[mask-image:linear-gradient(to_left,#000_calc(100%-2rem),transparent)]',\n  'data-[overflow=both]:[mask-image:linear-gradient(to_right,transparent,#000_2rem,#000_calc(100%-2rem),transparent)]',\n  'data-[pinned]:data-[overflow=start]:[mask-image:none] data-[pinned]:data-[overflow=both]:[mask-image:linear-gradient(to_right,#000_calc(100%-2rem),transparent)]',\n  focusRingClasses,\n  'focus-visible:outline-offset-[-2px] focus-visible:[mask-image:none]',\n);\n\nconst Table = React.forwardRef<HTMLTableElement, TableProps>(function Table(\n  {\n    className,\n    density = 'default',\n    stickyHeader = false,\n    containerClassName,\n    containerProps,\n    scrollLabel,\n    pinFirstColumn = false,\n    overflowHint = 'Swipe for more',\n    ...props\n  },\n  ref,\n) {\n  const {\n    className: containerPropsClassName,\n    ref: containerRef,\n    ...wrapperProps\n  } = containerProps ?? {};\n  const local = React.useRef<HTMLDivElement | null>(null);\n  const setRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      local.current = node;\n      assignRef(containerRef, node);\n    },\n    [containerRef],\n  );\n  const named = Boolean(\n    scrollLabel || wrapperProps['aria-label'] || wrapperProps['aria-labelledby'],\n  );\n  const { overflows, horizontal } = useOverflow(local);\n  const hint = overflowHint !== false && (horizontal === 'end' || horizontal === 'both');\n  return (\n    <>\n      <div\n        data-slot=\"table-container\"\n        data-density={density}\n        data-sticky={stickyHeader || undefined}\n        data-pinned={pinFirstColumn || undefined}\n        data-overflow={horizontal}\n        role={named ? 'region' : undefined}\n        aria-label={scrollLabel}\n        // A scrollable region must be reachable by keyboard; only while it scrolls.\n        tabIndex={named && overflows ? 0 : undefined}\n        {...wrapperProps}\n        ref={setRef}\n        className={cn(containerClasses, containerClassName, containerPropsClassName)}\n      >\n        <table\n          ref={ref}\n          data-slot=\"table\"\n          className={cn('w-full caption-bottom text-[13px]', className)}\n          {...props}\n        />\n      </div>\n      {hint && (\n        <p\n          data-slot=\"table-overflow-hint\"\n          aria-hidden\n          className=\"hidden w-full px-3 py-1.5 text-right text-[11.5px] text-muted-foreground pointer-coarse:block\"\n        >\n          {overflowHint} →\n        </p>\n      )}\n    </>\n  );\n});\n\nconst TableHeader = React.forwardRef<HTMLTableSectionElement, React.ComponentProps<'thead'>>(\n  function TableHeader({ className, ...props }, ref) {\n    return (\n      <thead\n        ref={ref}\n        data-slot=\"table-header\"\n        className={cn(\n          'bg-surface-muted [&_tr]:border-b group-data-[sticky]/table:sticky group-data-[sticky]/table:top-0 group-data-[sticky]/table:z-10',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nconst TableBody = React.forwardRef<HTMLTableSectionElement, React.ComponentProps<'tbody'>>(\n  function TableBody({ className, ...props }, ref) {\n    return (\n      <tbody\n        ref={ref}\n        data-slot=\"table-body\"\n        className={cn('[&_tr:last-child]:border-0', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nconst TableFooter = React.forwardRef<HTMLTableSectionElement, React.ComponentProps<'tfoot'>>(\n  function TableFooter({ className, ...props }, ref) {\n    return (\n      <tfoot\n        ref={ref}\n        data-slot=\"table-footer\"\n        className={cn('border-t bg-surface-muted font-medium [&>tr]:last:border-b-0', className)}\n        {...props}\n      />\n    );\n  },\n);\n\n/** Set `selected` to mark a chosen row: a soft fill and a brand bar on its left edge. */\nconst TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.ComponentProps<'tr'> & { selected?: boolean }\n>(function TableRow({ className, selected, ...props }, ref) {\n  return (\n    <tr\n      ref={ref}\n      data-slot=\"table-row\"\n      data-state={selected ? 'selected' : undefined}\n      aria-selected={selected || undefined}\n      className={cn(\n        'border-b transition-colors hover:bg-muted/60 data-[state=selected]:bg-brand-soft/60 data-[state=selected]:shadow-[inset_2px_0_0_var(--color-brand)]',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\n// Pinned first cells (Table `pinFirstColumn`): sticky, with the surface\n// behind them so scrolled columns pass underneath, and a hairline on their\n// right edge.\n\n/** `numeric` right-aligns with tabular figures, for counts, money and durations. */\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ComponentProps<'th'> & { numeric?: boolean }\n>(function TableHead({ className, numeric, ...props }, ref) {\n  return (\n    <th\n      ref={ref}\n      data-slot=\"table-head\"\n      className={cn(\n        'h-9 px-3 text-left align-middle text-[11px] font-semibold tracking-[0.06em] whitespace-nowrap text-muted-foreground uppercase group-data-[density=compact]/table:h-8 [&:has([role=checkbox])]:w-10 [&:has([role=checkbox])]:pr-0',\n        'first:group-data-[pinned]/table:sticky first:group-data-[pinned]/table:left-0 first:group-data-[pinned]/table:z-[2] first:group-data-[pinned]/table:bg-surface-muted first:group-data-[pinned]/table:shadow-[inset_-1px_0_0_var(--border)]',\n        numeric && 'text-right tabular-nums',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.ComponentProps<'td'> & { numeric?: boolean }\n>(function TableCell({ className, numeric, ...props }, ref) {\n  return (\n    <td\n      ref={ref}\n      data-slot=\"table-cell\"\n      className={cn(\n        'h-10 px-3 align-middle whitespace-nowrap group-data-[density=compact]/table:h-8 pointer-coarse:group-data-[density=default]/table:h-11 [&:has([role=checkbox])]:pr-0',\n        'first:group-data-[pinned]/table:sticky first:group-data-[pinned]/table:left-0 first:group-data-[pinned]/table:z-[1] first:group-data-[pinned]/table:bg-surface first:group-data-[pinned]/table:shadow-[inset_-1px_0_0_var(--border)] first:group-data-[pinned]/table:max-w-[min(11rem,45vw)] first:group-data-[pinned]/table:whitespace-normal',\n        numeric && 'text-right font-mono text-[12.5px] tabular-nums',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nconst TableCaption = React.forwardRef<HTMLTableCaptionElement, React.ComponentProps<'caption'>>(\n  function TableCaption({ className, ...props }, ref) {\n    return (\n      <caption\n        ref={ref}\n        data-slot=\"table-caption\"\n        className={cn('mt-3 text-xs text-muted-foreground', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nexport { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };\n"],"mappings":"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"}

package/dist/components/tabs.d.ts

@@ -1,7 +1,12 @@
-import { Tabs as TabsPrimitive } from 'radix-ui';
 import * as React from 'react';
-declare function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
-declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): React.JSX.Element;
-declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;
-declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): React.JSX.Element;
+import * as TabsPrimitive from '../primitives/vendor/radix/react-tabs';
+declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A 36px strip with a 10px radius; a strip wider than its container scrolls
+ * sideways rather than pushing the layout.
+ */
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** A 28px tab with a 6px radius (the strip's 10px less its 4px inset); 44px tall to a touch. */
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/components/tabs.js

@@ -1,37 +1,47 @@
-import { cn } from "../lib/utils.js";
-import { Tabs } from "radix-ui";
-import "react";
+"use client";
+import { cn, focusRingClasses, touchTargetRowClasses } from "../lib/utils.js";
+import { Content, List, Root, Trigger } from "../primitives/vendor/radix/react-tabs/tabs.js";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/tabs.tsx
-function Tabs$1({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Tabs.Root, {
+var Tabs = React.forwardRef(function Tabs({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Root, {
+		ref,
 		"data-slot": "tabs",
 		className: cn("flex flex-col gap-3", className),
 		...props
 	});
-}
-function TabsList({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Tabs.List, {
+});
+/**
+* A 36px strip with a 10px radius; a strip wider than its container scrolls
+* sideways rather than pushing the layout.
+*/
+var TabsList = React.forwardRef(function TabsList({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(List, {
+		ref,
 		"data-slot": "tabs-list",
-		className: cn("inline-flex h-9 w-fit items-center gap-0.5 rounded-md border border-border bg-surface-muted p-1 text-muted-foreground", className),
+		className: cn("inline-flex h-9 w-fit max-w-full items-center gap-0.5 overflow-x-auto rounded-md border border-border bg-surface-muted p-1 text-muted-foreground [scrollbar-width:none]", className),
 		...props
 	});
-}
-function TabsTrigger({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Tabs.Trigger, {
+});
+/** A 28px tab with a 6px radius (the strip's 10px less its 4px inset); 44px tall to a touch. */
+var TabsTrigger = React.forwardRef(function TabsTrigger({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Trigger, {
+		ref,
 		"data-slot": "tabs-trigger",
-		className: cn("inline-flex h-7 min-w-0 items-center justify-center gap-1.5 rounded-sm px-2.5 text-[13px] font-semibold whitespace-nowrap outline-none transition-[background-color,color,box-shadow] focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-surface data-[state=active]:text-foreground data-[state=active]:shadow-xs hover:text-foreground [&_svg]:size-3.5", className),
+		className: cn("inline-flex h-7 min-w-0 shrink-0 items-center justify-center gap-1.5 rounded-xs px-2.5 text-[13px] font-semibold whitespace-nowrap transition-[background-color,color,box-shadow] disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-surface data-[state=active]:text-foreground data-[state=active]:shadow-xs hover:text-foreground [&_svg]:size-4", focusRingClasses, touchTargetRowClasses, className),
 		...props
 	});
-}
-function TabsContent({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Tabs.Content, {
+});
+var TabsContent = React.forwardRef(function TabsContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Content, {
+		ref,
 		"data-slot": "tabs-content",
-		className: cn("min-w-0 flex-1 outline-none data-[state=active]:animate-fade-in", className),
+		className: cn("min-w-0 flex-1 data-[state=active]:animate-fade-in", focusRingClasses, className),
 		...props
 	});
-}
+});
 //#endregion
-export { Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger };
+export { Tabs, TabsContent, TabsList, TabsTrigger };
 
 //# sourceMappingURL=tabs.js.map

package/dist/components/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":["Tabs","TabsPrimitive"],"sources":["../../src/components/tabs.tsx"],"sourcesContent":["import { Tabs as TabsPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      className={cn('flex flex-col gap-3', className)}\n      {...props}\n    />\n  );\n}\n\nfunction TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      className={cn(\n        'inline-flex h-9 w-fit items-center gap-0.5 rounded-md border border-border bg-surface-muted p-1 text-muted-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        'inline-flex h-7 min-w-0 items-center justify-center gap-1.5 rounded-sm px-2.5 text-[13px] font-semibold whitespace-nowrap outline-none transition-[background-color,color,box-shadow] focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-surface data-[state=active]:text-foreground data-[state=active]:shadow-xs hover:text-foreground [&_svg]:size-3.5',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn('min-w-0 flex-1 outline-none data-[state=active]:animate-fade-in', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Tabs, TabsContent, TabsList, TabsTrigger };\n"],"mappings":";;;;;AAKA,SAASA,OAAK,EAAE,WAAW,GAAG,SAA0D;CACtF,OACE,oBAACC,KAAc,MAAf;EACE,aAAU;EACV,WAAW,GAAG,uBAAuB,SAAS;EAC9C,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,SAAS,EAAE,WAAW,GAAG,SAA0D;CAC1F,OACE,oBAACA,KAAc,MAAf;EACE,aAAU;EACV,WAAW,GACT,yHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,KAAc,SAAf;EACE,aAAU;EACV,WAAW,GACT,saACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,KAAc,SAAf;EACE,aAAU;EACV,WAAW,GAAG,mEAAmE,SAAS;EAC1F,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"tabs.js","names":["TabsPrimitive.Root","TabsPrimitive.List","TabsPrimitive.Trigger","TabsPrimitive.Content"],"sources":["../../src/components/tabs.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn, focusRingClasses, touchTargetRowClasses } from '../lib/utils';\nimport * as TabsPrimitive from '../primitives/vendor/radix/react-tabs';\n\nconst Tabs = React.forwardRef<HTMLDivElement, React.ComponentProps<typeof TabsPrimitive.Root>>(\n  function Tabs({ className, ...props }, ref) {\n    return (\n      <TabsPrimitive.Root\n        ref={ref}\n        data-slot=\"tabs\"\n        className={cn('flex flex-col gap-3', className)}\n        {...props}\n      />\n    );\n  },\n);\n\n/**\n * A 36px strip with a 10px radius; a strip wider than its container scrolls\n * sideways rather than pushing the layout.\n */\nconst TabsList = React.forwardRef<HTMLDivElement, React.ComponentProps<typeof TabsPrimitive.List>>(\n  function TabsList({ className, ...props }, ref) {\n    return (\n      <TabsPrimitive.List\n        ref={ref}\n        data-slot=\"tabs-list\"\n        className={cn(\n          'inline-flex h-9 w-fit max-w-full items-center gap-0.5 overflow-x-auto rounded-md border border-border bg-surface-muted p-1 text-muted-foreground [scrollbar-width:none]',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\n/** A 28px tab with a 6px radius (the strip's 10px less its 4px inset); 44px tall to a touch. */\nconst TabsTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof TabsPrimitive.Trigger>\n>(function TabsTrigger({ className, ...props }, ref) {\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        'inline-flex h-7 min-w-0 shrink-0 items-center justify-center gap-1.5 rounded-xs px-2.5 text-[13px] font-semibold whitespace-nowrap transition-[background-color,color,box-shadow] disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-surface data-[state=active]:text-foreground data-[state=active]:shadow-xs hover:text-foreground [&_svg]:size-4',\n        focusRingClasses,\n        touchTargetRowClasses,\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nconst TabsContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof TabsPrimitive.Content>\n>(function TabsContent({ className, ...props }, ref) {\n  return (\n    <TabsPrimitive.Content\n      ref={ref}\n      data-slot=\"tabs-content\"\n      className={cn(\n        'min-w-0 flex-1 data-[state=active]:animate-fade-in',\n        focusRingClasses,\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nexport { Tabs, TabsContent, TabsList, TabsTrigger };\n"],"mappings":";;;;;;AAKA,IAAM,OAAO,MAAM,WACjB,SAAS,KAAK,EAAE,WAAW,GAAG,SAAS,KAAK;CAC1C,OACE,oBAACA,MAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,uBAAuB,SAAS;EAC9C,GAAI;CACL,CAAA;AAEL,CACF;;;;;AAMA,IAAM,WAAW,MAAM,WACrB,SAAS,SAAS,EAAE,WAAW,GAAG,SAAS,KAAK;CAC9C,OACE,oBAACC,MAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,2KACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;;AAGA,IAAM,cAAc,MAAM,WAGxB,SAAS,YAAY,EAAE,WAAW,GAAG,SAAS,KAAK;CACnD,OACE,oBAACC,SAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,4WACA,kBACA,uBACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,cAAc,MAAM,WAGxB,SAAS,YAAY,EAAE,WAAW,GAAG,SAAS,KAAK;CACnD,OACE,oBAACC,SAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,sDACA,kBACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}

package/dist/components/textarea.d.ts

@@ -1,3 +1,8 @@
 import * as React from 'react';
-declare const Textarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+import { type FieldWidth } from './input';
+export interface TextareaProps extends React.ComponentProps<'textarea'> {
+    /** How wide the field is from 640px up; full width on phones. */
+    width?: FieldWidth;
+}
+declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 export { Textarea };

package/dist/components/textarea.js

@@ -1,13 +1,14 @@
+"use client";
 import { cn } from "../lib/utils.js";
-import { fieldClasses } from "./input.js";
+import { fieldClasses, fieldWidthClasses } from "./input.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/textarea.tsx
-var Textarea = React.forwardRef(function Textarea({ className, ...props }, ref) {
+var Textarea = React.forwardRef(function Textarea({ className, width, ...props }, ref) {
 	return /* @__PURE__ */ jsx("textarea", {
 		ref,
 		"data-slot": "textarea",
-		className: cn(fieldClasses, "min-h-24 resize-y py-2.5 leading-5", className),
+		className: cn(fieldClasses, "min-h-24 resize-y py-2.5 leading-5", width && fieldWidthClasses[width], className),
 		...props
 	});
 });

package/dist/components/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":[],"sources":["../../src/components/textarea.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { fieldClasses } from './input';\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<'textarea'>>(\n  function Textarea({ className, ...props }: React.ComponentProps<'textarea'>, ref) {\n    return (\n      <textarea\n        ref={ref}\n        data-slot=\"textarea\"\n        className={cn(fieldClasses, 'min-h-24 resize-y py-2.5 leading-5', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nexport { Textarea };\n"],"mappings":";;;;;AAMA,IAAM,WAAW,MAAM,WACrB,SAAS,SAAS,EAAE,WAAW,GAAG,SAA2C,KAAK;CAChF,OACE,oBAAC,YAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,cAAc,sCAAsC,SAAS;EAC3E,GAAI;CACL,CAAA;AAEL,CACF"}
+{"version":3,"file":"textarea.js","names":[],"sources":["../../src/components/textarea.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { fieldClasses, type FieldWidth, fieldWidthClasses } from './input';\n\nexport interface TextareaProps extends React.ComponentProps<'textarea'> {\n  /** How wide the field is from 640px up; full width on phones. */\n  width?: FieldWidth;\n}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n  { className, width, ...props }: TextareaProps,\n  ref,\n) {\n  return (\n    <textarea\n      ref={ref}\n      data-slot=\"textarea\"\n      className={cn(\n        fieldClasses,\n        'min-h-24 resize-y py-2.5 leading-5',\n        width && fieldWidthClasses[width],\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nexport { Textarea };\n"],"mappings":";;;;;;AAWA,IAAM,WAAW,MAAM,WAA+C,SAAS,SAC7E,EAAE,WAAW,OAAO,GAAG,SACvB,KACA;CACA,OACE,oBAAC,YAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,cACA,sCACA,SAAS,kBAAkB,QAC3B,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}