@financedistrict/apps-ui 0.1.0

package/dist/table-cell.cjs

@@ -0,0 +1,196 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/table-cell/TableCell.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var tableCellVariants = classVarianceAuthority.cva(
+  [
+    // The cell is the group that drives hover/active styling of its descendants.
+    "group",
+    // Layout — 56px row, slots on a horizontal axis; overflow clipped for truncation.
+    "flex h-14 w-full items-center gap-3 overflow-hidden px-2 py-4",
+    // Brand-accent background on hover / keyboard-focus / active (self). Reset
+    // native control chrome so an asChild button/anchor styles cleanly.
+    "appearance-none bg-transparent outline-none transition-colors",
+    "hover:bg-card-brand-accent focus-visible:bg-card-brand-accent data-[state=active]:bg-card-brand-accent"
+  ],
+  {
+    variants: {
+      last: {
+        // Row divider on all but the last row; recolors on hover / focus / active.
+        false: [
+          "border-b border-card-border",
+          "hover:border-card-brand-border-accent focus-visible:border-card-brand-border-accent data-[state=active]:border-card-brand-border-accent"
+        ],
+        true: ""
+      }
+    },
+    defaultVariants: {
+      last: false
+    }
+  }
+);
+function setRef(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function TableCell({
+  className,
+  last = false,
+  leading,
+  trailing,
+  active = false,
+  asChild = false,
+  children,
+  ref,
+  ...props
+}) {
+  const rootClassName = cn(tableCellVariants({ last }), className);
+  const dataState = active ? "active" : void 0;
+  const leadingSlot = leading != null ? /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "table-cell-leading",
+      className: "flex shrink-0 items-center",
+      children: leading
+    }
+  ) : null;
+  const trailingSlot = trailing != null ? /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "table-cell-trailing",
+      className: "flex shrink-0 items-center",
+      children: trailing
+    }
+  ) : null;
+  const middleSlot = (middle) => middle != null ? /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "table-cell-middle",
+      className: "flex min-w-0 flex-1 flex-col",
+      children: middle
+    }
+  ) : null;
+  if (asChild) {
+    if (!React__namespace.isValidElement(children)) {
+      throw new Error(
+        "TableCell: `asChild` requires a single React element child"
+      );
+    }
+    const child = children;
+    const childProps = child.props;
+    return React__namespace.cloneElement(
+      child,
+      {
+        ...props,
+        ...childProps,
+        "data-slot": "table-cell",
+        "data-state": dataState,
+        className: cn(
+          rootClassName,
+          childProps.className
+        ),
+        ref: (node) => {
+          setRef(ref, node);
+          setRef(childProps.ref, node);
+        }
+      },
+      leadingSlot,
+      middleSlot(childProps.children),
+      trailingSlot
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "table-cell",
+      "data-state": dataState,
+      className: rootClassName,
+      ref,
+      ...props,
+      children: [
+        leadingSlot,
+        middleSlot(children),
+        trailingSlot
+      ]
+    }
+  );
+}
+function CellText({ label, meta, className, ...props }) {
+  const hasMeta = Array.isArray(meta) && meta.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "cell-text",
+      className: cn("flex min-w-0 flex-col gap-0.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "cell-text-label",
+            className: cn(
+              "body-03 min-w-0 truncate",
+              "text-card-foreground",
+              "group-hover:text-card-brand-foreground group-focus-visible:text-card-brand-foreground group-data-[state=active]:text-card-brand-foreground"
+            ),
+            children: label
+          }
+        ),
+        hasMeta && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "cell-text-meta",
+            className: cn(
+              "flex min-w-0 items-center gap-1",
+              "body-mono-04",
+              "text-card-foreground-muted",
+              "group-hover:text-card-brand-foreground-muted group-focus-visible:text-card-brand-foreground-muted group-data-[state=active]:text-card-brand-foreground-muted"
+            ),
+            children: meta.map((segment, index) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
+              index > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "size-0.5 shrink-0 rounded-full bg-current"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: segment })
+            ] }, index))
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.CellText = CellText;
+exports.TableCell = TableCell;
+exports.tableCellVariants = tableCellVariants;

package/dist/table-cell.d.cts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * TableCell frame — mirrors the Figma `BaseTableCell` (state default/hover ×
+ * position first&middle/last). Binds ONLY to the semantic `card/*` token layer;
+ * theme switch is automatic via `.dark`.
+ *
+ * The Figma `position` variant is a binary "is this the last row" flag, so it is
+ * modelled as a boolean `last` (house style — cf. Button `iconOnly`): `last`
+ * omits the bottom divider, otherwise the row draws it.
+ *
+ * State is NOT a cva variant. The cell is a Tailwind `group`; its own surface
+ * (background + divider) recolors on self `hover:` / `focus-visible:` /
+ * `data-[state=active]:` (`data-state` is set from the `active` prop in
+ * <TableCell>). Descendants like <CellText> recolor via the same group
+ * (`group-hover:` / `group-focus-visible:` / `group-data-[state=active]:`).
+ * (`group-hover:` cannot fire from the group element's OWN hover — hence the
+ * surface uses plain `hover:`/`focus-visible:`.)
+ *
+ * `focus-visible` mirrors hover so an INTERACTIVE cell (one made focusable by a
+ * consumer — `asChild` onto a `<button>`/`<a>`, or a `tabIndex`) shows the same
+ * brand-accent treatment as its keyboard focus indicator. A plain presentational
+ * <div> cell never receives focus, so this is inert until the cell is made
+ * focusable. `appearance-none` + `outline-none` let an `asChild` button/anchor
+ * render cleanly with the fill (not the native ring) as the focus affordance.
+ */
+declare const tableCellVariants: (props?: ({
+    last?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TableCellVariantsProps = VariantProps<typeof tableCellVariants>;
+
+interface TableCellProps extends React.ComponentProps<"div">, TableCellVariantsProps {
+    /** Leading slot (e.g. a network icon). Hidden when omitted. */
+    leading?: React.ReactNode;
+    /** Trailing slot (e.g. a Button). Hidden when omitted. */
+    trailing?: React.ReactNode;
+    /** The last row in its column — omits the bottom divider. */
+    last?: boolean;
+    /** Force the brand-accent highlight (active / selected row). */
+    active?: boolean;
+    /**
+     * Render the single child element as the root (e.g. a `<td>` / `<a>`) instead
+     * of a `<div>`, keeping all cell styling. The child's own children become the
+     * middle content; `leading`/`trailing` are injected around them.
+     */
+    asChild?: boolean;
+}
+/**
+ * The atomic presentational cell for FD data tables (Layer 1). Presentational by
+ * default (a non-focusable `<div>`). For an INTERACTIVE cell (e.g. one that opens
+ * a details panel), make it focusable — `asChild` onto a `<button>`/`<a>`, or
+ * pass `tabIndex`/`role`/`onClick` — and it shows the brand-accent treatment on
+ * keyboard focus (`:focus-visible`), identical to hover.
+ */
+declare function TableCell({ className, last, leading, trailing, active, asChild, children, ref, ...props }: TableCellProps): React.JSX.Element;
+
+interface CellTextProps extends Omit<React.ComponentProps<"div">, "children"> {
+    /** Primary line (Archivo 14/20 — `body-03`). */
+    label: React.ReactNode;
+    /**
+     * Optional secondary line: mono (Chakra Petch 12/16 — `body-mono-04`)
+     * segments joined by a 2px dot separator. Arbitrary length.
+     */
+    meta?: React.ReactNode[];
+}
+/**
+ * Middle-slot helper for <TableCell>: a `label` line above an optional `meta`
+ * row. Recolors to the brand foregrounds via the parent <TableCell> group on
+ * hover / keyboard focus / `data-state="active"`, so it MUST be rendered inside
+ * a <TableCell>.
+ */
+declare function CellText({ label, meta, className, ...props }: CellTextProps): React.JSX.Element;
+
+export { CellText, type CellTextProps, TableCell, type TableCellProps, type TableCellVariantsProps, tableCellVariants };

package/dist/table-cell.d.ts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * TableCell frame — mirrors the Figma `BaseTableCell` (state default/hover ×
+ * position first&middle/last). Binds ONLY to the semantic `card/*` token layer;
+ * theme switch is automatic via `.dark`.
+ *
+ * The Figma `position` variant is a binary "is this the last row" flag, so it is
+ * modelled as a boolean `last` (house style — cf. Button `iconOnly`): `last`
+ * omits the bottom divider, otherwise the row draws it.
+ *
+ * State is NOT a cva variant. The cell is a Tailwind `group`; its own surface
+ * (background + divider) recolors on self `hover:` / `focus-visible:` /
+ * `data-[state=active]:` (`data-state` is set from the `active` prop in
+ * <TableCell>). Descendants like <CellText> recolor via the same group
+ * (`group-hover:` / `group-focus-visible:` / `group-data-[state=active]:`).
+ * (`group-hover:` cannot fire from the group element's OWN hover — hence the
+ * surface uses plain `hover:`/`focus-visible:`.)
+ *
+ * `focus-visible` mirrors hover so an INTERACTIVE cell (one made focusable by a
+ * consumer — `asChild` onto a `<button>`/`<a>`, or a `tabIndex`) shows the same
+ * brand-accent treatment as its keyboard focus indicator. A plain presentational
+ * <div> cell never receives focus, so this is inert until the cell is made
+ * focusable. `appearance-none` + `outline-none` let an `asChild` button/anchor
+ * render cleanly with the fill (not the native ring) as the focus affordance.
+ */
+declare const tableCellVariants: (props?: ({
+    last?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TableCellVariantsProps = VariantProps<typeof tableCellVariants>;
+
+interface TableCellProps extends React.ComponentProps<"div">, TableCellVariantsProps {
+    /** Leading slot (e.g. a network icon). Hidden when omitted. */
+    leading?: React.ReactNode;
+    /** Trailing slot (e.g. a Button). Hidden when omitted. */
+    trailing?: React.ReactNode;
+    /** The last row in its column — omits the bottom divider. */
+    last?: boolean;
+    /** Force the brand-accent highlight (active / selected row). */
+    active?: boolean;
+    /**
+     * Render the single child element as the root (e.g. a `<td>` / `<a>`) instead
+     * of a `<div>`, keeping all cell styling. The child's own children become the
+     * middle content; `leading`/`trailing` are injected around them.
+     */
+    asChild?: boolean;
+}
+/**
+ * The atomic presentational cell for FD data tables (Layer 1). Presentational by
+ * default (a non-focusable `<div>`). For an INTERACTIVE cell (e.g. one that opens
+ * a details panel), make it focusable — `asChild` onto a `<button>`/`<a>`, or
+ * pass `tabIndex`/`role`/`onClick` — and it shows the brand-accent treatment on
+ * keyboard focus (`:focus-visible`), identical to hover.
+ */
+declare function TableCell({ className, last, leading, trailing, active, asChild, children, ref, ...props }: TableCellProps): React.JSX.Element;
+
+interface CellTextProps extends Omit<React.ComponentProps<"div">, "children"> {
+    /** Primary line (Archivo 14/20 — `body-03`). */
+    label: React.ReactNode;
+    /**
+     * Optional secondary line: mono (Chakra Petch 12/16 — `body-mono-04`)
+     * segments joined by a 2px dot separator. Arbitrary length.
+     */
+    meta?: React.ReactNode[];
+}
+/**
+ * Middle-slot helper for <TableCell>: a `label` line above an optional `meta`
+ * row. Recolors to the brand foregrounds via the parent <TableCell> group on
+ * hover / keyboard focus / `data-state="active"`, so it MUST be rendered inside
+ * a <TableCell>.
+ */
+declare function CellText({ label, meta, className, ...props }: CellTextProps): React.JSX.Element;
+
+export { CellText, type CellTextProps, TableCell, type TableCellProps, type TableCellVariantsProps, tableCellVariants };

package/dist/table-cell.js

@@ -0,0 +1,2 @@
+export { CellText, TableCell, tableCellVariants } from './chunk-SJ2ZRYVV.js';
+import './chunk-7EOSDFS3.js';

package/dist/table-title.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/lib/cn.ts
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function TableTitle({ className, children, ref, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "table-title",
+      className: cn(
+        "flex h-8 w-full items-center overflow-hidden border-b border-card-border px-2 py-1.5",
+        className
+      ),
+      ref,
+      ...props,
+      children: children != null && /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          "data-slot": "table-title-label",
+          className: "caption-03-medium min-w-0 truncate uppercase text-card-foreground-muted",
+          children
+        }
+      )
+    }
+  );
+}
+
+exports.TableTitle = TableTitle;

package/dist/table-title.d.cts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+interface TableTitleProps extends React.ComponentProps<"div"> {
+}
+/**
+ * The section-header row for FD data tables — a static 32px band that labels the
+ * table (or a column group) sitting above the <TableCell> rows (Layer 1). The
+ * `children` are the label; they render in the muted `caption-03-medium` style,
+ * uppercased, and truncate with an ellipsis when they overflow. Omitting children
+ * yields the empty header band (the Figma `showTitle=false` variant). Owns the
+ * bottom divider (`card/border`); override via `className` when composed inside a
+ * table shell that draws its own separators.
+ */
+declare function TableTitle({ className, children, ref, ...props }: TableTitleProps): React.JSX.Element;
+
+export { TableTitle, type TableTitleProps };

package/dist/table-title.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+interface TableTitleProps extends React.ComponentProps<"div"> {
+}
+/**
+ * The section-header row for FD data tables — a static 32px band that labels the
+ * table (or a column group) sitting above the <TableCell> rows (Layer 1). The
+ * `children` are the label; they render in the muted `caption-03-medium` style,
+ * uppercased, and truncate with an ellipsis when they overflow. Omitting children
+ * yields the empty header band (the Figma `showTitle=false` variant). Owns the
+ * bottom divider (`card/border`); override via `className` when composed inside a
+ * table shell that draws its own separators.
+ */
+declare function TableTitle({ className, children, ref, ...props }: TableTitleProps): React.JSX.Element;
+
+export { TableTitle, type TableTitleProps };

package/dist/table-title.js

@@ -0,0 +1,2 @@
+export { TableTitle } from './chunk-3RU7JMFE.js';
+import './chunk-7EOSDFS3.js';