@eocrm/design-system 0.6.24 → 0.8.0

package/dist/components/CursorPagination/CursorPagination.css

@@ -0,0 +1,82 @@
+:root {
+  --cursor-pagination-gap: var(--space-2);
+  --cursor-pagination-button-gap: var(--space-1);
+  --cursor-pagination-button-height: var(--size-md);
+  --cursor-pagination-button-padding-x: var(--space-3);
+  --cursor-pagination-button-radius: var(--radius-md);
+  --cursor-pagination-button-bg: var(--color-bg);
+  --cursor-pagination-button-fg: var(--color-fg);
+  --cursor-pagination-button-border-color: var(--color-border);
+  --cursor-pagination-button-font-weight: var(--font-weight-medium);
+  --cursor-pagination-button-bg-hover: var(--color-bg-hover);
+  --cursor-pagination-button-bg-active: var(--color-bg-sunken);
+  --cursor-pagination-button-fg-disabled: var(--color-fg-disabled);
+  --cursor-pagination-button-transition-bg: var(--transition-fast);
+  --cursor-pagination-button-transition-border: var(--transition-fast);
+  --cursor-pagination-button-transition-color: var(--transition-fast);
+  --cursor-pagination-font-size-sm: var(--font-size-sm);
+  --cursor-pagination-font-size-md: var(--font-size-md);
+  --cursor-pagination-font-size-lg: var(--font-size-md);
+  --cursor-pagination-button-height-sm: var(--size-sm);
+  --cursor-pagination-button-height-lg: var(--size-lg);
+  --cursor-pagination-button-padding-x-sm: var(--space-2);
+  --cursor-pagination-button-padding-x-lg: var(--space-4);
+}
+
+.CursorPagination__cursorPagination__tyvrL {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cursor-pagination-gap);
+}
+
+.CursorPagination__button__HL-5X {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--cursor-pagination-button-gap);
+  height: var(--cursor-pagination-button-height);
+  padding: 0 var(--cursor-pagination-button-padding-x);
+  border: var(--border-width) solid var(--cursor-pagination-button-border-color);
+  border-radius: var(--cursor-pagination-button-radius);
+  background: var(--cursor-pagination-button-bg);
+  color: var(--cursor-pagination-button-fg);
+  font-family: inherit;
+  font-weight: var(--cursor-pagination-button-font-weight);
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--cursor-pagination-button-transition-bg), border-color var(--cursor-pagination-button-transition-border), color var(--cursor-pagination-button-transition-color);
+}
+.CursorPagination__button__HL-5X:hover:not(:disabled) {
+  background: var(--cursor-pagination-button-bg-hover);
+}
+.CursorPagination__button__HL-5X:active:not(:disabled) {
+  background: var(--cursor-pagination-button-bg-active);
+}
+.CursorPagination__button__HL-5X:focus-visible {
+  outline: var(--ring-width) solid var(--ring-accent);
+  outline-offset: var(--ring-offset);
+}
+.CursorPagination__button__HL-5X:disabled {
+  cursor: not-allowed;
+  color: var(--cursor-pagination-button-fg-disabled);
+}
+
+.CursorPagination__size-sm__g5SUm {
+  font-size: var(--cursor-pagination-font-size-sm);
+}
+.CursorPagination__size-sm__g5SUm .CursorPagination__button__HL-5X {
+  height: var(--cursor-pagination-button-height-sm);
+  padding: 0 var(--cursor-pagination-button-padding-x-sm);
+}
+
+.CursorPagination__size-md__r39Aq {
+  font-size: var(--cursor-pagination-font-size-md);
+}
+
+.CursorPagination__size-lg__kqQ3f {
+  font-size: var(--cursor-pagination-font-size-lg);
+}
+.CursorPagination__size-lg__kqQ3f .CursorPagination__button__HL-5X {
+  height: var(--cursor-pagination-button-height-lg);
+  padding: 0 var(--cursor-pagination-button-padding-x-lg);
+}

package/dist/components/CursorPagination/CursorPagination.d.ts

@@ -0,0 +1,52 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { PaginationSize } from '../Pagination/Pagination.js';
+export interface CursorPaginationProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Whether a previous page exists. When `false`, the previous button is
+     * rendered as `disabled` (layout stays stable; consumer doesn't have to
+     * conditionally hide it).
+     */
+    hasPrevious: boolean;
+    /** Whether a next page exists. */
+    hasNext: boolean;
+    /** Called when the user clicks previous (not fired when disabled). */
+    onPrevious: () => void;
+    /** Called when the user clicks next (not fired when disabled). */
+    onNext: () => void;
+    /**
+     * Label for the previous button. Defaults to the i18n value at
+     * `pagination.previous` (`'Previous'` in English). Override for domain
+     * phrasing (`'Newer'` in a reverse-chronological feed).
+     *
+     * An EMPTY string counts as unset, not as an explicit blank: this label is
+     * the button's only name source (the chevron is `aria-hidden`), so an empty
+     * one would leave the button anonymous rather than merely unlabelled.
+     */
+    previousLabel?: ReactNode;
+    /**
+     * Label for the next button. Defaults to the i18n value at
+     * `pagination.next` (`'Next'` in English).
+     *
+     * An EMPTY string counts as unset, for the same reason as `previousLabel`.
+     */
+    nextLabel?: ReactNode;
+    /**
+     * Visual size — `'sm'` / `'md'` (default) / `'lg'`. Shares the
+     * `<Pagination>` size scale so the two components match when used
+     * alongside each other.
+     */
+    size?: PaginationSize;
+    /** When `true`, both buttons are disabled regardless of has-prev/-next. */
+    disabled?: boolean;
+    /**
+     * Accessible name for the wrapper `<nav>`. Defaults to the i18n value at
+     * `pagination.ariaLabel` (`'Pagination'` in English) when omitted OR empty —
+     * an empty string is not an explicit name, so it takes the default too.
+     */
+    'aria-label'?: string;
+}
+/**
+ * Cursor pagination: prev / next pair for streams without a known total page count.
+ * @see docs/components/CursorPagination.md
+ */
+export declare const CursorPagination: import("react").ForwardRefExoticComponent<CursorPaginationProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/CursorPagination/CursorPagination.js

@@ -0,0 +1,41 @@
+'use client';
+import { useTranslation } from "../../i18n/useTranslation.js";
+import CursorPagination_module_default from "./CursorPagination.module.js";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+// src/components/CursorPagination/CursorPagination.tsx
+/**
+* Cursor pagination: prev / next pair for streams without a known total page count.
+* @see docs/components/CursorPagination.md
+*/
+var CursorPagination = forwardRef(function CursorPagination({ hasPrevious, hasNext, onPrevious, onNext, previousLabel, nextLabel, size = "md", disabled = false, className, "aria-label": ariaLabel, ...props }, ref) {
+	const t = useTranslation();
+	return /* @__PURE__ */ jsxs("nav", {
+		ref,
+		"aria-label": ariaLabel || t("pagination.ariaLabel"),
+		className: clsx(CursorPagination_module_default.cursorPagination, CursorPagination_module_default[`size-${size}`], className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: CursorPagination_module_default.button,
+			onClick: onPrevious,
+			disabled: disabled || !hasPrevious,
+			children: [/* @__PURE__ */ jsx(ChevronLeft, {
+				size: 16,
+				"aria-hidden": true
+			}), /* @__PURE__ */ jsx("span", { children: previousLabel || t("pagination.previous") })]
+		}), /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: CursorPagination_module_default.button,
+			onClick: onNext,
+			disabled: disabled || !hasNext,
+			children: [/* @__PURE__ */ jsx("span", { children: nextLabel || t("pagination.next") }), /* @__PURE__ */ jsx(ChevronRight, {
+				size: 16,
+				"aria-hidden": true
+			})]
+		})]
+	});
+});
+export { CursorPagination };

package/dist/components/CursorPagination/CursorPagination.module.js

@@ -0,0 +1,12 @@
+import "./CursorPagination.css";
+// src/components/CursorPagination/CursorPagination.module.scss
+var cursorPagination = "CursorPagination__cursorPagination__tyvrL";
+var button = "CursorPagination__button__HL-5X";
+var CursorPagination_module_default = {
+	cursorPagination,
+	button,
+	"size-sm": "CursorPagination__size-sm__g5SUm",
+	"size-md": "CursorPagination__size-md__r39Aq",
+	"size-lg": "CursorPagination__size-lg__kqQ3f"
+};
+export { button, cursorPagination, CursorPagination_module_default as default };

package/dist/components/CursorPagination/index.d.ts

@@ -0,0 +1,2 @@
+export { CursorPagination } from './CursorPagination.js';
+export type { CursorPaginationProps } from './CursorPagination.js';

package/dist/components/DashboardCanvas/DashboardCanvas.css

@@ -0,0 +1,220 @@
+:root {
+  --dashboard-canvas-row-stacked: var(--space-12);
+  --dashboard-canvas-gap: var(--space-3);
+  --dashboard-canvas-ghost-opacity: 0.6;
+  --dashboard-canvas-item-shadow-dragging: var(--shadow-lg);
+  --dashboard-canvas-drop-preview-bg: var(--color-accent-bg-subtle);
+  --dashboard-canvas-drop-preview-border: var(--color-accent);
+  --dashboard-canvas-handle-hit: var(--space-6);
+  --dashboard-canvas-handle-fg: var(--color-fg-subtle);
+  --dashboard-canvas-drop-indicator: var(--color-accent);
+  --dashboard-canvas-dot-color: var(--color-border-strong);
+  --dashboard-canvas-dot-size: 1.5px;
+}
+
+.DashboardCanvas__canvas__R3IGP {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--dashboard-canvas-gap);
+  container: dashboard-canvas/inline-size;
+}
+
+.DashboardCanvas__sizer__PcqDC {
+  container-type: inline-size;
+}
+
+.DashboardCanvas__canvas__R3IGP:not([data-readonly], [data-narrow]) .DashboardCanvas__item__gwzPS {
+  touch-action: none;
+  cursor: grab;
+}
+
+.DashboardCanvas__canvas__R3IGP:not([data-readonly], [data-narrow]) .DashboardCanvas__container__aMREy {
+  background-image: radial-gradient(circle at calc(var(--dashboard-canvas-gap) / 2) calc(var(--dashboard-canvas-gap) / 2), var(--dashboard-canvas-dot-color) var(--dashboard-canvas-dot-size), transparent var(--dashboard-canvas-dot-size)), radial-gradient(circle at calc(100% - var(--dashboard-canvas-gap) / 2) calc(var(--dashboard-canvas-gap) / 2), var(--dashboard-canvas-dot-color) var(--dashboard-canvas-dot-size), transparent var(--dashboard-canvas-dot-size)), radial-gradient(circle at calc(var(--dashboard-canvas-gap) / 2) calc(100% - var(--dashboard-canvas-gap) / 2), var(--dashboard-canvas-dot-color) var(--dashboard-canvas-dot-size), transparent var(--dashboard-canvas-dot-size)), radial-gradient(circle at calc(100% - var(--dashboard-canvas-gap) / 2) calc(100% - var(--dashboard-canvas-gap) / 2), var(--dashboard-canvas-dot-color) var(--dashboard-canvas-dot-size), transparent var(--dashboard-canvas-dot-size));
+  background-position: calc(var(--dashboard-canvas-gap) / -2) calc(var(--dashboard-canvas-gap) / -2);
+  background-size: calc((100% + var(--dashboard-canvas-gap)) / var(--dc-cols, 24)) calc(var(--dc-row-unit) + var(--dashboard-canvas-gap));
+}
+
+.DashboardCanvas__canvas__R3IGP[data-dragging] {
+  cursor: grabbing;
+  user-select: none;
+}
+
+.DashboardCanvas__canvas__R3IGP[data-dragging]:not([data-readonly], [data-narrow]) .DashboardCanvas__container__aMREy[data-dc-drop-target] {
+  padding-block-end: calc(var(--dc-trailing-rows, 0) * (var(--dc-row-unit) + var(--dashboard-canvas-gap)));
+}
+
+.DashboardCanvas__container__aMREy {
+  --dc-row-unit: var(
+    --dashboard-canvas-row,
+    calc((100cqw - (var(--dc-cols, 24) - 1) * var(--dashboard-canvas-gap)) / var(--dc-cols, 24))
+  );
+  display: grid;
+  grid-template-columns: repeat(var(--dc-cols, 24), minmax(0, 1fr));
+  grid-auto-rows: var(--dc-row-unit);
+  gap: var(--dashboard-canvas-gap);
+}
+
+.DashboardCanvas__canvas__R3IGP:not([data-readonly], [data-narrow]) .DashboardCanvas__container__aMREy[data-dc-empty]:not([inert]) {
+  position: relative;
+  min-height: max(var(--dc-row-unit), var(--space-12));
+}
+
+.DashboardCanvas__dropHint__IC8OS {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--border-width) dashed var(--dashboard-canvas-drop-preview-border);
+  border-radius: var(--radius-md);
+  color: var(--dashboard-canvas-handle-fg);
+  font-size: var(--font-size-sm);
+}
+
+.DashboardCanvas__item__gwzPS {
+  grid-column: var(--dc-col, auto);
+  grid-row: var(--dc-row, auto);
+  position: relative;
+  overflow: auto;
+}
+
+.DashboardCanvas__item__gwzPS[data-dc-drop-preview] {
+  background: var(--dashboard-canvas-drop-preview-bg);
+  border: var(--border-width) dashed var(--dashboard-canvas-drop-preview-border);
+}
+.DashboardCanvas__item__gwzPS[data-dc-drop-preview] > * {
+  visibility: hidden;
+}
+
+.DashboardCanvas__item__gwzPS[data-dc-resizing] {
+  border: var(--border-width) solid var(--dashboard-canvas-drop-preview-border);
+}
+
+.DashboardCanvas__item__gwzPS:focus-visible {
+  outline: var(--ring-width) solid var(--color-accent);
+  outline-offset: calc(-1 * var(--ring-offset));
+}
+
+.DashboardCanvas__item__gwzPS[data-dc-picked] {
+  border: var(--border-width) solid var(--dashboard-canvas-drop-preview-border);
+  box-shadow: var(--dashboard-canvas-item-shadow-dragging);
+}
+
+.DashboardCanvas__ghost__00A42 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  pointer-events: none;
+  opacity: var(--dashboard-canvas-ghost-opacity);
+  box-shadow: var(--dashboard-canvas-item-shadow-dragging);
+}
+
+.DashboardCanvas__handleE__hFzo4,
+.DashboardCanvas__handleS__UksGe,
+.DashboardCanvas__handleSE__W_XNy {
+  position: absolute;
+  touch-action: none;
+}
+
+.DashboardCanvas__handleE__hFzo4 {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--dashboard-canvas-handle-hit);
+  cursor: ew-resize;
+}
+
+.DashboardCanvas__handleS__UksGe {
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: var(--dashboard-canvas-handle-hit);
+  cursor: ns-resize;
+}
+
+.DashboardCanvas__handleSE__W_XNy {
+  right: 0;
+  bottom: 0;
+  width: var(--dashboard-canvas-handle-hit);
+  height: var(--dashboard-canvas-handle-hit);
+  cursor: nwse-resize;
+}
+
+.DashboardCanvas__handleSE__W_XNy::after {
+  content: "";
+  position: absolute;
+  right: var(--space-1);
+  bottom: var(--space-1);
+  width: var(--space-2);
+  height: var(--space-2);
+  border-right: var(--border-width-emphasis) solid var(--dashboard-canvas-handle-fg);
+  border-bottom: var(--border-width-emphasis) solid var(--dashboard-canvas-handle-fg);
+  border-bottom-right-radius: var(--radius-sm);
+  visibility: hidden;
+}
+
+.DashboardCanvas__item__gwzPS:hover .DashboardCanvas__handleSE__W_XNy::after {
+  visibility: visible;
+}
+
+.DashboardCanvas__bandIndicator__3z46I {
+  height: var(--space-1);
+  border-radius: var(--radius-full);
+  background: var(--dashboard-canvas-drop-indicator);
+}
+
+.DashboardCanvas__sectionDragHandle__hVBlF {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--dashboard-canvas-handle-hit);
+  height: var(--dashboard-canvas-handle-hit);
+  color: var(--dashboard-canvas-handle-fg);
+  touch-action: none;
+  cursor: grab;
+}
+
+.DashboardCanvas__srOnly__JuA5K {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@container dashboard-canvas (max-width: 480px) {
+  .DashboardCanvas__canvas__R3IGP.DashboardCanvas__stackSm__6HAvK .DashboardCanvas__container__aMREy {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    grid-auto-rows: var(--dashboard-canvas-row-stacked);
+  }
+  .DashboardCanvas__canvas__R3IGP.DashboardCanvas__stackSm__6HAvK .DashboardCanvas__item__gwzPS {
+    grid-column: 1/-1;
+    grid-row: var(--dc-h-span, auto);
+  }
+}
+@container dashboard-canvas (max-width: 640px) {
+  .DashboardCanvas__canvas__R3IGP.DashboardCanvas__stackMd__-PXhP .DashboardCanvas__container__aMREy {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    grid-auto-rows: var(--dashboard-canvas-row-stacked);
+  }
+  .DashboardCanvas__canvas__R3IGP.DashboardCanvas__stackMd__-PXhP .DashboardCanvas__item__gwzPS {
+    grid-column: 1/-1;
+    grid-row: var(--dc-h-span, auto);
+  }
+}
+@container dashboard-canvas (max-width: 768px) {
+  .DashboardCanvas__canvas__R3IGP.DashboardCanvas__stackLg__UIi-y .DashboardCanvas__container__aMREy {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    grid-auto-rows: var(--dashboard-canvas-row-stacked);
+  }
+  .DashboardCanvas__canvas__R3IGP.DashboardCanvas__stackLg__UIi-y .DashboardCanvas__item__gwzPS {
+    grid-column: 1/-1;
+    grid-row: var(--dc-h-span, auto);
+  }
+}

package/dist/components/DashboardCanvas/DashboardCanvas.d.ts

@@ -0,0 +1,92 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { CollapseBreakpoint } from '../_internal/collapse.js';
+import type { DashboardCanvasValue, DashboardItemConstraints } from './engine.js';
+/**
+ * Per-item size constraints lookup passed to {@link DashboardCanvas}. Either a
+ * plain record keyed by item id, or a function for computed/dynamic limits.
+ * An item with no entry (and no matching key) gets `minW: 1`, `minH: 1`, no
+ * `maxH`.
+ */
+export type DashboardCanvasConstraintsProp = Record<string, DashboardItemConstraints> | ((id: string | number) => DashboardItemConstraints | undefined);
+export interface DashboardCanvasProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * The controlled layout: top-level items plus an ordered array of
+     * collapsible sections. `DashboardCanvas` never mutates this value — every
+     * change flows out through `onChange`.
+     */
+    value: DashboardCanvasValue;
+    /**
+     * Fires once per completed gesture — a drop, a resize end, a collapse
+     * toggle, a section reorder, or a cross-container move — with the whole
+     * next `value`. Omit for a read-only or fully static canvas; without it,
+     * drags preview live but nothing persists on drop.
+     */
+    onChange?: (next: DashboardCanvasValue) => void;
+    /**
+     * Renders the body of an item by id. Called for every item on every
+     * render — including items inside a COLLAPSED section (its body stays
+     * mounted and `inert`, not unmounted, so Accordion's own collapse
+     * animation has real content to animate) — and once more for the dragged
+     * item mid-gesture (the cursor-following ghost). Keep it pure; a widget
+     * that fetches on mount pays that cost even while its section is
+     * collapsed. The cell itself is a bare positioned box with no
+     * background/border/radius/shadow of its own and no minimum height beyond
+     * its `h` row-span — that chrome belongs here, in whatever this returns
+     * (typically a `<Card>`); size the content to the cell, or accept that a
+     * shorter widget in a taller cell shows bare (dotted, in edit mode) space
+     * below it.
+     */
+    renderItem: (id: string | number) => ReactNode;
+    /**
+     * Optional extra controls in a section's header (a title editor, a
+     * `DropdownMenu` trigger) rendered by section id, to the right of the
+     * title. Keep it small — the header row is not a general-purpose toolbar.
+     * Pointer presses inside the slot never start a band-reorder drag.
+     */
+    renderSectionHeader?: (id: string | number) => ReactNode;
+    /**
+     * Id of a section whose band to highlight (scrolls into view, then a ring
+     * with outward waves, same as `Highlight`) — e.g. a section the user just added. Collapsed bands
+     * highlight too. Does not move focus. Clear it in `onSectionHighlightDone`;
+     * setting the same id again after that re-triggers.
+     */
+    highlightedSectionId?: string | number;
+    /** Fires once the highlight run on `highlightedSectionId` has finished. */
+    onSectionHighlightDone?: () => void;
+    /** Per-item size constraints, consulted when clamping resize gestures. */
+    constraints?: DashboardCanvasConstraintsProp;
+    /**
+     * Column count of every container grid (top level and each section's
+     * sub-grid). All placement/resize bounds clamp against it. Minimum 1;
+     * fractional or sub-1 values are the consumer's bug, not validated.
+     *
+     * Layouts are NOT converted between column counts — a `value` saved at one
+     * `columns` renders at half width when the count doubles. Schemas written
+     * for the earlier 12-column grid (e.g. the eocrm layout-v2 spec) either
+     * pass `columns={12}` to match, or migrate their saved placements to 24.
+     * @default 24
+     */
+    columns?: number;
+    /**
+     * Container width at (inclusive) and below which every container grid
+     * re-templates to one column and pointer + keyboard editing turns off:
+     * `sm` 480px / `md` 640px / `lg` 768px, measured against the canvas's OWN
+     * width (container query), not the viewport. Section collapse toggles keep
+     * working at any width. @default 'md'
+     */
+    stackBelow?: CollapseBreakpoint;
+    /**
+     * View-only mode: identical geometry, but no drag/resize wiring, no resize
+     * handles, and no keyboard editing — the canvas renders `value` and lets
+     * section collapse toggles keep working. The canvas also disables editing
+     * on its own, without this prop, once its own width drops to or below the
+     * `stackBelow` breakpoint (single-column stack) — `readOnly` is for a
+     * consumer-chosen view mode, the width gate is automatic. @default false
+     */
+    readOnly?: boolean;
+}
+/**
+ * Datadog-style 2D snap-grid dashboard: draggable, resizable items and collapsible sections on a configurable-column grid. Always controlled.
+ * @see docs/components/DashboardCanvas.md
+ */
+export declare const DashboardCanvas: import("react").ForwardRefExoticComponent<DashboardCanvasProps & import("react").RefAttributes<HTMLDivElement>>;