@mihcm/ui 0.14.1 → 0.15.0

package/src/StatCard.tsx

@@ -3,21 +3,29 @@
 /**
  * StatCard (web variant — React DOM).
  *
- * Centered icon tile + big number + label, used in the "Quick stats"
- * row of the MiHCM Security prototype (Active Roles / Total Users /
- * Modules). Four tones cover the common meanings; the icon is sized
- * to 18 px inside a 36×36 rounded tile.
+ * Seven layout variants for product KPI surfaces:
+ *
+ *   - `default`      — Centered icon tile + big number + label (original layout)
+ *   - `inline`       — Icon left, value + label stacked right (compact rows)
+ *   - `delta`        — Value + ↑/↓ percentage in a semantic tone
+ *   - `trend`        — Value + delta + inline SparkChart trend (Stripe / Tremor)
+ *   - `progress`     — Value + thin progress bar (current / max goal)
+ *   - `distribution` — Value + segmented CategoryBar breakdown
+ *   - `hero`         — Single huge number, no chrome (marketing / summary callouts)
+ *
+ * All variants share `value`, `label`, optional `icon`, and the 6-tone palette.
+ * Variant-specific props (`delta`, `sparkline`, `max`, `segments`) are typed
+ * via a discriminated union so consumers can't mix prop sets by mistake.
  *
  * Wiki: docs/components/StatCard.md
  */
-import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { Text } from './Text.js';
+import { forwardRef, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
 import { cn } from './internal/cn.js';
+import { Text } from './Text.js';
+import { CategoryBar, type CategoryBarItem } from './CategoryBar.js';
+import { SparkChart, type SparkChartTone } from './SparkChart.js';
 
-export const statCardVariants = cva(
-  'rounded-card border border-secondary bg-card py-4 px-3 text-center',
-);
+/* ── Tone tokens ──────────────────────────────────────────────────── */
 
 const TILE_TONE = {
   primary: 'bg-primary-50 text-primary dark:bg-primary-950 dark:text-primary-300',
@@ -37,27 +45,160 @@ const VALUE_TONE = {
   neutral: 'text-foreground',
 } as const;
 
+const SEGMENT_TONE = {
+  primary: 'bg-primary',
+  accent: 'bg-accent',
+  success: 'bg-success',
+  warning: 'bg-warning',
+  danger: 'bg-destructive',
+  neutral: 'bg-muted-foreground',
+} as const;
+
 export type StatCardTone = keyof typeof TILE_TONE;
 
-export interface StatCardProps
-  extends HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof statCardVariants> {
+/* ── Delta ────────────────────────────────────────────────────────── */
+
+export interface StatCardDelta {
+  /** Magnitude — e.g. `8.4` renders as `+8.4%`. */
+  value: number;
+  /** Direction of change. `flat` skips the arrow. */
+  direction: 'up' | 'down' | 'flat';
+  /** Override the auto-formatted display (default: `+8.4%` / `-3.1%`). */
+  formatted?: string;
+  /**
+   * Whether an `up` direction means a positive outcome. Defaults to `true`.
+   * Set `false` for metrics where down-is-better (failed jobs, error rate).
+   */
+  positiveIsGood?: boolean;
+}
+
+function deltaToneClass(delta: StatCardDelta) {
+  if (delta.direction === 'flat') return 'text-muted-foreground';
+  const positiveIsGood = delta.positiveIsGood ?? true;
+  const isGood = (delta.direction === 'up') === positiveIsGood;
+  return isGood ? 'text-success' : 'text-destructive';
+}
+
+function deltaDisplay(delta: StatCardDelta) {
+  if (delta.formatted) return delta.formatted;
+  const sign = delta.direction === 'up' ? '+' : delta.direction === 'down' ? '-' : '±';
+  return `${sign}${Math.abs(delta.value)}%`;
+}
+
+function DeltaIndicator({ delta }: { delta: StatCardDelta }) {
+  const Arrow = delta.direction === 'up' ? UpArrow : delta.direction === 'down' ? DownArrow : null;
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-0.5 text-xs font-medium tabular-nums',
+        deltaToneClass(delta),
+      )}
+    >
+      {Arrow ? <Arrow /> : null}
+      {deltaDisplay(delta)}
+    </span>
+  );
+}
+
+function UpArrow() {
+  return (
+    <svg viewBox="0 0 12 12" className="size-3" fill="none" stroke="currentColor" strokeWidth={2} aria-hidden="true">
+      <path d="M6 10V2M3 5l3-3 3 3" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function DownArrow() {
+  return (
+    <svg viewBox="0 0 12 12" className="size-3" fill="none" stroke="currentColor" strokeWidth={2} aria-hidden="true">
+      <path d="M6 2v8M3 7l3 3 3-3" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+/* ── Shared shell ─────────────────────────────────────────────────── */
+
+const cardShell = 'rounded-card border border-secondary bg-card';
+
+/* ── Discriminated union of props ─────────────────────────────────── */
+
+interface BaseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
   /** Big number / metric. */
   value: ReactNode;
-  /** Caption shown below the value. */
+  /** Caption shown beside / below the value. */
   label: ReactNode;
-  /** Optional icon, sized to 18 px inside the tile. */
+  /** Optional icon. Honoured by `default` and `inline`; ignored by other variants. */
   icon?: ReactNode;
   /** Color tone. Defaults to `primary`. */
   tone?: StatCardTone;
 }
 
-export const StatCard = forwardRef<HTMLDivElement, StatCardProps>(function StatCard(
-  { className, value, label, icon, tone = 'primary', ...props },
+type DefaultVariantProps = BaseProps & { variant?: 'default' };
+type InlineVariantProps = BaseProps & { variant: 'inline' };
+type DeltaVariantProps = BaseProps & { variant: 'delta'; delta: StatCardDelta };
+type TrendVariantProps = BaseProps & {
+  variant: 'trend';
+  /** Series for the inline SparkChart. */
+  sparkline: number[];
+  /** Optional delta rendered alongside the value. */
+  delta?: StatCardDelta;
+  /** SparkChart tone override. Defaults to the card's `tone` (when mappable). */
+  sparklineTone?: SparkChartTone;
+};
+type ProgressVariantProps = BaseProps & {
+  variant: 'progress';
+  /** Maximum value used to compute the progress fill. */
+  max: number;
+  /** Visible label for the progress meta line (default: `"{value} / {max}"`). */
+  valueLabel?: string;
+};
+type DistributionVariantProps = BaseProps & {
+  variant: 'distribution';
+  /** CategoryBar segments — each `{ label, value, className }`. */
+  segments: CategoryBarItem[];
+};
+type HeroVariantProps = BaseProps & { variant: 'hero' };
+
+export type StatCardProps =
+  | DefaultVariantProps
+  | InlineVariantProps
+  | DeltaVariantProps
+  | TrendVariantProps
+  | ProgressVariantProps
+  | DistributionVariantProps
+  | HeroVariantProps;
+
+/* ── Component dispatch ───────────────────────────────────────────── */
+
+export const StatCard = forwardRef<HTMLDivElement, StatCardProps>(function StatCard(props, ref) {
+  switch (props.variant) {
+    case 'inline':
+      return <InlineCard ref={ref} {...props} />;
+    case 'delta':
+      return <DeltaCard ref={ref} {...props} />;
+    case 'trend':
+      return <TrendCard ref={ref} {...props} />;
+    case 'progress':
+      return <ProgressCard ref={ref} {...props} />;
+    case 'distribution':
+      return <DistributionCard ref={ref} {...props} />;
+    case 'hero':
+      return <HeroCard ref={ref} {...props} />;
+    case 'default':
+    case undefined:
+    default:
+      return <DefaultCard ref={ref} {...props} />;
+  }
+});
+
+/* ── 1. Default — centered icon tile ──────────────────────────────── */
+
+const DefaultCard = forwardRef<HTMLDivElement, DefaultVariantProps>(function DefaultCard(
+  { className, value, label, icon, tone = 'primary', variant: _v, ...rest },
   ref,
 ) {
   return (
-    <div ref={ref} className={cn(statCardVariants(), className)} {...props}>
+    <div ref={ref} className={cn(cardShell, 'px-3 py-4 text-center', className)} {...rest}>
       {icon ? (
         <div
           className={cn(
@@ -68,8 +209,212 @@ export const StatCard = forwardRef<HTMLDivElement, StatCardProps>(function StatC
           <span className="grid size-4.5 place-items-center [&_svg]:size-full">{icon}</span>
         </div>
       ) : null}
-      <Text size="stat" weight="bold" className={cn('block', VALUE_TONE[tone])}>{value}</Text>
-      <Text size="label" tone="muted" className="mt-0.5 block">{label}</Text>
+      <Text as="div" size="stat" weight="bold" className={cn(VALUE_TONE[tone])}>
+        {value}
+      </Text>
+      <Text as="div" size="label" tone="muted" className="mt-0.5">
+        {label}
+      </Text>
+    </div>
+  );
+});
+
+/* ── 2. Inline — horizontal icon + stacked value/label ────────────── */
+
+const InlineCard = forwardRef<HTMLDivElement, InlineVariantProps>(function InlineCard(
+  { className, value, label, icon, tone = 'primary', variant: _v, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn(cardShell, 'flex items-center gap-3 px-4 py-3', className)}
+      {...rest}
+    >
+      {icon ? (
+        <div className={cn('grid size-10 shrink-0 place-items-center rounded-card', TILE_TONE[tone])}>
+          <span className="grid size-5 place-items-center [&_svg]:size-full">{icon}</span>
+        </div>
+      ) : null}
+      <div className="flex min-w-0 flex-col">
+        <Text as="div" size="stat-sm" weight="bold" className={cn('truncate', VALUE_TONE[tone])}>
+          {value}
+        </Text>
+        <Text as="div" size="label" tone="muted" className="truncate">
+          {label}
+        </Text>
+      </div>
     </div>
   );
 });
+
+/* ── 3. Delta — value + ↑/↓ percentage ────────────────────────────── */
+
+const DeltaCard = forwardRef<HTMLDivElement, DeltaVariantProps>(function DeltaCard(
+  { className, value, label, tone = 'neutral', delta, variant: _v, icon: _i, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cn(cardShell, 'px-4 py-3', className)} {...rest}>
+      <Text as="div" size="label" tone="muted" className="uppercase tracking-wider">
+        {label}
+      </Text>
+      <div className="mt-1 flex items-baseline gap-2">
+        <Text as="span" size="stat" weight="bold" className={cn('tabular-nums leading-tight', VALUE_TONE[tone])}>
+          {value}
+        </Text>
+        <DeltaIndicator delta={delta} />
+      </div>
+    </div>
+  );
+});
+
+/* ── 4. Trend — value + delta + SparkChart ────────────────────────── */
+
+const SPARK_TONE_FOR: Partial<Record<StatCardTone, SparkChartTone>> = {
+  primary: 'primary',
+  accent: 'accent',
+  success: 'success',
+  warning: 'warning',
+  danger: 'danger',
+};
+
+const TrendCard = forwardRef<HTMLDivElement, TrendVariantProps>(function TrendCard(
+  {
+    className,
+    value,
+    label,
+    tone = 'primary',
+    delta,
+    sparkline,
+    sparklineTone,
+    variant: _v,
+    icon: _i,
+    ...rest
+  },
+  ref,
+) {
+  const resolvedSparkTone: SparkChartTone = sparklineTone ?? SPARK_TONE_FOR[tone] ?? 'primary';
+  return (
+    <div ref={ref} className={cn(cardShell, 'flex items-center gap-4 px-4 py-3', className)} {...rest}>
+      <div className="min-w-0 flex-1">
+        <Text as="div" size="label" tone="muted" className="uppercase tracking-wider">
+          {label}
+        </Text>
+        <div className="mt-1 flex items-baseline gap-2">
+          <Text as="span" size="stat" weight="bold" className={cn('tabular-nums leading-tight', VALUE_TONE[tone])}>
+            {value}
+          </Text>
+          {delta ? <DeltaIndicator delta={delta} /> : null}
+        </div>
+      </div>
+      <SparkChart
+        data={sparkline}
+        tone={resolvedSparkTone}
+        showArea
+        width={96}
+        height={40}
+        className="shrink-0"
+        aria-hidden="true"
+      />
+    </div>
+  );
+});
+
+/* ── 5. Progress — value of max + thin bar ────────────────────────── */
+
+const ProgressCard = forwardRef<HTMLDivElement, ProgressVariantProps>(function ProgressCard(
+  {
+    className,
+    value,
+    label,
+    tone = 'primary',
+    max,
+    valueLabel,
+    variant: _v,
+    icon: _i,
+    ...rest
+  },
+  ref,
+) {
+  const numericValue = typeof value === 'number' ? value : Number(value) || 0;
+  const pct = max > 0 ? Math.max(0, Math.min(100, (numericValue / max) * 100)) : 0;
+  const display = valueLabel ?? `${value} / ${max}`;
+  return (
+    <div ref={ref} className={cn(cardShell, 'space-y-2.5 px-4 py-3', className)} {...rest}>
+      <div className="flex items-baseline justify-between gap-2">
+        <Text as="div" size="label" tone="muted" className="uppercase tracking-wider">
+          {label}
+        </Text>
+        <Text as="span" size="label" tone="muted" className="tabular-nums">
+          {Math.round(pct)}%
+        </Text>
+      </div>
+      <Text as="div" size="stat" weight="bold" className={cn('tabular-nums leading-tight', VALUE_TONE[tone])}>
+        {display}
+      </Text>
+      <div
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={max}
+        aria-valuenow={numericValue}
+        aria-label={typeof label === 'string' ? label : undefined}
+        className="h-1.5 w-full overflow-hidden rounded-full bg-muted"
+      >
+        <div
+          className={cn('h-full rounded-full transition-[width] duration-500', SEGMENT_TONE[tone])}
+          style={{ width: `${pct}%` } as CSSProperties}
+        />
+      </div>
+    </div>
+  );
+});
+
+/* ── 6. Distribution — value + segmented CategoryBar ──────────────── */
+
+const DistributionCard = forwardRef<HTMLDivElement, DistributionVariantProps>(function DistributionCard(
+  { className, value, label, tone = 'primary', segments, variant: _v, icon: _i, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cn(cardShell, 'space-y-3 px-4 py-3', className)} {...rest}>
+      <div>
+        <Text as="div" size="label" tone="muted" className="uppercase tracking-wider">
+          {label}
+        </Text>
+        <Text as="div" size="stat" weight="bold" className={cn('mt-1 tabular-nums leading-tight', VALUE_TONE[tone])}>
+          {value}
+        </Text>
+      </div>
+      <CategoryBar data={segments} legendPosition="bottom" />
+    </div>
+  );
+});
+
+/* ── 7. Hero — single huge number ─────────────────────────────────── */
+
+const HeroCard = forwardRef<HTMLDivElement, HeroVariantProps>(function HeroCard(
+  { className, value, label, tone = 'primary', variant: _v, icon: _i, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cn(cardShell, 'px-6 py-8 text-center', className)} {...rest}>
+      <Text
+        as="div"
+        size="5xl"
+        weight="bold"
+        className={cn('tabular-nums leading-none', VALUE_TONE[tone])}
+      >
+        {value}
+      </Text>
+      <Text as="div" size="sm" tone="muted" className="mt-2 uppercase tracking-wider">
+        {label}
+      </Text>
+    </div>
+  );
+});
+
+/* ── Backward-compat re-export for any consumer pulling the cva ──── */
+
+export const statCardVariants = () =>
+  'rounded-card border border-secondary bg-card py-4 px-3 text-center';

package/src/TransferList.native.tsx

@@ -10,6 +10,7 @@
  */
 import { forwardRef, useMemo, useState } from 'react';
 import { FlatList, Pressable, Text, TextInput, View, type ViewProps } from 'react-native';
+import { NATIVE_PLACEHOLDER_COLOR } from '@mihcm/theme';
 import { cn } from './internal/cn.js';
 
 export type TransferListAssignment = Record<string, boolean>;
@@ -99,7 +100,7 @@ export const TransferList = forwardRef<View, TransferListProps>(
             placeholder={filterPlaceholder}
             accessibilityLabel={`Filter ${label}`}
             className="rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-            placeholderTextColor="#9ca3af"
+            placeholderTextColor={NATIVE_PLACEHOLDER_COLOR}
           />
         </View>
         <FlatList

package/dist/TiptapEditor.d.ts

@@ -1,24 +0,0 @@
-/**
- * TiptapEditor (web variant).
- *
- * Optional rich text editor powered by Tiptap. The existing
- * RichTextEditor remains available for Lexical consumers.
- *
- * Wiki: docs/components/TiptapEditor.md
- */
-import { type HTMLAttributes, type ReactNode } from 'react';
-import { type Editor } from '@tiptap/react';
-export interface TiptapEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
-    value?: string;
-    defaultValue?: string;
-    onChange?: (html: string, editor: Editor) => void;
-    placeholder?: string;
-    editable?: boolean;
-    minHeight?: string;
-    toolbar?: boolean;
-    toolbarMode?: 'basic' | 'full';
-    toolbarSlot?: ReactNode | ((editor: Editor) => ReactNode);
-    editorClassName?: string;
-}
-export declare const TiptapEditor: import("react").ForwardRefExoticComponent<TiptapEditorProps & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=TiptapEditor.d.ts.map

package/dist/TiptapEditor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TiptapEditor.d.ts","sourceRoot":"","sources":["../src/TiptapEditor.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,OAAO,EAAyB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnF,OAAO,EAA4B,KAAK,MAAM,EAAE,MAAM,eAAe,CAAC;AAWtE,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,GAAG,UAAU,CACxB;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,WAAW,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,MAAM,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC;IAC1D,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAwED,eAAO,MAAM,YAAY,8GAgOvB,CAAC"}

package/dist/TiptapEditor.js

@@ -1,84 +0,0 @@
-'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * TiptapEditor (web variant).
- *
- * Optional rich text editor powered by Tiptap. The existing
- * RichTextEditor remains available for Lexical consumers.
- *
- * Wiki: docs/components/TiptapEditor.md
- */
-import { forwardRef, useEffect } from 'react';
-import { EditorContent, useEditor } from '@tiptap/react';
-import StarterKit from '@tiptap/starter-kit';
-import LinkExtension from '@tiptap/extension-link';
-import Placeholder from '@tiptap/extension-placeholder';
-import { Table } from '@tiptap/extension-table';
-import TableCell from '@tiptap/extension-table-cell';
-import TableHeader from '@tiptap/extension-table-header';
-import TableRow from '@tiptap/extension-table-row';
-import { cn } from './internal/cn.js';
-import { Button } from './Button.js';
-function ToolbarButton({ active, children, onClick, disabled, }) {
-    return (_jsx(Button, { type: "button", size: "sm", variant: active ? 'default' : 'outline', disabled: disabled, onClick: onClick, "aria-pressed": active || undefined, children: children }));
-}
-const SAFE_LINK_PROTOCOLS = new Set(['http:', 'https:', 'mailto:', 'tel:']);
-function isSafeLinkHref(href) {
-    try {
-        const parsed = new URL(href, 'https://mihcm.local');
-        return SAFE_LINK_PROTOCOLS.has(parsed.protocol);
-    }
-    catch {
-        return false;
-    }
-}
-function setEditorLink(editor) {
-    const previousUrl = editor.getAttributes('link').href;
-    const nextUrl = window.prompt('Link URL', previousUrl ?? 'https://');
-    if (nextUrl === null) {
-        return;
-    }
-    const trimmedUrl = nextUrl.trim();
-    if (!trimmedUrl) {
-        editor.chain().focus().extendMarkRange('link').unsetLink().run();
-        return;
-    }
-    if (!isSafeLinkHref(trimmedUrl)) {
-        return;
-    }
-    editor.chain().focus().extendMarkRange('link').setLink({ href: trimmedUrl }).run();
-}
-function InsertTableButton({ editor }) {
-    return (_jsx(ToolbarButton, { onClick: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(), children: "Table" }));
-}
-export const TiptapEditor = forwardRef(function TiptapEditor({ value, defaultValue = '', onChange, placeholder = 'Start writing...', editable = true, minHeight = '12rem', toolbar = true, toolbarMode = 'full', toolbarSlot, className, editorClassName, ...props }, ref) {
-    const editor = useEditor({
-        extensions: [
-            StarterKit,
-            LinkExtension.configure({ openOnClick: false, autolink: true }),
-            Placeholder.configure({ placeholder }),
-            Table.configure({ resizable: true }),
-            TableRow,
-            TableHeader,
-            TableCell,
-        ],
-        content: value ?? defaultValue,
-        editable,
-        immediatelyRender: false,
-        onUpdate: ({ editor: currentEditor }) => onChange?.(currentEditor.getHTML(), currentEditor),
-    });
-    useEffect(() => {
-        editor?.setEditable(editable);
-    }, [editable, editor]);
-    useEffect(() => {
-        if (!editor || value === undefined || editor.getHTML() === value) {
-            return;
-        }
-        editor.commands.setContent(value, { emitUpdate: false });
-    }, [editor, value]);
-    if (!editor) {
-        return (_jsx("div", { ref: ref, className: cn('rounded-xl border border-border bg-card p-4 text-sm text-muted-foreground shadow-mi-card', className), ...props, children: "Loading editor..." }));
-    }
-    return (_jsxs("div", { ref: ref, className: cn('overflow-hidden rounded-xl border border-border bg-card shadow-mi-card', className), ...props, children: [toolbar ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b border-border bg-muted/40 p-2", children: [_jsx(ToolbarButton, { active: editor.isActive('paragraph'), onClick: () => editor.chain().focus().setParagraph().run(), children: "Paragraph" }), _jsx(ToolbarButton, { active: editor.isActive('heading', { level: 1 }), onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(), children: "H1" }), _jsx(ToolbarButton, { active: editor.isActive('heading', { level: 2 }), onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), children: "H2" }), _jsx(ToolbarButton, { active: editor.isActive('heading', { level: 3 }), onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(), children: "H3" }), _jsx(ToolbarButton, { active: editor.isActive('bold'), onClick: () => editor.chain().focus().toggleBold().run(), children: "Bold" }), _jsx(ToolbarButton, { active: editor.isActive('italic'), onClick: () => editor.chain().focus().toggleItalic().run(), children: "Italic" }), _jsx(ToolbarButton, { active: editor.isActive('strike'), onClick: () => editor.chain().focus().toggleStrike().run(), children: "Strike" }), _jsx(ToolbarButton, { active: editor.isActive('code'), onClick: () => editor.chain().focus().toggleCode().run(), children: "Code" }), _jsx(ToolbarButton, { active: editor.isActive('bulletList'), onClick: () => editor.chain().focus().toggleBulletList().run(), children: "Bullets" }), _jsx(ToolbarButton, { active: editor.isActive('orderedList'), onClick: () => editor.chain().focus().toggleOrderedList().run(), children: "Numbered" }), toolbarMode === 'full' ? (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { active: editor.isActive('blockquote'), onClick: () => editor.chain().focus().toggleBlockquote().run(), children: "Quote" }), _jsx(ToolbarButton, { active: editor.isActive('codeBlock'), onClick: () => editor.chain().focus().toggleCodeBlock().run(), children: "Code block" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setHorizontalRule().run(), children: "Rule" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setHardBreak().run(), children: "Break" }), _jsx(ToolbarButton, { active: editor.isActive('link'), onClick: () => setEditorLink(editor), children: "Link" }), _jsx(ToolbarButton, { disabled: !editor.isActive('link'), onClick: () => editor.chain().focus().extendMarkRange('link').unsetLink().run(), children: "Unlink" }), _jsx(InsertTableButton, { editor: editor }), _jsx(ToolbarButton, { disabled: !editor.can().addColumnAfter(), onClick: () => editor.chain().focus().addColumnAfter().run(), children: "Column +" }), _jsx(ToolbarButton, { disabled: !editor.can().deleteColumn(), onClick: () => editor.chain().focus().deleteColumn().run(), children: "Column -" }), _jsx(ToolbarButton, { disabled: !editor.can().addRowAfter(), onClick: () => editor.chain().focus().addRowAfter().run(), children: "Row +" }), _jsx(ToolbarButton, { disabled: !editor.can().deleteRow(), onClick: () => editor.chain().focus().deleteRow().run(), children: "Row -" }), _jsx(ToolbarButton, { disabled: !editor.can().deleteTable(), onClick: () => editor.chain().focus().deleteTable().run(), children: "Delete table" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().unsetAllMarks().clearNodes().run(), children: "Clear" })] })) : null, _jsx(ToolbarButton, { disabled: !editor.can().undo(), onClick: () => editor.chain().focus().undo().run(), children: "Undo" }), _jsx(ToolbarButton, { disabled: !editor.can().redo(), onClick: () => editor.chain().focus().redo().run(), children: "Redo" }), typeof toolbarSlot === 'function' ? toolbarSlot(editor) : toolbarSlot] })) : null, _jsx(EditorContent, { editor: editor, className: cn('prose prose-sm max-w-none p-4 text-foreground outline-none prose-headings:text-foreground prose-p:my-2 prose-a:text-primary', '[&_.ProseMirror]:outline-none', editorClassName), style: { minHeight } })] }));
-});
-//# sourceMappingURL=TiptapEditor.js.map

package/dist/TiptapEditor.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TiptapEditor.js","sourceRoot":"","sources":["../src/TiptapEditor.tsx"],"names":[],"mappings":"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"}