@optimum-intelligence/opti-ui 0.7.1 → 0.7.3

package/dist/components/stepper/Stepper.js

@@ -11,9 +11,15 @@ var defaultLabels = {
 	upcoming: "Not started",
 	error: "Failed"
 };
-/** Progress through an ordered sequence: a wizard, a checkout, a background job's phases. */
+/**
+* Progress through an ordered sequence: a wizard, a checkout, a background job's phases. Below 640px a
+* horizontal stepper turns compact: a segmented progress bar under the current step ("2/4 · Date").
+*
+* @example
+* <Stepper current={1} steps={[{ label: 'Vehicle' }, { label: 'Date' }, { label: 'Route' }, { label: 'Summary' }]} />
+*/
 function Stepper(t0) {
-	const $ = c(27);
+	const $ = c(28);
 	let className;
 	let labels;
 	let props;
@@ -65,7 +71,7 @@ function Stepper(t0) {
 	let t6;
 	if ($[13] !== current || $[14] !== steps || $[15] !== text) {
 		let t7;
-		if ($[17] !== current || $[18] !== text) {
+		if ($[17] !== current || $[18] !== steps.length || $[19] !== text) {
 			t7 = (step, index) => {
 				const status = step.status ?? (index < current ? "complete" : index === current ? "current" : "upcoming");
 				return /* @__PURE__ */ jsxs("li", {
@@ -78,27 +84,40 @@ function Stepper(t0) {
 						children: step.icon ?? (status === "complete" ? /* @__PURE__ */ jsx(CheckIcon, { strokeWidth: 3 }) : status === "error" ? /* @__PURE__ */ jsx(XIcon, { strokeWidth: 3 }) : index + 1)
 					}), /* @__PURE__ */ jsxs("span", {
 						className: "oui-stepper__text",
-						children: [/* @__PURE__ */ jsxs("span", {
-							className: "oui-stepper__label",
-							children: [step.label, /* @__PURE__ */ jsxs("span", {
-								className: "oui-visually-hidden",
+						children: [
+							/* @__PURE__ */ jsxs("span", {
+								className: "oui-stepper__count",
+								"aria-hidden": true,
 								children: [
-									" (",
-									text[status],
-									")"
+									index + 1,
+									"/",
+									steps.length
 								]
-							})]
-						}), step.description && /* @__PURE__ */ jsx("span", {
-							className: "oui-stepper__description",
-							children: step.description
-						})]
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "oui-stepper__label",
+								children: [step.label, /* @__PURE__ */ jsxs("span", {
+									className: "oui-visually-hidden",
+									children: [
+										" (",
+										text[status],
+										")"
+									]
+								})]
+							}),
+							step.description && /* @__PURE__ */ jsx("span", {
+								className: "oui-stepper__description",
+								children: step.description
+							})
+						]
 					})]
 				}, step.id ?? index);
 			};
 			$[17] = current;
-			$[18] = text;
-			$[19] = t7;
-		} else t7 = $[19];
+			$[18] = steps.length;
+			$[19] = text;
+			$[20] = t7;
+		} else t7 = $[20];
 		t6 = steps.map(t7);
 		$[13] = current;
 		$[14] = steps;
@@ -106,7 +125,7 @@ function Stepper(t0) {
 		$[16] = t6;
 	} else t6 = $[16];
 	let t7;
-	if ($[20] !== orientation || $[21] !== props || $[22] !== ref || $[23] !== size || $[24] !== t5 || $[25] !== t6) {
+	if ($[21] !== orientation || $[22] !== props || $[23] !== ref || $[24] !== size || $[25] !== t5 || $[26] !== t6) {
 		t7 = /* @__PURE__ */ jsx("ol", {
 			ref,
 			className: t5,
@@ -115,14 +134,14 @@ function Stepper(t0) {
 			...props,
 			children: t6
 		});
-		$[20] = orientation;
-		$[21] = props;
-		$[22] = ref;
-		$[23] = size;
-		$[24] = t5;
-		$[25] = t6;
-		$[26] = t7;
-	} else t7 = $[26];
+		$[21] = orientation;
+		$[22] = props;
+		$[23] = ref;
+		$[24] = size;
+		$[25] = t5;
+		$[26] = t6;
+		$[27] = t7;
+	} else t7 = $[27];
 	return t7;
 }
 //#endregion

package/dist/components/stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","names":["React","cx","CheckIcon","XIcon","StepStatus","StepItem","id","label","ReactNode","description","status","icon","StepperLabels","complete","current","upcoming","error","defaultLabels","StepperProps","OlHTMLAttributes","HTMLOListElement","ref","Ref","steps","orientation","size","labels","Partial","Stepper","t0","$","_c","className","props","t1","t2","t3","undefined","t4","text","t5","t6","t7","step","index","map","_c"],"sources":["../../../src/components/stepper/Stepper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cx } from '../../utils/cx';\nimport { CheckIcon, XIcon } from '../../icons';\n\nexport type StepStatus = 'complete' | 'current' | 'upcoming' | 'error';\n\nexport interface StepItem {\n  /** Stable key; falls back to the index. */\n  id?: string;\n  label: React.ReactNode;\n  description?: React.ReactNode;\n  /** Overrides the status derived from `current`. */\n  status?: StepStatus;\n  /** Replaces the number / check mark inside the marker. */\n  icon?: React.ReactNode;\n}\n\nexport interface StepperLabels {\n  complete: string;\n  current: string;\n  upcoming: string;\n  error: string;\n}\n\nconst defaultLabels: StepperLabels = {\n  complete: 'Completed',\n  current: 'Current',\n  upcoming: 'Not started',\n  error: 'Failed',\n};\n\nexport interface StepperProps extends React.OlHTMLAttributes<HTMLOListElement> {\n  /** Ref to the `<ol>` element. */\n  ref?: React.Ref<HTMLOListElement>;\n  /** The steps in order. */\n  steps: StepItem[];\n  /** Index of the active step. Earlier steps are complete; `steps.length` completes all of them. */\n  current?: number;\n  /** Lay the steps out in a row or a column. */\n  orientation?: 'horizontal' | 'vertical';\n  /** Marker and text size. */\n  size?: 'sm' | 'md';\n  /** Screen-reader text for each status. */\n  labels?: Partial<StepperLabels>;\n}\n\n/** Progress through an ordered sequence: a wizard, a checkout, a background job's phases. */\nexport function Stepper({\n  steps,\n  current = 0,\n  orientation = 'horizontal',\n  size = 'md',\n  labels,\n  className,\n  ref,\n  ...props\n}: StepperProps) {\n  const text = { ...defaultLabels, ...labels };\n  return (\n    <ol ref={ref} className={cx('oui-stepper', className)} data-orientation={orientation} data-size={size} {...props}>\n      {steps.map((step, index) => {\n        const status: StepStatus =\n          step.status ?? (index < current ? 'complete' : index === current ? 'current' : 'upcoming');\n        return (\n          <li\n            key={step.id ?? index}\n            className=\"oui-stepper__step\"\n            data-status={status}\n            aria-current={status === 'current' ? 'step' : undefined}\n          >\n            <span className=\"oui-stepper__marker\" aria-hidden>\n              {step.icon ?? (status === 'complete' ? <CheckIcon strokeWidth={3} /> : status === 'error' ? <XIcon strokeWidth={3} /> : index + 1)}\n            </span>\n            <span className=\"oui-stepper__text\">\n              <span className=\"oui-stepper__label\">\n                {step.label}\n                <span className=\"oui-visually-hidden\"> ({text[status]})</span>\n              </span>\n              {step.description && <span className=\"oui-stepper__description\">{step.description}</span>}\n            </span>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Stepper.js","names":["React","cx","CheckIcon","XIcon","StepStatus","StepItem","id","label","ReactNode","description","status","icon","StepperLabels","complete","current","upcoming","error","defaultLabels","StepperProps","OlHTMLAttributes","HTMLOListElement","ref","Ref","steps","orientation","size","labels","Partial","Stepper","t0","$","_c","className","props","t1","t2","t3","undefined","t4","text","t5","t6","t7","length","step","index","map","_c"],"sources":["../../../src/components/stepper/Stepper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cx } from '../../utils/cx';\nimport { CheckIcon, XIcon } from '../../icons';\n\nexport type StepStatus = 'complete' | 'current' | 'upcoming' | 'error';\n\nexport interface StepItem {\n  /** Stable key; falls back to the index. */\n  id?: string;\n  label: React.ReactNode;\n  description?: React.ReactNode;\n  /** Overrides the status derived from `current`. */\n  status?: StepStatus;\n  /** Replaces the number / check mark inside the marker. */\n  icon?: React.ReactNode;\n}\n\nexport interface StepperLabels {\n  complete: string;\n  current: string;\n  upcoming: string;\n  error: string;\n}\n\nconst defaultLabels: StepperLabels = {\n  complete: 'Completed',\n  current: 'Current',\n  upcoming: 'Not started',\n  error: 'Failed',\n};\n\nexport interface StepperProps extends React.OlHTMLAttributes<HTMLOListElement> {\n  /** Ref to the `<ol>` element. */\n  ref?: React.Ref<HTMLOListElement>;\n  /** The steps in order. */\n  steps: StepItem[];\n  /** Index of the active step. Earlier steps are complete; `steps.length` completes all of them. */\n  current?: number;\n  /** Lay the steps out in a row or a column. */\n  orientation?: 'horizontal' | 'vertical';\n  /** Marker and text size. */\n  size?: 'sm' | 'md';\n  /** Screen-reader text for each status. */\n  labels?: Partial<StepperLabels>;\n}\n\n/**\n * Progress through an ordered sequence: a wizard, a checkout, a background job's phases. Below 640px a\n * horizontal stepper turns compact: a segmented progress bar under the current step (\"2/4 · Date\").\n *\n * @example\n * <Stepper current={1} steps={[{ label: 'Vehicle' }, { label: 'Date' }, { label: 'Route' }, { label: 'Summary' }]} />\n */\nexport function Stepper({\n  steps,\n  current = 0,\n  orientation = 'horizontal',\n  size = 'md',\n  labels,\n  className,\n  ref,\n  ...props\n}: StepperProps) {\n  const text = { ...defaultLabels, ...labels };\n  return (\n    <ol ref={ref} className={cx('oui-stepper', className)} data-orientation={orientation} data-size={size} {...props}>\n      {steps.map((step, index) => {\n        const status: StepStatus =\n          step.status ?? (index < current ? 'complete' : index === current ? 'current' : 'upcoming');\n        return (\n          <li\n            key={step.id ?? index}\n            className=\"oui-stepper__step\"\n            data-status={status}\n            aria-current={status === 'current' ? 'step' : undefined}\n          >\n            <span className=\"oui-stepper__marker\" aria-hidden>\n              {step.icon ?? (status === 'complete' ? <CheckIcon strokeWidth={3} /> : status === 'error' ? <XIcon strokeWidth={3} /> : index + 1)}\n            </span>\n            <span className=\"oui-stepper__text\">\n              {/* \"2/4 ·\" before the label; only the compact layout below 640px shows it. */}\n              <span className=\"oui-stepper__count\" aria-hidden>\n                {index + 1}/{steps.length}\n              </span>\n              <span className=\"oui-stepper__label\">\n                {step.label}\n                <span className=\"oui-visually-hidden\"> ({text[status]})</span>\n              </span>\n              {step.description && <span className=\"oui-stepper__description\">{step.description}</span>}\n            </span>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"],"mappings":"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"}

package/dist/components/table/Table.d.ts

@@ -14,7 +14,7 @@ export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement>
     wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
 }
 /**
- * Styled HTML table inside a horizontally scrolling wrapper. Compose with `TableHeader`, `TableBody`,
+ * Styled HTML table inside a horizontally scrolling wrapper, whose cut-off edge fades. Compose with `TableHeader`, `TableBody`,
  * `TableFooter`, `TableRow`, `TableHead`, `TableCell` and `TableCaption`. For search, filters, sorting
  * and pagination use `DataTable` instead.
  *

package/dist/components/table/Table.js

@@ -2,12 +2,13 @@
 import { cx } from "../../utils/cx.js";
 import { createPrimitive } from "../../utils/primitive.js";
 import { ChevronDownIcon, ChevronUpIcon, ChevronsUpDownIcon } from "../../icons/index.js";
+import { scrollFade } from "../../utils/scroll-fade.js";
 import { c } from "react/compiler-runtime";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/table/Table.tsx
 /**
-* Styled HTML table inside a horizontally scrolling wrapper. Compose with `TableHeader`, `TableBody`,
+* Styled HTML table inside a horizontally scrolling wrapper, whose cut-off edge fades. Compose with `TableHeader`, `TableBody`,
 * `TableFooter`, `TableRow`, `TableHead`, `TableCell` and `TableCaption`. For search, filters, sorting
 * and pagination use `DataTable` instead.
 *
@@ -94,6 +95,7 @@ function Table(t0) {
 	if ($[21] !== t4 || $[22] !== t9 || $[23] !== wrapperProps) {
 		t10 = /* @__PURE__ */ jsx("div", {
 			...wrapperProps,
+			ref: scrollFade,
 			className: t4,
 			children: t9
 		});

package/dist/components/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","names":["React","cx","createPrimitive","ChevronDownIcon","ChevronUpIcon","ChevronsUpDownIcon","TableProps","TableHTMLAttributes","HTMLTableElement","ref","Ref","density","striped","hoverable","stickyHeader","wrapperProps","HTMLAttributes","HTMLDivElement","Table","t0","$","_c","className","props","t1","t2","undefined","t3","t4","t5","t6","t7","t8","t9","t10","TableHeader","TableBody","TableFooter","TableRow","TableCaption","Align","SortDirection","TableHeadProps","Omit","ThHTMLAttributes","HTMLTableCellElement","align","sort","onSort","TableHead","children","sortable","TableCellProps","TdHTMLAttributes","numeric","TableCell","_c"],"sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cx } from '../../utils/cx';\nimport { createPrimitive } from '../../utils/primitive';\nimport { ChevronDownIcon, ChevronUpIcon, ChevronsUpDownIcon } from '../../icons';\n\nexport interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {\n  /** Ref to the `<table>`. */\n  ref?: React.Ref<HTMLTableElement>;\n  /** Row height and cell padding. `normal` suits data-heavy screens; `comfortable` adds air for short tables. */\n  density?: 'compact' | 'normal' | 'comfortable';\n  /** Alternating row background. */\n  striped?: boolean;\n  /** Highlight rows on hover. */\n  hoverable?: boolean;\n  /** Keep the header visible while the wrapper scrolls (set a max height on it). */\n  stickyHeader?: boolean;\n  /** Props for the horizontally scrolling wrapper. */\n  wrapperProps?: React.HTMLAttributes<HTMLDivElement>;\n}\n\n/**\n * Styled HTML table inside a horizontally scrolling wrapper. Compose with `TableHeader`, `TableBody`,\n * `TableFooter`, `TableRow`, `TableHead`, `TableCell` and `TableCaption`. For search, filters, sorting\n * and pagination use `DataTable` instead.\n *\n * @example\n * <Table striped>\n *   <TableHeader>\n *     <TableRow><TableHead>Site</TableHead><TableHead align=\"end\">kWh</TableHead></TableRow>\n *   </TableHeader>\n *   <TableBody>\n *     <TableRow><TableCell>Győr</TableCell><TableCell numeric>1,204</TableCell></TableRow>\n *   </TableBody>\n * </Table>\n */\nexport function Table({\n  density = 'normal',\n  striped,\n  hoverable = true,\n  stickyHeader,\n  wrapperProps,\n  className,\n  ref,\n  ...props\n}: TableProps) {\n  return (\n    <div {...wrapperProps} className={cx('oui-table-wrap', wrapperProps?.className)}>\n      <table\n        ref={ref}\n        className={cx('oui-table', className)}\n        data-density={density}\n        data-striped={striped || undefined}\n        data-hoverable={hoverable || undefined}\n        data-sticky-header={stickyHeader || undefined}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport const TableHeader = createPrimitive('thead', 'oui-table__header', 'TableHeader');\nexport const TableBody = createPrimitive('tbody', 'oui-table__body', 'TableBody');\nexport const TableFooter = createPrimitive('tfoot', 'oui-table__footer', 'TableFooter');\nexport const TableRow = createPrimitive('tr', 'oui-table__row', 'TableRow');\nexport const TableCaption = createPrimitive('caption', 'oui-table__caption', 'TableCaption');\n\ntype Align = 'start' | 'center' | 'end';\nexport type SortDirection = 'asc' | 'desc' | false;\n\nexport interface TableHeadProps extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Ref to the `<th>`. */\n  ref?: React.Ref<HTMLTableCellElement>;\n  /** Horizontal alignment of the header content. */\n  align?: Align;\n  /** Current sort of this column. Passing it (even `false`) makes the header sortable. */\n  sort?: SortDirection;\n  /** Called when the sortable header is clicked. */\n  onSort?: () => void;\n}\n\n/** Column header cell (`<th>`), optionally a sort button. */\nexport function TableHead({ align = 'start', sort, onSort, className, children, ref, ...props }: TableHeadProps) {\n  const sortable = sort !== undefined;\n  return (\n    <th\n      ref={ref}\n      scope=\"col\"\n      className={cx('oui-table__head', className)}\n      data-align={align}\n      aria-sort={sort === 'asc' ? 'ascending' : sort === 'desc' ? 'descending' : undefined}\n      {...props}\n    >\n      {sortable ? (\n        <button type=\"button\" className=\"oui-table__sort\" data-active={sort ? '' : undefined} onClick={onSort}>\n          {children}\n          {sort === 'asc' ? <ChevronUpIcon /> : sort === 'desc' ? <ChevronDownIcon /> : <ChevronsUpDownIcon />}\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  );\n}\n\nexport interface TableCellProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Ref to the `<td>`. */\n  ref?: React.Ref<HTMLTableCellElement>;\n  /** Horizontal alignment. Defaults to `end` when `numeric`, else `start`. */\n  align?: Align;\n  /** Tabular figures for numeric columns. */\n  numeric?: boolean;\n}\n\n/** Body cell (`<td>`). `numeric` right-aligns and uses tabular figures. */\nexport function TableCell({ align, numeric, className, ref, ...props }: TableCellProps) {\n  return (\n    <td\n      ref={ref}\n      className={cx('oui-table__cell', className)}\n      data-align={align ?? (numeric ? 'end' : 'start')}\n      data-numeric={numeric || undefined}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Table.js","names":["React","cx","createPrimitive","scrollFade","ChevronDownIcon","ChevronUpIcon","ChevronsUpDownIcon","TableProps","TableHTMLAttributes","HTMLTableElement","ref","Ref","density","striped","hoverable","stickyHeader","wrapperProps","HTMLAttributes","HTMLDivElement","Table","t0","$","_c","className","props","t1","t2","undefined","t3","t4","t5","t6","t7","t8","t9","t10","TableHeader","TableBody","TableFooter","TableRow","TableCaption","Align","SortDirection","TableHeadProps","Omit","ThHTMLAttributes","HTMLTableCellElement","align","sort","onSort","TableHead","children","sortable","TableCellProps","TdHTMLAttributes","numeric","TableCell","_c"],"sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cx } from '../../utils/cx';\nimport { createPrimitive } from '../../utils/primitive';\nimport { scrollFade } from '../../utils/scroll-fade';\nimport { ChevronDownIcon, ChevronUpIcon, ChevronsUpDownIcon } from '../../icons';\n\nexport interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {\n  /** Ref to the `<table>`. */\n  ref?: React.Ref<HTMLTableElement>;\n  /** Row height and cell padding. `normal` suits data-heavy screens; `comfortable` adds air for short tables. */\n  density?: 'compact' | 'normal' | 'comfortable';\n  /** Alternating row background. */\n  striped?: boolean;\n  /** Highlight rows on hover. */\n  hoverable?: boolean;\n  /** Keep the header visible while the wrapper scrolls (set a max height on it). */\n  stickyHeader?: boolean;\n  /** Props for the horizontally scrolling wrapper. */\n  wrapperProps?: React.HTMLAttributes<HTMLDivElement>;\n}\n\n/**\n * Styled HTML table inside a horizontally scrolling wrapper, whose cut-off edge fades. Compose with `TableHeader`, `TableBody`,\n * `TableFooter`, `TableRow`, `TableHead`, `TableCell` and `TableCaption`. For search, filters, sorting\n * and pagination use `DataTable` instead.\n *\n * @example\n * <Table striped>\n *   <TableHeader>\n *     <TableRow><TableHead>Site</TableHead><TableHead align=\"end\">kWh</TableHead></TableRow>\n *   </TableHeader>\n *   <TableBody>\n *     <TableRow><TableCell>Győr</TableCell><TableCell numeric>1,204</TableCell></TableRow>\n *   </TableBody>\n * </Table>\n */\nexport function Table({\n  density = 'normal',\n  striped,\n  hoverable = true,\n  stickyHeader,\n  wrapperProps,\n  className,\n  ref,\n  ...props\n}: TableProps) {\n  return (\n    <div {...wrapperProps} ref={scrollFade} className={cx('oui-table-wrap', wrapperProps?.className)}>\n      <table\n        ref={ref}\n        className={cx('oui-table', className)}\n        data-density={density}\n        data-striped={striped || undefined}\n        data-hoverable={hoverable || undefined}\n        data-sticky-header={stickyHeader || undefined}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport const TableHeader = createPrimitive('thead', 'oui-table__header', 'TableHeader');\nexport const TableBody = createPrimitive('tbody', 'oui-table__body', 'TableBody');\nexport const TableFooter = createPrimitive('tfoot', 'oui-table__footer', 'TableFooter');\nexport const TableRow = createPrimitive('tr', 'oui-table__row', 'TableRow');\nexport const TableCaption = createPrimitive('caption', 'oui-table__caption', 'TableCaption');\n\ntype Align = 'start' | 'center' | 'end';\nexport type SortDirection = 'asc' | 'desc' | false;\n\nexport interface TableHeadProps extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Ref to the `<th>`. */\n  ref?: React.Ref<HTMLTableCellElement>;\n  /** Horizontal alignment of the header content. */\n  align?: Align;\n  /** Current sort of this column. Passing it (even `false`) makes the header sortable. */\n  sort?: SortDirection;\n  /** Called when the sortable header is clicked. */\n  onSort?: () => void;\n}\n\n/** Column header cell (`<th>`), optionally a sort button. */\nexport function TableHead({ align = 'start', sort, onSort, className, children, ref, ...props }: TableHeadProps) {\n  const sortable = sort !== undefined;\n  return (\n    <th\n      ref={ref}\n      scope=\"col\"\n      className={cx('oui-table__head', className)}\n      data-align={align}\n      aria-sort={sort === 'asc' ? 'ascending' : sort === 'desc' ? 'descending' : undefined}\n      {...props}\n    >\n      {sortable ? (\n        <button type=\"button\" className=\"oui-table__sort\" data-active={sort ? '' : undefined} onClick={onSort}>\n          {children}\n          {sort === 'asc' ? <ChevronUpIcon /> : sort === 'desc' ? <ChevronDownIcon /> : <ChevronsUpDownIcon />}\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  );\n}\n\nexport interface TableCellProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Ref to the `<td>`. */\n  ref?: React.Ref<HTMLTableCellElement>;\n  /** Horizontal alignment. Defaults to `end` when `numeric`, else `start`. */\n  align?: Align;\n  /** Tabular figures for numeric columns. */\n  numeric?: boolean;\n}\n\n/** Body cell (`<td>`). `numeric` right-aligns and uses tabular figures. */\nexport function TableCell({ align, numeric, className, ref, ...props }: TableCellProps) {\n  return (\n    <td\n      ref={ref}\n      className={cx('oui-table__cell', className)}\n      data-align={align ?? (numeric ? 'end' : 'start')}\n      data-numeric={numeric || undefined}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/components/tabs/Tabs.d.ts

@@ -10,7 +10,10 @@ declare function TabsRoot({ className, ref, ...props }: BaseTabs.Root.Props): im
 declare function TabsList({ variant, size, className, children, ref, ...props }: TabsListProps): import("react").JSX.Element;
 declare function TabsTab({ className, ref, ...props }: BaseTabs.Tab.Props): import("react").JSX.Element;
 declare function TabsPanel({ className, ref, ...props }: BaseTabs.Panel.Props): import("react").JSX.Element;
-/** `Tabs.Root` › `Tabs.List` › `Tabs.Tab`, then one `Tabs.Panel` per value. */
+/**
+ * `Tabs.Root` › `Tabs.List` › `Tabs.Tab`, then one `Tabs.Panel` per value. A list wider than its
+ * container scrolls sideways, with its cut-off edge faded.
+ */
 export declare const Tabs: {
     Root: typeof TabsRoot;
     List: typeof TabsList;

package/dist/components/tabs/Tabs.js

@@ -1,5 +1,6 @@
 "use client";
 import { withClass } from "../../utils/cx.js";
+import { mergeRefs, scrollFade } from "../../utils/scroll-fade.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
@@ -41,7 +42,7 @@ function TabsRoot(t0) {
 	return t2;
 }
 function TabsList(t0) {
-	const $ = c(17);
+	const $ = c(19);
 	let children;
 	let className;
 	let props;
@@ -68,35 +69,41 @@ function TabsList(t0) {
 	const variant = t1 === void 0 ? "underline" : t1;
 	const size = t2 === void 0 ? "md" : t2;
 	let t3;
-	if ($[7] !== className) {
-		t3 = withClass("oui-tabs__list", className);
-		$[7] = className;
+	if ($[7] !== ref) {
+		t3 = mergeRefs(ref, scrollFade);
+		$[7] = ref;
 		$[8] = t3;
 	} else t3 = $[8];
 	let t4;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ jsx(Tabs.Indicator, { className: "oui-tabs__indicator" });
-		$[9] = t4;
-	} else t4 = $[9];
+	if ($[9] !== className) {
+		t4 = withClass("oui-tabs__list", className);
+		$[9] = className;
+		$[10] = t4;
+	} else t4 = $[10];
 	let t5;
-	if ($[10] !== children || $[11] !== props || $[12] !== ref || $[13] !== size || $[14] !== t3 || $[15] !== variant) {
-		t5 = /* @__PURE__ */ jsxs(Tabs.List, {
-			ref,
-			className: t3,
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(Tabs.Indicator, { className: "oui-tabs__indicator" });
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== children || $[13] !== props || $[14] !== size || $[15] !== t3 || $[16] !== t4 || $[17] !== variant) {
+		t6 = /* @__PURE__ */ jsxs(Tabs.List, {
+			ref: t3,
+			className: t4,
 			"data-variant": variant,
 			"data-size": size,
 			...props,
-			children: [children, t4]
+			children: [children, t5]
 		});
-		$[10] = children;
-		$[11] = props;
-		$[12] = ref;
-		$[13] = size;
-		$[14] = t3;
-		$[15] = variant;
-		$[16] = t5;
-	} else t5 = $[16];
-	return t5;
+		$[12] = children;
+		$[13] = props;
+		$[14] = size;
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = variant;
+		$[18] = t6;
+	} else t6 = $[18];
+	return t6;
 }
 function TabsTab(t0) {
 	const $ = c(10);
@@ -170,7 +177,10 @@ function TabsPanel(t0) {
 	} else t2 = $[9];
 	return t2;
 }
-/** `Tabs.Root` › `Tabs.List` › `Tabs.Tab`, then one `Tabs.Panel` per value. */
+/**
+* `Tabs.Root` › `Tabs.List` › `Tabs.Tab`, then one `Tabs.Panel` per value. A list wider than its
+* container scrolls sideways, with its cut-off edge faded.
+*/
 var Tabs$1 = {
 	Root: TabsRoot,
 	List: TabsList,

package/dist/components/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["Tabs","BaseTabs","withClass","TabsVariant","TabsListProps","List","Props","variant","size","TabsRoot","t0","$","_c","className","props","ref","t1","t2","TabsList","children","undefined","t3","t4","Symbol","for","t5","TabsTab","TabsPanel","Root","Tab","Panel","_c","BaseTabs","Tabs"],"sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { withClass } from '../../utils/cx';\n\nexport type TabsVariant = 'underline' | 'segmented';\n\nexport interface TabsListProps extends BaseTabs.List.Props {\n  /** `underline` (default) for page sections, `segmented` for compact switchers. */\n  variant?: TabsVariant;\n  /** Tab height and text size. */\n  size?: 'sm' | 'md';\n}\n\nfunction TabsRoot({ className, ref, ...props }: BaseTabs.Root.Props) {\n  return <BaseTabs.Root ref={ref} className={withClass('oui-tabs', className)} {...props} />;\n}\n\nfunction TabsList({ variant = 'underline', size = 'md', className, children, ref, ...props }: TabsListProps) {\n  return (\n    <BaseTabs.List\n      ref={ref}\n      className={withClass('oui-tabs__list', className)}\n      data-variant={variant}\n      data-size={size}\n      {...props}\n    >\n      {children}\n      <BaseTabs.Indicator className=\"oui-tabs__indicator\" />\n    </BaseTabs.List>\n  );\n}\n\nfunction TabsTab({ className, ref, ...props }: BaseTabs.Tab.Props) {\n  return <BaseTabs.Tab ref={ref} className={withClass('oui-tabs__tab', className)} {...props} />;\n}\n\nfunction TabsPanel({ className, ref, ...props }: BaseTabs.Panel.Props) {\n  return <BaseTabs.Panel ref={ref} className={withClass('oui-tabs__panel', className)} {...props} />;\n}\n\n/** `Tabs.Root` › `Tabs.List` › `Tabs.Tab`, then one `Tabs.Panel` per value. */\nexport const Tabs = { Root: TabsRoot, List: TabsList, Tab: TabsTab, Panel: TabsPanel };\n"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","names":["Tabs","BaseTabs","withClass","mergeRefs","scrollFade","TabsVariant","TabsListProps","List","Props","variant","size","TabsRoot","t0","$","_c","className","props","ref","t1","t2","TabsList","children","undefined","t3","t4","t5","Symbol","for","t6","TabsTab","TabsPanel","Root","Tab","Panel","_c","BaseTabs","Tabs"],"sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { withClass } from '../../utils/cx';\nimport { mergeRefs, scrollFade } from '../../utils/scroll-fade';\n\nexport type TabsVariant = 'underline' | 'segmented';\n\nexport interface TabsListProps extends BaseTabs.List.Props {\n  /** `underline` (default) for page sections, `segmented` for compact switchers. */\n  variant?: TabsVariant;\n  /** Tab height and text size. */\n  size?: 'sm' | 'md';\n}\n\nfunction TabsRoot({ className, ref, ...props }: BaseTabs.Root.Props) {\n  return <BaseTabs.Root ref={ref} className={withClass('oui-tabs', className)} {...props} />;\n}\n\nfunction TabsList({ variant = 'underline', size = 'md', className, children, ref, ...props }: TabsListProps) {\n  return (\n    <BaseTabs.List\n      ref={mergeRefs(ref, scrollFade)}\n      className={withClass('oui-tabs__list', className)}\n      data-variant={variant}\n      data-size={size}\n      {...props}\n    >\n      {children}\n      <BaseTabs.Indicator className=\"oui-tabs__indicator\" />\n    </BaseTabs.List>\n  );\n}\n\nfunction TabsTab({ className, ref, ...props }: BaseTabs.Tab.Props) {\n  return <BaseTabs.Tab ref={ref} className={withClass('oui-tabs__tab', className)} {...props} />;\n}\n\nfunction TabsPanel({ className, ref, ...props }: BaseTabs.Panel.Props) {\n  return <BaseTabs.Panel ref={ref} className={withClass('oui-tabs__panel', className)} {...props} />;\n}\n\n/**\n * `Tabs.Root` › `Tabs.List` › `Tabs.Tab`, then one `Tabs.Panel` per value. A list wider than its\n * container scrolls sideways, with its cut-off edge faded.\n */\nexport const Tabs = { Root: TabsRoot, List: TabsList, Tab: TabsTab, Panel: TabsPanel };\n"],"mappings":"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"}

package/dist/components/toggle/Toggle.d.ts

@@ -11,7 +11,7 @@ export declare function Toggle({ size, className, ref, ...props }: ToggleProps):
 export interface ToggleGroupProps extends BaseToggleGroup.Props {
     /** Segment height. */
     size?: ToggleSize;
-    /** `segmented` renders a pill track like a tab switcher; `outline` separate buttons. */
+    /** `segmented` renders a pill track like a tab switcher, kept on one line; `outline` separate buttons, which wrap onto more rows when they do not fit. */
     variant?: 'segmented' | 'outline';
     /** Stretch segments to fill the width. */
     fullWidth?: boolean;

package/dist/components/toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":["React","Toggle","BaseToggle","ToggleGroup","BaseToggleGroup","withClass","ToggleSize","ToggleProps","Props","size","t0","$","_c","className","props","ref","t1","undefined","t2","t3","ToggleGroupProps","variant","fullWidth","t4","t5","SegmentedControlOption","value","label","ReactNode","disabled","SegmentedControlProps","Omit","options","defaultValue","onValueChange","SegmentedControl","internal","setInternal","useState","current","next","picked","option","map","Toggle","_c","BaseToggle","ToggleGroup","BaseToggleGroup"],"sources":["../../../src/components/toggle/Toggle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Toggle as BaseToggle } from '@base-ui/react/toggle';\nimport { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';\nimport { withClass } from '../../utils/cx';\n\nexport type ToggleSize = 'sm' | 'md';\n\nexport interface ToggleProps extends BaseToggle.Props {\n  /** Button height. */\n  size?: ToggleSize;\n}\n\n/** Two-state button (bold, pin, favourite…). Inside a ToggleGroup it acts as a segment. */\nexport function Toggle({ size = 'md', className, ref, ...props }: ToggleProps) {\n  return <BaseToggle ref={ref} className={withClass('oui-toggle', className)} data-size={size} {...props} />;\n}\n\nexport interface ToggleGroupProps extends BaseToggleGroup.Props {\n  /** Segment height. */\n  size?: ToggleSize;\n  /** `segmented` renders a pill track like a tab switcher; `outline` separate buttons. */\n  variant?: 'segmented' | 'outline';\n  /** Stretch segments to fill the width. */\n  fullWidth?: boolean;\n}\n\n/** Group of `Toggle` buttons that share selection state (single or multiple). */\nexport function ToggleGroup({\n  size = 'md',\n  variant = 'segmented',\n  fullWidth,\n  className,\n  ref,\n  ...props\n}: ToggleGroupProps) {\n  return (\n    <BaseToggleGroup\n      ref={ref}\n      className={withClass('oui-toggle-group', className)}\n      data-size={size}\n      data-variant={variant}\n      data-full-width={fullWidth || undefined}\n      {...props}\n    />\n  );\n}\n\nexport interface SegmentedControlOption {\n  value: string;\n  label: React.ReactNode;\n  disabled?: boolean;\n  'aria-label'?: string;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<ToggleGroupProps, 'value' | 'defaultValue' | 'onValueChange' | 'multiple' | 'children'> {\n  /** Segments to show. */\n  options: SegmentedControlOption[];\n  /** Selected option `value` (controlled). */\n  value?: string;\n  /** Initially selected option `value` when uncontrolled. */\n  defaultValue?: string;\n  /** Called with the new `value` when the selection changes. */\n  onValueChange?: (value: string) => void;\n}\n\n/** Single-choice switcher (e.g. Day / Week / Month). Always keeps one value selected. */\nexport function SegmentedControl({\n  options,\n  value,\n  defaultValue,\n  onValueChange,\n  size = 'md',\n  ref,\n  ...props\n}: SegmentedControlProps) {\n  const [internal, setInternal] = React.useState(defaultValue ?? options[0]?.value);\n  const current = value ?? internal;\n  return (\n    <ToggleGroup\n      ref={ref}\n      size={size}\n      value={current != null ? [current] : []}\n      onValueChange={(next) => {\n        const picked = next[0];\n        if (picked == null) return; // keep one segment selected\n        setInternal(picked);\n        onValueChange?.(picked);\n      }}\n      {...props}\n    >\n      {options.map((option) => (\n        <Toggle\n          key={option.value}\n          value={option.value}\n          size={size}\n          disabled={option.disabled}\n          aria-label={option['aria-label']}\n        >\n          {option.label}\n        </Toggle>\n      ))}\n    </ToggleGroup>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Toggle.js","names":["React","Toggle","BaseToggle","ToggleGroup","BaseToggleGroup","withClass","ToggleSize","ToggleProps","Props","size","t0","$","_c","className","props","ref","t1","undefined","t2","t3","ToggleGroupProps","variant","fullWidth","t4","t5","SegmentedControlOption","value","label","ReactNode","disabled","SegmentedControlProps","Omit","options","defaultValue","onValueChange","SegmentedControl","internal","setInternal","useState","current","next","picked","option","map","Toggle","_c","BaseToggle","ToggleGroup","BaseToggleGroup"],"sources":["../../../src/components/toggle/Toggle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Toggle as BaseToggle } from '@base-ui/react/toggle';\nimport { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';\nimport { withClass } from '../../utils/cx';\n\nexport type ToggleSize = 'sm' | 'md';\n\nexport interface ToggleProps extends BaseToggle.Props {\n  /** Button height. */\n  size?: ToggleSize;\n}\n\n/** Two-state button (bold, pin, favourite…). Inside a ToggleGroup it acts as a segment. */\nexport function Toggle({ size = 'md', className, ref, ...props }: ToggleProps) {\n  return <BaseToggle ref={ref} className={withClass('oui-toggle', className)} data-size={size} {...props} />;\n}\n\nexport interface ToggleGroupProps extends BaseToggleGroup.Props {\n  /** Segment height. */\n  size?: ToggleSize;\n  /** `segmented` renders a pill track like a tab switcher, kept on one line; `outline` separate buttons, which wrap onto more rows when they do not fit. */\n  variant?: 'segmented' | 'outline';\n  /** Stretch segments to fill the width. */\n  fullWidth?: boolean;\n}\n\n/** Group of `Toggle` buttons that share selection state (single or multiple). */\nexport function ToggleGroup({\n  size = 'md',\n  variant = 'segmented',\n  fullWidth,\n  className,\n  ref,\n  ...props\n}: ToggleGroupProps) {\n  return (\n    <BaseToggleGroup\n      ref={ref}\n      className={withClass('oui-toggle-group', className)}\n      data-size={size}\n      data-variant={variant}\n      data-full-width={fullWidth || undefined}\n      {...props}\n    />\n  );\n}\n\nexport interface SegmentedControlOption {\n  value: string;\n  label: React.ReactNode;\n  disabled?: boolean;\n  'aria-label'?: string;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<ToggleGroupProps, 'value' | 'defaultValue' | 'onValueChange' | 'multiple' | 'children'> {\n  /** Segments to show. */\n  options: SegmentedControlOption[];\n  /** Selected option `value` (controlled). */\n  value?: string;\n  /** Initially selected option `value` when uncontrolled. */\n  defaultValue?: string;\n  /** Called with the new `value` when the selection changes. */\n  onValueChange?: (value: string) => void;\n}\n\n/** Single-choice switcher (e.g. Day / Week / Month). Always keeps one value selected. */\nexport function SegmentedControl({\n  options,\n  value,\n  defaultValue,\n  onValueChange,\n  size = 'md',\n  ref,\n  ...props\n}: SegmentedControlProps) {\n  const [internal, setInternal] = React.useState(defaultValue ?? options[0]?.value);\n  const current = value ?? internal;\n  return (\n    <ToggleGroup\n      ref={ref}\n      size={size}\n      value={current != null ? [current] : []}\n      onValueChange={(next) => {\n        const picked = next[0];\n        if (picked == null) return; // keep one segment selected\n        setInternal(picked);\n        onValueChange?.(picked);\n      }}\n      {...props}\n    >\n      {options.map((option) => (\n        <Toggle\n          key={option.value}\n          value={option.value}\n          size={size}\n          disabled={option.disabled}\n          aria-label={option['aria-label']}\n        >\n          {option.label}\n        </Toggle>\n      ))}\n    </ToggleGroup>\n  );\n}\n"],"mappings":"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"}