@crystallize/design-system 1.6.1 → 1.8.0

package/dist/chunk-VUXQZRSP.mjs

@@ -1,737 +0,0 @@
-// 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
-};