@crystallize/design-system 1.4.0 → 1.4.2

package/dist/chunk-VUXQZRSP.mjs

@@ -0,0 +1,737 @@
+// src/spinner/index.tsx
+import { cx } from "class-variance-authority";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var realSize = 40;
+var Spinner = forwardRef(
+  ({ children, className, color = "currentColor", size = 30, strokeSize, ...delegated }, ref) => {
+    const viewSize = size || realSize;
+    const sizeHalf = realSize / 2;
+    return /* @__PURE__ */ jsxs("div", {
+      ref,
+      className: cx("c-spinner", className),
+      "data-testid": "loading-spinner",
+      ...delegated,
+      children: [
+        /* @__PURE__ */ jsx("svg", {
+          viewBox: `0 0 ${realSize} ${realSize}`,
+          x: "0px",
+          y: "0px",
+          style: { width: viewSize, height: viewSize },
+          children: /* @__PURE__ */ jsx("circle", {
+            cx: "20",
+            cy: "20",
+            r: "18",
+            style: {
+              stroke: color,
+              strokeWidth: strokeSize ? strokeSize : viewSize / 10,
+              strokeLinecap: "round",
+              strokeDasharray: size < 16 ? size * 6 : size * 3.5,
+              transformOrigin: `${sizeHalf}px ${sizeHalf}px 0`
+            },
+            className: "c-spinner-artifact"
+          })
+        }),
+        children && /* @__PURE__ */ jsx("span", {
+          className: "c-spinner-children",
+          style: { fontSize: size ? `${size * 0.75}px` : "1em" },
+          children
+        })
+      ]
+    });
+  }
+);
+Spinner.displayName = "Spinner";
+
+// src/button/button.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { cva } from "class-variance-authority";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var buttonTokens = {
+  variant: {
+    default: "c-btn",
+    elevate: "c-btn-elevate"
+  },
+  intent: {
+    default: "c-btn",
+    action: "c-btn-action",
+    danger: "c-btn-danger"
+  },
+  size: {
+    xs: "c-btn-xs",
+    sm: "c-btn-sm",
+    md: "c-btn-md",
+    lg: "c-btn-lg"
+  }
+};
+var buttonStyles = cva("c-btn", {
+  variants: {
+    intent: {
+      default: "",
+      action: "",
+      danger: ""
+    },
+    variant: {
+      default: "",
+      elevate: ""
+    },
+    status: {
+      loading: "c-btn-loading"
+    },
+    size: {
+      xs: "c-btn-xs",
+      sm: "c-btn-sm",
+      md: "c-btn-md",
+      lg: "c-btn-lg"
+    }
+  },
+  compoundVariants: [
+    {
+      intent: "default",
+      variant: "elevate",
+      class: "c-btn-elevate"
+    },
+    {
+      intent: "action",
+      variant: "default",
+      class: "c-btn-action"
+    },
+    {
+      intent: "danger",
+      variant: "default",
+      class: "c-btn-danger"
+    },
+    {
+      intent: "danger",
+      variant: "elevate",
+      class: "c-btn-danger c-btn-elevate"
+    }
+  ],
+  defaultVariants: {
+    intent: "default",
+    variant: "default",
+    size: "sm"
+  }
+});
+var spinnerSizeMap = {
+  xs: 10,
+  sm: 12,
+  md: 14,
+  lg: 16
+};
+var Button = forwardRef2(
+  ({
+    children,
+    className,
+    type = "button",
+    as: El = "button",
+    size,
+    variant,
+    intent,
+    prepend,
+    append,
+    status,
+    ...delegated
+  }, ref) => {
+    let isAnchor = false;
+    if ("to" in delegated || "href" in delegated) {
+      isAnchor = true;
+    }
+    return /* @__PURE__ */ jsxs2(El, {
+      ref,
+      type: isAnchor ? void 0 : type,
+      className: buttonStyles({ size, variant, intent, status, className }),
+      ...delegated,
+      children: [
+        !prepend ? null : /* @__PURE__ */ jsx2("span", {
+          className: "c-btn__prepend",
+          children: prepend
+        }),
+        children,
+        status !== "loading" ? null : /* @__PURE__ */ jsx2("span", {
+          className: "c-btn__loading-spinner",
+          children: /* @__PURE__ */ jsx2(Spinner, {
+            size: size ? spinnerSizeMap[size] : spinnerSizeMap.md
+          })
+        }),
+        !append ? null : /* @__PURE__ */ jsx2("span", {
+          className: "c-btn__append",
+          children: append
+        })
+      ]
+    });
+  }
+);
+Button.displayName = "Button";
+
+// src/input/input.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var inputStyles = cva2(["c-input"], {
+  variants: {},
+  defaultVariants: {}
+});
+var Input = forwardRef3(({ className, ...delegated }, ref) => {
+  return /* @__PURE__ */ jsx3("input", {
+    ref,
+    className: inputStyles({ className }),
+    type: "text",
+    ...delegated
+  });
+});
+Input.displayName = "Input";
+
+// src/label/label.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { cx as cx2 } from "class-variance-authority";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Label = forwardRef4(({ className, ...delegated }, ref) => {
+  return /* @__PURE__ */ jsx4("label", {
+    ref,
+    className: cx2("c-label", className),
+    ...delegated
+  });
+});
+Label.displayName = "Label";
+
+// src/input-with-label/input-with-label.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { cva as cva3, cx as cx3 } from "class-variance-authority";
+
+// src/iconography/triangle.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Triangle = forwardRef5((delegated, ref) => {
+  const { width = 20, height = 20, ...rest } = delegated;
+  return /* @__PURE__ */ jsx5("svg", {
+    viewBox: "0 0 17 15",
+    width,
+    height,
+    ref,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...rest,
+    children: /* @__PURE__ */ jsx5("path", {
+      d: "M15.463 1.2L8.5 12.685 1.537 1.2h13.925zM1.353.896s0 0 0 0h0z",
+      stroke: "currentColor",
+      strokeWidth: 2.4
+    })
+  });
+});
+
+// src/input-with-label/input-with-label.tsx
+import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var inputWithLabelStyles = cva3(["c-input-with-label"], {
+  variants: {
+    variant: {
+      default: "",
+      elevated: "c-input-with-label-elevated",
+      outlined: "c-input-with-label-outlined"
+    },
+    status: {
+      error: "c-input-with-label--error"
+    }
+  },
+  defaultVariants: {}
+});
+var InputWithLabel = forwardRef6(
+  ({ className, label, append, errorMessage, status, variant, id, labelProps, ...delegated }, ref) => {
+    const { className: labelClassName, ...labelPropsRest } = labelProps ?? {};
+    return /* @__PURE__ */ jsx6(Fragment, {
+      children: /* @__PURE__ */ jsxs3(Label, {
+        className: inputWithLabelStyles({ status, variant, className: labelClassName }),
+        htmlFor: id,
+        ...labelPropsRest,
+        children: [
+          label,
+          /* @__PURE__ */ jsxs3("span", {
+            className: "c-input-with-label-input-wrap",
+            children: [
+              /* @__PURE__ */ jsx6(Input, {
+                className: cx3("c-input-with-label-input", className),
+                ref,
+                id,
+                ...delegated
+              }),
+              !append && !errorMessage ? null : /* @__PURE__ */ jsx6("div", {
+                className: "c-input-with-label-append",
+                title: errorMessage,
+                children: errorMessage ? /* @__PURE__ */ jsx6(Triangle, {}) : append
+              })
+            ]
+          })
+        ]
+      })
+    });
+  }
+);
+InputWithLabel.displayName = "InputWithLabel";
+
+// src/rich-text-editor/plugins/TablePlugin.tsx
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import "react";
+import {
+  $createNodeSelection,
+  $createParagraphNode,
+  $getSelection,
+  $isRangeSelection,
+  $isRootOrShadowRoot,
+  $setSelection,
+  COMMAND_PRIORITY_EDITOR,
+  createCommand
+} from "lexical";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+
+// src/rich-text-editor/nodes/TableNode.tsx
+import * as React from "react";
+import { Suspense } from "react";
+import {
+  DecoratorNode
+} from "lexical";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var cellHTMLCache = /* @__PURE__ */ new Map();
+var cellTextContentCache = /* @__PURE__ */ new Map();
+var emptyEditorJSON = '{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';
+var plainTextEditorJSON = (text) => text === "" ? emptyEditorJSON : `{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":${text},"type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}`;
+var TableComponent = React.lazy(
+  () => import("./TableComponent-QINOO453.mjs")
+);
+function createUID() {
+  return Math.random().toString(36).replace(/[^a-z]+/g, "").substr(0, 5);
+}
+function createCell(type) {
+  return {
+    colSpan: 1,
+    id: createUID(),
+    json: emptyEditorJSON,
+    type,
+    width: null
+  };
+}
+function createRow() {
+  return {
+    cells: [],
+    height: null,
+    id: createUID()
+  };
+}
+function extractRowsFromHTML(tableElem) {
+  const rowElems = tableElem.querySelectorAll("tr");
+  const rows = [];
+  for (let y = 0; y < rowElems.length; y++) {
+    const rowElem = rowElems[y];
+    const cellElems = rowElem.querySelectorAll("td,th");
+    if (!cellElems || cellElems.length === 0) {
+      continue;
+    }
+    const cells = [];
+    for (let x = 0; x < cellElems.length; x++) {
+      const cellElem = cellElems[x];
+      const isHeader = cellElem.nodeName === "TH";
+      const cell = createCell(isHeader ? "header" : "normal");
+      cell.json = plainTextEditorJSON(JSON.stringify(cellElem.innerText.replace(/\n/g, " ")));
+      cells.push(cell);
+    }
+    const row = createRow();
+    row.cells = cells;
+    rows.push(row);
+  }
+  return rows;
+}
+function convertTableElement(domNode) {
+  const rowElems = domNode.querySelectorAll("tr");
+  if (!rowElems || rowElems.length === 0) {
+    return null;
+  }
+  const rows = [];
+  for (let y = 0; y < rowElems.length; y++) {
+    const rowElem = rowElems[y];
+    const cellElems = rowElem.querySelectorAll("td,th");
+    if (!cellElems || cellElems.length === 0) {
+      continue;
+    }
+    const cells = [];
+    for (let x = 0; x < cellElems.length; x++) {
+      const cellElem = cellElems[x];
+      const isHeader = cellElem.nodeName === "TH";
+      const cell = createCell(isHeader ? "header" : "normal");
+      cell.json = plainTextEditorJSON(JSON.stringify(cellElem.innerText.replace(/\n/g, " ")));
+      cells.push(cell);
+    }
+    const row = createRow();
+    row.cells = cells;
+    rows.push(row);
+  }
+  return { node: $createTableNode(rows) };
+}
+function exportTableCellsToHTML(rows, rect) {
+  const table = document.createElement("table");
+  const colGroup = document.createElement("colgroup");
+  const tBody = document.createElement("tbody");
+  const firstRow = rows[0];
+  for (let x = rect != null ? rect.startX : 0; x < (rect != null ? rect.endX + 1 : firstRow.cells.length); x++) {
+    const col = document.createElement("col");
+    colGroup.append(col);
+  }
+  for (let y = rect != null ? rect.startY : 0; y < (rect != null ? rect.endY + 1 : rows.length); y++) {
+    const row = rows[y];
+    const cells = row.cells;
+    const rowElem = document.createElement("tr");
+    for (let x = rect != null ? rect.startX : 0; x < (rect != null ? rect.endX + 1 : cells.length); x++) {
+      const cell = cells[x];
+      const cellElem = document.createElement(cell.type === "header" ? "th" : "td");
+      cellElem.innerHTML = cellHTMLCache.get(cell.json) || "";
+      rowElem.appendChild(cellElem);
+    }
+    tBody.appendChild(rowElem);
+  }
+  table.appendChild(colGroup);
+  table.appendChild(tBody);
+  return table;
+}
+var TableNode = class extends DecoratorNode {
+  constructor(rows, key) {
+    super(key);
+    this.__rows = rows || [];
+  }
+  static getType() {
+    return "tablesheet";
+  }
+  static clone(node) {
+    return new TableNode(Array.from(node.__rows), node.__key);
+  }
+  static importJSON(serializedNode) {
+    return $createTableNode(serializedNode.rows);
+  }
+  exportJSON() {
+    return {
+      rows: this.__rows,
+      type: "tablesheet",
+      version: 1
+    };
+  }
+  static importDOM() {
+    return {
+      table: (_node) => ({
+        conversion: convertTableElement,
+        priority: 0
+      })
+    };
+  }
+  exportDOM() {
+    return { element: exportTableCellsToHTML(this.__rows) };
+  }
+  createDOM() {
+    return document.createElement("div");
+  }
+  updateDOM() {
+    return false;
+  }
+  mergeRows(startX, startY, mergeRows) {
+    const self = this.getWritable();
+    const rows = self.__rows;
+    const endY = Math.min(rows.length, startY + mergeRows.length);
+    for (let y = startY; y < endY; y++) {
+      const row = rows[y];
+      const mergeRow = mergeRows[y - startY];
+      const cells = row.cells;
+      const cellsClone = Array.from(cells);
+      const rowClone = { ...row, cells: cellsClone };
+      const mergeCells = mergeRow.cells;
+      const endX = Math.min(cells.length, startX + mergeCells.length);
+      for (let x = startX; x < endX; x++) {
+        const cell = cells[x];
+        const mergeCell = mergeCells[x - startX];
+        const cellClone = { ...cell, json: mergeCell.json, type: mergeCell.type };
+        cellsClone[x] = cellClone;
+      }
+      rows[y] = rowClone;
+    }
+  }
+  updateCellJSON(x, y, json) {
+    const self = this.getWritable();
+    const rows = self.__rows;
+    const row = rows[y];
+    const cells = row.cells;
+    const cell = cells[x];
+    const cellsClone = Array.from(cells);
+    const cellClone = { ...cell, json };
+    const rowClone = { ...row, cells: cellsClone };
+    cellsClone[x] = cellClone;
+    rows[y] = rowClone;
+  }
+  updateCellType(x, y, type) {
+    const self = this.getWritable();
+    const rows = self.__rows;
+    const row = rows[y];
+    const cells = row.cells;
+    const cell = cells[x];
+    const cellsClone = Array.from(cells);
+    const cellClone = { ...cell, type };
+    const rowClone = { ...row, cells: cellsClone };
+    cellsClone[x] = cellClone;
+    rows[y] = rowClone;
+  }
+  insertColumnAt(x) {
+    const self = this.getWritable();
+    const rows = self.__rows;
+    for (let y = 0; y < rows.length; y++) {
+      const row = rows[y];
+      const cells = row.cells;
+      const cellsClone = Array.from(cells);
+      const rowClone = { ...row, cells: cellsClone };
+      const type = (cells[x] || cells[x - 1]).type;
+      cellsClone.splice(x, 0, createCell(type));
+      rows[y] = rowClone;
+    }
+  }
+  deleteColumnAt(x) {
+    const self = this.getWritable();
+    const rows = self.__rows;
+    for (let y = 0; y < rows.length; y++) {
+      const row = rows[y];
+      const cells = row.cells;
+      const cellsClone = Array.from(cells);
+      const rowClone = { ...row, cells: cellsClone };
+      cellsClone.splice(x, 1);
+      rows[y] = rowClone;
+    }
+  }
+  addColumns(count) {
+    const self = this.getWritable();
+    const rows = self.__rows;
+    for (let y = 0; y < rows.length; y++) {
+      const row = rows[y];
+      const cells = row.cells;
+      const cellsClone = Array.from(cells);
+      const rowClone = { ...row, cells: cellsClone };
+      const type = cells[cells.length - 1].type;
+      for (let x = 0; x < count; x++) {
+        cellsClone.push(createCell(type));
+      }
+      rows[y] = rowClone;
+    }
+  }
+  insertRowAt(y) {
+    const self = this.getWritable();
+    const rows = self.__rows;
+    const prevRow = rows[y] || rows[y - 1];
+    const cellCount = prevRow.cells.length;
+    const row = createRow();
+    for (let x = 0; x < cellCount; x++) {
+      const cell = createCell(prevRow.cells[x].type);
+      row.cells.push(cell);
+    }
+    rows.splice(y, 0, row);
+  }
+  deleteRowAt(y) {
+    const self = this.getWritable();
+    const rows = self.__rows;
+    rows.splice(y, 1);
+  }
+  addRows(count) {
+    const self = this.getWritable();
+    const rows = self.__rows;
+    const prevRow = rows[rows.length - 1];
+    const cellCount = prevRow.cells.length;
+    for (let y = 0; y < count; y++) {
+      const row = createRow();
+      for (let x = 0; x < cellCount; x++) {
+        const cell = createCell(prevRow.cells[x].type);
+        row.cells.push(cell);
+      }
+      rows.push(row);
+    }
+  }
+  updateColumnWidth(x, width) {
+    const self = this.getWritable();
+    const rows = self.__rows;
+    for (let y = 0; y < rows.length; y++) {
+      const row = rows[y];
+      const cells = row.cells;
+      const cellsClone = Array.from(cells);
+      const rowClone = { ...row, cells: cellsClone };
+      cellsClone[x].width = width;
+      rows[y] = rowClone;
+    }
+  }
+  decorate(_, config) {
+    return /* @__PURE__ */ jsx7(Suspense, {
+      fallback: "...",
+      children: /* @__PURE__ */ jsx7(TableComponent, {
+        nodeKey: this.__key,
+        theme: config.theme,
+        rows: this.__rows
+      })
+    });
+  }
+  isInline() {
+    return false;
+  }
+};
+function $isTableNode(node) {
+  return node instanceof TableNode;
+}
+function $createTableNode(rows) {
+  return new TableNode(rows);
+}
+function $createTableNodeWithDimensions(rowCount, columnCount, includeHeaders = true) {
+  const rows = [];
+  for (let y = 0; y < columnCount; y++) {
+    const row = createRow();
+    rows.push(row);
+    for (let x = 0; x < rowCount; x++) {
+      row.cells.push(createCell(includeHeaders === true && (y === 0 || x === 0) ? "header" : "normal"));
+    }
+  }
+  return new TableNode(rows);
+}
+
+// src/rich-text-editor/plugins/TablePlugin.tsx
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var INSERT_NEW_TABLE_COMMAND = createCommand("INSERT_NEW_TABLE_COMMAND");
+var CellContext = createContext({
+  cellEditorConfig: null,
+  cellEditorPlugins: null,
+  set: () => {
+  }
+});
+function TableContext({ children }) {
+  const [contextValue, setContextValue] = useState({
+    cellEditorConfig: null,
+    cellEditorPlugins: null
+  });
+  return /* @__PURE__ */ jsx8(CellContext.Provider, {
+    value: useMemo(
+      () => ({
+        cellEditorConfig: contextValue.cellEditorConfig,
+        cellEditorPlugins: contextValue.cellEditorPlugins,
+        set: (cellEditorConfig, cellEditorPlugins) => {
+          setContextValue({ cellEditorConfig, cellEditorPlugins });
+        }
+      }),
+      [contextValue.cellEditorConfig, contextValue.cellEditorPlugins]
+    ),
+    children
+  });
+}
+function InsertNewTableDialog({ activeEditor }) {
+  const [rows, setRows] = useState("5");
+  const [columns, setColumns] = useState("5");
+  const onClick = () => {
+    if (parseInt(rows) < 1 || parseInt(columns) < 1) {
+      return;
+    }
+    activeEditor.dispatchCommand(INSERT_NEW_TABLE_COMMAND, { columns, rows });
+  };
+  return /* @__PURE__ */ jsxs4(Fragment2, {
+    children: [
+      /* @__PURE__ */ jsxs4("div", {
+        className: "grid grid-cols-[1fr_1px_1fr] border border-gray-100-800 border-solid shadow-sm rounded-md ",
+        children: [
+          /* @__PURE__ */ jsx8(InputWithLabel, {
+            label: "Rows",
+            value: rows,
+            placeholder: "0",
+            type: "text",
+            inputMode: "numeric",
+            onChange: (e) => setRows(e.target.value)
+          }),
+          /* @__PURE__ */ jsx8("span", {
+            className: "h-full bg-gray-100-800"
+          }),
+          /* @__PURE__ */ jsx8(InputWithLabel, {
+            type: "text",
+            label: "Columns",
+            placeholder: "0",
+            value: columns,
+            inputMode: "numeric",
+            onChange: (e) => setColumns(e.target.value)
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx8("div", {
+        className: "flex justify-end mt-3",
+        children: /* @__PURE__ */ jsx8(Button, {
+          size: "sm",
+          intent: "action",
+          "aria-label": "Confirm",
+          onClick,
+          children: "Confirm"
+        })
+      })
+    ]
+  });
+}
+function TablePlugin({
+  cellEditorConfig,
+  children
+}) {
+  const [editor] = useLexicalComposerContext();
+  const cellContext = useContext(CellContext);
+  useEffect(() => {
+    if (!editor.hasNodes([TableNode])) {
+      throw new Error("TablePlugin: TableNode is not registered on editor");
+    }
+    cellContext.set(cellEditorConfig, children);
+    return editor.registerCommand(
+      INSERT_NEW_TABLE_COMMAND,
+      ({ columns, rows, includeHeaders }) => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection)) {
+          return true;
+        }
+        const focus = selection.focus;
+        const focusNode = focus.getNode();
+        if (focusNode !== null) {
+          const tableNode = $createTableNodeWithDimensions(Number(rows), Number(columns), includeHeaders);
+          if ($isRootOrShadowRoot(focusNode)) {
+            const target = focusNode.getChildAtIndex(focus.offset);
+            if (target !== null) {
+              target.insertBefore(tableNode);
+            } else {
+              focusNode.append(tableNode);
+            }
+            tableNode.insertBefore($createParagraphNode());
+          } else {
+            const topLevelNode = focusNode.getTopLevelElementOrThrow();
+            topLevelNode.insertAfter(tableNode);
+          }
+          tableNode.insertAfter($createParagraphNode());
+          const nodeSelection = $createNodeSelection();
+          nodeSelection.add(tableNode.getKey());
+          $setSelection(nodeSelection);
+        }
+        return true;
+      },
+      COMMAND_PRIORITY_EDITOR
+    );
+  }, [cellContext, cellEditorConfig, children, editor]);
+  return null;
+}
+
+// src/rich-text-editor/utils/environment.ts
+var IS_APPLE = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+
+export {
+  Spinner,
+  buttonTokens,
+  Button,
+  Input,
+  Label,
+  InputWithLabel,
+  CellContext,
+  TableContext,
+  InsertNewTableDialog,
+  TablePlugin,
+  IS_APPLE,
+  cellHTMLCache,
+  cellTextContentCache,
+  createUID,
+  createRow,
+  extractRowsFromHTML,
+  exportTableCellsToHTML,
+  TableNode,
+  $isTableNode
+};