@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/dist/containers/settings-layout/settings-layout.js

@@ -0,0 +1,71 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+function SettingsLayout({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid grid-cols-[220px_minmax(0,1fr)] items-start gap-6 @max-[940px]/page:grid-cols-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SettingsLayoutNav({
+  "aria-label": ariaLabel = "Sections",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": ariaLabel,
+      className: cn(
+        "sticky top-20 flex flex-col gap-px @max-[940px]/page:static @max-[940px]/page:flex-row @max-[940px]/page:overflow-x-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SettingsLayoutNavItem({
+  active,
+  className,
+  type = "button",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type,
+      "aria-current": active ? "true" : void 0,
+      className: cn(
+        "flex shrink-0 items-center gap-2.5 rounded-control px-2.5 py-[7px] font-medium text-[13px] text-ink-2 hover:bg-surface-2 hover:text-ink",
+        active && "bg-accent-soft font-semibold text-accent-ink",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SettingsLayoutMain({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex min-w-0 flex-col gap-4",
+        "@min-[1180px]/page:block @min-[1180px]/page:[columns:2_460px] @min-[1180px]/page:[column-gap:16px]",
+        "@min-[1180px]/page:[&>*]:mb-4 @min-[1180px]/page:[&>*]:[break-inside:avoid]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  SettingsLayout,
+  SettingsLayoutMain,
+  SettingsLayoutNav,
+  SettingsLayoutNavItem
+};

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

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

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

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

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

@@ -0,0 +1,10 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+export interface SettingsRowProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Control on the right: a switch, a button, etc. */
+    control?: ReactNode;
+    /** Id for the title element, so the control can reference it with `aria-labelledby`. */
+    titleId?: string;
+}
+export declare function SettingsRow({ title, description, control, titleId, className, ...props }: SettingsRowProps): import("react").JSX.Element;

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

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+function SettingsRow({
+  title,
+  description,
+  control,
+  titleId,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-wrap items-center justify-between gap-x-4 gap-y-2.5 border-t-divider px-4 py-[13px] first:border-t-0",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-[1_1_14rem] break-words", children: [
+          /* @__PURE__ */ jsx("p", { id: titleId, className: "font-semibold text-[13px]", children: title }),
+          description ? /* @__PURE__ */ jsx("p", { className: "max-w-[60ch] text-[12px] text-ink-3", children: description }) : null
+        ] }),
+        control ? /* @__PURE__ */ jsx("div", { className: "flex max-w-full shrink-0 items-center", children: control }) : null
+      ]
+    }
+  );
+}
+export {
+  SettingsRow
+};

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

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

package/dist/containers/table/index.js

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

package/dist/containers/table/pin.d.ts

@@ -0,0 +1,33 @@
+export type PinSide = "left" | "right";
+/** Column ids pinned to each edge. Each list is ordered as the columns appear, left to right. */
+export interface PinnedColumns {
+    left?: readonly string[];
+    right?: readonly string[];
+}
+export interface PinPosition {
+    side: PinSide;
+    /** Distance in px from the pinned edge (the `left` or `right` sticky offset). */
+    offset: number;
+    /** Innermost pinned column of its side: the one that casts the edge shadow. */
+    edge: boolean;
+}
+/**
+ * Cumulative sticky offsets from measured column widths. Left columns stack from the left
+ * edge in order; right columns stack from the right edge, so the last id sits at offset 0.
+ * Ids without a measured width are ignored; an id listed on both sides keeps its left pin.
+ */
+export declare function computePinOffsets(widths: Readonly<Record<string, number>>, pinned: PinnedColumns): Record<string, PinPosition>;
+/** Drops ids that no longer exist, duplicates, and ids pinned on both sides. */
+export declare function sanitizePinned(pinned: PinnedColumns, knownIds: readonly string[] | null): {
+    left: string[];
+    right: string[];
+};
+/** Pins `id` to `side`, or unpins it when `side` is null; lists follow `order` (column order). */
+export declare function setColumnPin(pinned: PinnedColumns, id: string, side: PinSide | null, order: readonly string[]): {
+    left: string[];
+    right: string[];
+};
+export declare function parseStoredPins(raw: string | null): {
+    left: string[];
+    right: string[];
+} | null;

package/dist/containers/table/pin.js

@@ -0,0 +1,56 @@
+function computePinOffsets(widths, pinned) {
+  const result = {};
+  const left = (pinned.left ?? []).filter((id) => widths[id] !== void 0);
+  const right = (pinned.right ?? []).filter((id) => widths[id] !== void 0 && !left.includes(id));
+  let offset = 0;
+  left.forEach((id, index) => {
+    result[id] = { side: "left", offset, edge: index === left.length - 1 };
+    offset += widths[id] ?? 0;
+  });
+  offset = 0;
+  for (let index = right.length - 1; index >= 0; index -= 1) {
+    const id = right[index];
+    result[id] = { side: "right", offset, edge: index === 0 };
+    offset += widths[id] ?? 0;
+  }
+  return result;
+}
+function sanitizePinned(pinned, knownIds) {
+  const keep = (id) => typeof id === "string" && (knownIds === null || knownIds.includes(id));
+  const left = [...new Set((pinned.left ?? []).filter(keep))];
+  const right = [...new Set((pinned.right ?? []).filter(keep))].filter((id) => !left.includes(id));
+  return { left, right };
+}
+function setColumnPin(pinned, id, side, order) {
+  const without = (list) => (list ?? []).filter((x) => x !== id);
+  const left = without(pinned.left);
+  const right = without(pinned.right);
+  if (side === "left") left.push(id);
+  if (side === "right") right.push(id);
+  const rank = (x) => {
+    const index = order.indexOf(x);
+    return index === -1 ? Number.MAX_SAFE_INTEGER : index;
+  };
+  return {
+    left: left.sort((a, b) => rank(a) - rank(b)),
+    right: right.sort((a, b) => rank(a) - rank(b))
+  };
+}
+function parseStoredPins(raw) {
+  if (!raw) return null;
+  try {
+    const value = JSON.parse(raw);
+    if (typeof value !== "object" || value === null) return null;
+    const { left, right } = value;
+    const list = (x) => Array.isArray(x) ? x.filter((item) => typeof item === "string") : [];
+    return { left: list(left), right: list(right) };
+  } catch {
+    return null;
+  }
+}
+export {
+  computePinOffsets,
+  parseStoredPins,
+  sanitizePinned,
+  setColumnPin
+};

package/dist/containers/table/table.d.ts

@@ -0,0 +1,60 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { type PinnedColumns } from "./pin.js";
+export type { PinnedColumns, PinSide } from "./pin.js";
+export interface TableLabels {
+    pinLeft: string;
+    pinRight: string;
+    unpin: string;
+}
+export interface TableProps extends ComponentPropsWithoutRef<"table"> {
+    /** Controlled pinned columns (ids of `columnId`). Pair it with `onPinnedColumnsChange`. */
+    pinnedColumns?: PinnedColumns;
+    /** Initial pins when uncontrolled. */
+    defaultPinnedColumns?: PinnedColumns;
+    onPinnedColumnsChange?: (pinned: {
+        left: string[];
+        right: string[];
+    }) => void;
+    /** localStorage key that remembers the user's pins (uncontrolled only). */
+    pinStorageKey?: string;
+    /** Texts of the pin buttons (Spanish by default). */
+    labels?: Partial<TableLabels>;
+    /** Classes of the scroll wrapper. */
+    wrapperClassName?: string;
+}
+/**
+ * Table inside its own horizontal scroll wrapper. Give columns a `columnId` (header and cells)
+ * and mark header cells `pinnable` to let the user pin them to the left or right edge: pinned
+ * columns stay sticky while the rest scrolls.
+ */
+export declare function Table({ className, wrapperClassName, pinnedColumns, defaultPinnedColumns, onPinnedColumnsChange, pinStorageKey, labels, ...props }: TableProps): import("react").JSX.Element;
+export declare function TableHead(props: ComponentPropsWithoutRef<"thead">): import("react").JSX.Element;
+export declare function TableBody(props: ComponentPropsWithoutRef<"tbody">): import("react").JSX.Element;
+interface ColumnProps {
+    /** Identifies the column so it can be pinned. Use the same id on the header and its cells. */
+    columnId?: string;
+}
+interface AlignProps extends ColumnProps {
+    alignRight?: boolean;
+}
+export declare function TableHeaderCell({ className, alignRight, columnId, pinnable, children, style, ...props }: ComponentPropsWithoutRef<"th"> & AlignProps & {
+    pinnable?: boolean;
+}): ReactNode;
+export declare function TableRow({ className, ...props }: ComponentPropsWithoutRef<"tr">): import("react").JSX.Element;
+export declare function TableCell({ className, alignRight, columnId, style, ...props }: ComponentPropsWithoutRef<"td"> & AlignProps): import("react").JSX.Element;
+export interface TableLinkRowProps extends Omit<ComponentPropsWithoutRef<"tr">, "children"> {
+    /** Row destination: rendered as a real `<a href>` in the first cell. */
+    href: string;
+    /** Content of the first cell, wrapped by the anchor. */
+    primary: ReactNode;
+    /** `columnId` of the first cell, so that column can be pinned. */
+    primaryColumnId?: string;
+    /** Additional `<td>` cells of the row. */
+    children?: ReactNode;
+}
+/**
+ * Fully navigable table row: the real link lives in the first cell and, via a
+ * stretched link (positioned `<tr>` + anchor `::before` at `inset-0`), its
+ * click area covers the whole row without duplicating the link per cell.
+ */
+export declare function TableLinkRow({ href, primary, primaryColumnId, children, className, ...props }: TableLinkRowProps): import("react").JSX.Element;

package/dist/containers/table/table.js

@@ -0,0 +1,325 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowLeftToLine, ArrowRightToLine, PinOff } from "lucide-react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../utils/cn.js";
+import {
+  computePinOffsets,
+  parseStoredPins,
+  sanitizePinned,
+  setColumnPin
+} from "./pin.js";
+const DEFAULT_LABELS = {
+  pinLeft: "Fijar a la izquierda",
+  pinRight: "Fijar a la derecha",
+  unpin: "Desfijar"
+};
+const PinContext = createContext(null);
+function readStorage(key) {
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+function writeStorage(key, value) {
+  try {
+    window.localStorage.setItem(key, value);
+  } catch {
+  }
+}
+function sameLists(a, b) {
+  return JSON.stringify([a.left ?? [], a.right ?? []]) === JSON.stringify([b.left ?? [], b.right ?? []]);
+}
+function Table({
+  className,
+  wrapperClassName,
+  pinnedColumns,
+  defaultPinnedColumns,
+  onPinnedColumnsChange,
+  pinStorageKey,
+  labels,
+  ...props
+}) {
+  const wrapperRef = useRef(null);
+  const tableRef = useRef(null);
+  const controlled = pinnedColumns !== void 0;
+  const [internal, setInternal] = useState(defaultPinnedColumns ?? {});
+  const [knownIds, setKnownIds] = useState(null);
+  const [positions, setPositions] = useState({});
+  const [scrolled, setScrolled] = useState({ start: false, end: false });
+  useEffect(() => {
+    if (!pinStorageKey || controlled) return;
+    const stored = parseStoredPins(readStorage(pinStorageKey));
+    if (stored) setInternal(stored);
+  }, [pinStorageKey, controlled]);
+  const pinned = sanitizePinned((controlled ? pinnedColumns : internal) ?? {}, knownIds);
+  const pinnedKey = JSON.stringify(pinned);
+  const measure = useCallback(() => {
+    const table = tableRef.current;
+    const wrapper = wrapperRef.current;
+    if (!table || !wrapper) return;
+    const ids = [];
+    const widths = {};
+    for (const cell of table.querySelectorAll("thead [data-column-id]")) {
+      const id = cell.dataset.columnId;
+      if (!id) continue;
+      ids.push(id);
+      widths[id] = cell.getBoundingClientRect().width;
+    }
+    setKnownIds(
+      (previous) => previous && previous.length === ids.length && previous.every((id, i) => id === ids[i]) ? previous : ids
+    );
+    const next = computePinOffsets(widths, JSON.parse(pinnedKey));
+    setPositions(
+      (previous) => JSON.stringify(previous) === JSON.stringify(next) ? previous : next
+    );
+    const start = wrapper.scrollLeft > 0;
+    const end = wrapper.scrollLeft + wrapper.clientWidth < wrapper.scrollWidth - 1;
+    setScrolled(
+      (previous) => previous.start === start && previous.end === end ? previous : { start, end }
+    );
+  }, [pinnedKey]);
+  useLayoutEffect(() => {
+    measure();
+    const table = tableRef.current;
+    const wrapper = wrapperRef.current;
+    if (!table || !wrapper) return;
+    let frame = 0;
+    const schedule = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(measure);
+    };
+    const resize = new ResizeObserver(schedule);
+    resize.observe(wrapper);
+    resize.observe(table);
+    for (const cell of table.querySelectorAll("thead [data-column-id]")) resize.observe(cell);
+    const mutation = new MutationObserver(schedule);
+    mutation.observe(table, { childList: true, subtree: true });
+    return () => {
+      cancelAnimationFrame(frame);
+      resize.disconnect();
+      mutation.disconnect();
+    };
+  }, [measure]);
+  const pin = useCallback(
+    (columnId, side) => {
+      const next = setColumnPin(pinned, columnId, side, knownIds ?? []);
+      if (sameLists(next, pinned)) return;
+      if (!controlled) {
+        setInternal(next);
+        if (pinStorageKey) writeStorage(pinStorageKey, JSON.stringify(next));
+      }
+      onPinnedColumnsChange?.(next);
+    },
+    [pinned, knownIds, controlled, pinStorageKey, onPinnedColumnsChange]
+  );
+  const context = {
+    positions,
+    scrolledStart: scrolled.start,
+    scrolledEnd: scrolled.end,
+    labels: { ...DEFAULT_LABELS, ...labels },
+    pin
+  };
+  return /* @__PURE__ */ jsx(PinContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: wrapperRef,
+      onScroll: measure,
+      className: cn("@container/table max-w-full overflow-x-auto", wrapperClassName),
+      children: /* @__PURE__ */ jsx(
+        "table",
+        {
+          ref: tableRef,
+          className: cn("w-full border-collapse text-[13px]", className),
+          ...props
+        }
+      )
+    }
+  ) });
+}
+function TableHead(props) {
+  return /* @__PURE__ */ jsx("thead", { ...props });
+}
+function TableBody(props) {
+  return /* @__PURE__ */ jsx("tbody", { ...props });
+}
+function usePinnedCell(columnId, header) {
+  const context = useContext(PinContext);
+  const position = columnId ? context?.positions[columnId] : void 0;
+  if (!context || !columnId) return { context, attrs: {}, className: "", style: void 0 };
+  const attrs = { "data-column-id": columnId, "data-pinned": position?.side };
+  if (!position) return { context, attrs, className: "", style: void 0 };
+  const shadowed = position.edge && (position.side === "left" ? context.scrolledStart : context.scrolledEnd);
+  const className = cn(
+    "sticky bg-surface",
+    header ? "z-2" : "z-1 group-hover/row:bg-surface-2 group-aria-selected/row:bg-accent-soft group-data-[selected=true]/row:bg-accent-soft",
+    shadowed && (position.side === "left" ? "shadow-pinned-start" : "shadow-pinned-end")
+  );
+  const style = { [position.side]: position.offset };
+  return { context, attrs, className, style };
+}
+function PinButtons({ columnId }) {
+  const context = useContext(PinContext);
+  if (!context) return null;
+  const side = context.positions[columnId]?.side;
+  const button = "grid size-5 shrink-0 place-items-center rounded-xs text-ink-3 hover:bg-surface-2 hover:text-ink focus-visible:text-ink";
+  if (side) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": "true",
+        "aria-label": context.labels.unpin,
+        title: context.labels.unpin,
+        onClick: () => context.pin(columnId, null),
+        className: cn(button, "text-accent-ink"),
+        children: /* @__PURE__ */ jsx(PinOff, { "aria-hidden": "true", className: "size-3.5" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": "false",
+        "aria-label": context.labels.pinLeft,
+        title: context.labels.pinLeft,
+        onClick: () => context.pin(columnId, "left"),
+        className: button,
+        children: /* @__PURE__ */ jsx(ArrowLeftToLine, { "aria-hidden": "true", className: "size-3.5" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": "false",
+        "aria-label": context.labels.pinRight,
+        title: context.labels.pinRight,
+        onClick: () => context.pin(columnId, "right"),
+        className: button,
+        children: /* @__PURE__ */ jsx(ArrowRightToLine, { "aria-hidden": "true", className: "size-3.5" })
+      }
+    )
+  ] });
+}
+function TableHeaderCell({
+  className,
+  alignRight,
+  columnId,
+  pinnable,
+  children,
+  style,
+  ...props
+}) {
+  const pinned = usePinnedCell(columnId, true);
+  const showPin = pinnable && columnId && pinned.context;
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: cn(
+        "whitespace-nowrap border-b-divider px-4 py-2.5 text-left font-[650] text-[11px] text-ink-3 uppercase tracking-[.07em] @max-sm/table:px-2.5",
+        alignRight && "text-right",
+        pinned.className,
+        className
+      ),
+      style: { ...pinned.style, ...style },
+      ...pinned.attrs,
+      ...props,
+      children: showPin ? /* @__PURE__ */ jsxs("span", { className: cn("inline-flex items-center gap-1", alignRight && "flex-row-reverse"), children: [
+        children,
+        /* @__PURE__ */ jsx(PinButtons, { columnId })
+      ] }) : children
+    }
+  );
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: cn("group/row border-b-divider last:border-b-0 hover:bg-surface-2", className),
+      ...props
+    }
+  );
+}
+function TableCell({
+  className,
+  alignRight,
+  columnId,
+  style,
+  ...props
+}) {
+  const pinned = usePinnedCell(columnId, false);
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      className: cn(
+        "px-4 py-[11px] align-middle @max-sm/table:px-2.5",
+        alignRight && "text-right",
+        pinned.className,
+        className
+      ),
+      style: { ...pinned.style, ...style },
+      ...pinned.attrs,
+      ...props
+    }
+  );
+}
+function TableLinkRow({
+  href,
+  primary,
+  primaryColumnId,
+  children,
+  className,
+  ...props
+}) {
+  const pinned = usePinnedCell(primaryColumnId, false);
+  return /* @__PURE__ */ jsxs(
+    "tr",
+    {
+      className: cn(
+        "group/row relative border-b-divider last:border-b-0 hover:bg-surface-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: cn("p-0 align-middle", pinned.className),
+            style: pinned.style,
+            ...pinned.attrs,
+            children: /* @__PURE__ */ jsx(
+              "a",
+              {
+                href,
+                className: "block px-4 py-[11px] font-[650] text-ink no-underline before:absolute before:inset-0 before:content-[''] @max-sm/table:px-2.5",
+                children: primary
+              }
+            )
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+export {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableLinkRow,
+  TableRow
+};

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

@@ -0,0 +1 @@
+export { Timeline, type TimelineFeedItem, type TimelineFeedTone, type TimelineProps, } from "./timeline.js";

package/dist/containers/timeline/index.js

@@ -0,0 +1,6 @@
+import {
+  Timeline
+} from "./timeline.js";
+export {
+  Timeline
+};

package/dist/containers/timeline/timeline.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+export type TimelineFeedTone = "neutral" | "accent" | "success" | "warning" | "danger";
+export interface TimelineFeedItem {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Display time, e.g. "Hace 5 min" or "14:30". */
+    time?: string;
+    /** Machine-readable value for the `<time>` element. */
+    dateTime?: string;
+    /** Icon inside the marker; without it the marker is a dot. */
+    icon?: ReactNode;
+    tone?: TimelineFeedTone;
+    /** Person or system that did it. */
+    actor?: string;
+    /** Extra content under the text: attachments, chips, actions. */
+    children?: ReactNode;
+    /** Items with the same `group` sit under one heading (e.g. "Hoy"). */
+    group?: string;
+}
+export interface TimelineProps extends Omit<ComponentPropsWithoutRef<"ol">, "children"> {
+    items: TimelineFeedItem[];
+}
+/** Vertical activity feed: marker rail on the left, grouped by day, newest first by convention. */
+export declare function Timeline({ items, className, ...props }: TimelineProps): import("react").JSX.Element;