@misoto22/folio 0.0.0 → 0.16.0

package/dist/components/Steps/Steps.d.ts

@@ -0,0 +1,65 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
+
+interface Step {
+    /** Stable key; also what a caller keys its own data by. */
+    id?: string;
+    /** The step's name — a noun, not a sentence. */
+    title: string;
+    /** The quiet line under it: what it is made of, what it costs, what it uses. */
+    note?: ReactNode;
+    /**
+     * The step being described, filled rather than outlined.
+     *
+     * At most one. It marks where the sequence has GOT to, which is a fact about
+     * the process rather than a highlight — two filled markers say the reader is
+     * in two places at once.
+     */
+    current?: boolean;
+}
+interface StepsProps extends Omit<HTMLAttributes<HTMLOListElement>, 'children'> {
+    steps: Step[];
+    /** Names the sequence for assistive tech when no heading does. */
+    label?: string;
+    /**
+     * How the marker is drawn.
+     *
+     * `number` counts from one and is right for a pipeline, a recipe, a
+     * migration. `rule` drops the digit for a plain hairline node, which is what
+     * a sequence of states wants — "queued, running, done" is an order, not a
+     * numbered list.
+     */
+    marker?: 'number' | 'rule';
+}
+/**
+ * A numbered sequence, as a rail.
+ *
+ * The shape a pipeline actually has: one thing after another, each with a name
+ * and a line of detail, and a rule running through them so the eye reads them
+ * as one process rather than as five unrelated rows. It is the figure a
+ * technical post reaches for most often after a diagram, and it is NOT a
+ * diagram — nothing branches, nothing points at anything, and drawing it with
+ * boxes and arrows says otherwise.
+ *
+ * The connector is drawn on the ITEM rather than as a full-height line behind
+ * the markers, so it starts under one and stops above the next instead of
+ * running through both — and so the last step has no tail hanging off it. That
+ * is the detail that separates a rail from a list with a border on it.
+ *
+ * An `<ol>`, because the order is the content. `aria-current="step"` marks the
+ * filled one, which is the only thing here a screen reader could not otherwise
+ * infer from the order it is read in.
+ *
+ * @example
+ * <Steps
+ *   label="How an answer is built"
+ *   steps={[
+ *     { title: 'Corpus', note: 'Blog MDX · project database' },
+ *     { title: 'Chunking', note: 'By heading · 300–800 tokens' },
+ *     { title: 'Answer', note: 'Live citation panel', current: true },
+ *   ]}
+ * />
+ */
+declare function Steps({ steps, label, marker, className, ...rest }: StepsProps): react.JSX.Element | null;
+
+export { type Step, Steps, type StepsProps, Steps as default };

package/dist/components/Steps/Steps.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { STEP_RAIL_LIST_CLASS, StepRailItem } from "../../lib/step-rail.js";
+function Steps({ steps, label, marker = "number", className, ...rest }) {
+  if (steps.length === 0) return null;
+  return /* @__PURE__ */ jsx("ol", { "aria-label": label, className: cn(STEP_RAIL_LIST_CLASS, className), ...rest, children: steps.map((step, index) => /* @__PURE__ */ jsx(
+    StepRailItem,
+    {
+      "aria-current": step.current ? "step" : void 0,
+      filled: step.current,
+      last: index === steps.length - 1,
+      marker: marker === "number" ? index + 1 : "",
+      markerClassName: marker === "rule" ? "text-[0px]" : void 0,
+      title: step.title,
+      note: step.note
+    },
+    step.id ?? `${step.title}-${index}`
+  )) });
+}
+var Steps_default = Steps;
+export {
+  Steps,
+  Steps_default as default
+};
+//# sourceMappingURL=Steps.js.map

package/dist/components/Steps/Steps.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Steps/Steps.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { STEP_RAIL_LIST_CLASS, StepRailItem } from '../../lib/step-rail'\n\nexport interface Step {\n  /** Stable key; also what a caller keys its own data by. */\n  id?: string\n  /** The step's name — a noun, not a sentence. */\n  title: string\n  /** The quiet line under it: what it is made of, what it costs, what it uses. */\n  note?: ReactNode\n  /**\n   * The step being described, filled rather than outlined.\n   *\n   * At most one. It marks where the sequence has GOT to, which is a fact about\n   * the process rather than a highlight — two filled markers say the reader is\n   * in two places at once.\n   */\n  current?: boolean\n}\n\nexport interface StepsProps extends Omit<HTMLAttributes<HTMLOListElement>, 'children'> {\n  steps: Step[]\n  /** Names the sequence for assistive tech when no heading does. */\n  label?: string\n  /**\n   * How the marker is drawn.\n   *\n   * `number` counts from one and is right for a pipeline, a recipe, a\n   * migration. `rule` drops the digit for a plain hairline node, which is what\n   * a sequence of states wants — \"queued, running, done\" is an order, not a\n   * numbered list.\n   */\n  marker?: 'number' | 'rule'\n}\n\n/**\n * A numbered sequence, as a rail.\n *\n * The shape a pipeline actually has: one thing after another, each with a name\n * and a line of detail, and a rule running through them so the eye reads them\n * as one process rather than as five unrelated rows. It is the figure a\n * technical post reaches for most often after a diagram, and it is NOT a\n * diagram — nothing branches, nothing points at anything, and drawing it with\n * boxes and arrows says otherwise.\n *\n * The connector is drawn on the ITEM rather than as a full-height line behind\n * the markers, so it starts under one and stops above the next instead of\n * running through both — and so the last step has no tail hanging off it. That\n * is the detail that separates a rail from a list with a border on it.\n *\n * An `<ol>`, because the order is the content. `aria-current=\"step\"` marks the\n * filled one, which is the only thing here a screen reader could not otherwise\n * infer from the order it is read in.\n *\n * @example\n * <Steps\n *   label=\"How an answer is built\"\n *   steps={[\n *     { title: 'Corpus', note: 'Blog MDX · project database' },\n *     { title: 'Chunking', note: 'By heading · 300–800 tokens' },\n *     { title: 'Answer', note: 'Live citation panel', current: true },\n *   ]}\n * />\n */\nexport function Steps({ steps, label, marker = 'number', className, ...rest }: StepsProps) {\n  if (steps.length === 0) return null\n\n  return (\n    <ol aria-label={label} className={cn(STEP_RAIL_LIST_CLASS, className)} {...rest}>\n      {steps.map((step, index) => (\n        <StepRailItem\n          key={step.id ?? `${step.title}-${index}`}\n          aria-current={step.current ? 'step' : undefined}\n          filled={step.current}\n          last={index === steps.length - 1}\n          marker={marker === 'number' ? index + 1 : ''}\n          markerClassName={marker === 'rule' ? 'text-[0px]' : undefined}\n          title={step.title}\n          note={step.note}\n        />\n      ))}\n    </ol>\n  )\n}\n\nexport default Steps\n"],"mappings":"AAuEQ;AAtER,SAAS,UAAU;AACnB,SAAS,sBAAsB,oBAAoB;AA+D5C,SAAS,MAAM,EAAE,OAAO,OAAO,SAAS,UAAU,WAAW,GAAG,KAAK,GAAe;AACzF,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,SACE,oBAAC,QAAG,cAAY,OAAO,WAAW,GAAG,sBAAsB,SAAS,GAAI,GAAG,MACxE,gBAAM,IAAI,CAAC,MAAM,UAChB;AAAA,IAAC;AAAA;AAAA,MAEC,gBAAc,KAAK,UAAU,SAAS;AAAA,MACtC,QAAQ,KAAK;AAAA,MACb,MAAM,UAAU,MAAM,SAAS;AAAA,MAC/B,QAAQ,WAAW,WAAW,QAAQ,IAAI;AAAA,MAC1C,iBAAiB,WAAW,SAAS,eAAe;AAAA,MACpD,OAAO,KAAK;AAAA,MACZ,MAAM,KAAK;AAAA;AAAA,IAPN,KAAK,MAAM,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,EAQxC,CACD,GACH;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,23 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+
+type SwitchProps = ComponentProps<typeof SwitchPrimitive.Root>;
+/**
+ * A setting that takes effect immediately.
+ *
+ * Distinct from `Checkbox`, and the distinction is not cosmetic: a switch
+ * applies on flip, a checkbox applies on submit. A switch inside a form with a
+ * Save button is a lie about when the change happened.
+ *
+ * The track fills with ink when on and the thumb is paper with a hairline —
+ * rather than a white thumb floating on a drop shadow, which this system does
+ * not have. The off state is a filled rule-coloured track, so the control still
+ * reads as a control on a white page.
+ *
+ * @example
+ * <Field label="Email notifications"><Switch defaultChecked /></Field>
+ */
+declare function Switch({ className, ...props }: SwitchProps): react.JSX.Element;
+
+export { Switch, type SwitchProps, Switch as default };

package/dist/components/Switch/Switch.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { cn } from "../../lib/cn.js";
+function Switch({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    SwitchPrimitive.Root,
+    {
+      className: cn(
+        "group inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-(--radius-pill) border border-(--rule-2) bg-(--stone) px-0.5 transition-colors duration-(--duration-fast) hover:border-(--rule-hard) data-[state=checked]:border-(--accent) data-[state=checked]:bg-(--accent) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { className: "block size-3.5 translate-x-0 rounded-(--radius-pill) bg-(--paper) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) group-active:w-5 data-[state=checked]:translate-x-4 rtl:data-[state=checked]:-translate-x-4 motion-reduce:transition-none" })
+    }
+  );
+}
+var Switch_default = Switch;
+export {
+  Switch,
+  Switch_default as default
+};
+//# sourceMappingURL=Switch.js.map

package/dist/components/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["'use client'\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport type SwitchProps = ComponentProps<typeof SwitchPrimitive.Root>\n\n/**\n * A setting that takes effect immediately.\n *\n * Distinct from `Checkbox`, and the distinction is not cosmetic: a switch\n * applies on flip, a checkbox applies on submit. A switch inside a form with a\n * Save button is a lie about when the change happened.\n *\n * The track fills with ink when on and the thumb is paper with a hairline —\n * rather than a white thumb floating on a drop shadow, which this system does\n * not have. The off state is a filled rule-coloured track, so the control still\n * reads as a control on a white page.\n *\n * @example\n * <Field label=\"Email notifications\"><Switch defaultChecked /></Field>\n */\nexport function Switch({ className, ...props }: SwitchProps) {\n  return (\n    <SwitchPrimitive.Root\n      className={cn(\n        'group inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-(--radius-pill) border border-(--rule-2) bg-(--stone) px-0.5 transition-colors duration-(--duration-fast) hover:border-(--rule-hard) data-[state=checked]:border-(--accent) data-[state=checked]:bg-(--accent) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none',\n        className,\n      )}\n      {...props}\n    >\n      {/* The thumb narrows as it starts moving and rounds out again when it\n          lands, which is what makes a 16px slide read as a deliberate flip\n          rather than a jump. `transition-[transform,width]` and not `all`, so\n          the track's own colour change keeps its shorter duration. */}\n      <SwitchPrimitive.Thumb className=\"block size-3.5 translate-x-0 rounded-(--radius-pill) bg-(--paper) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) group-active:w-5 data-[state=checked]:translate-x-4 rtl:data-[state=checked]:-translate-x-4 motion-reduce:transition-none\" />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport default Switch\n"],"mappings":";AAoCM;AAlCN,YAAY,qBAAqB;AAEjC,SAAS,UAAU;AAmBZ,SAAS,OAAO,EAAE,WAAW,GAAG,MAAM,GAAgB;AAC3D,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAMJ,8BAAC,gBAAgB,OAAhB,EAAsB,WAAU,8QAA6Q;AAAA;AAAA,EAChT;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}

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

@@ -0,0 +1,116 @@
+import * as react from 'react';
+import { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, TableHTMLAttributes } from 'react';
+
+type TableAlign = 'start' | 'center' | 'end';
+/**
+ * Which rules the table draws.
+ *
+ * `rows` is the default and the right answer for reading down a column: one
+ * hairline between records and nothing else, so the eye tracks a line across
+ * without a grid competing for it. `grid` adds the vertical rules a dense
+ * numeric table needs to keep columns apart. `bordered` puts an edge around the
+ * whole thing, for a table that sits loose on a page rather than inside a card
+ * that already has one. `none` is for a table inside something that draws its
+ * own structure.
+ */
+type TableBorders = 'rows' | 'grid' | 'bordered' | 'bordered-grid' | 'none';
+interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    /**
+     * Describes the table for a screen reader, which cannot see the heading above
+     * it. Rendered as a visually-hidden `<caption>` — required, because an
+     * unnamed table in a page with three tables is unnavigable.
+     */
+    caption: string;
+    /** Prints the caption instead of hiding it. */
+    showCaption?: boolean;
+    /**
+     * Pins the header row while the body scrolls. Needs a bounded height on the
+     * container — otherwise the page scrolls, not the table, and nothing sticks.
+     */
+    stickyHeader?: boolean;
+    /** Which rules to draw. See {@link TableBorders}. */
+    borders?: TableBorders;
+    /** Tightens the row padding, for a table that is mostly numbers. */
+    density?: 'comfortable' | 'compact';
+}
+/**
+ * A ruled data table.
+ *
+ * Wrapped in its own horizontally scrolling container, because a table is the
+ * one block that legitimately exceeds the measure — and a page that scrolls
+ * sideways as a whole is a layout bug, while a table that does is a table.
+ *
+ * That container is focusable, and it has to be. A scrollable region whose
+ * contents are not themselves focusable is unreachable by keyboard: there is no
+ * element to Tab to and therefore no way to press an arrow key at it, so the
+ * columns past the fold simply do not exist for anyone not using a mouse.
+ *
+ * It is also POSITIONED, which is not decoration. `sr-only` is
+ * `position: absolute`, so a visually-hidden label in a cell resolves against
+ * the nearest positioned ancestor — and with none between it and the document,
+ * it escapes the scroll container and every `overflow-hidden` around it, and
+ * widens the page by however far the table happens to be scrolled.
+ *
+ * No zebra striping at any border setting. In a monochrome system a striped row
+ * is a second surface competing with the page ground, and the hairline between
+ * rows is already enough to track a line across.
+ *
+ * @example
+ * <Table caption="Deploy history">
+ *   <THead><TR><TH>Commit</TH><TH align="end" sortable sortDirection={dir} onSort={sort}>Duration</TH></TR></THead>
+ *   <TBody><TR><TD>a1b2c3d</TD><TD align="end">2m 14s</TD></TR></TBody>
+ * </Table>
+ * @example
+ * <Table caption="Inventory" borders="bordered-grid" density="compact">…</Table>
+ */
+declare function Table({ caption, showCaption, stickyHeader, borders, density, className, children, ...rest }: TableProps): react.JSX.Element;
+/** Header group. The rule under it is drawn by the table's border setting. */
+declare function THead({ className, ...rest }: HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
+declare function TBody({ className, ...rest }: HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
+declare function TR({ className, ...rest }: HTMLAttributes<HTMLTableRowElement>): react.JSX.Element;
+type SortDirection = 'ascending' | 'descending' | 'none';
+interface THProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {
+    /** Which edge the column's contents sit against. Numbers belong at `end`. */
+    align?: TableAlign;
+    /** Makes the label a button and shows the sort marker. */
+    sortable?: boolean;
+    /**
+     * Which way this column is sorted. Also set as `aria-sort`, which is the
+     * only way a screen reader learns a table is ordered at all — a caret drawn
+     * in the header tells it nothing.
+     */
+    sortDirection?: SortDirection;
+    onSort?: () => void;
+}
+/**
+ * A column label. Mono and uppercase, so it never reads as data.
+ *
+ * When sortable, the label becomes a `<button>` INSIDE the `<th>` rather than
+ * the `<th>` becoming clickable: a cell with a click handler is not focusable
+ * and not announced as a control, so the sort exists only for a mouse.
+ *
+ * Sorting is per column and opt-in. A table where every header is a button
+ * invites the reader to try sorting a column the data cannot be ordered by.
+ */
+declare function TH({ align, sortable, sortDirection, onSort, className, children, ...rest }: THProps): react.JSX.Element;
+interface TDProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'> {
+    /** Which edge the cell's contents sit against. Match the column's header. */
+    align?: TableAlign;
+}
+/**
+ * A body cell.
+ *
+ * TOP-aligned, and that is a choice about which kind of table is the common
+ * one here: a cell holding a paragraph. Top is what lines the first lines of a
+ * row up with each other, and centring a two-word term against a four-line
+ * description puts the term in the middle of nothing.
+ *
+ * It is the wrong default for the other kind — a row of one-line values with a
+ * control in it. A 36px button next to 16px of text makes a 52px row, and every
+ * other cell then hangs at the top of it with twenty pixels of nothing
+ * underneath, which reads as a column that has slipped. Pass
+ * `className="align-middle"` on those rows; the data-table template does.
+ */
+declare function TD({ align, className, ...rest }: TDProps): react.JSX.Element;
+
+export { type SortDirection, TBody, TD, type TDProps, TH, type THProps, THead, TR, Table, type TableAlign, type TableBorders, type TableProps, Table as default };

package/dist/components/Table/Table.js

@@ -0,0 +1,137 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RiArrowDownLine, RiArrowUpLine, RiExpandUpDownLine } from "@remixicon/react";
+import { cn } from "../../lib/cn.js";
+import { warnBlankName } from "../../lib/warn.js";
+const ALIGN = {
+  start: "text-start",
+  center: "text-center",
+  end: "text-end"
+};
+const ROWS = "[&_thead]:border-b [&_thead]:border-(--rule-hard) [&_tbody_tr]:border-b [&_tbody_tr]:border-(--rule) [&_tbody_tr:last-child]:border-b-0";
+const SOFT_HEAD = "[&_thead]:border-(--rule-2)";
+const COLUMNS = "[&_th]:border-e [&_td]:border-e [&_th]:border-(--rule) [&_td]:border-(--rule) [&_th:last-child]:border-e-0 [&_td:last-child]:border-e-0";
+const BOXED = "rounded-(--radius) border border-(--rule-2) [--table-pad-x:0.75rem]";
+const BORDERS = {
+  rows: ROWS,
+  grid: cn(ROWS, COLUMNS, "[--table-pad-x:0.75rem]"),
+  bordered: cn(ROWS, SOFT_HEAD, BOXED),
+  "bordered-grid": cn(ROWS, SOFT_HEAD, COLUMNS, BOXED),
+  none: ""
+};
+function Table({
+  caption,
+  showCaption = false,
+  stickyHeader = false,
+  borders = "rows",
+  density = "comfortable",
+  className,
+  children,
+  ...rest
+}) {
+  warnBlankName("Table", "caption", caption, "the table is announced with no name and a reader arrives in it with no idea what it lists");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      tabIndex: 0,
+      role: "region",
+      "aria-label": caption,
+      "data-table-density": density,
+      className: cn("relative w-full overflow-x-auto scroll-slim", BORDERS[borders]),
+      children: /* @__PURE__ */ jsxs(
+        "table",
+        {
+          className: cn(
+            "w-full border-collapse text-start text-sm",
+            stickyHeader && "[&_thead]:sticky [&_thead]:top-0 [&_thead]:z-(--z-rule) [&_thead]:bg-(--paper)",
+            className
+          ),
+          ...rest,
+          children: [
+            /* @__PURE__ */ jsx("caption", { className: cn(showCaption ? "pb-3 text-start eyebrow text-(--ink-3-aa)" : "sr-only"), children: caption }),
+            children
+          ]
+        }
+      )
+    }
+  );
+}
+function THead({ className, ...rest }) {
+  return /* @__PURE__ */ jsx("thead", { className, ...rest });
+}
+function TBody({ className, ...rest }) {
+  return /* @__PURE__ */ jsx("tbody", { className, ...rest });
+}
+function TR({ className, ...rest }) {
+  return /* @__PURE__ */ jsx("tr", { className, ...rest });
+}
+const CELL = "px-[var(--table-pad-x,0)] [&:not(:last-child)]:pe-[calc(var(--table-pad-x,0px)+1.5rem)]";
+const SORT_ICON = {
+  ascending: RiArrowUpLine,
+  descending: RiArrowDownLine,
+  none: RiExpandUpDownLine
+};
+function TH({
+  align = "start",
+  sortable = false,
+  sortDirection = "none",
+  onSort,
+  className,
+  children,
+  ...rest
+}) {
+  const Icon = SORT_ICON[sortDirection];
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      scope: "col",
+      "aria-sort": sortable ? sortDirection : void 0,
+      className: cn(CELL, "py-3 align-bottom eyebrow text-(--ink-3-aa)", ALIGN[align], className),
+      ...rest,
+      children: sortable ? /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: onSort,
+          className: cn(
+            "group inline-flex items-center gap-1.5 eyebrow transition-colors duration-(--duration-fast) hover:text-(--ink)",
+            sortDirection === "none" ? "text-(--ink-3-aa)" : "text-(--ink)"
+          ),
+          children: [
+            children,
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                size: 12,
+                "aria-hidden": true,
+                className: cn(
+                  "shrink-0 transition-opacity",
+                  sortDirection === "none" && "opacity-40 group-hover:opacity-100"
+                )
+              }
+            )
+          ]
+        }
+      ) : children
+    }
+  );
+}
+function TD({ align = "start", className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      className: cn(CELL, "py-[var(--table-pad-y)] align-top text-(--ink-2)", ALIGN[align], className),
+      ...rest
+    }
+  );
+}
+var Table_default = Table;
+export {
+  TBody,
+  TD,
+  TH,
+  THead,
+  TR,
+  Table,
+  Table_default as default
+};
+//# sourceMappingURL=Table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import { RiArrowDownLine, RiArrowUpLine, RiExpandUpDownLine } from '@remixicon/react'\nimport type { HTMLAttributes, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\nimport { warnBlankName } from '../../lib/warn'\n\nexport type TableAlign = 'start' | 'center' | 'end'\n\n/**\n * Which rules the table draws.\n *\n * `rows` is the default and the right answer for reading down a column: one\n * hairline between records and nothing else, so the eye tracks a line across\n * without a grid competing for it. `grid` adds the vertical rules a dense\n * numeric table needs to keep columns apart. `bordered` puts an edge around the\n * whole thing, for a table that sits loose on a page rather than inside a card\n * that already has one. `none` is for a table inside something that draws its\n * own structure.\n */\nexport type TableBorders = 'rows' | 'grid' | 'bordered' | 'bordered-grid' | 'none'\n\nconst ALIGN: Record<TableAlign, string> = {\n  start: 'text-start',\n  center: 'text-center',\n  end: 'text-end',\n}\n\n/**\n * Every rule the table draws, expressed from ONE element.\n *\n * Not React context, which was the first attempt: `createContext` makes the\n * module client-only, which turned every table on every page into a hydration\n * boundary and took the static build down with it. Descendant selectors from\n * the wrapper reach the same cells, cost nothing at runtime, and keep the whole\n * component server-renderable.\n *\n * `--table-pad-x` rather than a padding class per mode, because the ruled\n * variants need symmetric padding inside their boxes while the plain one wants\n * a trailing gap and no leading one.\n */\nconst ROWS =\n  '[&_thead]:border-b [&_thead]:border-(--rule-hard) [&_tbody_tr]:border-b [&_tbody_tr]:border-(--rule) [&_tbody_tr:last-child]:border-b-0'\nconst SOFT_HEAD = '[&_thead]:border-(--rule-2)'\nconst COLUMNS =\n  '[&_th]:border-e [&_td]:border-e [&_th]:border-(--rule) [&_td]:border-(--rule) [&_th:last-child]:border-e-0 [&_td:last-child]:border-e-0'\nconst BOXED = 'rounded-(--radius) border border-(--rule-2) [--table-pad-x:0.75rem]'\n\nconst BORDERS: Record<TableBorders, string> = {\n  rows: ROWS,\n  grid: cn(ROWS, COLUMNS, '[--table-pad-x:0.75rem]'),\n  bordered: cn(ROWS, SOFT_HEAD, BOXED),\n  'bordered-grid': cn(ROWS, SOFT_HEAD, COLUMNS, BOXED),\n  none: '',\n}\n\nexport interface TableProps extends TableHTMLAttributes<HTMLTableElement> {\n  /**\n   * Describes the table for a screen reader, which cannot see the heading above\n   * it. Rendered as a visually-hidden `<caption>` — required, because an\n   * unnamed table in a page with three tables is unnavigable.\n   */\n  caption: string\n  /** Prints the caption instead of hiding it. */\n  showCaption?: boolean\n  /**\n   * Pins the header row while the body scrolls. Needs a bounded height on the\n   * container — otherwise the page scrolls, not the table, and nothing sticks.\n   */\n  stickyHeader?: boolean\n  /** Which rules to draw. See {@link TableBorders}. */\n  borders?: TableBorders\n  /** Tightens the row padding, for a table that is mostly numbers. */\n  density?: 'comfortable' | 'compact'\n}\n\n/**\n * A ruled data table.\n *\n * Wrapped in its own horizontally scrolling container, because a table is the\n * one block that legitimately exceeds the measure — and a page that scrolls\n * sideways as a whole is a layout bug, while a table that does is a table.\n *\n * That container is focusable, and it has to be. A scrollable region whose\n * contents are not themselves focusable is unreachable by keyboard: there is no\n * element to Tab to and therefore no way to press an arrow key at it, so the\n * columns past the fold simply do not exist for anyone not using a mouse.\n *\n * It is also POSITIONED, which is not decoration. `sr-only` is\n * `position: absolute`, so a visually-hidden label in a cell resolves against\n * the nearest positioned ancestor — and with none between it and the document,\n * it escapes the scroll container and every `overflow-hidden` around it, and\n * widens the page by however far the table happens to be scrolled.\n *\n * No zebra striping at any border setting. In a monochrome system a striped row\n * is a second surface competing with the page ground, and the hairline between\n * rows is already enough to track a line across.\n *\n * @example\n * <Table caption=\"Deploy history\">\n *   <THead><TR><TH>Commit</TH><TH align=\"end\" sortable sortDirection={dir} onSort={sort}>Duration</TH></TR></THead>\n *   <TBody><TR><TD>a1b2c3d</TD><TD align=\"end\">2m 14s</TD></TR></TBody>\n * </Table>\n * @example\n * <Table caption=\"Inventory\" borders=\"bordered-grid\" density=\"compact\">…</Table>\n */\nexport function Table({\n  caption,\n  showCaption = false,\n  stickyHeader = false,\n  borders = 'rows',\n  density = 'comfortable',\n  className,\n  children,\n  ...rest\n}: TableProps) {\n  warnBlankName('Table', 'caption', caption, 'the table is announced with no name and a reader arrives in it with no idea what it lists')\n  return (\n    <div\n      tabIndex={0}\n      role=\"region\"\n      aria-label={caption}\n      data-table-density={density}\n      className={cn('relative w-full overflow-x-auto scroll-slim', BORDERS[borders])}\n    >\n      <table\n        className={cn(\n          'w-full border-collapse text-start text-sm',\n          stickyHeader &&\n            '[&_thead]:sticky [&_thead]:top-0 [&_thead]:z-(--z-rule) [&_thead]:bg-(--paper)',\n          className,\n        )}\n        {...rest}\n      >\n        <caption className={cn(showCaption ? 'pb-3 text-start eyebrow text-(--ink-3-aa)' : 'sr-only')}>\n          {caption}\n        </caption>\n        {children}\n      </table>\n    </div>\n  )\n}\n\n/** Header group. The rule under it is drawn by the table's border setting. */\nexport function THead({ className, ...rest }: HTMLAttributes<HTMLTableSectionElement>) {\n  return <thead className={className} {...rest} />\n}\n\nexport function TBody({ className, ...rest }: HTMLAttributes<HTMLTableSectionElement>) {\n  return <tbody className={className} {...rest} />\n}\n\nexport function TR({ className, ...rest }: HTMLAttributes<HTMLTableRowElement>) {\n  return <tr className={className} {...rest} />\n}\n\nexport type SortDirection = 'ascending' | 'descending' | 'none'\n\nexport interface THProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Which edge the column's contents sit against. Numbers belong at `end`. */\n  align?: TableAlign\n  /** Makes the label a button and shows the sort marker. */\n  sortable?: boolean\n  /**\n   * Which way this column is sorted. Also set as `aria-sort`, which is the\n   * only way a screen reader learns a table is ordered at all — a caret drawn\n   * in the header tells it nothing.\n   */\n  sortDirection?: SortDirection\n  onSort?: () => void\n}\n\n/**\n * Cell padding, in one string both cells share.\n *\n * `--table-pad-x` is 0 by default and set by the ruled variants, so the plain\n * table keeps its trailing gap and no leading one while a boxed table gets\n * symmetric padding inside its border.\n */\nconst CELL =\n  'px-[var(--table-pad-x,0)] [&:not(:last-child)]:pe-[calc(var(--table-pad-x,0px)+1.5rem)]'\n\nconst SORT_ICON = {\n  ascending: RiArrowUpLine,\n  descending: RiArrowDownLine,\n  none: RiExpandUpDownLine,\n} as const\n\n/**\n * A column label. Mono and uppercase, so it never reads as data.\n *\n * When sortable, the label becomes a `<button>` INSIDE the `<th>` rather than\n * the `<th>` becoming clickable: a cell with a click handler is not focusable\n * and not announced as a control, so the sort exists only for a mouse.\n *\n * Sorting is per column and opt-in. A table where every header is a button\n * invites the reader to try sorting a column the data cannot be ordered by.\n */\nexport function TH({\n  align = 'start',\n  sortable = false,\n  sortDirection = 'none',\n  onSort,\n  className,\n  children,\n  ...rest\n}: THProps) {\n  const Icon = SORT_ICON[sortDirection]\n\n  return (\n    <th\n      scope=\"col\"\n      aria-sort={sortable ? sortDirection : undefined}\n      className={cn(CELL, 'py-3 align-bottom eyebrow text-(--ink-3-aa)', ALIGN[align], className)}\n      {...rest}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          className={cn(\n            'group inline-flex items-center gap-1.5 eyebrow transition-colors duration-(--duration-fast) hover:text-(--ink)',\n            sortDirection === 'none' ? 'text-(--ink-3-aa)' : 'text-(--ink)',\n          )}\n        >\n          {children}\n          <Icon\n            size={12}\n            aria-hidden\n            className={cn(\n              'shrink-0 transition-opacity',\n              sortDirection === 'none' && 'opacity-40 group-hover:opacity-100',\n            )}\n          />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  )\n}\n\nexport interface TDProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Which edge the cell's contents sit against. Match the column's header. */\n  align?: TableAlign\n}\n\n/**\n * A body cell.\n *\n * TOP-aligned, and that is a choice about which kind of table is the common\n * one here: a cell holding a paragraph. Top is what lines the first lines of a\n * row up with each other, and centring a two-word term against a four-line\n * description puts the term in the middle of nothing.\n *\n * It is the wrong default for the other kind — a row of one-line values with a\n * control in it. A 36px button next to 16px of text makes a 52px row, and every\n * other cell then hangs at the top of it with twenty pixels of nothing\n * underneath, which reads as a column that has slipped. Pass\n * `className=\"align-middle\"` on those rows; the data-table template does.\n */\nexport function TD({ align = 'start', className, ...rest }: TDProps) {\n  return (\n    <td\n      className={cn(CELL, 'py-[var(--table-pad-y)] align-top text-(--ink-2)', ALIGN[align], className)}\n      {...rest}\n    />\n  )\n}\n\nexport default Table\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,37 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+/** Accessible tabs with a moving marker and optional horizontal drag gestures. */
+declare function Tabs({ value, defaultValue, onValueChange, swipe, orientation, activationMode, className, ...rest }: ComponentProps<typeof TabsPrimitive.Root> & {
+    swipe?: boolean;
+}): react.JSX.Element;
+/**
+ * The tab strip.
+ *
+ * Scrolls horizontally rather than wrapping. A wrapped second row of tabs moves
+ * every tab below it when the strip grows, and the reader loses the one they
+ * were about to click.
+ *
+ * @example
+ * <Tabs defaultValue="preview">
+ *   <TabsList>
+ *     <TabsTrigger value="preview">Preview</TabsTrigger>
+ *     <TabsTrigger value="code">Code</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="preview">…</TabsContent>
+ * </Tabs>
+ */
+declare function TabsList({ className, ref: forwardedRef, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onClickCapture, ...rest }: ComponentProps<typeof TabsPrimitive.List>): react.JSX.Element;
+/**
+ * One tab.
+ *
+ * The active marker is a 2px ink rule pulled onto the strip's own border with
+ * `-mb-px`, so the two occupy the same line instead of stacking into a 3px
+ * edge. 44px tall, because a tab is a pointer target like any other.
+ */
+declare function TabsTrigger({ className, onMouseDown, onClick, ...rest }: ComponentProps<typeof TabsPrimitive.Trigger>): react.JSX.Element;
+/** The panel paired to a {@link TabsTrigger} by matching `value`. */
+declare function TabsContent({ className, onTouchStart, onTouchEnd, onTouchCancel, ...rest }: ComponentProps<typeof TabsPrimitive.Content>): react.JSX.Element;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger, Tabs as default };