@webdevarif/dashui 1.1.0 → 1.2.1

package/dist/index.mjs

@@ -3560,6 +3560,166 @@ function HslColorInput({ value, onChange, className, inputClassName, disabled })
   ] });
 }
 
+// src/components/editors/tiptap-editor.tsx
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Placeholder from "@tiptap/extension-placeholder";
+import { jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
+function TiptapEditor({
+  value,
+  onChange,
+  placeholder = "Start writing\u2026",
+  disabled = false,
+  className = ""
+}) {
+  const editor = useEditor({
+    immediatelyRender: false,
+    extensions: [
+      StarterKit.configure({
+        heading: { levels: [1, 2, 3] }
+      }),
+      Placeholder.configure({ placeholder })
+    ],
+    content: value,
+    editable: !disabled,
+    editorProps: {
+      attributes: {
+        class: "prose prose-sm max-w-none min-h-[400px] p-4 outline-none focus:outline-none bg-white dark:bg-slate-900 text-slate-900 dark:text-white rounded-lg border border-gray-200 dark:border-slate-700"
+      }
+    },
+    onUpdate: ({ editor: editor2 }) => {
+      onChange(editor2.getJSON());
+    }
+  });
+  if (!editor) return null;
+  return /* @__PURE__ */ jsxs38("div", { className: `tiptap-wrapper ${className}`.trim(), children: [
+    /* @__PURE__ */ jsxs38("div", { className: "flex gap-1 p-2 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 rounded-t-lg", children: [
+      /* @__PURE__ */ jsx55(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().toggleBold().run(),
+          active: editor.isActive("bold"),
+          title: "Bold (Ctrl+B)",
+          children: /* @__PURE__ */ jsx55("strong", { children: "B" })
+        }
+      ),
+      /* @__PURE__ */ jsx55(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().toggleItalic().run(),
+          active: editor.isActive("italic"),
+          title: "Italic (Ctrl+I)",
+          children: /* @__PURE__ */ jsx55("em", { children: "I" })
+        }
+      ),
+      /* @__PURE__ */ jsx55(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().toggleStrike().run(),
+          active: editor.isActive("strike"),
+          title: "Strikethrough",
+          children: /* @__PURE__ */ jsx55("s", { children: "S" })
+        }
+      ),
+      /* @__PURE__ */ jsx55("div", { className: "w-px bg-gray-300 dark:bg-slate-600 mx-1" }),
+      /* @__PURE__ */ jsx55(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+          active: editor.isActive("heading", { level: 1 }),
+          title: "Heading 1",
+          children: "H1"
+        }
+      ),
+      /* @__PURE__ */ jsx55(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+          active: editor.isActive("heading", { level: 2 }),
+          title: "Heading 2",
+          children: "H2"
+        }
+      ),
+      /* @__PURE__ */ jsx55(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+          active: editor.isActive("heading", { level: 3 }),
+          title: "Heading 3",
+          children: "H3"
+        }
+      ),
+      /* @__PURE__ */ jsx55("div", { className: "w-px bg-gray-300 dark:bg-slate-600 mx-1" }),
+      /* @__PURE__ */ jsx55(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().toggleBulletList().run(),
+          active: editor.isActive("bulletList"),
+          title: "Bullet list",
+          children: "\u2022"
+        }
+      ),
+      /* @__PURE__ */ jsx55(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().toggleOrderedList().run(),
+          active: editor.isActive("orderedList"),
+          title: "Ordered list",
+          children: "1."
+        }
+      ),
+      /* @__PURE__ */ jsx55("div", { className: "w-px bg-gray-300 dark:bg-slate-600 mx-1" }),
+      /* @__PURE__ */ jsx55(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().toggleCodeBlock().run(),
+          active: editor.isActive("codeBlock"),
+          title: "Code block",
+          children: "<>"
+        }
+      ),
+      /* @__PURE__ */ jsx55(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().toggleCode().run(),
+          active: editor.isActive("code"),
+          title: "Inline code",
+          children: "`"
+        }
+      ),
+      /* @__PURE__ */ jsx55("div", { className: "w-px bg-gray-300 dark:bg-slate-600 mx-1" }),
+      /* @__PURE__ */ jsx55(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().setHorizontalRule().run(),
+          title: "Horizontal rule",
+          children: "\u2014"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx55(EditorContent, { editor })
+  ] });
+}
+function ToolbarButton({
+  onClick,
+  active,
+  title,
+  children
+}) {
+  return /* @__PURE__ */ jsx55(
+    "button",
+    {
+      onClick,
+      title,
+      className: `
+        px-2 py-1 rounded text-sm font-medium transition-colors
+        ${active ? "bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400" : "bg-transparent text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-slate-700"}
+      `,
+      children
+    }
+  );
+}
+
 // src/hooks/index.ts
 import { useState as useState12 } from "react";
 function useDisclosure(initial = false) {
@@ -3579,9 +3739,9 @@ function usePagination(total, pageSize = 20) {
 }
 
 // src/components/auth/AuthShell.tsx
-import { jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
 function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(
     "div",
     {
       style: {
@@ -3596,7 +3756,7 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
         overflow: "hidden"
       },
       children: [
-        pattern === "dots" && /* @__PURE__ */ jsx55(
+        pattern === "dots" && /* @__PURE__ */ jsx56(
           "div",
           {
             "aria-hidden": true,
@@ -3610,7 +3770,7 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
             }
           }
         ),
-        pattern === "grid" && /* @__PURE__ */ jsx55(
+        pattern === "grid" && /* @__PURE__ */ jsx56(
           "div",
           {
             "aria-hidden": true,
@@ -3624,16 +3784,16 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
             }
           }
         ),
-        /* @__PURE__ */ jsx55("div", { style: { position: "relative", zIndex: 1, width: "100%", maxWidth }, children })
+        /* @__PURE__ */ jsx56("div", { style: { position: "relative", zIndex: 1, width: "100%", maxWidth }, children })
       ]
     }
   );
 }
 
 // src/components/auth/AuthCard.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 function AuthCard({ children, padding = "24px 28px" }) {
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     "div",
     {
       style: {
@@ -3650,10 +3810,10 @@ function AuthCard({ children, padding = "24px 28px" }) {
 }
 
 // src/components/auth/AuthLogo.tsx
-import { jsx as jsx57, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs40 } from "react/jsx-runtime";
 function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }) {
-  return /* @__PURE__ */ jsxs39("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", marginBottom: "28px" }, children: [
-    imageUrl ? /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsxs40("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", marginBottom: "28px" }, children: [
+    imageUrl ? /* @__PURE__ */ jsx58(
       "img",
       {
         src: imageUrl,
@@ -3662,7 +3822,7 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
         height: size,
         style: { borderRadius: "calc(var(--radius, 0.5rem) * 1.2)", flexShrink: 0, display: "block" }
       }
-    ) : /* @__PURE__ */ jsx57(
+    ) : /* @__PURE__ */ jsx58(
       "div",
       {
         style: {
@@ -3681,7 +3841,7 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
         children: letter
       }
     ),
-    /* @__PURE__ */ jsx57(
+    /* @__PURE__ */ jsx58(
       "span",
       {
         style: {
@@ -3697,10 +3857,10 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
 }
 
 // src/components/auth/AuthHeader.tsx
-import { jsx as jsx58, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs41 } from "react/jsx-runtime";
 function AuthHeader({ title, description }) {
-  return /* @__PURE__ */ jsxs40("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [
-    /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsxs41("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [
+    /* @__PURE__ */ jsx59(
       "h1",
       {
         style: {
@@ -3713,7 +3873,7 @@ function AuthHeader({ title, description }) {
         children: title
       }
     ),
-    description && /* @__PURE__ */ jsx58(
+    description && /* @__PURE__ */ jsx59(
       "p",
       {
         style: {
@@ -3729,12 +3889,12 @@ function AuthHeader({ title, description }) {
 }
 
 // src/components/auth/AuthField.tsx
-import { jsx as jsx59, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
 function AuthField({ label, error, hint, rightLabel, id, ...props }) {
   const fieldId = id ?? label.toLowerCase().replace(/\s+/g, "-");
-  return /* @__PURE__ */ jsxs41("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
-    /* @__PURE__ */ jsxs41("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsxs42("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
+    /* @__PURE__ */ jsxs42("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx60(
         "label",
         {
           htmlFor: fieldId,
@@ -3746,9 +3906,9 @@ function AuthField({ label, error, hint, rightLabel, id, ...props }) {
           children: label
         }
       ),
-      rightLabel && /* @__PURE__ */ jsx59("span", { style: { fontSize: "0.8125rem" }, children: rightLabel })
+      rightLabel && /* @__PURE__ */ jsx60("span", { style: { fontSize: "0.8125rem" }, children: rightLabel })
     ] }),
-    /* @__PURE__ */ jsx59(
+    /* @__PURE__ */ jsx60(
       "input",
       {
         id: fieldId,
@@ -3778,13 +3938,13 @@ function AuthField({ label, error, hint, rightLabel, id, ...props }) {
         ...props
       }
     ),
-    error && /* @__PURE__ */ jsx59("p", { style: { fontSize: "0.8rem", color: "var(--destructive)", margin: 0 }, children: error }),
-    hint && !error && /* @__PURE__ */ jsx59("p", { style: { fontSize: "0.8rem", color: "var(--muted-foreground)", margin: 0 }, children: hint })
+    error && /* @__PURE__ */ jsx60("p", { style: { fontSize: "0.8rem", color: "var(--destructive)", margin: 0 }, children: error }),
+    hint && !error && /* @__PURE__ */ jsx60("p", { style: { fontSize: "0.8rem", color: "var(--muted-foreground)", margin: 0 }, children: hint })
   ] });
 }
 
 // src/components/auth/AuthButton.tsx
-import { Fragment as Fragment4, jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx61, jsxs as jsxs43 } from "react/jsx-runtime";
 function AuthButton({
   loading,
   variant = "primary",
@@ -3827,7 +3987,7 @@ function AuthButton({
       color: "var(--foreground)"
     }
   };
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx61(
     "button",
     {
       disabled: loading || disabled,
@@ -3839,8 +3999,8 @@ function AuthButton({
         e.currentTarget.style.filter = "none";
       },
       ...props,
-      children: loading ? /* @__PURE__ */ jsxs42(Fragment4, { children: [
-        /* @__PURE__ */ jsx60(
+      children: loading ? /* @__PURE__ */ jsxs43(Fragment4, { children: [
+        /* @__PURE__ */ jsx61(
           "span",
           {
             style: {
@@ -3861,19 +4021,19 @@ function AuthButton({
 }
 
 // src/components/auth/AuthDivider.tsx
-import { jsx as jsx61, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs44 } from "react/jsx-runtime";
 function AuthDivider({ label = "or" }) {
-  return /* @__PURE__ */ jsxs43("div", { style: { display: "flex", alignItems: "center", gap: "12px", margin: "20px 0" }, children: [
-    /* @__PURE__ */ jsx61("div", { style: { flex: 1, height: 1, background: "var(--border)" } }),
-    /* @__PURE__ */ jsx61("span", { style: { fontSize: "0.75rem", color: "var(--muted-foreground)", userSelect: "none" }, children: label }),
-    /* @__PURE__ */ jsx61("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
+  return /* @__PURE__ */ jsxs44("div", { style: { display: "flex", alignItems: "center", gap: "12px", margin: "20px 0" }, children: [
+    /* @__PURE__ */ jsx62("div", { style: { flex: 1, height: 1, background: "var(--border)" } }),
+    /* @__PURE__ */ jsx62("span", { style: { fontSize: "0.75rem", color: "var(--muted-foreground)", userSelect: "none" }, children: label }),
+    /* @__PURE__ */ jsx62("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
   ] });
 }
 
 // src/components/auth/AuthFootnote.tsx
-import { jsx as jsx62, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs45 } from "react/jsx-runtime";
 function AuthFootnote({ text, linkText, linkHref }) {
-  return /* @__PURE__ */ jsxs44("p", { style: {
+  return /* @__PURE__ */ jsxs45("p", { style: {
     textAlign: "center",
     marginTop: "20px",
     fontSize: "0.8125rem",
@@ -3881,7 +4041,7 @@ function AuthFootnote({ text, linkText, linkHref }) {
   }, children: [
     text,
     " ",
-    /* @__PURE__ */ jsx62(
+    /* @__PURE__ */ jsx63(
       "a",
       {
         href: linkHref,
@@ -4009,6 +4169,7 @@ export {
   Textarea,
   ThemeProvider,
   ThemeToggle,
+  TiptapEditor,
   Tooltip,
   TooltipContent,
   TooltipProvider,