@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/dist/containers/file-tree/model.js

@@ -0,0 +1,83 @@
+function flattenTree(nodes, expanded) {
+  const rows = [];
+  const walk = (list, depth, parentId) => {
+    list.forEach((node, i) => {
+      const isFolder = node.children !== void 0;
+      const isOpen = isFolder && expanded.has(node.id);
+      rows.push({
+        node,
+        depth,
+        parentId,
+        position: i + 1,
+        setSize: list.length,
+        isFolder,
+        expanded: isOpen
+      });
+      if (isOpen && node.children) walk(node.children, depth + 1, node.id);
+    });
+  };
+  walk(nodes, 1, null);
+  return rows;
+}
+function treeStep(rows, currentId, key) {
+  const at = rows.findIndex((row2) => row2.node.id === currentId);
+  const row = rows[at];
+  if (!row) return null;
+  switch (key) {
+    case "ArrowDown": {
+      const next = rows[at + 1];
+      return next ? { type: "focus", id: next.node.id } : null;
+    }
+    case "ArrowUp": {
+      const prev = rows[at - 1];
+      return prev ? { type: "focus", id: prev.node.id } : null;
+    }
+    case "Home":
+      return rows[0] ? { type: "focus", id: rows[0].node.id } : null;
+    case "End": {
+      const last = rows[rows.length - 1];
+      return last ? { type: "focus", id: last.node.id } : null;
+    }
+    case "ArrowRight": {
+      if (!row.isFolder) return null;
+      if (!row.expanded) return { type: "expand", id: row.node.id };
+      const child = rows[at + 1];
+      return child && child.parentId === row.node.id ? { type: "focus", id: child.node.id } : null;
+    }
+    case "ArrowLeft": {
+      if (row.isFolder && row.expanded) return { type: "collapse", id: row.node.id };
+      return row.parentId ? { type: "focus", id: row.parentId } : null;
+    }
+  }
+}
+function typeahead(rows, currentId, query) {
+  if (!query) return null;
+  const needle = query.toLowerCase();
+  const start = rows.findIndex((row) => row.node.id === currentId);
+  for (let step = 1; step <= rows.length; step += 1) {
+    const row = rows[(start + step) % rows.length];
+    if (row?.node.name.toLowerCase().startsWith(needle)) return row.node.id;
+  }
+  return null;
+}
+function folderIds(nodes) {
+  return nodes.flatMap((node) => node.children ? [node.id, ...folderIds(node.children)] : []);
+}
+function ancestorsOf(nodes, id) {
+  const walk = (list, path) => {
+    for (const node of list) {
+      if (node.id === id) return path;
+      const found = node.children ? walk(node.children, [...path, node.id]) : null;
+      if (found) return found;
+    }
+    return null;
+  };
+  return walk(nodes, []) ?? [];
+}
+export {
+  ancestorsOf,
+  flattenTree,
+  folderIds,
+  treeStep,
+  typeahead
+};

package/dist/containers/generic-row/generic-row.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentPropsWithoutRef } from "react";
+export type GenericRowProps = ComponentPropsWithoutRef<"div">;
+/**
+ * Generic 3-column row (start / flexible content / end) for heterogeneous
+ * lists. The start and end slots take any content (icon, avatar, chip,
+ * button). No top border on the first row of a consecutive list.
+ */
+export declare function GenericRow({ className, ...props }: GenericRowProps): import("react").JSX.Element;
+export type GenericRowContentProps = ComponentPropsWithoutRef<"div">;
+/** Flexible middle column wrapping title and meta. */
+export declare function GenericRowContent({ className, ...props }: GenericRowContentProps): import("react").JSX.Element;
+export type GenericRowTitleProps = ComponentPropsWithoutRef<"div">;
+export declare function GenericRowTitle({ className, ...props }: GenericRowTitleProps): import("react").JSX.Element;
+export type GenericRowMetaProps = ComponentPropsWithoutRef<"div">;
+/** Secondary metadata under the title. */
+export declare function GenericRowMeta({ className, ...props }: GenericRowMetaProps): import("react").JSX.Element;

package/dist/containers/generic-row/generic-row.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+function GenericRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1 border-t-divider px-4 py-[11px] first:border-t-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function GenericRowContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("min-w-0", className), ...props });
+}
+function GenericRowTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("break-words font-[650] text-[13px]", className), ...props });
+}
+function GenericRowMeta({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("break-words text-[12px] text-ink-3", className), ...props });
+}
+export {
+  GenericRow,
+  GenericRowContent,
+  GenericRowMeta,
+  GenericRowTitle
+};

package/dist/containers/generic-row/index.d.ts

@@ -0,0 +1 @@
+export * from "./generic-row.js";

package/dist/containers/generic-row/index.js

@@ -0,0 +1 @@
+export * from "./generic-row.js";

package/dist/containers/hbars/hbars.d.ts

@@ -0,0 +1,57 @@
+import { type ReactNode } from "react";
+/**
+ * One series. Color is assigned by position, never by name: `series[0]`
+ * paints `accent`, `series[1]` paints `accent-2`. `label` is the only textual
+ * identity of the series and feeds the accessible table, so color is never
+ * the only way to tell series apart.
+ */
+export interface HBarSeries {
+    id: string;
+    label: string;
+}
+/** At most two series. */
+export type HBarSeriesTuple = readonly [HBarSeries] | readonly [HBarSeries, HBarSeries];
+/** One value per declared series, in the same order. */
+export type HBarValues = readonly [number] | readonly [number, number];
+export interface HBarRow {
+    id: string;
+    name: string;
+    /** Values aligned 1:1 with `HBarsProps.series`. */
+    values: HBarValues;
+    /** Tints the visible value. */
+    tone?: "default" | "danger";
+    /** Overrides the value text (default: sum when stacked, both numbers when paired). */
+    valueText?: ReactNode;
+}
+export interface HBarTick {
+    /** Percentage position (0-100) over `scaleMax`. */
+    position: number;
+    label: string;
+}
+export type HBarsVariant = "stacked" | "paired";
+export interface HBarsProps {
+    rows: HBarRow[];
+    series: HBarSeriesTuple;
+    /** Domain value that maps to 100% of the bar width. */
+    scaleMax: number;
+    /** Ticks of the bottom axis; the whole row is omitted when not passed. */
+    ticks?: HBarTick[];
+    /** Threshold line, in the same scale as `scaleMax`. */
+    threshold?: number;
+    /**
+     * "stacked" (default): one fill per row split between series by `flex`.
+     * "paired": each series draws its own independent fill so two metrics on
+     * the same scale can be compared.
+     */
+    variant?: HBarsVariant;
+    /** Accessible table caption exposing the same numbers as the visual grid. */
+    description: string;
+    /** Header of the name column in the accessible table. */
+    nameHeader: string;
+    className?: string;
+}
+/**
+ * Horizontal comparison bars. The visual grid is `aria-hidden`; an `sr-only`
+ * table exposes name plus each series value as real text.
+ */
+export declare function HBars({ rows, series, scaleMax, ticks, threshold, variant, description, nameHeader, className, }: HBarsProps): import("react").JSX.Element;

package/dist/containers/hbars/hbars.js

@@ -0,0 +1,124 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2 } from "react";
+import { cn } from "../../utils/cn.js";
+const SEGMENT_CLASS = {
+  0: "bg-accent",
+  1: "bg-accent-2"
+};
+function rowSum(values) {
+  return values.reduce((total, value) => total + value, 0);
+}
+function defaultValueText(values, variant) {
+  if (variant === "paired") {
+    return values.map((value, index) => (
+      // biome-ignore lint/suspicious/noArrayIndexKey: two fixed values, never reordered.
+      /* @__PURE__ */ jsxs(Fragment2, { children: [
+        index > 0 ? /* @__PURE__ */ jsx("br", {}) : null,
+        value
+      ] }, index)
+    ));
+  }
+  return rowSum(values);
+}
+function HBars({
+  rows,
+  series,
+  scaleMax,
+  ticks,
+  threshold,
+  variant = "stacked",
+  description,
+  nameHeader,
+  className
+}) {
+  const paired = variant === "paired";
+  const thresholdPct = threshold != null ? threshold / scaleMax * 100 : null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("@container flex flex-col", className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "grid grid-cols-[118px_minmax(0,1fr)_30px] items-center gap-x-3 gap-y-2.5 px-4 pt-3.5 pb-1.5",
+          "@max-[560px]:grid-cols-[86px_minmax(0,1fr)_26px]"
+        ),
+        children: [
+          rows.map((row) => /* @__PURE__ */ jsxs(Fragment2, { children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate font-semibold text-[12.5px]", children: row.name }),
+            /* @__PURE__ */ jsxs("div", { className: "relative flex h-[22px] items-center border-r-divider bg-[linear-gradient(to_right,var(--line)_1px,transparent_1px)] [background-size:20%_100%]", children: [
+              paired ? /* @__PURE__ */ jsx("div", { className: "flex h-[26px] w-full flex-col items-start justify-center gap-[3px]", children: row.values.map((value, index) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "relative z-[1] flex h-2 overflow-hidden rounded-xs",
+                  style: { width: `${value / scaleMax * 100}%` },
+                  children: /* @__PURE__ */ jsx("div", { className: cn("block h-full flex-1", SEGMENT_CLASS[index]) })
+                },
+                series[index]?.id ?? index
+              )) }) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "relative z-[1] flex h-3 overflow-hidden rounded-xs",
+                  style: { width: `${rowSum(row.values) / scaleMax * 100}%` },
+                  children: row.values.map((value, index) => /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn("block h-full", SEGMENT_CLASS[index]),
+                      style: { flex: value }
+                    },
+                    series[index]?.id ?? index
+                  ))
+                }
+              ),
+              thresholdPct != null ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "absolute top-[-4px] bottom-[-4px] z-[2] border-danger border-l-[1.5px] border-dashed",
+                  style: { left: `${thresholdPct}%` }
+                }
+              ) : null
+            ] }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "text-right font-semibold text-[12px] leading-none tabular-nums",
+                  paired && "leading-[1.25]",
+                  row.tone === "danger" && "text-danger"
+                ),
+                children: row.valueText ?? defaultValueText(row.values, variant)
+              }
+            )
+          ] }, row.id)),
+          ticks ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", {}),
+            /* @__PURE__ */ jsx("div", { className: "relative h-4", children: ticks.map((tick) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "-translate-x-1/2 absolute font-medium text-[10.5px] text-ink-3 leading-none tabular-nums",
+                style: { left: `${tick.position}%` },
+                children: tick.label
+              },
+              tick.position
+            )) }),
+            /* @__PURE__ */ jsx("span", {})
+          ] }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("table", { className: "sr-only", children: [
+      /* @__PURE__ */ jsx("caption", { children: description }),
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { scope: "col", children: nameHeader }),
+        series.map((item) => /* @__PURE__ */ jsx("th", { scope: "col", children: item.label }, item.id))
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { scope: "row", children: row.name }),
+        row.values.map((value, index) => /* @__PURE__ */ jsx("td", { children: value }, series[index]?.id ?? index))
+      ] }, row.id)) })
+    ] })
+  ] });
+}
+export {
+  HBars
+};

package/dist/containers/hbars/index.d.ts

@@ -0,0 +1 @@
+export * from "./hbars.js";

package/dist/containers/hbars/index.js

@@ -0,0 +1 @@
+export * from "./hbars.js";

package/dist/containers/highlight-line/highlight-line.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithoutRef } from "react";
+export type HighlightLineProps = ComponentPropsWithoutRef<"p">;
+/**
+ * Focus sentence at the top of a card; wrap the key phrase in `<strong>` to
+ * emphasize it. It only paints the text, it computes nothing.
+ */
+export declare function HighlightLine({ className, ...props }: HighlightLineProps): import("react").JSX.Element;

package/dist/containers/highlight-line/highlight-line.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+function HighlightLine({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn("mb-3.5 max-w-[70ch] text-lede text-ink-2 [&_strong]:text-ink", className),
+      ...props
+    }
+  );
+}
+export {
+  HighlightLine
+};

package/dist/containers/highlight-line/index.d.ts

@@ -0,0 +1 @@
+export * from "./highlight-line.js";

package/dist/containers/highlight-line/index.js

@@ -0,0 +1 @@
+export * from "./highlight-line.js";

package/dist/containers/index.d.ts

@@ -0,0 +1,26 @@
+export * from "./action-bar/index.js";
+export * from "./banner/index.js";
+export * from "./card/index.js";
+export * from "./carousel/index.js";
+export * from "./cell/index.js";
+export * from "./cols/index.js";
+export * from "./comment/index.js";
+export * from "./data-grid/index.js";
+export * from "./description-list/index.js";
+export * from "./facts/index.js";
+export * from "./file-tree/index.js";
+export * from "./generic-row/index.js";
+export * from "./hbars/index.js";
+export * from "./highlight-line/index.js";
+export * from "./item-card-group/index.js";
+export * from "./kanban/index.js";
+export * from "./kpi/index.js";
+export * from "./kpi-group/index.js";
+export * from "./page-header/index.js";
+export * from "./resizable/index.js";
+export * from "./scrolly/index.js";
+export * from "./settings-layout/index.js";
+export * from "./settings-row/index.js";
+export * from "./table/index.js";
+export * from "./timeline/index.js";
+export * from "./toolbar/index.js";

package/dist/containers/index.js

@@ -0,0 +1,26 @@
+export * from "./action-bar/index.js";
+export * from "./banner/index.js";
+export * from "./card/index.js";
+export * from "./carousel/index.js";
+export * from "./cell/index.js";
+export * from "./cols/index.js";
+export * from "./comment/index.js";
+export * from "./data-grid/index.js";
+export * from "./description-list/index.js";
+export * from "./facts/index.js";
+export * from "./file-tree/index.js";
+export * from "./generic-row/index.js";
+export * from "./hbars/index.js";
+export * from "./highlight-line/index.js";
+export * from "./item-card-group/index.js";
+export * from "./kanban/index.js";
+export * from "./kpi/index.js";
+export * from "./kpi-group/index.js";
+export * from "./page-header/index.js";
+export * from "./resizable/index.js";
+export * from "./scrolly/index.js";
+export * from "./settings-layout/index.js";
+export * from "./settings-row/index.js";
+export * from "./table/index.js";
+export * from "./timeline/index.js";
+export * from "./toolbar/index.js";

package/dist/containers/item-card-group/index.d.ts

@@ -0,0 +1 @@
+export { ItemCardGroup, type ItemCardGroupItem, type ItemCardGroupProps, } from "./item-card-group.js";

package/dist/containers/item-card-group/index.js

@@ -0,0 +1,6 @@
+import {
+  ItemCardGroup
+} from "./item-card-group.js";
+export {
+  ItemCardGroup
+};

package/dist/containers/item-card-group/item-card-group.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+export interface ItemCardGroupItem {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Icon, avatar or thumbnail at the start. */
+    leading?: ReactNode;
+    /** Value, chip or switch at the end. */
+    trailing?: ReactNode;
+    /** Makes the row a button; the chevron shows it is navigable. */
+    onSelect?: () => void;
+    disabled?: boolean;
+}
+export interface ItemCardGroupProps extends Omit<ComponentPropsWithoutRef<"section">, "title"> {
+    title?: ReactNode;
+    description?: ReactNode;
+    items: ItemCardGroupItem[];
+    /** Id of the highlighted row. */
+    selectedId?: string;
+}
+/** Rows grouped inside a single card (settings, clients, services), with an optional heading. */
+export declare function ItemCardGroup({ title, description, items, selectedId, className, ...props }: ItemCardGroupProps): import("react").JSX.Element;

package/dist/containers/item-card-group/item-card-group.js

@@ -0,0 +1,66 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../../utils/cn.js";
+function ItemCardGroup({
+  title,
+  description,
+  items,
+  selectedId,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn("@container/item-group flex min-w-0 flex-col gap-density-sm", className),
+      ...props,
+      children: [
+        title || description ? /* @__PURE__ */ jsxs("header", { className: "flex min-w-0 flex-col px-1", children: [
+          title ? /* @__PURE__ */ jsx("h3", { className: "truncate text-card-title text-ink", children: title }) : null,
+          description ? /* @__PURE__ */ jsx("p", { className: "m-0 text-ink-3 text-meta", children: description }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col overflow-hidden rounded-card border-card surface-card p-0 shadow-card", children: items.map((item, index) => {
+          const selected = item.id === selectedId;
+          const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+            item.leading ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center text-ink-2 [&_svg]:size-5", children: item.leading }) : null,
+            /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col text-left", children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate text-row-title text-ink", children: item.title }),
+              item.description ? /* @__PURE__ */ jsx("span", { className: "truncate text-ink-3 text-meta", children: item.description }) : null
+            ] }),
+            item.trailing ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center gap-density-sm text-ink-2 text-meta", children: item.trailing }) : null,
+            item.onSelect ? /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 shrink-0 text-ink-3", "aria-hidden": "true" }) : null
+          ] });
+          const rowClass = cn(
+            "flex min-h-control w-full min-w-0 items-center gap-density px-control-x py-density-sm",
+            index > 0 && "border-t-divider",
+            selected && "bg-accent-soft shadow-selected"
+          );
+          return /* @__PURE__ */ jsx("li", { className: "min-w-0", children: item.onSelect ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: item.disabled,
+              "aria-current": selected ? "true" : void 0,
+              onClick: item.onSelect,
+              className: cn(
+                rowClass,
+                "pressable cursor-pointer text-left hover:bg-surface-2 focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-50"
+              ),
+              children: body
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-current": selected ? "true" : void 0,
+              className: cn(rowClass, item.disabled && "opacity-50"),
+              children: body
+            }
+          ) }, item.id);
+        }) })
+      ]
+    }
+  );
+}
+export {
+  ItemCardGroup
+};

package/dist/containers/kanban/index.d.ts

@@ -0,0 +1,2 @@
+export { Kanban, type KanbanProps } from "./kanban.js";
+export { dropIndex, type KanbanCardData, type KanbanColumnData, type KanbanKey, type KanbanMove, keyboardTarget, locateCard, type MoveOptions, moveCard, type WipStatus, wipStatus, } from "./model.js";

package/dist/containers/kanban/index.js

@@ -0,0 +1,16 @@
+import { Kanban } from "./kanban.js";
+import {
+  dropIndex,
+  keyboardTarget,
+  locateCard,
+  moveCard,
+  wipStatus
+} from "./model.js";
+export {
+  Kanban,
+  dropIndex,
+  keyboardTarget,
+  locateCard,
+  moveCard,
+  wipStatus
+};

package/dist/containers/kanban/kanban.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+import { type KanbanCardData, type KanbanColumnData, type KanbanMove } from "./model.js";
+export interface KanbanProps {
+    /** Controlled board. Pair with `onColumnsChange`. */
+    columns?: KanbanColumnData[];
+    defaultColumns?: KanbanColumnData[];
+    /** Called after a drop (pointer release or keyboard drop) with the new board and the move. */
+    onColumnsChange?: (columns: KanbanColumnData[], move: KanbanMove) => void;
+    /** Refuse drops into another column that already reached its WIP limit. */
+    enforceLimit?: boolean;
+    /** Replaces the default card body. */
+    renderCard?: (card: KanbanCardData) => ReactNode;
+    emptyLabel?: string;
+    "aria-label"?: string;
+    className?: string;
+}
+/**
+ * Board of columns with draggable cards and WIP limits. Pointer: drag a card (touch: use the
+ * grip). Keyboard: Space or Enter picks a card up, arrows move it, Space or Enter drops it,
+ * Escape cancels. Moves are announced in a live region.
+ */
+export declare function Kanban({ columns: controlled, defaultColumns, onColumnsChange, enforceLimit, renderCard, emptyLabel, className, "aria-label": ariaLabel, }: KanbanProps): import("react").JSX.Element;