@meta-1/editor 0.0.28 → 1.0.0

package/src/components/tiptap-ui-primitive/badge/badge.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import { forwardRef } from "react"
+import "./badge-colors.css"
+import "./badge-group.css"
+import "./badge.css"
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: "ghost" | "white" | "gray" | "green" | "default"
+  size?: "default" | "small"
+  appearance?: "default" | "subdued" | "emphasized"
+  trimText?: boolean
+}
+
+export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
+  (
+    {
+      variant,
+      size = "default",
+      appearance = "default",
+      trimText = false,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={`tiptap-badge ${className || ""}`}
+        data-style={variant}
+        data-size={size}
+        data-appearance={appearance}
+        data-text-trim={trimText ? "on" : "off"}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
+Badge.displayName = "Badge"
+
+export default Badge

package/src/components/tiptap-ui-primitive/badge/index.tsx

@@ -0,0 +1 @@
+export * from "./badge"

package/src/components/tiptap-ui-primitive/button/button-colors.css

@@ -0,0 +1,6 @@
+@import "tailwindcss";
+
+/*
+ * This file is retained for compatibility but the variables defined here are not used.
+ * All button styling is now managed through Tailwind CSS utility classes in button.css
+ */

package/src/components/tiptap-ui-primitive/button/button-group.css

@@ -0,0 +1,17 @@
+@import "tailwindcss";
+
+.tiptap-button-group {
+  @apply relative flex align-middle;
+}
+
+.tiptap-button-group[data-orientation="vertical"] {
+  @apply flex-col items-start justify-center min-w-max;
+}
+
+.tiptap-button-group[data-orientation="vertical"] > .tiptap-button {
+  @apply w-full;
+}
+
+.tiptap-button-group[data-orientation="horizontal"] {
+  @apply gap-0.5 flex-row items-center;
+}

package/src/components/tiptap-ui-primitive/button/button.css

@@ -0,0 +1,428 @@
+@import "tailwindcss";
+
+.tiptap-button {
+  @apply text-sm font-medium h-8 min-w-8 border-0 p-2 gap-1 flex items-center justify-center rounded-lg;
+  font-feature-settings:
+    "salt" on,
+    "cv01" on;
+  line-height: 1.15;
+  transition-property: background, color, opacity;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* focus-visible */
+.tiptap-button:focus-visible {
+  @apply outline-none;
+}
+
+.tiptap-button[data-highlighted="true"],
+.tiptap-button[data-focus-visible="true"] {
+  @apply bg-gray-100 text-gray-900;
+}
+
+.dark .tiptap-button[data-highlighted="true"],
+.dark .tiptap-button[data-focus-visible="true"] {
+  @apply bg-gray-800 text-gray-100;
+}
+
+.tiptap-button[data-weight="small"] {
+  @apply w-6 min-w-6 pr-0 pl-0;
+}
+
+/* button size large */
+.tiptap-button[data-size="large"] {
+  @apply h-10 min-w-10 p-2.5 text-[0.9375rem];
+}
+
+/* button size small */
+.tiptap-button[data-size="small"] {
+  @apply text-xs h-6 min-w-6 rounded-md;
+  line-height: 1.2;
+  padding: 0.3125rem;
+}
+
+/* trim / expand text of the button */
+.tiptap-button-text {
+  @apply px-0.5 flex-grow text-left;
+  line-height: 1.5rem;
+}
+
+.tiptap-button[data-text-trim="on"] .tiptap-button-text {
+  @apply overflow-hidden text-ellipsis;
+}
+
+/* global icon settings */
+.tiptap-button-icon,
+.tiptap-button-icon-sub,
+.tiptap-button-dropdown-arrows,
+.tiptap-button-dropdown-small {
+  @apply flex-shrink-0;
+}
+
+/* standard icon, what is used */
+.tiptap-button-icon {
+  @apply w-4 h-4;
+}
+
+.tiptap-button[data-size="large"] .tiptap-button-icon {
+  @apply w-[1.125rem] h-[1.125rem];
+}
+
+.tiptap-button[data-size="small"] .tiptap-button-icon {
+  @apply w-3.5 h-3.5;
+}
+
+/* if 2 icons are used and this icon should be more subtle */
+.tiptap-button-icon-sub {
+  @apply w-4 h-4;
+}
+
+.tiptap-button[data-size="large"] .tiptap-button-icon-sub {
+  @apply w-[1.125rem] h-[1.125rem];
+}
+
+.tiptap-button[data-size="small"] .tiptap-button-icon-sub {
+  @apply w-3.5 h-3.5;
+}
+
+/* dropdown menus or arrows that are slightly smaller */
+.tiptap-button-dropdown-arrows {
+  @apply w-3 h-3;
+}
+
+.tiptap-button[data-size="large"] .tiptap-button-dropdown-arrows {
+  @apply w-3.5 h-3.5;
+}
+
+.tiptap-button[data-size="small"] .tiptap-button-dropdown-arrows {
+  @apply w-2.5 h-2.5;
+}
+
+/* dropdown menu for icon buttons only */
+.tiptap-button-dropdown-small {
+  @apply w-2.5 h-2.5;
+}
+
+.tiptap-button[data-size="large"] .tiptap-button-dropdown-small {
+  @apply w-3 h-3;
+}
+
+.tiptap-button[data-size="small"] .tiptap-button-dropdown-small {
+  @apply w-2 h-2;
+}
+
+/* button only has icons */
+.tiptap-button:has(> svg):not(:has(> :not(svg))) {
+  @apply gap-0.5;
+}
+
+.tiptap-button[data-size="large"]:has(> svg):not(:has(> :not(svg))),
+.tiptap-button[data-size="small"]:has(> svg):not(:has(> :not(svg))) {
+  @apply gap-0.5;
+}
+
+/* button only has 2 icons and one of them is dropdown small */
+.tiptap-button:has(> svg:nth-of-type(2)):has(> .tiptap-button-dropdown-small):not(:has(> svg:nth-of-type(3))):not(
+    :has(> .tiptap-button-text)
+  ) {
+  @apply gap-0 pr-1;
+}
+
+.tiptap-button[data-size="large"]:has(> svg:nth-of-type(2)):has(> .tiptap-button-dropdown-small):not(
+    :has(> svg:nth-of-type(3))
+  ):not(:has(> .tiptap-button-text)) {
+  @apply pr-1.5;
+}
+
+.tiptap-button[data-size="small"]:has(> svg:nth-of-type(2)):has(> .tiptap-button-dropdown-small):not(
+    :has(> svg:nth-of-type(3))
+  ):not(:has(> .tiptap-button-text)) {
+  @apply pr-1;
+}
+
+/* Emoji is used in a button */
+.tiptap-button-emoji {
+  @apply w-4 flex justify-center;
+}
+
+.tiptap-button[data-size="large"] .tiptap-button-emoji {
+  @apply w-[1.125rem];
+}
+
+.tiptap-button[data-size="small"] .tiptap-button-emoji {
+  @apply w-3.5;
+}
+
+/* --------------------------------------------
+----------- BUTTON COLOR SETTINGS -------------
+-------------------------------------------- */
+
+.tiptap-button {
+  @apply bg-transparent text-gray-700;
+}
+
+.dark .tiptap-button {
+  @apply text-gray-300;
+}
+
+.tiptap-button .tiptap-button-icon {
+  @apply text-gray-600;
+}
+
+.dark .tiptap-button .tiptap-button-icon {
+  @apply text-gray-400;
+}
+
+.tiptap-button .tiptap-button-icon-sub {
+  @apply text-gray-500;
+}
+
+.dark .tiptap-button .tiptap-button-icon-sub {
+  @apply text-gray-500;
+}
+
+.tiptap-button .tiptap-button-dropdown-arrows {
+  @apply text-gray-500;
+}
+
+.dark .tiptap-button .tiptap-button-dropdown-arrows {
+  @apply text-gray-500;
+}
+
+.tiptap-button .tiptap-button-dropdown-small {
+  @apply text-gray-500;
+}
+
+.dark .tiptap-button .tiptap-button-dropdown-small {
+  @apply text-gray-500;
+}
+
+/* hover state of a button */
+.tiptap-button:hover:not([data-active-item="true"]):not([disabled]),
+.tiptap-button[data-active-item="true"]:not([disabled]),
+.tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted="false"]) {
+  @apply bg-gray-100 text-gray-900;
+}
+
+.dark .tiptap-button:hover:not([data-active-item="true"]):not([disabled]),
+.dark .tiptap-button[data-active-item="true"]:not([disabled]),
+.dark .tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted="false"]) {
+  @apply bg-gray-800 text-gray-100;
+}
+
+.tiptap-button:hover:not([data-active-item="true"]):not([disabled]) .tiptap-button-icon,
+.tiptap-button[data-active-item="true"]:not([disabled]) .tiptap-button-icon,
+.tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted="false"]) .tiptap-button-icon {
+  @apply text-gray-700;
+}
+
+.dark .tiptap-button:hover:not([data-active-item="true"]):not([disabled]) .tiptap-button-icon,
+.dark .tiptap-button[data-active-item="true"]:not([disabled]) .tiptap-button-icon,
+.dark .tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted="false"]) .tiptap-button-icon {
+  @apply text-gray-300;
+}
+
+.tiptap-button:hover:not([data-active-item="true"]):not([disabled]) .tiptap-button-icon-sub,
+.tiptap-button[data-active-item="true"]:not([disabled]) .tiptap-button-icon-sub,
+.tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted="false"]) .tiptap-button-icon-sub {
+  @apply text-gray-600;
+}
+
+.dark .tiptap-button:hover:not([data-active-item="true"]):not([disabled]) .tiptap-button-icon-sub,
+.dark .tiptap-button[data-active-item="true"]:not([disabled]) .tiptap-button-icon-sub,
+.dark .tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted="false"]) .tiptap-button-icon-sub {
+  @apply text-gray-400;
+}
+
+.tiptap-button:hover:not([data-active-item="true"]):not([disabled]) .tiptap-button-dropdown-arrows,
+.tiptap-button:hover:not([data-active-item="true"]):not([disabled]) .tiptap-button-dropdown-small,
+.tiptap-button[data-active-item="true"]:not([disabled]) .tiptap-button-dropdown-arrows,
+.tiptap-button[data-active-item="true"]:not([disabled]) .tiptap-button-dropdown-small,
+.tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted="false"]) .tiptap-button-dropdown-arrows,
+.tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted="false"]) .tiptap-button-dropdown-small {
+  @apply text-gray-600;
+}
+
+.dark .tiptap-button:hover:not([data-active-item="true"]):not([disabled]) .tiptap-button-dropdown-arrows,
+.dark .tiptap-button:hover:not([data-active-item="true"]):not([disabled]) .tiptap-button-dropdown-small,
+.dark .tiptap-button[data-active-item="true"]:not([disabled]) .tiptap-button-dropdown-arrows,
+.dark .tiptap-button[data-active-item="true"]:not([disabled]) .tiptap-button-dropdown-small,
+.dark .tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted="false"]) .tiptap-button-dropdown-arrows,
+.dark .tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted="false"]) .tiptap-button-dropdown-small {
+  @apply text-gray-400;
+}
+
+/* Active state of a button */
+.tiptap-button[data-active-state="on"]:not([disabled]),
+.tiptap-button[data-state="open"]:not([disabled]) {
+  @apply bg-gray-200 text-gray-900;
+}
+
+.dark .tiptap-button[data-active-state="on"]:not([disabled]),
+.dark .tiptap-button[data-state="open"]:not([disabled]) {
+  @apply bg-gray-700 text-gray-100;
+}
+
+.tiptap-button[data-active-state="on"]:not([disabled]) .tiptap-button-icon,
+.tiptap-button[data-state="open"]:not([disabled]) .tiptap-button-icon {
+  @apply text-gray-800;
+}
+
+.dark .tiptap-button[data-active-state="on"]:not([disabled]) .tiptap-button-icon,
+.dark .tiptap-button[data-state="open"]:not([disabled]) .tiptap-button-icon {
+  @apply text-gray-200;
+}
+
+.tiptap-button[data-active-state="on"]:not([disabled]) .tiptap-button-icon-sub,
+.tiptap-button[data-state="open"]:not([disabled]) .tiptap-button-icon-sub {
+  @apply text-gray-700;
+}
+
+.dark .tiptap-button[data-active-state="on"]:not([disabled]) .tiptap-button-icon-sub,
+.dark .tiptap-button[data-state="open"]:not([disabled]) .tiptap-button-icon-sub {
+  @apply text-gray-300;
+}
+
+.tiptap-button[data-active-state="on"]:not([disabled]) .tiptap-button-dropdown-arrows,
+.tiptap-button[data-active-state="on"]:not([disabled]) .tiptap-button-dropdown-small,
+.tiptap-button[data-state="open"]:not([disabled]) .tiptap-button-dropdown-arrows,
+.tiptap-button[data-state="open"]:not([disabled]) .tiptap-button-dropdown-small {
+  @apply text-gray-700;
+}
+
+.dark .tiptap-button[data-active-state="on"]:not([disabled]) .tiptap-button-dropdown-arrows,
+.dark .tiptap-button[data-active-state="on"]:not([disabled]) .tiptap-button-dropdown-small,
+.dark .tiptap-button[data-state="open"]:not([disabled]) .tiptap-button-dropdown-arrows,
+.dark .tiptap-button[data-state="open"]:not([disabled]) .tiptap-button-dropdown-small {
+  @apply text-gray-300;
+}
+
+.tiptap-button[data-active-state="on"]:not([disabled]):hover,
+.tiptap-button[data-state="open"]:not([disabled]):hover {
+  @apply bg-gray-300;
+}
+
+.dark .tiptap-button[data-active-state="on"]:not([disabled]):hover,
+.dark .tiptap-button[data-state="open"]:not([disabled]):hover {
+  @apply bg-gray-600;
+}
+
+/* Emphasized */
+.tiptap-button[data-active-state="on"][data-appearance="emphasized"]:not([disabled]),
+.tiptap-button[data-state="open"][data-appearance="emphasized"]:not([disabled]) {
+  @apply bg-blue-600 text-white;
+}
+
+.dark .tiptap-button[data-active-state="on"][data-appearance="emphasized"]:not([disabled]),
+.dark .tiptap-button[data-state="open"][data-appearance="emphasized"]:not([disabled]) {
+  @apply bg-blue-500 text-white;
+}
+
+.tiptap-button[data-active-state="on"][data-appearance="emphasized"]:not([disabled]) .tiptap-button-icon,
+.tiptap-button[data-state="open"][data-appearance="emphasized"]:not([disabled]) .tiptap-button-icon {
+  @apply text-blue-100;
+}
+
+.tiptap-button[data-active-state="on"][data-appearance="emphasized"]:not([disabled]) .tiptap-button-icon-sub,
+.tiptap-button[data-state="open"][data-appearance="emphasized"]:not([disabled]) .tiptap-button-icon-sub {
+  @apply text-blue-200;
+}
+
+.tiptap-button[data-active-state="on"][data-appearance="emphasized"]:not([disabled]) .tiptap-button-dropdown-arrows,
+.tiptap-button[data-active-state="on"][data-appearance="emphasized"]:not([disabled]) .tiptap-button-dropdown-small,
+.tiptap-button[data-state="open"][data-appearance="emphasized"]:not([disabled]) .tiptap-button-dropdown-arrows,
+.tiptap-button[data-state="open"][data-appearance="emphasized"]:not([disabled]) .tiptap-button-dropdown-small {
+  @apply text-blue-200;
+}
+
+.tiptap-button[data-active-state="on"][data-appearance="emphasized"]:not([disabled]):hover,
+.tiptap-button[data-state="open"][data-appearance="emphasized"]:not([disabled]):hover {
+  @apply bg-blue-700;
+}
+
+.dark .tiptap-button[data-active-state="on"][data-appearance="emphasized"]:not([disabled]):hover,
+.dark .tiptap-button[data-state="open"][data-appearance="emphasized"]:not([disabled]):hover {
+  @apply bg-blue-400;
+}
+
+/* Subdued */
+.tiptap-button[data-active-state="on"][data-appearance="subdued"]:not([disabled]),
+.tiptap-button[data-state="open"][data-appearance="subdued"]:not([disabled]) {
+  @apply bg-gray-100 text-gray-600;
+}
+
+.dark .tiptap-button[data-active-state="on"][data-appearance="subdued"]:not([disabled]),
+.dark .tiptap-button[data-state="open"][data-appearance="subdued"]:not([disabled]) {
+  @apply bg-gray-900 text-gray-400;
+}
+
+.tiptap-button[data-active-state="on"][data-appearance="subdued"]:not([disabled]) .tiptap-button-icon,
+.tiptap-button[data-state="open"][data-appearance="subdued"]:not([disabled]) .tiptap-button-icon {
+  @apply text-gray-500;
+}
+
+.dark .tiptap-button[data-active-state="on"][data-appearance="subdued"]:not([disabled]) .tiptap-button-icon,
+.dark .tiptap-button[data-state="open"][data-appearance="subdued"]:not([disabled]) .tiptap-button-icon {
+  @apply text-gray-500;
+}
+
+.tiptap-button[data-active-state="on"][data-appearance="subdued"]:not([disabled]) .tiptap-button-icon-sub,
+.tiptap-button[data-state="open"][data-appearance="subdued"]:not([disabled]) .tiptap-button-icon-sub {
+  @apply text-gray-400;
+}
+
+.dark .tiptap-button[data-active-state="on"][data-appearance="subdued"]:not([disabled]) .tiptap-button-icon-sub,
+.dark .tiptap-button[data-state="open"][data-appearance="subdued"]:not([disabled]) .tiptap-button-icon-sub {
+  @apply text-gray-600;
+}
+
+.tiptap-button[data-active-state="on"][data-appearance="subdued"]:not([disabled]) .tiptap-button-dropdown-arrows,
+.tiptap-button[data-active-state="on"][data-appearance="subdued"]:not([disabled]) .tiptap-button-dropdown-small,
+.tiptap-button[data-state="open"][data-appearance="subdued"]:not([disabled]) .tiptap-button-dropdown-arrows,
+.tiptap-button[data-state="open"][data-appearance="subdued"]:not([disabled]) .tiptap-button-dropdown-small {
+  @apply text-gray-400;
+}
+
+.dark .tiptap-button[data-active-state="on"][data-appearance="subdued"]:not([disabled]) .tiptap-button-dropdown-arrows,
+.dark .tiptap-button[data-active-state="on"][data-appearance="subdued"]:not([disabled]) .tiptap-button-dropdown-small,
+.dark .tiptap-button[data-state="open"][data-appearance="subdued"]:not([disabled]) .tiptap-button-dropdown-arrows,
+.dark .tiptap-button[data-state="open"][data-appearance="subdued"]:not([disabled]) .tiptap-button-dropdown-small {
+  @apply text-gray-600;
+}
+
+.tiptap-button[data-active-state="on"][data-appearance="subdued"]:not([disabled]):hover,
+.tiptap-button[data-state="open"][data-appearance="subdued"]:not([disabled]):hover {
+  @apply bg-gray-200;
+}
+
+.dark .tiptap-button[data-active-state="on"][data-appearance="subdued"]:not([disabled]):hover,
+.dark .tiptap-button[data-state="open"][data-appearance="subdued"]:not([disabled]):hover {
+  @apply bg-gray-800;
+}
+
+.tiptap-button[data-active-state="on"][data-appearance="subdued"]:not([disabled]):hover .tiptap-button-icon,
+.tiptap-button[data-state="open"][data-appearance="subdued"]:not([disabled]):hover .tiptap-button-icon {
+  @apply text-gray-500;
+}
+
+.dark .tiptap-button[data-active-state="on"][data-appearance="subdued"]:not([disabled]):hover .tiptap-button-icon,
+.dark .tiptap-button[data-state="open"][data-appearance="subdued"]:not([disabled]):hover .tiptap-button-icon {
+  @apply text-gray-500;
+}
+
+.tiptap-button:disabled {
+  @apply bg-transparent text-gray-400 cursor-not-allowed;
+}
+
+.dark .tiptap-button:disabled {
+  @apply text-gray-600;
+}
+
+.tiptap-button:disabled .tiptap-button-icon {
+  @apply text-gray-300;
+}
+
+.dark .tiptap-button:disabled .tiptap-button-icon {
+  @apply text-gray-700;
+}

package/src/components/tiptap-ui-primitive/button/button.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import { forwardRef, Fragment, useMemo } from "react"
+
+// --- Tiptap UI Primitive ---
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../tooltip"
+
+// --- Lib ---
+import { cn, parseShortcutKeys } from "../../../lib/tiptap-utils"
+
+import "./button-colors.css"
+import "./button-group.css"
+import "./button.css"
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+  showTooltip?: boolean
+  tooltip?: React.ReactNode
+  shortcutKeys?: string
+}
+
+export const ShortcutDisplay: React.FC<{ shortcuts: string[] }> = ({
+  shortcuts,
+}) => {
+  if (shortcuts.length === 0) return null
+
+  return (
+    <div>
+      {shortcuts.map((key, index) => (
+        <Fragment key={index}>
+          {index > 0 && <kbd>+</kbd>}
+          <kbd>{key}</kbd>
+        </Fragment>
+      ))}
+    </div>
+  )
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      children,
+      tooltip,
+      showTooltip = true,
+      shortcutKeys,
+      "aria-label": ariaLabel,
+      ...props
+    },
+    ref
+  ) => {
+    const shortcuts = useMemo<string[]>(
+      () => parseShortcutKeys({ shortcutKeys }),
+      [shortcutKeys]
+    )
+
+    if (!tooltip || !showTooltip) {
+      return (
+        <button
+          className={cn("tiptap-button", className)}
+          ref={ref}
+          aria-label={ariaLabel}
+          {...props}
+        >
+          {children}
+        </button>
+      )
+    }
+
+    return (
+      <Tooltip delay={200}>
+        <TooltipTrigger
+          className={cn("tiptap-button", className)}
+          ref={ref}
+          aria-label={ariaLabel}
+          {...props}
+        >
+          {children}
+        </TooltipTrigger>
+        <TooltipContent>
+          {tooltip}
+          <ShortcutDisplay shortcuts={shortcuts} />
+        </TooltipContent>
+      </Tooltip>
+    )
+  }
+)
+
+Button.displayName = "Button"
+
+export const ButtonGroup = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    orientation?: "horizontal" | "vertical"
+  }
+>(({ className, children, orientation = "vertical", ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn("tiptap-button-group", className)}
+      data-orientation={orientation}
+      role="group"
+      {...props}
+    >
+      {children}
+    </div>
+  )
+})
+ButtonGroup.displayName = "ButtonGroup"
+
+export default Button

package/src/components/tiptap-ui-primitive/button/index.tsx

@@ -0,0 +1 @@
+export * from "./button"

package/src/components/tiptap-ui-primitive/card/card.css

@@ -0,0 +1,42 @@
+@import "tailwindcss";
+
+.tiptap-card {
+  @apply rounded-xl shadow-lg bg-white border border-gray-200 flex flex-col outline-none items-center relative min-w-0 break-words;
+  background-clip: border-box;
+}
+
+.dark .tiptap-card {
+  @apply bg-gray-900 border-gray-800;
+}
+
+.tiptap-card-header {
+  @apply p-1.5 flex-none flex items-center justify-between w-full border-b border-gray-200;
+}
+
+.dark .tiptap-card-header {
+  @apply border-gray-800;
+}
+
+.tiptap-card-body {
+  @apply p-1.5 flex-1 overflow-y-auto;
+}
+
+.tiptap-card-item-group {
+  @apply relative flex align-middle min-w-max;
+}
+
+.tiptap-card-item-group[data-orientation="vertical"] {
+  @apply flex-col justify-center;
+}
+
+.tiptap-card-item-group[data-orientation="horizontal"] {
+  @apply gap-1 flex-row items-center;
+}
+
+.tiptap-card-group-label {
+  @apply pt-3 px-2 pb-1 leading-normal text-xs font-semibold capitalize text-gray-800;
+}
+
+.dark .tiptap-card-group-label {
+  @apply text-gray-200;
+}