@burtson-labs/ui 0.14.0 → 0.14.1

package/dist/components/table.js

@@ -1,29 +1,58 @@
 "use client";
-import { cn } from "../lib/utils.js";
+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) => {
@@ -31,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 * as React from 'react';
 import * as TabsPrimitive from '../primitives/vendor/radix/react-tabs';
-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;
+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,46 @@
 "use client";
-import { cn } from "../lib/utils.js";
+import { cn, focusRingClasses, touchTargetRowClasses } from "../lib/utils.js";
 import { Content, List, Root, Trigger } from "../primitives/vendor/radix/react-tabs/tabs.js";
-import "react";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/tabs.tsx
-function Tabs({ className, ...props }) {
+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 }) {
+});
+/**
+* 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 }) {
+});
+/** 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 }) {
+});
+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, TabsContent, TabsList, TabsTrigger };
 

package/dist/components/tabs.js.map

@@ -1 +1 @@
-{"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 } from '../lib/utils';\nimport * as TabsPrimitive from '../primitives/vendor/radix/react-tabs';\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,SAAS,KAAK,EAAE,WAAW,GAAG,SAA0D;CACtF,OACE,oBAACA,MAAD;EACE,aAAU;EACV,WAAW,GAAG,uBAAuB,SAAS;EAC9C,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,SAAS,EAAE,WAAW,GAAG,SAA0D;CAC1F,OACE,oBAACC,MAAD;EACE,aAAU;EACV,WAAW,GACT,yHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACC,SAAD;EACE,aAAU;EACV,WAAW,GACT,saACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACC,SAAD;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,14 +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"}

package/dist/components/toast.d.ts

@@ -7,14 +7,18 @@ import * as ToastPrimitive from '../primitives/vendor/radix/react-toast';
  * `open` state; Radix handles timing, swipe-to-dismiss and the live region.
  */
 declare const ToastProvider: React.FC<ToastPrimitive.ToastProviderProps>;
-declare function ToastViewport({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Viewport>): React.JSX.Element;
+/** Bottom right, above every overlay (z 100), full width on phones. */
+declare const ToastViewport: React.ForwardRefExoticComponent<Omit<ToastPrimitive.ToastViewportProps & React.RefAttributes<HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
 declare const toastVariants: (props?: ({
     variant?: "destructive" | "success" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Toast({ className, variant, ...props }: React.ComponentProps<typeof ToastPrimitive.Root> & VariantProps<typeof toastVariants>): React.JSX.Element;
-declare function ToastTitle({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Title>): React.JSX.Element;
-declare function ToastDescription({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Description>): React.JSX.Element;
+export interface ToastProps extends React.ComponentProps<typeof ToastPrimitive.Root>, VariantProps<typeof toastVariants> {
+}
+declare const Toast: React.ForwardRefExoticComponent<Omit<ToastProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const ToastTitle: React.ForwardRefExoticComponent<Omit<ToastPrimitive.ToastTitleProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ToastDescription: React.ForwardRefExoticComponent<Omit<ToastPrimitive.ToastDescriptionProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /** A button inside the toast; `altText` tells screen readers how to do it without the toast. */
-declare function ToastAction({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Action>): React.JSX.Element;
-declare function ToastClose({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Close>): React.JSX.Element;
+declare const ToastAction: React.ForwardRefExoticComponent<Omit<ToastPrimitive.ToastActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/** The dismiss X: 24px drawn, 44px to a touch. */
+declare const ToastClose: React.ForwardRefExoticComponent<Omit<ToastPrimitive.ToastCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, toastVariants, ToastViewport, };

package/dist/components/toast.js

@@ -1,7 +1,7 @@
 "use client";
-import { cn } from "../lib/utils.js";
+import { cn, focusRingClasses, touchTargetClasses } from "../lib/utils.js";
 import { Action, Close, Description, Provider, Root, Title, Viewport } from "../primitives/vendor/radix/react-toast/toast.js";
-import "react";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import X from "@burtson-labs/icons/react/x";
@@ -12,14 +12,16 @@ import X from "@burtson-labs/icons/react/x";
 * `open` state; Radix handles timing, swipe-to-dismiss and the live region.
 */
 var ToastProvider = Provider;
-function ToastViewport({ className, ...props }) {
+/** Bottom right, above every overlay (z 100), full width on phones. */
+var ToastViewport = React.forwardRef(function ToastViewport({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Viewport, {
+		ref,
 		"data-slot": "toast-viewport",
-		className: cn("fixed right-0 bottom-0 z-[100] flex max-h-dvh w-full flex-col-reverse gap-2 p-4 outline-none sm:max-w-sm", className),
+		className: cn("fixed right-0 bottom-0 z-[100] flex max-h-dvh w-full flex-col-reverse gap-2 p-4 pb-[max(1rem,env(safe-area-inset-bottom))] outline-none sm:max-w-sm", className),
 		...props
 	});
-}
-var toastVariants = cva("group pointer-events-auto relative grid w-full grid-cols-[1fr_auto] items-start gap-x-3 gap-y-1 overflow-hidden rounded-lg border p-4 pr-10 text-sm shadow-[0_16px_48px_rgb(0_0_0_/_0.18)] [--bl-ty:12px] [--bl-scale:0.98] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none", {
+});
+var toastVariants = cva("group pointer-events-auto relative grid w-full grid-cols-[1fr_auto] items-start gap-x-3 gap-y-1 overflow-hidden rounded-lg border p-4 pr-10 text-sm shadow-lg [--bl-ty:12px] [--bl-scale:0.98] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none", {
 	variants: { variant: {
 		default: "border-border-strong bg-surface-raised text-foreground",
 		success: "border-success/30 bg-surface-raised text-foreground [&_[data-slot=toast-title]]:text-success",
@@ -27,44 +29,51 @@ var toastVariants = cva("group pointer-events-auto relative grid w-full grid-col
 	} },
 	defaultVariants: { variant: "default" }
 });
-function Toast({ className, variant, ...props }) {
+var Toast = React.forwardRef(function Toast({ className, variant, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Root, {
+		ref,
 		"data-slot": "toast",
+		"data-variant": variant ?? "default",
 		className: cn(toastVariants({ variant }), className),
 		...props
 	});
-}
-function ToastTitle({ className, ...props }) {
+});
+var ToastTitle = React.forwardRef(function ToastTitle({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Title, {
+		ref,
 		"data-slot": "toast-title",
 		className: cn("col-start-1 font-semibold tracking-[-0.01em]", className),
 		...props
 	});
-}
-function ToastDescription({ className, ...props }) {
+});
+var ToastDescription = React.forwardRef(function ToastDescription({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Description, {
+		ref,
 		"data-slot": "toast-description",
 		className: cn("col-start-1 text-[13px] leading-5 text-muted-foreground", className),
 		...props
 	});
-}
+});
 /** A button inside the toast; `altText` tells screen readers how to do it without the toast. */
-function ToastAction({ className, ...props }) {
+var ToastAction = React.forwardRef(function ToastAction({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Action, {
+		ref,
 		"data-slot": "toast-action",
-		className: cn("col-start-2 row-span-2 row-start-1 inline-flex h-8 shrink-0 items-center justify-center self-center rounded-md border border-border-strong bg-surface px-3 text-[13px] font-semibold transition-colors outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/20", className),
+		className: cn("col-start-2 row-span-2 row-start-1 inline-flex h-8 shrink-0 items-center justify-center self-center rounded-md border border-border-strong bg-surface px-3 text-[13px] font-semibold transition-colors hover:bg-muted pointer-coarse:min-h-11", focusRingClasses, className),
 		...props
 	});
-}
-function ToastClose({ className, ...props }) {
+});
+/** The dismiss X: 24px drawn, 44px to a touch. */
+var ToastClose = React.forwardRef(function ToastClose({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Close, {
+		ref,
 		"data-slot": "toast-close",
 		"aria-label": "Dismiss",
-		className: cn("absolute top-3 right-3 grid size-6 place-items-center rounded-sm text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20 [&_svg]:size-3.5", className),
+		className: cn("absolute top-3 right-3 grid size-6 place-items-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground [&_svg]:size-4", focusRingClasses, touchTargetClasses, "absolute", className),
 		...props,
 		children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
 	});
-}
+});
 //#endregion
 export { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, toastVariants };
 

package/dist/components/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","names":["ToastPrimitive.Provider","ToastPrimitive.Viewport","ToastPrimitive.Root","ToastPrimitive.Title","ToastPrimitive.Description","ToastPrimitive.Action","ToastPrimitive.Close"],"sources":["../../src/components/toast.tsx"],"sourcesContent":["import X from '@burtson-labs/icons/react/x';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as ToastPrimitive from '../primitives/vendor/radix/react-toast';\n\n/**\n * Brief, non-blocking notices (\"Message sent\", \"Update available\"). Put one\n * `ToastProvider` + `ToastViewport` near the root and render `Toast`s with\n * `open` state; Radix handles timing, swipe-to-dismiss and the live region.\n */\nconst ToastProvider = ToastPrimitive.Provider;\n\nfunction ToastViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof ToastPrimitive.Viewport>) {\n  return (\n    <ToastPrimitive.Viewport\n      data-slot=\"toast-viewport\"\n      className={cn(\n        'fixed right-0 bottom-0 z-[100] flex max-h-dvh w-full flex-col-reverse gap-2 p-4 outline-none sm:max-w-sm',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst toastVariants = cva(\n  'group pointer-events-auto relative grid w-full grid-cols-[1fr_auto] items-start gap-x-3 gap-y-1 overflow-hidden rounded-lg border p-4 pr-10 text-sm shadow-[0_16px_48px_rgb(0_0_0_/_0.18)] [--bl-ty:12px] [--bl-scale:0.98] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none',\n  {\n    variants: {\n      variant: {\n        default: 'border-border-strong bg-surface-raised text-foreground',\n        success:\n          'border-success/30 bg-surface-raised text-foreground [&_[data-slot=toast-title]]:text-success',\n        destructive:\n          'border-destructive/30 bg-surface-raised text-foreground [&_[data-slot=toast-title]]:text-destructive',\n      },\n    },\n    defaultVariants: { variant: 'default' },\n  },\n);\n\nfunction Toast({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<typeof ToastPrimitive.Root> & VariantProps<typeof toastVariants>) {\n  return (\n    <ToastPrimitive.Root\n      data-slot=\"toast\"\n      className={cn(toastVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction ToastTitle({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Title>) {\n  return (\n    <ToastPrimitive.Title\n      data-slot=\"toast-title\"\n      className={cn('col-start-1 font-semibold tracking-[-0.01em]', className)}\n      {...props}\n    />\n  );\n}\n\nfunction ToastDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof ToastPrimitive.Description>) {\n  return (\n    <ToastPrimitive.Description\n      data-slot=\"toast-description\"\n      className={cn('col-start-1 text-[13px] leading-5 text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\n/** A button inside the toast; `altText` tells screen readers how to do it without the toast. */\nfunction ToastAction({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Action>) {\n  return (\n    <ToastPrimitive.Action\n      data-slot=\"toast-action\"\n      className={cn(\n        'col-start-2 row-span-2 row-start-1 inline-flex h-8 shrink-0 items-center justify-center self-center rounded-md border border-border-strong bg-surface px-3 text-[13px] font-semibold transition-colors outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/20',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ToastClose({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Close>) {\n  return (\n    <ToastPrimitive.Close\n      data-slot=\"toast-close\"\n      aria-label=\"Dismiss\"\n      className={cn(\n        'absolute top-3 right-3 grid size-6 place-items-center rounded-sm text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20 [&_svg]:size-3.5',\n        className,\n      )}\n      {...props}\n    >\n      <X aria-hidden />\n    </ToastPrimitive.Close>\n  );\n}\n\nexport {\n  Toast,\n  ToastAction,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  toastVariants,\n  ToastViewport,\n};\n"],"mappings":";;;;;;;;;;;;;AAYA,IAAM,gBAAgBA;AAEtB,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;CACvD,OACE,oBAACC,UAAD;EACE,aAAU;EACV,WAAW,GACT,4GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,gBAAgB,IACpB,odACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,SACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CACF;AAEA,SAAS,MAAM,EACb,WACA,SACA,GAAG,SACqF;CACxF,OACE,oBAACC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA4D;CAC9F,OACE,oBAACC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACC,aAAD;EACE,aAAU;EACV,WAAW,GAAG,2DAA2D,SAAS;EAClF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACC,QAAD;EACE,aAAU;EACV,WAAW,GACT,0RACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA4D;CAC9F,OACE,oBAACC,OAAD;EACE,aAAU;EACV,cAAW;EACX,WAAW,GACT,mOACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,GAAD,EAAG,eAAA,KAAa,CAAA;CACI,CAAA;AAE1B"}
+{"version":3,"file":"toast.js","names":["ToastPrimitive.Provider","ToastPrimitive.Viewport","ToastPrimitive.Root","ToastPrimitive.Title","ToastPrimitive.Description","ToastPrimitive.Action","ToastPrimitive.Close"],"sources":["../../src/components/toast.tsx"],"sourcesContent":["import X from '@burtson-labs/icons/react/x';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn, focusRingClasses, touchTargetClasses } from '../lib/utils';\nimport * as ToastPrimitive from '../primitives/vendor/radix/react-toast';\n\n/**\n * Brief, non-blocking notices (\"Message sent\", \"Update available\"). Put one\n * `ToastProvider` + `ToastViewport` near the root and render `Toast`s with\n * `open` state; Radix handles timing, swipe-to-dismiss and the live region.\n */\nconst ToastProvider = ToastPrimitive.Provider;\n\n/** Bottom right, above every overlay (z 100), full width on phones. */\nconst ToastViewport = React.forwardRef<\n  HTMLOListElement,\n  React.ComponentProps<typeof ToastPrimitive.Viewport>\n>(function ToastViewport({ className, ...props }, ref) {\n  return (\n    <ToastPrimitive.Viewport\n      ref={ref}\n      data-slot=\"toast-viewport\"\n      className={cn(\n        'fixed right-0 bottom-0 z-[100] flex max-h-dvh w-full flex-col-reverse gap-2 p-4 pb-[max(1rem,env(safe-area-inset-bottom))] outline-none sm:max-w-sm',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nconst toastVariants = cva(\n  'group pointer-events-auto relative grid w-full grid-cols-[1fr_auto] items-start gap-x-3 gap-y-1 overflow-hidden rounded-lg border p-4 pr-10 text-sm shadow-lg [--bl-ty:12px] [--bl-scale:0.98] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none',\n  {\n    variants: {\n      variant: {\n        default: 'border-border-strong bg-surface-raised text-foreground',\n        success:\n          'border-success/30 bg-surface-raised text-foreground [&_[data-slot=toast-title]]:text-success',\n        destructive:\n          'border-destructive/30 bg-surface-raised text-foreground [&_[data-slot=toast-title]]:text-destructive',\n      },\n    },\n    defaultVariants: { variant: 'default' },\n  },\n);\n\nexport interface ToastProps\n  extends React.ComponentProps<typeof ToastPrimitive.Root>, VariantProps<typeof toastVariants> {}\n\nconst Toast = React.forwardRef<HTMLLIElement, ToastProps>(function Toast(\n  { className, variant, ...props },\n  ref,\n) {\n  return (\n    <ToastPrimitive.Root\n      ref={ref}\n      data-slot=\"toast\"\n      data-variant={variant ?? 'default'}\n      className={cn(toastVariants({ variant }), className)}\n      {...props}\n    />\n  );\n});\n\nconst ToastTitle = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof ToastPrimitive.Title>\n>(function ToastTitle({ className, ...props }, ref) {\n  return (\n    <ToastPrimitive.Title\n      ref={ref}\n      data-slot=\"toast-title\"\n      className={cn('col-start-1 font-semibold tracking-[-0.01em]', className)}\n      {...props}\n    />\n  );\n});\n\nconst ToastDescription = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof ToastPrimitive.Description>\n>(function ToastDescription({ className, ...props }, ref) {\n  return (\n    <ToastPrimitive.Description\n      ref={ref}\n      data-slot=\"toast-description\"\n      className={cn('col-start-1 text-[13px] leading-5 text-muted-foreground', className)}\n      {...props}\n    />\n  );\n});\n\n/** A button inside the toast; `altText` tells screen readers how to do it without the toast. */\nconst ToastAction = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof ToastPrimitive.Action>\n>(function ToastAction({ className, ...props }, ref) {\n  return (\n    <ToastPrimitive.Action\n      ref={ref}\n      data-slot=\"toast-action\"\n      className={cn(\n        'col-start-2 row-span-2 row-start-1 inline-flex h-8 shrink-0 items-center justify-center self-center rounded-md border border-border-strong bg-surface px-3 text-[13px] font-semibold transition-colors hover:bg-muted pointer-coarse:min-h-11',\n        focusRingClasses,\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\n/** The dismiss X: 24px drawn, 44px to a touch. */\nconst ToastClose = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof ToastPrimitive.Close>\n>(function ToastClose({ className, ...props }, ref) {\n  return (\n    <ToastPrimitive.Close\n      ref={ref}\n      data-slot=\"toast-close\"\n      aria-label=\"Dismiss\"\n      className={cn(\n        'absolute top-3 right-3 grid size-6 place-items-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground [&_svg]:size-4',\n        focusRingClasses,\n        touchTargetClasses,\n        'absolute',\n        className,\n      )}\n      {...props}\n    >\n      <X aria-hidden />\n    </ToastPrimitive.Close>\n  );\n});\n\nexport {\n  Toast,\n  ToastAction,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  toastVariants,\n  ToastViewport,\n};\n"],"mappings":";;;;;;;;;;;;;AAYA,IAAM,gBAAgBA;;AAGtB,IAAM,gBAAgB,MAAM,WAG1B,SAAS,cAAc,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,oBAACC,UAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,uJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,gBAAgB,IACpB,ubACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,SACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CACF;AAKA,IAAM,QAAQ,MAAM,WAAsC,SAAS,MACjE,EAAE,WAAW,SAAS,GAAG,SACzB,KACA;CACA,OACE,oBAACC,MAAD;EACO;EACL,aAAU;EACV,gBAAc,WAAW;EACzB,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EACnD,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,aAAa,MAAM,WAGvB,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;CAClD,OACE,oBAACC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,mBAAmB,MAAM,WAG7B,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAS,KAAK;CACxD,OACE,oBAACC,aAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,2DAA2D,SAAS;EAClF,GAAI;CACL,CAAA;AAEL,CAAC;;AAGD,IAAM,cAAc,MAAM,WAGxB,SAAS,YAAY,EAAE,WAAW,GAAG,SAAS,KAAK;CACnD,OACE,oBAACC,QAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,iPACA,kBACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC;;AAGD,IAAM,aAAa,MAAM,WAGvB,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;CAClD,OACE,oBAACC,OAAD;EACO;EACL,aAAU;EACV,cAAW;EACX,WAAW,GACT,gKACA,kBACA,oBACA,YACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,GAAD,EAAG,eAAA,KAAa,CAAA;CACI,CAAA;AAE1B,CAAC"}

package/dist/components/toaster.d.ts

@@ -14,7 +14,9 @@ export interface ToastOptions {
 }
 /** Show a brief notice. Returns a function that closes it early. */
 declare function toast(options: ToastOptions | string): () => void;
-declare function Toaster({ className }: {
+export interface ToasterProps {
+    /** Classes for the viewport (position, width). */
     className?: string;
-}): React.JSX.Element;
+}
+declare function Toaster({ className }: ToasterProps): React.JSX.Element;
 export { toast, Toaster };

package/dist/components/toaster.js

@@ -37,8 +37,9 @@ var subscribe = (listener) => {
 	};
 };
 var snapshot = () => records;
+var serverSnapshot = () => [];
 function Toaster({ className }) {
-	const list = React.useSyncExternalStore(subscribe, snapshot, snapshot);
+	const list = React.useSyncExternalStore(subscribe, snapshot, serverSnapshot);
 	return /* @__PURE__ */ jsxs(ToastProvider, {
 		swipeDirection: "right",
 		children: [list.map((r) => /* @__PURE__ */ jsxs(Toast, {
@@ -53,7 +54,10 @@ function Toaster({ className }) {
 				r.description && /* @__PURE__ */ jsx(ToastDescription, { children: r.description }),
 				/* @__PURE__ */ jsx(ToastClose, {})
 			]
-		}, r.id)), /* @__PURE__ */ jsx(ToastViewport, { className })]
+		}, r.id)), /* @__PURE__ */ jsx(ToastViewport, {
+			"data-slot": "toaster",
+			className
+		})]
 	});
 }
 //#endregion

package/dist/components/toaster.js.map

@@ -1 +1 @@
-{"version":3,"file":"toaster.js","names":[],"sources":["../../src/components/toaster.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Toast,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  ToastViewport,\n} from './toast';\n\n/**\n * Imperative toasts: call `toast({ title, description, variant })` from\n * anywhere (event handlers, data hooks) and one mounted `<Toaster />` renders\n * them on the Toast primitives. Mount the Toaster once near the root.\n */\nexport type ToastVariant = 'default' | 'success' | 'destructive';\n\nexport interface ToastOptions {\n  title: string;\n  description?: string;\n  variant?: ToastVariant;\n  /** Milliseconds before it closes (Radix pauses on hover and focus). */\n  duration?: number;\n}\n\ninterface ToastRecord extends ToastOptions {\n  id: number;\n  open: boolean;\n}\n\nlet records: ToastRecord[] = [];\nlet nextId = 1;\nconst listeners = new Set<() => void>();\nconst emit = () => listeners.forEach((listener) => listener());\n\nfunction close(id: number) {\n  records = records.map((r) => (r.id === id ? { ...r, open: false } : r));\n  emit();\n  // Leave time for the exit animation before dropping the record.\n  setTimeout(() => {\n    records = records.filter((r) => r.id !== id);\n    emit();\n  }, 400);\n}\n\n/** Show a brief notice. Returns a function that closes it early. */\nfunction toast(options: ToastOptions | string): () => void {\n  const opts = typeof options === 'string' ? { title: options } : options;\n  const id = nextId++;\n  // Keep the stack short: the oldest go first.\n  records = [...records.slice(-3), { ...opts, id, open: true }];\n  emit();\n  return () => close(id);\n}\n\nconst subscribe = (listener: () => void) => {\n  listeners.add(listener);\n  return () => {\n    listeners.delete(listener);\n  };\n};\nconst snapshot = () => records;\n\nfunction Toaster({ className }: { className?: string }) {\n  const list = React.useSyncExternalStore(subscribe, snapshot, snapshot);\n  return (\n    <ToastProvider swipeDirection=\"right\">\n      {list.map((r) => (\n        <Toast\n          key={r.id}\n          open={r.open}\n          variant={r.variant}\n          duration={r.duration ?? (r.variant === 'destructive' ? 8000 : 4000)}\n          onOpenChange={(open) => {\n            if (!open) close(r.id);\n          }}\n        >\n          <ToastTitle>{r.title}</ToastTitle>\n          {r.description && <ToastDescription>{r.description}</ToastDescription>}\n          <ToastClose />\n        </Toast>\n      ))}\n      <ToastViewport className={className} />\n    </ToastProvider>\n  );\n}\n\nexport { toast, Toaster };\n"],"mappings":";;;;;AA+BA,IAAI,UAAyB,CAAC;AAC9B,IAAI,SAAS;AACb,IAAM,4BAAY,IAAI,IAAgB;AACtC,IAAM,aAAa,UAAU,SAAS,aAAa,SAAS,CAAC;AAE7D,SAAS,MAAM,IAAY;CACzB,UAAU,QAAQ,KAAK,MAAO,EAAE,OAAO,KAAK;EAAE,GAAG;EAAG,MAAM;CAAM,IAAI,CAAE;CACtE,KAAK;CAEL,iBAAiB;EACf,UAAU,QAAQ,QAAQ,MAAM,EAAE,OAAO,EAAE;EAC3C,KAAK;CACP,GAAG,GAAG;AACR;;AAGA,SAAS,MAAM,SAA4C;CACzD,MAAM,OAAO,OAAO,YAAY,WAAW,EAAE,OAAO,QAAQ,IAAI;CAChE,MAAM,KAAK;CAEX,UAAU,CAAC,GAAG,QAAQ,MAAM,EAAE,GAAG;EAAE,GAAG;EAAM;EAAI,MAAM;CAAK,CAAC;CAC5D,KAAK;CACL,aAAa,MAAM,EAAE;AACvB;AAEA,IAAM,aAAa,aAAyB;CAC1C,UAAU,IAAI,QAAQ;CACtB,aAAa;EACX,UAAU,OAAO,QAAQ;CAC3B;AACF;AACA,IAAM,iBAAiB;AAEvB,SAAS,QAAQ,EAAE,aAAqC;CACtD,MAAM,OAAO,MAAM,qBAAqB,WAAW,UAAU,QAAQ;CACrE,OACE,qBAAC,eAAD;EAAe,gBAAe;EAA9B,UAAA,CACG,KAAK,KAAK,MACT,qBAAC,OAAD;GAEE,MAAM,EAAE;GACR,SAAS,EAAE;GACX,UAAU,EAAE,aAAa,EAAE,YAAY,gBAAgB,MAAO;GAC9D,eAAe,SAAS;IACtB,IAAI,CAAC,MAAM,MAAM,EAAE,EAAE;GACvB;GAPF,UAAA;IASE,oBAAC,YAAD,EAAA,UAAa,EAAE,MAAkB,CAAA;IAChC,EAAE,eAAe,oBAAC,kBAAD,EAAA,UAAmB,EAAE,YAA8B,CAAA;IACrE,oBAAC,YAAD,CAAa,CAAA;GACR;EAXA,GAAA,EAAE,EAWF,CACR,GACD,oBAAC,eAAD,EAA0B,UAAY,CAAA,CACzB;;AAEnB"}
+{"version":3,"file":"toaster.js","names":[],"sources":["../../src/components/toaster.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Toast,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  ToastViewport,\n} from './toast';\n\n/**\n * Imperative toasts: call `toast({ title, description, variant })` from\n * anywhere (event handlers, data hooks) and one mounted `<Toaster />` renders\n * them on the Toast primitives. Mount the Toaster once near the root.\n */\nexport type ToastVariant = 'default' | 'success' | 'destructive';\n\nexport interface ToastOptions {\n  title: string;\n  description?: string;\n  variant?: ToastVariant;\n  /** Milliseconds before it closes (Radix pauses on hover and focus). */\n  duration?: number;\n}\n\ninterface ToastRecord extends ToastOptions {\n  id: number;\n  open: boolean;\n}\n\nlet records: ToastRecord[] = [];\nlet nextId = 1;\nconst listeners = new Set<() => void>();\nconst emit = () => listeners.forEach((listener) => listener());\n\nfunction close(id: number) {\n  records = records.map((r) => (r.id === id ? { ...r, open: false } : r));\n  emit();\n  // Leave time for the exit animation before dropping the record.\n  setTimeout(() => {\n    records = records.filter((r) => r.id !== id);\n    emit();\n  }, 400);\n}\n\n/** Show a brief notice. Returns a function that closes it early. */\nfunction toast(options: ToastOptions | string): () => void {\n  const opts = typeof options === 'string' ? { title: options } : options;\n  const id = nextId++;\n  // Keep the stack short: the oldest go first.\n  records = [...records.slice(-3), { ...opts, id, open: true }];\n  emit();\n  return () => close(id);\n}\n\nconst subscribe = (listener: () => void) => {\n  listeners.add(listener);\n  return () => {\n    listeners.delete(listener);\n  };\n};\nconst snapshot = () => records;\nconst serverSnapshot = (): ToastRecord[] => [];\n\nexport interface ToasterProps {\n  /** Classes for the viewport (position, width). */\n  className?: string;\n}\n\nfunction Toaster({ className }: ToasterProps) {\n  const list = React.useSyncExternalStore(subscribe, snapshot, serverSnapshot);\n  return (\n    <ToastProvider swipeDirection=\"right\">\n      {list.map((r) => (\n        <Toast\n          key={r.id}\n          open={r.open}\n          variant={r.variant}\n          duration={r.duration ?? (r.variant === 'destructive' ? 8000 : 4000)}\n          onOpenChange={(open) => {\n            if (!open) close(r.id);\n          }}\n        >\n          <ToastTitle>{r.title}</ToastTitle>\n          {r.description && <ToastDescription>{r.description}</ToastDescription>}\n          <ToastClose />\n        </Toast>\n      ))}\n      <ToastViewport data-slot=\"toaster\" className={className} />\n    </ToastProvider>\n  );\n}\n\nexport { toast, Toaster };\n"],"mappings":";;;;;AA+BA,IAAI,UAAyB,CAAC;AAC9B,IAAI,SAAS;AACb,IAAM,4BAAY,IAAI,IAAgB;AACtC,IAAM,aAAa,UAAU,SAAS,aAAa,SAAS,CAAC;AAE7D,SAAS,MAAM,IAAY;CACzB,UAAU,QAAQ,KAAK,MAAO,EAAE,OAAO,KAAK;EAAE,GAAG;EAAG,MAAM;CAAM,IAAI,CAAE;CACtE,KAAK;CAEL,iBAAiB;EACf,UAAU,QAAQ,QAAQ,MAAM,EAAE,OAAO,EAAE;EAC3C,KAAK;CACP,GAAG,GAAG;AACR;;AAGA,SAAS,MAAM,SAA4C;CACzD,MAAM,OAAO,OAAO,YAAY,WAAW,EAAE,OAAO,QAAQ,IAAI;CAChE,MAAM,KAAK;CAEX,UAAU,CAAC,GAAG,QAAQ,MAAM,EAAE,GAAG;EAAE,GAAG;EAAM;EAAI,MAAM;CAAK,CAAC;CAC5D,KAAK;CACL,aAAa,MAAM,EAAE;AACvB;AAEA,IAAM,aAAa,aAAyB;CAC1C,UAAU,IAAI,QAAQ;CACtB,aAAa;EACX,UAAU,OAAO,QAAQ;CAC3B;AACF;AACA,IAAM,iBAAiB;AACvB,IAAM,uBAAsC,CAAC;AAO7C,SAAS,QAAQ,EAAE,aAA2B;CAC5C,MAAM,OAAO,MAAM,qBAAqB,WAAW,UAAU,cAAc;CAC3E,OACE,qBAAC,eAAD;EAAe,gBAAe;EAA9B,UAAA,CACG,KAAK,KAAK,MACT,qBAAC,OAAD;GAEE,MAAM,EAAE;GACR,SAAS,EAAE;GACX,UAAU,EAAE,aAAa,EAAE,YAAY,gBAAgB,MAAO;GAC9D,eAAe,SAAS;IACtB,IAAI,CAAC,MAAM,MAAM,EAAE,EAAE;GACvB;GAPF,UAAA;IASE,oBAAC,YAAD,EAAA,UAAa,EAAE,MAAkB,CAAA;IAChC,EAAE,eAAe,oBAAC,kBAAD,EAAA,UAAmB,EAAE,YAA8B,CAAA;IACrE,oBAAC,YAAD,CAAa,CAAA;GACR;EAXA,GAAA,EAAE,EAWF,CACR,GACD,oBAAC,eAAD;GAAe,aAAU;GAAqB;EAAY,CAAA,CAC7C;;AAEnB"}