@forgedevstack/bear 1.0.3 → 1.0.4-alpha

package/dist/components/RichEditor/RichEditor.const.js

@@ -0,0 +1,279 @@
+import { jsx as e } from "react/jsx-runtime";
+const a = 150, o = [
+  "headingDropdown",
+  "divider",
+  "bold",
+  "italic",
+  "underline",
+  "strikethrough",
+  "divider",
+  "textColor",
+  "highlightColor",
+  "divider",
+  "alignLeft",
+  "alignCenter",
+  "alignRight",
+  "alignJustify",
+  "divider",
+  "bulletList",
+  "orderedList",
+  "divider",
+  "indent",
+  "outdent",
+  "divider",
+  "blockquote",
+  "code",
+  "link",
+  "image",
+  "divider",
+  "clearFormat"
+], r = "Bear-RichEditor rounded-lg border border-gray-200 dark:border-zinc-700 overflow-hidden bg-white dark:bg-zinc-900 shadow-sm", i = "flex flex-wrap items-center gap-0.5 p-2 border-b border-gray-200 dark:border-zinc-700 bg-gray-50 dark:bg-zinc-800", n = "p-4 outline-none max-w-none text-gray-900 dark:text-gray-100 bg-white dark:bg-zinc-900 min-h-[100px]", d = "w-px h-5 bg-gray-300 dark:bg-zinc-600 mx-1", l = "p-1.5 rounded transition-colors", c = "bg-pink-500 text-white", m = "text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-zinc-700", g = "opacity-50 cursor-not-allowed", s = [
+  { value: "p", label: "Paragraph", preview: /* @__PURE__ */ e("span", { className: "bear-text-sm bear-font-normal", children: "Normal text" }) },
+  { value: "h1", label: "Heading 1", preview: /* @__PURE__ */ e("span", { className: "bear-text-2xl bear-font-bold", children: "Heading 1" }) },
+  { value: "h2", label: "Heading 2", preview: /* @__PURE__ */ e("span", { className: "bear-text-xl bear-font-bold", children: "Heading 2" }) },
+  { value: "h3", label: "Heading 3", preview: /* @__PURE__ */ e("span", { className: "bear-text-lg bear-font-semibold", children: "Heading 3" }) },
+  { value: "h4", label: "Heading 4", preview: /* @__PURE__ */ e("span", { className: "bear-text-base bear-font-semibold", children: "Heading 4" }) },
+  { value: "h5", label: "Heading 5", preview: /* @__PURE__ */ e("span", { className: "bear-text-sm bear-font-semibold", children: "Heading 5" }) },
+  { value: "h6", label: "Heading 6", preview: /* @__PURE__ */ e("span", { className: "bear-text-xs bear-font-semibold bear-uppercase", children: "Heading 6" }) }
+], h = {
+  bold: { title: "Bold (Ctrl+B)", command: "bold" },
+  italic: { title: "Italic (Ctrl+I)", command: "italic" },
+  underline: { title: "Underline (Ctrl+U)", command: "underline" },
+  strikethrough: { title: "Strikethrough", command: "strikeThrough" },
+  heading1: { title: "Heading 1", command: "formatBlock", value: "h1" },
+  heading2: { title: "Heading 2", command: "formatBlock", value: "h2" },
+  heading3: { title: "Heading 3", command: "formatBlock", value: "h3" },
+  heading4: { title: "Heading 4", command: "formatBlock", value: "h4" },
+  heading5: { title: "Heading 5", command: "formatBlock", value: "h5" },
+  heading6: { title: "Heading 6", command: "formatBlock", value: "h6" },
+  paragraph: { title: "Paragraph", command: "formatBlock", value: "p" },
+  bulletList: { title: "Bullet List", command: "insertUnorderedList" },
+  orderedList: { title: "Numbered List", command: "insertOrderedList" },
+  blockquote: { title: "Quote", command: "formatBlock", value: "blockquote" },
+  code: { title: "Code Block", command: "formatBlock", value: "pre" },
+  link: { title: "Insert Link", command: "createLink" },
+  image: { title: "Insert Image", command: "insertImage" },
+  textColor: { title: "Text Color", command: "foreColor" },
+  highlightColor: { title: "Highlight Color", command: "hiliteColor" },
+  alignLeft: { title: "Align Left", command: "justifyLeft" },
+  alignCenter: { title: "Align Center", command: "justifyCenter" },
+  alignRight: { title: "Align Right", command: "justifyRight" },
+  alignJustify: { title: "Justify", command: "justifyFull" },
+  indent: { title: "Increase Indent", command: "indent" },
+  outdent: { title: "Decrease Indent", command: "outdent" },
+  clearFormat: { title: "Clear Formatting", command: "removeFormat" },
+  table: { title: "Insert Table", command: "insertTable" }
+}, b = [
+  // Row 1: Grayscale
+  "#000000",
+  "#374151",
+  "#6b7280",
+  "#9ca3af",
+  "#d1d5db",
+  "#ffffff",
+  // Row 2: Reds
+  "#991b1b",
+  "#dc2626",
+  "#ef4444",
+  "#f87171",
+  "#fca5a5",
+  "#fee2e2",
+  // Row 3: Oranges
+  "#9a3412",
+  "#ea580c",
+  "#f97316",
+  "#fb923c",
+  "#fdba74",
+  "#fed7aa",
+  // Row 4: Yellows
+  "#854d0e",
+  "#ca8a04",
+  "#eab308",
+  "#facc15",
+  "#fde047",
+  "#fef08a",
+  // Row 5: Greens
+  "#166534",
+  "#16a34a",
+  "#22c55e",
+  "#4ade80",
+  "#86efac",
+  "#bbf7d0",
+  // Row 6: Blues
+  "#1e40af",
+  "#2563eb",
+  "#3b82f6",
+  "#60a5fa",
+  "#93c5fd",
+  "#bfdbfe",
+  // Row 7: Purples
+  "#6b21a8",
+  "#9333ea",
+  "#a855f7",
+  "#c084fc",
+  "#d8b4fe",
+  "#e9d5ff",
+  // Row 8: Pinks
+  "#9d174d",
+  "#db2777",
+  "#ec4899",
+  "#f472b6",
+  "#f9a8d4",
+  "#fbcfe8"
+], f = `
+  .Bear-RichEditor__content {
+    line-height: 1.6;
+  }
+  .Bear-RichEditor__content h1 { 
+    font-size: 2rem; 
+    font-weight: bold; 
+    margin: 0.67em 0; 
+    line-height: 1.2;
+  }
+  .Bear-RichEditor__content h2 { 
+    font-size: 1.5rem; 
+    font-weight: bold; 
+    margin: 0.83em 0; 
+    line-height: 1.3;
+  }
+  .Bear-RichEditor__content h3 { 
+    font-size: 1.25rem; 
+    font-weight: 600; 
+    margin: 1em 0; 
+    line-height: 1.4;
+  }
+  .Bear-RichEditor__content h4 { 
+    font-size: 1.125rem; 
+    font-weight: 600; 
+    margin: 1.33em 0;
+  }
+  .Bear-RichEditor__content h5 { 
+    font-size: 1rem; 
+    font-weight: 600; 
+    margin: 1.67em 0;
+  }
+  .Bear-RichEditor__content h6 { 
+    font-size: 0.875rem; 
+    font-weight: 600; 
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin: 2em 0;
+  }
+  .Bear-RichEditor__content p { 
+    margin: 0.5em 0; 
+  }
+  .Bear-RichEditor__content ul { 
+    list-style-type: disc !important; 
+    padding-left: 1.5em !important; 
+    margin: 0.5em 0 !important; 
+    display: block !important;
+  }
+  .Bear-RichEditor__content ol { 
+    list-style-type: decimal !important; 
+    padding-left: 1.5em !important; 
+    margin: 0.5em 0 !important;
+    display: block !important;
+  }
+  .Bear-RichEditor__content li { 
+    margin: 0.25em 0 !important;
+    display: list-item !important;
+  }
+  .Bear-RichEditor__content blockquote { 
+    border-left: 4px solid #ec4899; 
+    padding-left: 1em; 
+    margin: 1em 0; 
+    color: #6b7280; 
+    font-style: italic;
+    background: rgba(236, 72, 153, 0.05);
+    padding: 0.5em 1em;
+    border-radius: 0 0.375rem 0.375rem 0;
+  }
+  .Bear-RichEditor__content pre { 
+    background: #f3f4f6; 
+    color: #374151;
+    padding: 1em; 
+    border-radius: 0.5rem; 
+    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; 
+    font-size: 0.875em;
+    overflow-x: auto; 
+    margin: 1em 0;
+    white-space: pre-wrap;
+    word-break: break-word;
+    border: 1px solid #e5e7eb;
+  }
+  .Bear-RichEditor__content code {
+    background: #f3f4f6;
+    color: #374151;
+    padding: 0.125em 0.25em;
+    border-radius: 0.25rem;
+    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+    font-size: 0.875em;
+  }
+  .Bear-RichEditor__content a { 
+    color: #ec4899; 
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  .Bear-RichEditor__content a:hover {
+    color: #db2777;
+  }
+  .Bear-RichEditor__content img { 
+    max-width: 100%; 
+    height: auto; 
+    border-radius: 0.5rem; 
+    margin: 1em 0;
+    display: block;
+  }
+  .Bear-RichEditor__content table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 1em 0;
+  }
+  .Bear-RichEditor__content th,
+  .Bear-RichEditor__content td {
+    border: 1px solid #d1d5db;
+    padding: 0.5em;
+    text-align: left;
+  }
+  .Bear-RichEditor__content th {
+    background: #f3f4f6;
+    font-weight: 600;
+  }
+  /* Dark mode styles */
+  .dark .Bear-RichEditor__content pre {
+    background: #1f2937;
+    color: #e5e7eb;
+    border-color: #374151;
+  }
+  .dark .Bear-RichEditor__content code {
+    background: #374151;
+    color: #e5e7eb;
+  }
+  .dark .Bear-RichEditor__content blockquote {
+    color: #9ca3af;
+    background: rgba(236, 72, 153, 0.1);
+  }
+  .dark .Bear-RichEditor__content th {
+    background: #374151;
+  }
+  .dark .Bear-RichEditor__content th,
+  .dark .Bear-RichEditor__content td {
+    border-color: #4b5563;
+  }
+`;
+export {
+  c as RICH_EDITOR_BUTTON_ACTIVE_CLASSES,
+  l as RICH_EDITOR_BUTTON_BASE_CLASSES,
+  h as RICH_EDITOR_BUTTON_CONFIG,
+  g as RICH_EDITOR_BUTTON_DISABLED_CLASSES,
+  m as RICH_EDITOR_BUTTON_INACTIVE_CLASSES,
+  b as RICH_EDITOR_COLORS,
+  n as RICH_EDITOR_CONTENT_CLASSES,
+  f as RICH_EDITOR_CONTENT_STYLES,
+  o as RICH_EDITOR_DEFAULT_TOOLBAR,
+  d as RICH_EDITOR_DIVIDER_CLASSES,
+  s as RICH_EDITOR_HEADING_OPTIONS,
+  a as RICH_EDITOR_MIN_HEIGHT,
+  r as RICH_EDITOR_ROOT_CLASSES,
+  i as RICH_EDITOR_TOOLBAR_CLASSES
+};

package/dist/components/RichEditor/RichEditor.d.ts

@@ -1,4 +1,18 @@
 import { FC } from 'react';
 import { RichEditorProps } from './RichEditor.types';
+/**
+ * RichEditor - WYSIWYG rich text editor with formatting toolbar
+ *
+ * @example
+ * ```tsx
+ * const [value, setValue] = useState('<p>Start editing...</p>');
+ *
+ * <RichEditor
+ *   value={value}
+ *   onChange={setValue}
+ *   placeholder="Start typing..."
+ * />
+ * ```
+ */
 export declare const RichEditor: FC<RichEditorProps>;
 export default RichEditor;