@flanksource/clicky-ui 0.3.5 → 0.3.7

package/dist/components/ListMenu.d.ts

@@ -0,0 +1,54 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { ButtonProps } from './button';
+import { ListMenuSelection } from './use-list-menu-selection';
+export type ListMenuProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Enables multi-select. Pass the object returned by `useListMenuSelection`;
+     * rows that set `itemKey` then become selectable via checkbox or Shift+Click.
+     */
+    selection?: ListMenuSelection;
+    /** Render a leading checkbox on selectable rows (default true when `selection` is set). */
+    showCheckboxes?: boolean;
+};
+export declare function ListMenu({ className, selection, showCheckboxes, children, ...props }: ListMenuProps): import("react/jsx-runtime").JSX.Element;
+export type ListMenuSectionProps = HTMLAttributes<HTMLDivElement>;
+export declare function ListMenuSection({ className, ...props }: ListMenuSectionProps): import("react/jsx-runtime").JSX.Element;
+export type ListMenuHeaderProps = HTMLAttributes<HTMLDivElement>;
+export declare function ListMenuHeader({ className, ...props }: ListMenuHeaderProps): import("react/jsx-runtime").JSX.Element;
+export type ListMenuItemProps = HTMLAttributes<HTMLDivElement> & {
+    /** Applies the primary selected-row treatment used for the open/detail row. */
+    active?: boolean;
+    /** Applies the softer selected treatment used for checkbox or multi-select rows. */
+    selected?: boolean;
+    /** Left-border class when neither active nor selected. */
+    accentClassName?: string;
+    /** Whether the row gets pointer and hover affordances. */
+    interactive?: boolean;
+    /** Stable key that opts the row into `ListMenu` multi-select. */
+    itemKey?: string;
+    /** Hide the leading checkbox for this row even when selection is enabled. */
+    hideCheckbox?: boolean;
+};
+export declare function ListMenuItem({ active, selected, accentClassName, interactive, itemKey, hideCheckbox, className, onClick, children, ...props }: ListMenuItemProps): import("react/jsx-runtime").JSX.Element;
+export type ListMenuAction = {
+    label: ReactNode;
+    /** Receives the currently selected keys (ordered as in the menu). */
+    onClick: (selectedKeys: string[]) => void;
+    icon?: ReactNode;
+    disabled?: boolean;
+    variant?: ButtonProps["variant"];
+};
+export type ListMenuActionBarProps = HTMLAttributes<HTMLDivElement> & {
+    /** Selection to act on; falls back to the enclosing `ListMenu` selection context. */
+    selection?: ListMenuSelection;
+    /** Bulk actions executed across every selected key. */
+    actions?: ListMenuAction[];
+    /** Override the "{n} selected" summary. */
+    renderLabel?: (count: number) => ReactNode;
+    /** Hide the whole bar when nothing is selected (default true). */
+    hideWhenEmpty?: boolean;
+    /** Label for the clear button; pass null to hide it. */
+    clearLabel?: ReactNode;
+};
+export declare function ListMenuActionBar({ selection: selectionProp, actions, renderLabel, hideWhenEmpty, clearLabel, className, children, ...props }: ListMenuActionBarProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ListMenu.d.ts.map

package/dist/components/ListMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListMenu.d.ts","sourceRoot":"","sources":["../../src/components/ListMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC3D;;;OAGG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,2FAA2F;IAC3F,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,SAAS,EACT,cAAqB,EACrB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,aAAa,2CAYf;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAElE,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAE5E;AAED,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjE,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAU1E;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC/D,+EAA+E;IAC/E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,MAAc,EACd,QAAgB,EAChB,eAAsC,EACtC,WAAkB,EAClB,OAAO,EACP,YAAoB,EACpB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAwDnB;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,qEAAqE;IACrE,OAAO,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACpE,qFAAqF;IACrF,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,uDAAuD;IACvD,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAC3C,kEAAkE;IAClE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wDAAwD;IACxD,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EAAE,aAAa,EACxB,OAAY,EACZ,WAAW,EACX,aAAoB,EACpB,UAAoB,EACpB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,sBAAsB,kDAyCxB"}

package/dist/components/ListMenu.js

@@ -0,0 +1,145 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { ListMenuSelectionContext, useListMenuSelectionContext } from "./use-list-menu-selection.js";
+function ListMenu({
+  className,
+  selection,
+  showCheckboxes = true,
+  children,
+  ...props
+}) {
+  const menu = /* @__PURE__ */ jsx("div", { className: cn("divide-y divide-border", className), ...props, children });
+  if (!selection) return menu;
+  return /* @__PURE__ */ jsx(ListMenuSelectionContext.Provider, { value: { selection, showCheckboxes }, children: menu });
+}
+function ListMenuSection({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className, ...props });
+}
+function ListMenuHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "sticky top-0 z-10 flex w-full items-center gap-2 border-b border-border bg-muted px-3 py-1.5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ListMenuItem({
+  active = false,
+  selected = false,
+  accentClassName = "border-transparent",
+  interactive = true,
+  itemKey,
+  hideCheckbox = false,
+  className,
+  onClick,
+  children,
+  ...props
+}) {
+  const ctx = useListMenuSelectionContext();
+  const selectable = ctx !== null && itemKey !== void 0;
+  const rowSelected = selectable ? ctx.selection.isSelected(itemKey) : selected;
+  const handleClick = (event) => {
+    if (selectable && event.shiftKey) {
+      event.preventDefault();
+      ctx.selection.toggle(itemKey, { shiftKey: true });
+      return;
+    }
+    onClick == null ? void 0 : onClick(event);
+  };
+  const showCheckbox = selectable && ctx.showCheckboxes && !hideCheckbox;
+  const body = selectable && showCheckbox ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        className: "mt-0.5 size-4 shrink-0 rounded border-input",
+        checked: rowSelected,
+        "aria-label": "Select item",
+        onClick: (event) => {
+          event.stopPropagation();
+          if (event.shiftKey) {
+            event.preventDefault();
+            ctx.selection.toggle(itemKey, { shiftKey: true });
+          }
+        },
+        onChange: () => ctx.selection.toggle(itemKey)
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children })
+  ] }) : children;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "min-w-0 overflow-hidden border-l-2 transition-colors",
+        interactive && "cursor-pointer",
+        active ? "border-primary bg-primary/10" : rowSelected ? "border-primary/40 bg-primary/5 hover:bg-primary/10" : cn(accentClassName, interactive && "hover:bg-muted"),
+        className
+      ),
+      onClick: handleClick,
+      ...props,
+      children: body
+    }
+  );
+}
+function ListMenuActionBar({
+  selection: selectionProp,
+  actions = [],
+  renderLabel,
+  hideWhenEmpty = true,
+  clearLabel = "Clear",
+  className,
+  children,
+  ...props
+}) {
+  const ctx = useListMenuSelectionContext();
+  const selection = selectionProp ?? (ctx == null ? void 0 : ctx.selection);
+  if (!selection) return null;
+  const { count } = selection;
+  if (hideWhenEmpty && count === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 border-b border-border bg-muted px-3 py-1.5",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: renderLabel ? renderLabel(count) : `${count} selected` }),
+        /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1", children: [
+          actions.map((action, i) => /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              variant: action.variant ?? "outline",
+              disabled: action.disabled || count === 0,
+              onClick: () => action.onClick(selection.selectedKeys),
+              children: [
+                action.icon,
+                action.label
+              ]
+            },
+            i
+          )),
+          children,
+          clearLabel !== null && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => selection.clear(), children: clearLabel })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ListMenu,
+  ListMenuActionBar,
+  ListMenuHeader,
+  ListMenuItem,
+  ListMenuSection
+};
+//# sourceMappingURL=ListMenu.js.map

package/dist/components/ListMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListMenu.js","sources":["../../src/components/ListMenu.tsx"],"sourcesContent":["import type { HTMLAttributes, MouseEvent, ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"./button\";\nimport {\n  ListMenuSelectionContext,\n  useListMenuSelectionContext,\n  type ListMenuSelection,\n} from \"./use-list-menu-selection\";\n\nexport type ListMenuProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Enables multi-select. Pass the object returned by `useListMenuSelection`;\n   * rows that set `itemKey` then become selectable via checkbox or Shift+Click.\n   */\n  selection?: ListMenuSelection;\n  /** Render a leading checkbox on selectable rows (default true when `selection` is set). */\n  showCheckboxes?: boolean;\n};\n\nexport function ListMenu({\n  className,\n  selection,\n  showCheckboxes = true,\n  children,\n  ...props\n}: ListMenuProps) {\n  const menu = (\n    <div className={cn(\"divide-y divide-border\", className)} {...props}>\n      {children}\n    </div>\n  );\n  if (!selection) return menu;\n  return (\n    <ListMenuSelectionContext.Provider value={{ selection, showCheckboxes }}>\n      {menu}\n    </ListMenuSelectionContext.Provider>\n  );\n}\n\nexport type ListMenuSectionProps = HTMLAttributes<HTMLDivElement>;\n\nexport function ListMenuSection({ className, ...props }: ListMenuSectionProps) {\n  return <div className={className} {...props} />;\n}\n\nexport type ListMenuHeaderProps = HTMLAttributes<HTMLDivElement>;\n\nexport function ListMenuHeader({ className, ...props }: ListMenuHeaderProps) {\n  return (\n    <div\n      className={cn(\n        \"sticky top-0 z-10 flex w-full items-center gap-2 border-b border-border bg-muted px-3 py-1.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type ListMenuItemProps = HTMLAttributes<HTMLDivElement> & {\n  /** Applies the primary selected-row treatment used for the open/detail row. */\n  active?: boolean;\n  /** Applies the softer selected treatment used for checkbox or multi-select rows. */\n  selected?: boolean;\n  /** Left-border class when neither active nor selected. */\n  accentClassName?: string;\n  /** Whether the row gets pointer and hover affordances. */\n  interactive?: boolean;\n  /** Stable key that opts the row into `ListMenu` multi-select. */\n  itemKey?: string;\n  /** Hide the leading checkbox for this row even when selection is enabled. */\n  hideCheckbox?: boolean;\n};\n\nexport function ListMenuItem({\n  active = false,\n  selected = false,\n  accentClassName = \"border-transparent\",\n  interactive = true,\n  itemKey,\n  hideCheckbox = false,\n  className,\n  onClick,\n  children,\n  ...props\n}: ListMenuItemProps) {\n  const ctx = useListMenuSelectionContext();\n  const selectable = ctx !== null && itemKey !== undefined;\n  const rowSelected = selectable ? ctx.selection.isSelected(itemKey) : selected;\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (selectable && event.shiftKey) {\n      event.preventDefault();\n      ctx.selection.toggle(itemKey, { shiftKey: true });\n      return;\n    }\n    onClick?.(event);\n  };\n\n  const showCheckbox = selectable && ctx.showCheckboxes && !hideCheckbox;\n  const body =\n    selectable && showCheckbox ? (\n      <div className=\"flex items-start gap-2\">\n        <input\n          type=\"checkbox\"\n          className=\"mt-0.5 size-4 shrink-0 rounded border-input\"\n          checked={rowSelected}\n          aria-label=\"Select item\"\n          onClick={(event) => {\n            event.stopPropagation();\n            if (event.shiftKey) {\n              event.preventDefault();\n              ctx.selection.toggle(itemKey, { shiftKey: true });\n            }\n          }}\n          onChange={() => ctx.selection.toggle(itemKey)}\n        />\n        <div className=\"min-w-0 flex-1\">{children}</div>\n      </div>\n    ) : (\n      children\n    );\n\n  return (\n    <div\n      className={cn(\n        \"min-w-0 overflow-hidden border-l-2 transition-colors\",\n        interactive && \"cursor-pointer\",\n        active\n          ? \"border-primary bg-primary/10\"\n          : rowSelected\n            ? \"border-primary/40 bg-primary/5 hover:bg-primary/10\"\n            : cn(accentClassName, interactive && \"hover:bg-muted\"),\n        className,\n      )}\n      onClick={handleClick}\n      {...props}\n    >\n      {body}\n    </div>\n  );\n}\n\nexport type ListMenuAction = {\n  label: ReactNode;\n  /** Receives the currently selected keys (ordered as in the menu). */\n  onClick: (selectedKeys: string[]) => void;\n  icon?: ReactNode;\n  disabled?: boolean;\n  variant?: ButtonProps[\"variant\"];\n};\n\nexport type ListMenuActionBarProps = HTMLAttributes<HTMLDivElement> & {\n  /** Selection to act on; falls back to the enclosing `ListMenu` selection context. */\n  selection?: ListMenuSelection;\n  /** Bulk actions executed across every selected key. */\n  actions?: ListMenuAction[];\n  /** Override the \"{n} selected\" summary. */\n  renderLabel?: (count: number) => ReactNode;\n  /** Hide the whole bar when nothing is selected (default true). */\n  hideWhenEmpty?: boolean;\n  /** Label for the clear button; pass null to hide it. */\n  clearLabel?: ReactNode;\n};\n\nexport function ListMenuActionBar({\n  selection: selectionProp,\n  actions = [],\n  renderLabel,\n  hideWhenEmpty = true,\n  clearLabel = \"Clear\",\n  className,\n  children,\n  ...props\n}: ListMenuActionBarProps) {\n  const ctx = useListMenuSelectionContext();\n  const selection = selectionProp ?? ctx?.selection;\n  if (!selection) return null;\n  const { count } = selection;\n  if (hideWhenEmpty && count === 0) return null;\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-2 border-b border-border bg-muted px-3 py-1.5\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"text-sm font-medium text-foreground\">\n        {renderLabel ? renderLabel(count) : `${count} selected`}\n      </span>\n      <div className=\"ml-auto flex items-center gap-1\">\n        {actions.map((action, i) => (\n          <Button\n            key={i}\n            type=\"button\"\n            size=\"sm\"\n            variant={action.variant ?? \"outline\"}\n            disabled={action.disabled || count === 0}\n            onClick={() => action.onClick(selection.selectedKeys)}\n          >\n            {action.icon}\n            {action.label}\n          </Button>\n        ))}\n        {children}\n        {clearLabel !== null && (\n          <Button type=\"button\" size=\"sm\" variant=\"ghost\" onClick={() => selection.clear()}>\n            {clearLabel}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/MdxEditorField.cjs

@@ -0,0 +1,128 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../lib/utils.cjs");
+const jsonSchemaFormUtils = require("./json-schema-form-utils.cjs");
+const mdxEditorFieldPlugins = require("./mdx-editor-field-plugins.cjs");
+const EDITOR_MIN_HEIGHT_CLASS = {
+  xs: "min-h-32",
+  sm: "min-h-36",
+  md: "min-h-40",
+  lg: "min-h-48",
+  xl: "min-h-56"
+};
+let mdxEditorModulePromise = null;
+function loadMdxEditorModule() {
+  mdxEditorModulePromise ?? (mdxEditorModulePromise = import("@mdxeditor/editor"));
+  return mdxEditorModulePromise;
+}
+function MdxEditorField({
+  id,
+  value = "",
+  onChange,
+  readOnly = false,
+  disabled = false,
+  size = "md",
+  placeholder,
+  className,
+  contentClassName,
+  textareaClassName,
+  "aria-label": ariaLabel,
+  commitInitialMarkdownNormalize = false,
+  ...pluginOptions
+}) {
+  const [mdx, setMdx] = react.useState(null);
+  const editorRef = react.useRef(null);
+  const lastValueRef = react.useRef(value);
+  const readonly = readOnly || disabled;
+  react.useEffect(() => {
+    let cancelled = false;
+    loadMdxEditorModule().then((mod) => {
+      if (!cancelled) setMdx(mod);
+    }).catch(() => {
+      if (!cancelled) setMdx(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  react.useEffect(() => {
+    var _a;
+    if (!mdx || value === lastValueRef.current) return;
+    lastValueRef.current = value;
+    (_a = editorRef.current) == null ? void 0 : _a.setMarkdown(value);
+  }, [mdx, value]);
+  const commit = react.useCallback(
+    (next, initialMarkdownNormalize = false) => {
+      if (initialMarkdownNormalize && !commitInitialMarkdownNormalize) return;
+      lastValueRef.current = next;
+      onChange == null ? void 0 : onChange(next);
+    },
+    [commitInitialMarkdownNormalize, onChange]
+  );
+  const plugins = react.useMemo(
+    () => mdx ? mdxEditorFieldPlugins.createMdxEditorPlugins(mdx, pluginOptions) : [],
+    [mdx, pluginOptions]
+  );
+  if (!mdx) {
+    const fallbackAriaLabel = ariaLabel ?? (id ? void 0 : "Markdown");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        id,
+        "data-jsf-input": true,
+        rows: 6,
+        "aria-label": fallbackAriaLabel,
+        className: utils.cn(
+          jsonSchemaFormUtils.inputClass(size),
+          "h-auto resize-y font-mono",
+          EDITOR_MIN_HEIGHT_CLASS[size],
+          textareaClassName
+        ),
+        value,
+        disabled: readonly,
+        placeholder: typeof placeholder === "string" ? placeholder : void 0,
+        onChange: (event) => commit(event.target.value)
+      }
+    );
+  }
+  const { MDXEditor } = mdx;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { id, "data-jsf-input": true, className: "min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+    MDXEditor,
+    {
+      ref: editorRef,
+      markdown: value,
+      readOnly: readonly,
+      placeholder,
+      plugins,
+      className: utils.cn("clicky-mdx-editor-field", readonly && "clicky-mdx-editor-field-readonly", className),
+      contentEditableClassName: utils.cn("clicky-mdx-editor-content", EDITOR_MIN_HEIGHT_CLASS[size], contentClassName),
+      onChange: commit
+    }
+  ) });
+}
+exports.MdxEditorField = MdxEditorField;
+//# sourceMappingURL=MdxEditorField.cjs.map

package/dist/components/MdxEditorField.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MdxEditorField.cjs","sources":["../../src/components/MdxEditorField.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport type { FormSize } from \"./json-schema-form-size\";\nimport { inputClass } from \"./json-schema-form-utils\";\nimport { createMdxEditorPlugins } from \"./mdx-editor-field-plugins\";\nimport type { MdxEditorFieldProps } from \"./mdx-editor-options\";\n\ntype MdxEditorModule = typeof import(\"@mdxeditor/editor\");\n\nexport type {\n  MdxEditorAdmonitionOptions,\n  MdxEditorCodeBlockLanguage,\n  MdxEditorCodeBlockOptions,\n  MdxEditorCodeMirrorOptions,\n  MdxEditorDiffModeOptions,\n  MdxEditorFieldProps,\n  MdxEditorHeadingLevel,\n  MdxEditorImageOptions,\n  MdxEditorImagePreviewHandler,\n  MdxEditorImageUploadHandler,\n  MdxEditorLinkOptions,\n  MdxEditorPlugin,\n  MdxEditorPluginOptions,\n  MdxEditorToolbarOptions,\n  MdxEditorViewMode,\n} from \"./mdx-editor-options\";\n\ninterface MdxEditorMethods {\n  focus: () => void;\n  getContentEditableHTML: () => string;\n  getMarkdown: () => string;\n  getSelectionMarkdown: () => string;\n  insertMarkdown: (markdown: string) => void;\n  setMarkdown: (markdown: string) => void;\n}\n\nconst EDITOR_MIN_HEIGHT_CLASS: Record<FormSize, string> = {\n  xs: \"min-h-32\",\n  sm: \"min-h-36\",\n  md: \"min-h-40\",\n  lg: \"min-h-48\",\n  xl: \"min-h-56\",\n};\n\nlet mdxEditorModulePromise: Promise<MdxEditorModule> | null = null;\n\nfunction loadMdxEditorModule(): Promise<MdxEditorModule> {\n  mdxEditorModulePromise ??= import(\"@mdxeditor/editor\");\n  return mdxEditorModulePromise;\n}\n\nexport function MdxEditorField({\n  id,\n  value = \"\",\n  onChange,\n  readOnly = false,\n  disabled = false,\n  size = \"md\",\n  placeholder,\n  className,\n  contentClassName,\n  textareaClassName,\n  \"aria-label\": ariaLabel,\n  commitInitialMarkdownNormalize = false,\n  ...pluginOptions\n}: MdxEditorFieldProps) {\n  const [mdx, setMdx] = useState<MdxEditorModule | null>(null);\n  const editorRef = useRef<MdxEditorMethods>(null);\n  const lastValueRef = useRef(value);\n  const readonly = readOnly || disabled;\n\n  useEffect(() => {\n    let cancelled = false;\n    loadMdxEditorModule()\n      .then((mod) => {\n        if (!cancelled) setMdx(mod);\n      })\n      .catch(() => {\n        if (!cancelled) setMdx(null);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!mdx || value === lastValueRef.current) return;\n    lastValueRef.current = value;\n    editorRef.current?.setMarkdown(value);\n  }, [mdx, value]);\n\n  const commit = useCallback(\n    (next: string, initialMarkdownNormalize = false) => {\n      if (initialMarkdownNormalize && !commitInitialMarkdownNormalize) return;\n      lastValueRef.current = next;\n      onChange?.(next);\n    },\n    [commitInitialMarkdownNormalize, onChange],\n  );\n\n  const plugins = useMemo(\n    () => (mdx ? createMdxEditorPlugins(mdx, pluginOptions) : []),\n    [mdx, pluginOptions],\n  );\n\n  if (!mdx) {\n    const fallbackAriaLabel = ariaLabel ?? (id ? undefined : \"Markdown\");\n    return (\n      <textarea\n        id={id}\n        data-jsf-input\n        rows={6}\n        aria-label={fallbackAriaLabel}\n        className={cn(\n          inputClass(size),\n          \"h-auto resize-y font-mono\",\n          EDITOR_MIN_HEIGHT_CLASS[size],\n          textareaClassName,\n        )}\n        value={value}\n        disabled={readonly}\n        placeholder={typeof placeholder === \"string\" ? placeholder : undefined}\n        onChange={(event) => commit(event.target.value)}\n      />\n    );\n  }\n\n  const { MDXEditor } = mdx;\n  return (\n    <div id={id} data-jsf-input className=\"min-w-0\">\n      <MDXEditor\n        ref={editorRef}\n        markdown={value}\n        readOnly={readonly}\n        placeholder={placeholder}\n        plugins={plugins}\n        className={cn(\"clicky-mdx-editor-field\", readonly && \"clicky-mdx-editor-field-readonly\", className)}\n        contentEditableClassName={cn(\"clicky-mdx-editor-content\", EDITOR_MIN_HEIGHT_CLASS[size], contentClassName)}\n        onChange={commit}\n      />\n    </div>\n  );\n}\n"],"names":["useState","useRef","useEffect","useCallback","useMemo","createMdxEditorPlugins","jsx","cn","inputClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAM,0BAAoD;AAAA,EACxD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAI,yBAA0D;AAE9D,SAAS,sBAAgD;AACvD,sDAA2B,OAAO,mBAAmB;AACrD,SAAO;AACT;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,iCAAiC;AAAA,EACjC,GAAG;AACL,GAAwB;AACtB,QAAM,CAAC,KAAK,MAAM,IAAIA,MAAAA,SAAiC,IAAI;AAC3D,QAAM,YAAYC,MAAAA,OAAyB,IAAI;AAC/C,QAAM,eAAeA,MAAAA,OAAO,KAAK;AACjC,QAAM,WAAW,YAAY;AAE7BC,QAAAA,UAAU,MAAM;AACd,QAAI,YAAY;AAChB,wBAAA,EACG,KAAK,CAAC,QAAQ;AACb,UAAI,CAAC,UAAW,QAAO,GAAG;AAAA,IAC5B,CAAC,EACA,MAAM,MAAM;AACX,UAAI,CAAC,UAAW,QAAO,IAAI;AAAA,IAC7B,CAAC;AACH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAA,CAAE;AAELA,QAAAA,UAAU,MAAM;;AACd,QAAI,CAAC,OAAO,UAAU,aAAa,QAAS;AAC5C,iBAAa,UAAU;AACvB,oBAAU,YAAV,mBAAmB,YAAY;AAAA,EACjC,GAAG,CAAC,KAAK,KAAK,CAAC;AAEf,QAAM,SAASC,MAAAA;AAAAA,IACb,CAAC,MAAc,2BAA2B,UAAU;AAClD,UAAI,4BAA4B,CAAC,+BAAgC;AACjE,mBAAa,UAAU;AACvB,2CAAW;AAAA,IACb;AAAA,IACA,CAAC,gCAAgC,QAAQ;AAAA,EAAA;AAG3C,QAAM,UAAUC,MAAAA;AAAAA,IACd,MAAO,MAAMC,sBAAAA,uBAAuB,KAAK,aAAa,IAAI,CAAA;AAAA,IAC1D,CAAC,KAAK,aAAa;AAAA,EAAA;AAGrB,MAAI,CAAC,KAAK;AACR,UAAM,oBAAoB,cAAc,KAAK,SAAY;AACzD,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,kBAAc;AAAA,QACd,MAAM;AAAA,QACN,cAAY;AAAA,QACZ,WAAWC,MAAAA;AAAAA,UACTC,oBAAAA,WAAW,IAAI;AAAA,UACf;AAAA,UACA,wBAAwB,IAAI;AAAA,UAC5B;AAAA,QAAA;AAAA,QAEF;AAAA,QACA,UAAU;AAAA,QACV,aAAa,OAAO,gBAAgB,WAAW,cAAc;AAAA,QAC7D,UAAU,CAAC,UAAU,OAAO,MAAM,OAAO,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAGpD;AAEA,QAAM,EAAE,cAAc;AACtB,wCACG,OAAA,EAAI,IAAQ,kBAAc,MAAC,WAAU,WACpC,UAAAF,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAWC,MAAAA,GAAG,2BAA2B,YAAY,oCAAoC,SAAS;AAAA,MAClG,0BAA0BA,MAAAA,GAAG,6BAA6B,wBAAwB,IAAI,GAAG,gBAAgB;AAAA,MACzG,UAAU;AAAA,IAAA;AAAA,EAAA,GAEd;AAEJ;;"}

package/dist/components/MdxEditorField.d.ts

@@ -0,0 +1,4 @@
+import { MdxEditorFieldProps } from './mdx-editor-options';
+export type { MdxEditorAdmonitionOptions, MdxEditorCodeBlockLanguage, MdxEditorCodeBlockOptions, MdxEditorCodeMirrorOptions, MdxEditorDiffModeOptions, MdxEditorFieldProps, MdxEditorHeadingLevel, MdxEditorImageOptions, MdxEditorImagePreviewHandler, MdxEditorImageUploadHandler, MdxEditorLinkOptions, MdxEditorPlugin, MdxEditorPluginOptions, MdxEditorToolbarOptions, MdxEditorViewMode, } from './mdx-editor-options';
+export declare function MdxEditorField({ id, value, onChange, readOnly, disabled, size, placeholder, className, contentClassName, textareaClassName, "aria-label": ariaLabel, commitInitialMarkdownNormalize, ...pluginOptions }: MdxEditorFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MdxEditorField.d.ts.map

package/dist/components/MdxEditorField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MdxEditorField.d.ts","sourceRoot":"","sources":["../../src/components/MdxEditorField.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAIhE,YAAY,EACV,0BAA0B,EAC1B,0BAA0B,EAC1B,yBAAyB,EACzB,0BAA0B,EAC1B,wBAAwB,EACxB,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,4BAA4B,EAC5B,2BAA2B,EAC3B,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,uBAAuB,EACvB,iBAAiB,GAClB,MAAM,sBAAsB,CAAC;AA0B9B,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,KAAU,EACV,QAAQ,EACR,QAAgB,EAChB,QAAgB,EAChB,IAAW,EACX,WAAW,EACX,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EAAE,SAAS,EACvB,8BAAsC,EACtC,GAAG,aAAa,EACjB,EAAE,mBAAmB,2CA6ErB"}

package/dist/components/MdxEditorField.js

@@ -0,0 +1,106 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { cn } from "../lib/utils.js";
+import { inputClass } from "./json-schema-form-utils.js";
+import { createMdxEditorPlugins } from "./mdx-editor-field-plugins.js";
+const EDITOR_MIN_HEIGHT_CLASS = {
+  xs: "min-h-32",
+  sm: "min-h-36",
+  md: "min-h-40",
+  lg: "min-h-48",
+  xl: "min-h-56"
+};
+let mdxEditorModulePromise = null;
+function loadMdxEditorModule() {
+  mdxEditorModulePromise ?? (mdxEditorModulePromise = import("@mdxeditor/editor"));
+  return mdxEditorModulePromise;
+}
+function MdxEditorField({
+  id,
+  value = "",
+  onChange,
+  readOnly = false,
+  disabled = false,
+  size = "md",
+  placeholder,
+  className,
+  contentClassName,
+  textareaClassName,
+  "aria-label": ariaLabel,
+  commitInitialMarkdownNormalize = false,
+  ...pluginOptions
+}) {
+  const [mdx, setMdx] = useState(null);
+  const editorRef = useRef(null);
+  const lastValueRef = useRef(value);
+  const readonly = readOnly || disabled;
+  useEffect(() => {
+    let cancelled = false;
+    loadMdxEditorModule().then((mod) => {
+      if (!cancelled) setMdx(mod);
+    }).catch(() => {
+      if (!cancelled) setMdx(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  useEffect(() => {
+    var _a;
+    if (!mdx || value === lastValueRef.current) return;
+    lastValueRef.current = value;
+    (_a = editorRef.current) == null ? void 0 : _a.setMarkdown(value);
+  }, [mdx, value]);
+  const commit = useCallback(
+    (next, initialMarkdownNormalize = false) => {
+      if (initialMarkdownNormalize && !commitInitialMarkdownNormalize) return;
+      lastValueRef.current = next;
+      onChange == null ? void 0 : onChange(next);
+    },
+    [commitInitialMarkdownNormalize, onChange]
+  );
+  const plugins = useMemo(
+    () => mdx ? createMdxEditorPlugins(mdx, pluginOptions) : [],
+    [mdx, pluginOptions]
+  );
+  if (!mdx) {
+    const fallbackAriaLabel = ariaLabel ?? (id ? void 0 : "Markdown");
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        id,
+        "data-jsf-input": true,
+        rows: 6,
+        "aria-label": fallbackAriaLabel,
+        className: cn(
+          inputClass(size),
+          "h-auto resize-y font-mono",
+          EDITOR_MIN_HEIGHT_CLASS[size],
+          textareaClassName
+        ),
+        value,
+        disabled: readonly,
+        placeholder: typeof placeholder === "string" ? placeholder : void 0,
+        onChange: (event) => commit(event.target.value)
+      }
+    );
+  }
+  const { MDXEditor } = mdx;
+  return /* @__PURE__ */ jsx("div", { id, "data-jsf-input": true, className: "min-w-0", children: /* @__PURE__ */ jsx(
+    MDXEditor,
+    {
+      ref: editorRef,
+      markdown: value,
+      readOnly: readonly,
+      placeholder,
+      plugins,
+      className: cn("clicky-mdx-editor-field", readonly && "clicky-mdx-editor-field-readonly", className),
+      contentEditableClassName: cn("clicky-mdx-editor-content", EDITOR_MIN_HEIGHT_CLASS[size], contentClassName),
+      onChange: commit
+    }
+  ) });
+}
+export {
+  MdxEditorField
+};
+//# sourceMappingURL=MdxEditorField.js.map

package/dist/components/MdxEditorField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MdxEditorField.js","sources":["../../src/components/MdxEditorField.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport type { FormSize } from \"./json-schema-form-size\";\nimport { inputClass } from \"./json-schema-form-utils\";\nimport { createMdxEditorPlugins } from \"./mdx-editor-field-plugins\";\nimport type { MdxEditorFieldProps } from \"./mdx-editor-options\";\n\ntype MdxEditorModule = typeof import(\"@mdxeditor/editor\");\n\nexport type {\n  MdxEditorAdmonitionOptions,\n  MdxEditorCodeBlockLanguage,\n  MdxEditorCodeBlockOptions,\n  MdxEditorCodeMirrorOptions,\n  MdxEditorDiffModeOptions,\n  MdxEditorFieldProps,\n  MdxEditorHeadingLevel,\n  MdxEditorImageOptions,\n  MdxEditorImagePreviewHandler,\n  MdxEditorImageUploadHandler,\n  MdxEditorLinkOptions,\n  MdxEditorPlugin,\n  MdxEditorPluginOptions,\n  MdxEditorToolbarOptions,\n  MdxEditorViewMode,\n} from \"./mdx-editor-options\";\n\ninterface MdxEditorMethods {\n  focus: () => void;\n  getContentEditableHTML: () => string;\n  getMarkdown: () => string;\n  getSelectionMarkdown: () => string;\n  insertMarkdown: (markdown: string) => void;\n  setMarkdown: (markdown: string) => void;\n}\n\nconst EDITOR_MIN_HEIGHT_CLASS: Record<FormSize, string> = {\n  xs: \"min-h-32\",\n  sm: \"min-h-36\",\n  md: \"min-h-40\",\n  lg: \"min-h-48\",\n  xl: \"min-h-56\",\n};\n\nlet mdxEditorModulePromise: Promise<MdxEditorModule> | null = null;\n\nfunction loadMdxEditorModule(): Promise<MdxEditorModule> {\n  mdxEditorModulePromise ??= import(\"@mdxeditor/editor\");\n  return mdxEditorModulePromise;\n}\n\nexport function MdxEditorField({\n  id,\n  value = \"\",\n  onChange,\n  readOnly = false,\n  disabled = false,\n  size = \"md\",\n  placeholder,\n  className,\n  contentClassName,\n  textareaClassName,\n  \"aria-label\": ariaLabel,\n  commitInitialMarkdownNormalize = false,\n  ...pluginOptions\n}: MdxEditorFieldProps) {\n  const [mdx, setMdx] = useState<MdxEditorModule | null>(null);\n  const editorRef = useRef<MdxEditorMethods>(null);\n  const lastValueRef = useRef(value);\n  const readonly = readOnly || disabled;\n\n  useEffect(() => {\n    let cancelled = false;\n    loadMdxEditorModule()\n      .then((mod) => {\n        if (!cancelled) setMdx(mod);\n      })\n      .catch(() => {\n        if (!cancelled) setMdx(null);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!mdx || value === lastValueRef.current) return;\n    lastValueRef.current = value;\n    editorRef.current?.setMarkdown(value);\n  }, [mdx, value]);\n\n  const commit = useCallback(\n    (next: string, initialMarkdownNormalize = false) => {\n      if (initialMarkdownNormalize && !commitInitialMarkdownNormalize) return;\n      lastValueRef.current = next;\n      onChange?.(next);\n    },\n    [commitInitialMarkdownNormalize, onChange],\n  );\n\n  const plugins = useMemo(\n    () => (mdx ? createMdxEditorPlugins(mdx, pluginOptions) : []),\n    [mdx, pluginOptions],\n  );\n\n  if (!mdx) {\n    const fallbackAriaLabel = ariaLabel ?? (id ? undefined : \"Markdown\");\n    return (\n      <textarea\n        id={id}\n        data-jsf-input\n        rows={6}\n        aria-label={fallbackAriaLabel}\n        className={cn(\n          inputClass(size),\n          \"h-auto resize-y font-mono\",\n          EDITOR_MIN_HEIGHT_CLASS[size],\n          textareaClassName,\n        )}\n        value={value}\n        disabled={readonly}\n        placeholder={typeof placeholder === \"string\" ? placeholder : undefined}\n        onChange={(event) => commit(event.target.value)}\n      />\n    );\n  }\n\n  const { MDXEditor } = mdx;\n  return (\n    <div id={id} data-jsf-input className=\"min-w-0\">\n      <MDXEditor\n        ref={editorRef}\n        markdown={value}\n        readOnly={readonly}\n        placeholder={placeholder}\n        plugins={plugins}\n        className={cn(\"clicky-mdx-editor-field\", readonly && \"clicky-mdx-editor-field-readonly\", className)}\n        contentEditableClassName={cn(\"clicky-mdx-editor-content\", EDITOR_MIN_HEIGHT_CLASS[size], contentClassName)}\n        onChange={commit}\n      />\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAoCA,MAAM,0BAAoD;AAAA,EACxD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAI,yBAA0D;AAE9D,SAAS,sBAAgD;AACvD,sDAA2B,OAAO,mBAAmB;AACrD,SAAO;AACT;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,iCAAiC;AAAA,EACjC,GAAG;AACL,GAAwB;AACtB,QAAM,CAAC,KAAK,MAAM,IAAI,SAAiC,IAAI;AAC3D,QAAM,YAAY,OAAyB,IAAI;AAC/C,QAAM,eAAe,OAAO,KAAK;AACjC,QAAM,WAAW,YAAY;AAE7B,YAAU,MAAM;AACd,QAAI,YAAY;AAChB,wBAAA,EACG,KAAK,CAAC,QAAQ;AACb,UAAI,CAAC,UAAW,QAAO,GAAG;AAAA,IAC5B,CAAC,EACA,MAAM,MAAM;AACX,UAAI,CAAC,UAAW,QAAO,IAAI;AAAA,IAC7B,CAAC;AACH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,YAAU,MAAM;;AACd,QAAI,CAAC,OAAO,UAAU,aAAa,QAAS;AAC5C,iBAAa,UAAU;AACvB,oBAAU,YAAV,mBAAmB,YAAY;AAAA,EACjC,GAAG,CAAC,KAAK,KAAK,CAAC;AAEf,QAAM,SAAS;AAAA,IACb,CAAC,MAAc,2BAA2B,UAAU;AAClD,UAAI,4BAA4B,CAAC,+BAAgC;AACjE,mBAAa,UAAU;AACvB,2CAAW;AAAA,IACb;AAAA,IACA,CAAC,gCAAgC,QAAQ;AAAA,EAAA;AAG3C,QAAM,UAAU;AAAA,IACd,MAAO,MAAM,uBAAuB,KAAK,aAAa,IAAI,CAAA;AAAA,IAC1D,CAAC,KAAK,aAAa;AAAA,EAAA;AAGrB,MAAI,CAAC,KAAK;AACR,UAAM,oBAAoB,cAAc,KAAK,SAAY;AACzD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,kBAAc;AAAA,QACd,MAAM;AAAA,QACN,cAAY;AAAA,QACZ,WAAW;AAAA,UACT,WAAW,IAAI;AAAA,UACf;AAAA,UACA,wBAAwB,IAAI;AAAA,UAC5B;AAAA,QAAA;AAAA,QAEF;AAAA,QACA,UAAU;AAAA,QACV,aAAa,OAAO,gBAAgB,WAAW,cAAc;AAAA,QAC7D,UAAU,CAAC,UAAU,OAAO,MAAM,OAAO,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAGpD;AAEA,QAAM,EAAE,cAAc;AACtB,6BACG,OAAA,EAAI,IAAQ,kBAAc,MAAC,WAAU,WACpC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW,GAAG,2BAA2B,YAAY,oCAAoC,SAAS;AAAA,MAClG,0BAA0B,GAAG,6BAA6B,wBAAwB,IAAI,GAAG,gBAAgB;AAAA,MACzG,UAAU;AAAA,IAAA;AAAA,EAAA,GAEd;AAEJ;"}

package/dist/components/MdxEditorToolbar.cjs

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+function isEnabled(value, defaultValue = true) {
+  return value === void 0 ? defaultValue : value !== false;
+}
+function diffViewOptions(diffMode) {
+  return diffMode ? ["rich-text", "source", "diff"] : void 0;
+}
+function MdxEditorToolbar({
+  mdx,
+  options
+}) {
+  const { ConditionalContents, ChangeCodeMirrorLanguage } = mdx;
+  const toolbarOptions = [
+    ...isEnabled(options.codeBlocks) && isEnabled(options.codeMirror) ? [
+      {
+        when: (editor) => (editor == null ? void 0 : editor.editorType) === "codeblock",
+        contents: () => /* @__PURE__ */ jsxRuntime.jsx(ChangeCodeMirrorLanguage, {})
+      }
+    ] : [],
+    {
+      fallback: () => /* @__PURE__ */ jsxRuntime.jsx(DefaultToolbarContents, { mdx, options })
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx(ConditionalContents, { options: toolbarOptions });
+}
+function DefaultToolbarContents({
+  mdx,
+  options
+}) {
+  const {
+    BlockTypeSelect,
+    BoldItalicUnderlineToggles,
+    CodeToggle,
+    CreateLink,
+    DiffSourceToggleWrapper,
+    InsertAdmonition,
+    InsertCodeBlock,
+    InsertFrontmatter,
+    InsertImage,
+    InsertTable,
+    InsertThematicBreak,
+    ListsToggle,
+    Separator,
+    UndoRedo
+  } = mdx;
+  const controls = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(UndoRedo, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(BoldItalicUnderlineToggles, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(CodeToggle, {}),
+    isEnabled(options.headings) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(BlockTypeSelect, {})
+    ] }),
+    isEnabled(options.lists) && /* @__PURE__ */ jsxRuntime.jsx(ListsToggle, {}),
+    isEnabled(options.links) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(CreateLink, {})
+    ] }),
+    isEnabled(options.images) && /* @__PURE__ */ jsxRuntime.jsx(InsertImage, {}),
+    (isEnabled(options.tables) || isEnabled(options.thematicBreak) || isEnabled(options.codeBlocks)) && /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
+    isEnabled(options.tables) && /* @__PURE__ */ jsxRuntime.jsx(InsertTable, {}),
+    isEnabled(options.thematicBreak) && /* @__PURE__ */ jsxRuntime.jsx(InsertThematicBreak, {}),
+    isEnabled(options.codeBlocks) && /* @__PURE__ */ jsxRuntime.jsx(InsertCodeBlock, {}),
+    (isEnabled(options.frontmatter) || isEnabled(options.admonitions)) && /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
+    isEnabled(options.frontmatter) && /* @__PURE__ */ jsxRuntime.jsx(InsertFrontmatter, {}),
+    isEnabled(options.admonitions) && /* @__PURE__ */ jsxRuntime.jsx(InsertAdmonition, {})
+  ] });
+  const viewOptions = diffViewOptions(options.diffMode);
+  if (!viewOptions) return controls;
+  return /* @__PURE__ */ jsxRuntime.jsx(DiffSourceToggleWrapper, { options: viewOptions, children: controls });
+}
+exports.MdxEditorToolbar = MdxEditorToolbar;
+//# sourceMappingURL=MdxEditorToolbar.cjs.map

package/dist/components/MdxEditorToolbar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MdxEditorToolbar.cjs","sources":["../../src/components/MdxEditorToolbar.tsx"],"sourcesContent":["import type { ConditionalContentsOption, EditorInFocus, FallbackOption, ViewMode } from \"@mdxeditor/editor\";\nimport type { MdxEditorPluginOptions } from \"./mdx-editor-options\";\n\ntype MdxEditorModule = typeof import(\"@mdxeditor/editor\");\n\nfunction isEnabled<T extends object>(value: boolean | T | undefined, defaultValue = true): boolean {\n  return value === undefined ? defaultValue : value !== false;\n}\n\nfunction diffViewOptions(diffMode: MdxEditorPluginOptions[\"diffMode\"]): ViewMode[] | undefined {\n  return diffMode ? [\"rich-text\", \"source\", \"diff\"] : undefined;\n}\n\nexport function MdxEditorToolbar({\n  mdx,\n  options,\n}: {\n  mdx: MdxEditorModule;\n  options: MdxEditorPluginOptions;\n}) {\n  const { ConditionalContents, ChangeCodeMirrorLanguage } = mdx;\n  const toolbarOptions: Array<ConditionalContentsOption | FallbackOption> = [\n    ...(isEnabled(options.codeBlocks) && isEnabled(options.codeMirror)\n      ? [\n          {\n            when: (editor: EditorInFocus | null) => editor?.editorType === \"codeblock\",\n            contents: () => <ChangeCodeMirrorLanguage />,\n          },\n        ]\n      : []),\n    {\n      fallback: () => <DefaultToolbarContents mdx={mdx} options={options} />,\n    },\n  ];\n  return <ConditionalContents options={toolbarOptions} />;\n}\n\nfunction DefaultToolbarContents({\n  mdx,\n  options,\n}: {\n  mdx: MdxEditorModule;\n  options: MdxEditorPluginOptions;\n}) {\n  const {\n    BlockTypeSelect,\n    BoldItalicUnderlineToggles,\n    CodeToggle,\n    CreateLink,\n    DiffSourceToggleWrapper,\n    InsertAdmonition,\n    InsertCodeBlock,\n    InsertFrontmatter,\n    InsertImage,\n    InsertTable,\n    InsertThematicBreak,\n    ListsToggle,\n    Separator,\n    UndoRedo,\n  } = mdx;\n  const controls = (\n    <>\n      <UndoRedo />\n      <Separator />\n      <BoldItalicUnderlineToggles />\n      <CodeToggle />\n      {isEnabled(options.headings) && (\n        <>\n          <Separator />\n          <BlockTypeSelect />\n        </>\n      )}\n      {isEnabled(options.lists) && <ListsToggle />}\n      {isEnabled(options.links) && (\n        <>\n          <Separator />\n          <CreateLink />\n        </>\n      )}\n      {isEnabled(options.images) && <InsertImage />}\n      {(isEnabled(options.tables) || isEnabled(options.thematicBreak) || isEnabled(options.codeBlocks)) && <Separator />}\n      {isEnabled(options.tables) && <InsertTable />}\n      {isEnabled(options.thematicBreak) && <InsertThematicBreak />}\n      {isEnabled(options.codeBlocks) && <InsertCodeBlock />}\n      {(isEnabled(options.frontmatter) || isEnabled(options.admonitions)) && <Separator />}\n      {isEnabled(options.frontmatter) && <InsertFrontmatter />}\n      {isEnabled(options.admonitions) && <InsertAdmonition />}\n    </>\n  );\n\n  const viewOptions = diffViewOptions(options.diffMode);\n  if (!viewOptions) return controls;\n  return <DiffSourceToggleWrapper options={viewOptions}>{controls}</DiffSourceToggleWrapper>;\n}\n"],"names":["jsx","jsxs","Fragment"],"mappings":";;;AAKA,SAAS,UAA4B,OAAgC,eAAe,MAAe;AACjG,SAAO,UAAU,SAAY,eAAe,UAAU;AACxD;AAEA,SAAS,gBAAgB,UAAsE;AAC7F,SAAO,WAAW,CAAC,aAAa,UAAU,MAAM,IAAI;AACtD;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAGG;AACD,QAAM,EAAE,qBAAqB,yBAAA,IAA6B;AAC1D,QAAM,iBAAoE;AAAA,IACxE,GAAI,UAAU,QAAQ,UAAU,KAAK,UAAU,QAAQ,UAAU,IAC7D;AAAA,MACE;AAAA,QACE,MAAM,CAAC,YAAiC,iCAAQ,gBAAe;AAAA,QAC/D,UAAU,MAAMA,+BAAC,0BAAA,CAAA,CAAyB;AAAA,MAAA;AAAA,IAC5C,IAEF,CAAA;AAAA,IACJ;AAAA,MACE,UAAU,MAAMA,2BAAAA,IAAC,wBAAA,EAAuB,KAAU,QAAA,CAAkB;AAAA,IAAA;AAAA,EACtE;AAEF,SAAOA,2BAAAA,IAAC,qBAAA,EAAoB,SAAS,eAAA,CAAgB;AACvD;AAEA,SAAS,uBAAuB;AAAA,EAC9B;AAAA,EACA;AACF,GAGG;AACD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,WACJC,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,IAAAF,2BAAAA,IAAC,UAAA,EAAS;AAAA,mCACT,WAAA,EAAU;AAAA,mCACV,4BAAA,EAA2B;AAAA,mCAC3B,YAAA,EAAW;AAAA,IACX,UAAU,QAAQ,QAAQ,KACzBC,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,MAAAF,2BAAAA,IAAC,WAAA,EAAU;AAAA,qCACV,iBAAA,CAAA,CAAgB;AAAA,IAAA,GACnB;AAAA,IAED,UAAU,QAAQ,KAAK,oCAAM,aAAA,CAAA,CAAY;AAAA,IACzC,UAAU,QAAQ,KAAK,KACtBC,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,MAAAF,2BAAAA,IAAC,WAAA,EAAU;AAAA,qCACV,YAAA,CAAA,CAAW;AAAA,IAAA,GACd;AAAA,IAED,UAAU,QAAQ,MAAM,oCAAM,aAAA,CAAA,CAAY;AAAA,KACzC,UAAU,QAAQ,MAAM,KAAK,UAAU,QAAQ,aAAa,KAAK,UAAU,QAAQ,UAAU,qCAAO,WAAA,CAAA,CAAU;AAAA,IAC/G,UAAU,QAAQ,MAAM,oCAAM,aAAA,CAAA,CAAY;AAAA,IAC1C,UAAU,QAAQ,aAAa,oCAAM,qBAAA,CAAA,CAAoB;AAAA,IACzD,UAAU,QAAQ,UAAU,oCAAM,iBAAA,CAAA,CAAgB;AAAA,KACjD,UAAU,QAAQ,WAAW,KAAK,UAAU,QAAQ,WAAW,MAAMA,2BAAAA,IAAC,WAAA,EAAU;AAAA,IACjF,UAAU,QAAQ,WAAW,oCAAM,mBAAA,CAAA,CAAkB;AAAA,IACrD,UAAU,QAAQ,WAAW,oCAAM,kBAAA,CAAA,CAAiB;AAAA,EAAA,GACvD;AAGF,QAAM,cAAc,gBAAgB,QAAQ,QAAQ;AACpD,MAAI,CAAC,YAAa,QAAO;AACzB,SAAOA,2BAAAA,IAAC,yBAAA,EAAwB,SAAS,aAAc,UAAA,UAAS;AAClE;;"}

package/dist/components/MdxEditorToolbar.d.ts

@@ -0,0 +1,8 @@
+import { MdxEditorPluginOptions } from './mdx-editor-options';
+type MdxEditorModule = typeof import("@mdxeditor/editor");
+export declare function MdxEditorToolbar({ mdx, options, }: {
+    mdx: MdxEditorModule;
+    options: MdxEditorPluginOptions;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MdxEditorToolbar.d.ts.map

package/dist/components/MdxEditorToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MdxEditorToolbar.d.ts","sourceRoot":"","sources":["../../src/components/MdxEditorToolbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEnE,KAAK,eAAe,GAAG,cAAc,mBAAmB,CAAC,CAAC;AAU1D,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,OAAO,GACR,EAAE;IACD,GAAG,EAAE,eAAe,CAAC;IACrB,OAAO,EAAE,sBAAsB,CAAC;CACjC,2CAgBA"}