@borisj74/bv-ds 0.1.7 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@borisj74/bv-ds",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "bv-ds — React component library synced from Figma (Untitled UI v8.0), built on Tailwind CSS",
   "license": "MIT",
   "type": "module",
@@ -34,21 +34,36 @@
     "prepublishOnly": "npm run typecheck && npm run build"
   },
   "peerDependencies": {
+    "@borisj74/bv-ds-icons": ">=0.1.0",
+    "@tiptap/extension-placeholder": ">=2.0.0",
+    "@tiptap/extension-text-align": ">=2.0.0",
+    "@tiptap/react": ">=2.0.0",
+    "@tiptap/starter-kit": ">=2.0.0",
+    "date-fns": ">=2.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
-    "@borisj74/bv-ds-icons": ">=0.1.0"
+    "react-big-calendar": ">=1.8.0"
   },
   "devDependencies": {
     "@borisj74/bv-ds-icons": "^0.1.0",
     "@storybook/addon-a11y": "^8.0.0",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/react-vite": "^8.0.0",
+    "@tiptap/extension-link": "^3.27.1",
+    "@tiptap/extension-placeholder": "^3.27.1",
+    "@tiptap/extension-text-align": "^3.27.1",
+    "@tiptap/extension-underline": "^3.27.1",
+    "@tiptap/react": "^3.27.1",
+    "@tiptap/starter-kit": "^3.27.1",
     "@types/react": "^18.2.0",
+    "@types/react-big-calendar": "^1.16.3",
     "@types/react-dom": "^18.2.0",
     "autoprefixer": "^10.4.0",
     "clsx": "^2.1.0",
+    "date-fns": "^4.4.0",
     "postcss": "^8.4.0",
     "react": "^18.2.0",
+    "react-big-calendar": "^1.20.0",
     "react-dom": "^18.2.0",
     "recharts": "^2.15.4",
     "storybook": "^8.0.0",

package/src/components/Calendar/Calendar.tsx

@@ -0,0 +1,249 @@
+import { useMemo, useState, useCallback } from "react";
+import {
+  Calendar as BigCalendar,
+  dateFnsLocalizer,
+  type SlotInfo,
+  type View,
+  type NavigateAction,
+} from "react-big-calendar";
+import { format, parse, startOfWeek, getDay, isSameDay } from "date-fns";
+import { enUS } from "date-fns/locale";
+import clsx from "clsx";
+import { ArrowLeft, ArrowRight, Plus } from "@borisj74/bv-ds-icons";
+import { IconBox } from "../../internal/iconBox";
+import { CalendarHeader } from "../CalendarHeader";
+import { CalendarColumnHeader } from "../CalendarColumnHeader";
+import { CalendarEvent, type CalendarEventColor } from "../CalendarEvent";
+import { CalendarViewDropdown, type CalendarView } from "../CalendarViewDropdown";
+
+const localizer = dateFnsLocalizer({
+  format,
+  parse,
+  // Monday-first week, matching the Figma column-header order (Mon…Sun).
+  startOfWeek: (date: Date) => startOfWeek(date, { weekStartsOn: 1 }),
+  getDay,
+  locales: { "en-US": enUS },
+});
+
+/**
+ * Event shape consumed by the `Calendar` composite. Named `CalendarEventData`
+ * (not `CalendarEvent`) to avoid colliding with the `CalendarEvent` chip
+ * component already exported from the primitives.
+ */
+export interface CalendarEventData {
+  id: string | number;
+  title: string;
+  start: Date;
+  end: Date;
+  color?: CalendarEventColor;
+  allDay?: boolean;
+}
+
+export interface CalendarProps {
+  events: CalendarEventData[];
+  defaultView?: CalendarView;
+  defaultDate?: Date;
+  onNavigate?: (date: Date) => void;
+  onView?: (view: CalendarView) => void;
+  onSelectEvent?: (event: CalendarEventData) => void;
+  onSelectSlot?: (slotInfo: SlotInfo) => void;
+  /** Wires the header "Add event" button. */
+  onAddEvent?: () => void;
+  className?: string;
+}
+
+// Structural layout for react-big-calendar's month grid. We deliberately do NOT
+// import rbc's stylesheet — every visible token comes from our classes here +
+// the component overrides below.
+const rbcStructural = clsx(
+  "h-full font-body",
+  "[&_.rbc-month-view]:flex [&_.rbc-month-view]:flex-1 [&_.rbc-month-view]:flex-col [&_.rbc-month-view]:overflow-hidden",
+  "[&_.rbc-month-header]:flex [&_.rbc-month-header]:flex-row",
+  "[&_.rbc-header]:min-w-0 [&_.rbc-header]:flex-1 [&_.rbc-header]:overflow-hidden",
+  "[&_.rbc-month-row]:relative [&_.rbc-month-row]:flex [&_.rbc-month-row]:min-h-[120px] [&_.rbc-month-row]:flex-1 [&_.rbc-month-row]:flex-col [&_.rbc-month-row]:overflow-hidden",
+  "[&_.rbc-row-bg]:absolute [&_.rbc-row-bg]:inset-0 [&_.rbc-row-bg]:flex [&_.rbc-row-bg]:flex-row",
+  "[&_.rbc-day-bg]:min-w-0 [&_.rbc-day-bg]:flex-1 [&_.rbc-day-bg]:border-b [&_.rbc-day-bg]:border-r [&_.rbc-day-bg]:border-border-secondary [&_.rbc-day-bg]:bg-bg-primary",
+  "[&_.rbc-off-range-bg]:!bg-bg-secondary-alt",
+  "[&_.rbc-row-content]:relative [&_.rbc-row-content]:z-[1] [&_.rbc-row-content]:flex [&_.rbc-row-content]:flex-1 [&_.rbc-row-content]:flex-col",
+  "[&_.rbc-row]:flex [&_.rbc-row]:flex-row",
+  "[&_.rbc-date-cell]:min-w-0 [&_.rbc-date-cell]:flex-1",
+  "[&_.rbc-off-range]:opacity-50",
+  "[&_.rbc-row-segment]:min-w-0 [&_.rbc-row-segment]:px-md [&_.rbc-row-segment]:pb-xxs",
+  "[&_.rbc-event]:block [&_.rbc-event]:w-full [&_.rbc-event]:outline-none",
+  "[&_.rbc-show-more]:block [&_.rbc-show-more]:px-md [&_.rbc-show-more]:text-xs [&_.rbc-show-more]:font-semibold [&_.rbc-show-more]:text-utility-neutral-500",
+);
+
+function NavArrow({ dir }: { dir: "left" | "right" }) {
+  return (
+    <IconBox size={20}>{dir === "left" ? <ArrowLeft /> : <ArrowRight />}</IconBox>
+  );
+}
+
+export function Calendar({
+  events,
+  defaultView = "month",
+  defaultDate,
+  onNavigate,
+  onView,
+  onSelectEvent,
+  onSelectSlot,
+  onAddEvent,
+  className,
+}: CalendarProps) {
+  const [date, setDate] = useState<Date>(defaultDate ?? new Date(2027, 0, 1));
+  const [view, setView] = useState<View>(defaultView);
+  const [selected, setSelected] = useState<Date | null>(null);
+
+  const handleNavigate = useCallback(
+    (next: Date) => {
+      setDate(next);
+      onNavigate?.(next);
+    },
+    [onNavigate],
+  );
+
+  const handleView = useCallback(
+    (next: View) => {
+      setView(next);
+      onView?.(next as CalendarView);
+    },
+    [onView],
+  );
+
+  const handleSelectSlot = useCallback(
+    (slot: SlotInfo) => {
+      setSelected(slot.start);
+      onSelectSlot?.(slot);
+    },
+    [onSelectSlot],
+  );
+
+  const components = useMemo(
+    () => ({
+      // Header bar → CalendarHeader primitive + nav/view/add controls.
+      toolbar: (tb: {
+        label: string;
+        onNavigate: (action: NavigateAction) => void;
+        onView: (view: View) => void;
+        view: View;
+      }) => (
+        <div className="border-b border-border-secondary px-3xl py-2xl">
+          <CalendarHeader
+            title={tb.label}
+            actions={
+              <div className="flex items-center gap-lg">
+                <div className="flex items-center overflow-hidden rounded-md border border-border-primary shadow-xs">
+                  <button
+                    type="button"
+                    aria-label="Previous"
+                    onClick={() => tb.onNavigate("PREV")}
+                    className="flex items-center justify-center bg-bg-primary px-[10px] py-md text-fg-quaternary transition-colors hover:bg-bg-primary-hover"
+                  >
+                    <NavArrow dir="left" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => tb.onNavigate("TODAY")}
+                    className="border-x border-border-primary bg-bg-primary px-[14px] py-md text-sm font-semibold text-text-secondary transition-colors hover:bg-bg-primary-hover"
+                  >
+                    Today
+                  </button>
+                  <button
+                    type="button"
+                    aria-label="Next"
+                    onClick={() => tb.onNavigate("NEXT")}
+                    className="flex items-center justify-center bg-bg-primary px-[10px] py-md text-fg-quaternary transition-colors hover:bg-bg-primary-hover"
+                  >
+                    <NavArrow dir="right" />
+                  </button>
+                </div>
+                <CalendarViewDropdown
+                  value={tb.view as CalendarView}
+                  onChange={(v) => tb.onView(v)}
+                />
+                {onAddEvent && (
+                  <button
+                    type="button"
+                    onClick={onAddEvent}
+                    className="flex items-center gap-xs rounded-md border-2 border-white/[0.12] bg-bg-brand-solid px-lg py-md text-sm font-semibold text-text-white shadow-skeuomorphic"
+                  >
+                    <span className="opacity-60"><IconBox size={20}><Plus /></IconBox></span>
+                    Add event
+                  </button>
+                )}
+              </div>
+            }
+          />
+        </div>
+      ),
+      month: {
+        // Weekday column header → CalendarColumnHeader primitive.
+        header: ({ label }: { label: string }) => (
+          <div className="flex h-full items-center justify-center border-b border-r border-border-secondary bg-bg-primary p-md">
+            <CalendarColumnHeader weekday={label} date="" />
+          </div>
+        ),
+        // Date-number circle (Figma 7991:81840): default / today / selected.
+        dateHeader: ({ date: cellDate, label }: { date: Date; label: string }) => {
+          const today = isSameDay(cellDate, new Date());
+          const isSel = selected ? isSameDay(cellDate, selected) : false;
+          return (
+            <div className="flex p-md">
+              <span
+                className={clsx(
+                  "flex size-6 items-center justify-center rounded-full text-xs font-semibold",
+                  today
+                    ? "bg-bg-brand-solid text-text-white"
+                    : isSel
+                      ? "bg-bg-secondary text-text-secondary"
+                      : "text-text-secondary",
+                )}
+              >
+                {label}
+              </span>
+            </div>
+          );
+        },
+        // Event chip → CalendarEvent primitive (desktop, filled).
+        event: ({ event }: { event: CalendarEventData }) => (
+          <CalendarEvent
+            title={event.title}
+            time={event.allDay ? undefined : format(event.start, "h:mm a")}
+            color={event.color ?? "brand"}
+            filled
+          />
+        ),
+      },
+    }),
+    [onAddEvent, selected],
+  );
+
+  return (
+    <div
+      className={clsx(
+        "flex w-full flex-col overflow-hidden rounded-xl border border-border-secondary bg-bg-primary shadow-xs",
+        className,
+      )}
+    >
+      <BigCalendar
+        localizer={localizer}
+        events={events}
+        date={date}
+        view={view}
+        onNavigate={handleNavigate}
+        onView={handleView}
+        views={["month", "week", "day"]}
+        selectable
+        popup
+        startAccessor="start"
+        endAccessor="end"
+        onSelectEvent={(e) => onSelectEvent?.(e as CalendarEventData)}
+        onSelectSlot={handleSelectSlot}
+        messages={{ showMore: (total: number) => `${total} more…` }}
+        components={components as never}
+        className={rbcStructural}
+        style={{ height: 800 }}
+      />
+    </div>
+  );
+}

package/src/components/Calendar/index.ts

@@ -0,0 +1,2 @@
+export { Calendar } from "./Calendar";
+export type { CalendarProps, CalendarEventData } from "./Calendar";

package/src/components/TextEditor/TextEditor.tsx

@@ -0,0 +1,188 @@
+import { useEffect, type ReactNode } from "react";
+import { EditorContent } from "@tiptap/react";
+import clsx from "clsx";
+import { Bold01, Link01, AlignLeft, AlignCenter, AlignRight, XClose } from "@borisj74/bv-ds-icons";
+import { ButtonUtility } from "../ButtonUtility";
+import { TextEditorToolbar, TextEditorToolbarDivider } from "../TextEditorToolbar";
+import { TextEditorTooltip } from "../TextEditorTooltip";
+import { IconBox } from "../../internal/iconBox";
+import { useTextEditor } from "../../hooks/useTextEditor";
+
+export interface TextEditorProps {
+  placeholder?: string;
+  /** Initial HTML content. */
+  content?: string;
+  /** Fires with serialized HTML on every change. */
+  onUpdate?: (html: string) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+/*
+ * Inline-SVG fallbacks for formatting glyphs absent from @borisj74/bv-ds-icons
+ * v0.1.0 (italic / underline / strike / bullet-list / ordered-list / heading).
+ * Swap to package icons once they exist. 24-grid, currentColor stroke.
+ */
+const stroke = {
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round" as const,
+  strokeLinejoin: "round" as const,
+};
+const ItalicIcon = () => (
+  <svg viewBox="0 0 24 24" {...stroke}><path d="M19 4h-9M14 20H5M15 4 9 20" /></svg>
+);
+const UnderlineIcon = () => (
+  <svg viewBox="0 0 24 24" {...stroke}><path d="M6 4v6a6 6 0 0 0 12 0V4M4 21h16" /></svg>
+);
+const StrikeIcon = () => (
+  <svg viewBox="0 0 24 24" {...stroke}><path d="M4 12h16M16 7.5A4 3 0 0 0 8 8M8 16.5a4 3 0 0 0 8-.5" /></svg>
+);
+const HeadingIcon = () => (
+  <svg viewBox="0 0 24 24" {...stroke}><path d="M6 4v16M18 4v16M6 12h12" /></svg>
+);
+const BulletListIcon = () => (
+  <svg viewBox="0 0 24 24" {...stroke}><path d="M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01" /></svg>
+);
+const OrderedListIcon = () => (
+  <svg viewBox="0 0 24 24" {...stroke}><path d="M10 6h10M10 12h10M10 18h10M4 4v4M3 14h2l-2 3h2" /></svg>
+);
+
+// ProseMirror content styling (Tailwind preflight strips list/heading styles).
+const proseClass = clsx(
+  "font-body text-sm text-text-primary",
+  "[&_.ProseMirror]:min-h-[80px] [&_.ProseMirror]:outline-none",
+  "[&_.ProseMirror_p]:my-0",
+  "[&_.ProseMirror_ul]:list-disc [&_.ProseMirror_ul]:pl-2xl",
+  "[&_.ProseMirror_ol]:list-decimal [&_.ProseMirror_ol]:pl-2xl",
+  "[&_.ProseMirror_h2]:text-lg [&_.ProseMirror_h2]:font-semibold [&_.ProseMirror_h2]:text-text-primary",
+  "[&_.ProseMirror_a]:text-text-brand-secondary [&_.ProseMirror_a]:underline",
+  // Placeholder (extension adds .is-editor-empty + data-placeholder).
+  "[&_.ProseMirror_p.is-editor-empty:first-child]:before:pointer-events-none",
+  "[&_.ProseMirror_p.is-editor-empty:first-child]:before:float-left",
+  "[&_.ProseMirror_p.is-editor-empty:first-child]:before:h-0",
+  "[&_.ProseMirror_p.is-editor-empty:first-child]:before:text-text-placeholder",
+  "[&_.ProseMirror_p.is-editor-empty:first-child]:before:content-[attr(data-placeholder)]",
+);
+
+/**
+ * Rich-text editor — composes the `TextEditorToolbar` / `TextEditorTooltip`
+ * chrome shells onto a TipTap editor (`useTextEditor`). The toolbar buttons map
+ * to TipTap commands and reflect `editor.isActive(...)`; a `TextEditorTooltip`
+ * surfaces link controls when the caret sits inside a link.
+ *
+ * Pass `content` as initial HTML and read changes via `onUpdate(html)`.
+ *
+ * Behavioral constraints (confirmed in Batch 38):
+ *
+ * 1. **`content` is initial-only.** It seeds the document on mount; changing it
+ *    afterwards does NOT resync into the editor (TipTap owns its state once
+ *    mounted). For controlled behavior, lift state via `onUpdate(html)` instead
+ *    of feeding `content` back in.
+ *
+ * 2. **The link tooltip is an inline affordance, not a floating BubbleMenu.**
+ *    It renders inside the editor area when the caret is in a link — it is not
+ *    positioned over the selection and pulls in no `@tiptap/extension-bubble-menu`
+ *    dependency. Swap to a real BubbleMenu if positioned-over-selection UX is
+ *    needed.
+ */
+export function TextEditor({
+  placeholder,
+  content,
+  onUpdate,
+  disabled = false,
+  className,
+}: TextEditorProps) {
+  const editor = useTextEditor({ placeholder, content, editable: !disabled, onUpdate });
+
+  // Sync editable when `disabled` toggles without recreating the editor.
+  useEffect(() => {
+    editor?.setEditable(!disabled);
+  }, [editor, disabled]);
+
+  const isActive = (name: string, attrs?: Record<string, unknown>) =>
+    editor?.isActive(name, attrs) ?? false;
+
+  const setLink = () => {
+    if (!editor) return;
+    const prev = (editor.getAttributes("link").href as string | undefined) ?? "";
+    const url = window.prompt("Link URL", prev);
+    if (url === null) return;
+    const chain = editor.chain().focus().extendMarkRange("link");
+    if (url === "") chain.unsetLink().run();
+    else chain.setLink({ href: url }).run();
+  };
+
+  const ToolbarButton = ({
+    label,
+    icon,
+    active,
+    onRun,
+  }: {
+    label: string;
+    icon: ReactNode;
+    active?: boolean;
+    onRun: () => void;
+  }) => (
+    <ButtonUtility
+      variant="ghost"
+      label={label}
+      icon={<IconBox size={20}>{icon}</IconBox>}
+      aria-pressed={active}
+      disabled={disabled || !editor}
+      className={active ? "!bg-bg-secondary !text-fg-secondary" : undefined}
+      // Keep the editor selection when pressing a toolbar button.
+      onMouseDown={(e) => e.preventDefault()}
+      onClick={onRun}
+    />
+  );
+
+  return (
+    <div
+      className={clsx(
+        "relative flex flex-col overflow-hidden rounded-xl border border-border-primary bg-bg-primary",
+        "focus-within:ring-2 focus-within:ring-border-brand",
+        disabled && "opacity-60",
+        className,
+      )}
+    >
+      <TextEditorToolbar className="w-full !rounded-none !border-l-0 !border-r-0 !border-t-0 !shadow-none">
+        <ToolbarButton label="Bold" icon={<Bold01 />} active={isActive("bold")} onRun={() => editor?.chain().focus().toggleBold().run()} />
+        <ToolbarButton label="Italic" icon={<ItalicIcon />} active={isActive("italic")} onRun={() => editor?.chain().focus().toggleItalic().run()} />
+        <ToolbarButton label="Underline" icon={<UnderlineIcon />} active={isActive("underline")} onRun={() => editor?.chain().focus().toggleUnderline().run()} />
+        <ToolbarButton label="Strikethrough" icon={<StrikeIcon />} active={isActive("strike")} onRun={() => editor?.chain().focus().toggleStrike().run()} />
+        <TextEditorToolbarDivider />
+        <ToolbarButton label="Heading" icon={<HeadingIcon />} active={isActive("heading", { level: 2 })} onRun={() => editor?.chain().focus().toggleHeading({ level: 2 }).run()} />
+        <ToolbarButton label="Bullet list" icon={<BulletListIcon />} active={isActive("bulletList")} onRun={() => editor?.chain().focus().toggleBulletList().run()} />
+        <ToolbarButton label="Ordered list" icon={<OrderedListIcon />} active={isActive("orderedList")} onRun={() => editor?.chain().focus().toggleOrderedList().run()} />
+        <TextEditorToolbarDivider />
+        <ToolbarButton label="Align left" icon={<AlignLeft />} active={editor?.isActive({ textAlign: "left" }) ?? false} onRun={() => editor?.chain().focus().setTextAlign("left").run()} />
+        <ToolbarButton label="Align center" icon={<AlignCenter />} active={editor?.isActive({ textAlign: "center" }) ?? false} onRun={() => editor?.chain().focus().setTextAlign("center").run()} />
+        <ToolbarButton label="Align right" icon={<AlignRight />} active={editor?.isActive({ textAlign: "right" }) ?? false} onRun={() => editor?.chain().focus().setTextAlign("right").run()} />
+        <TextEditorToolbarDivider />
+        <ToolbarButton label="Link" icon={<Link01 />} active={isActive("link")} onRun={setLink} />
+      </TextEditorToolbar>
+
+      <div className="relative min-h-[120px] px-3xl py-2xl">
+        <EditorContent editor={editor} className={proseClass} />
+
+        {editor?.isActive("link") && (
+          <TextEditorTooltip className="absolute right-3xl top-md z-10">
+            <span className="max-w-[160px] truncate px-xs text-xs text-text-secondary">
+              {String(editor.getAttributes("link").href ?? "")}
+            </span>
+            <ButtonUtility variant="ghost" size="xs" label="Edit link" icon={<IconBox size={16}><Link01 /></IconBox>} onClick={setLink} />
+            <ButtonUtility
+              variant="ghost"
+              size="xs"
+              label="Remove link"
+              icon={<IconBox size={16}><XClose /></IconBox>}
+              onClick={() => editor.chain().focus().extendMarkRange("link").unsetLink().run()}
+            />
+          </TextEditorTooltip>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/TextEditor/index.ts

@@ -0,0 +1,2 @@
+export { TextEditor } from "./TextEditor";
+export type { TextEditorProps } from "./TextEditor";

package/src/hooks/useTextEditor.ts

@@ -0,0 +1,45 @@
+import { useEditor, type Editor } from "@tiptap/react";
+import { StarterKit } from "@tiptap/starter-kit";
+import { TextAlign } from "@tiptap/extension-text-align";
+import { Placeholder } from "@tiptap/extension-placeholder";
+
+export interface UseTextEditorOptions {
+  /** Placeholder shown while the document is empty. */
+  placeholder?: string;
+  /** Initial HTML content. */
+  content?: string;
+  /** Whether the editor is editable (default `true`). */
+  editable?: boolean;
+  /** Fires with the serialized HTML on every change. */
+  onUpdate?: (html: string) => void;
+}
+
+/**
+ * Thin wrapper around TipTap's `useEditor`, pre-configured with the standard
+ * extension set: StarterKit (bold/italic/strike/code/heading/lists — and, in
+ * TipTap v3, **underline + link**), TextAlign (left/center/right) and
+ * Placeholder. Link is configured `openOnClick: false` via StarterKit.
+ *
+ * Note: Underline and Link ship inside StarterKit v3, so they are NOT added as
+ * separate extensions (doing so throws a duplicate-extension error).
+ *
+ * Returns the TipTap `Editor` (or `null` until mounted). Compose it with
+ * `EditorContent` + the toolbar, or use the `TextEditor` composite.
+ */
+export function useTextEditor({
+  placeholder,
+  content,
+  editable = true,
+  onUpdate,
+}: UseTextEditorOptions = {}): Editor | null {
+  return useEditor({
+    editable,
+    content: content ?? "",
+    extensions: [
+      StarterKit.configure({ link: { openOnClick: false } }),
+      TextAlign.configure({ types: ["heading", "paragraph"] }),
+      Placeholder.configure({ placeholder: placeholder ?? "" }),
+    ],
+    onUpdate: ({ editor }) => onUpdate?.(editor.getHTML()),
+  });
+}

package/src/index.ts

@@ -18,6 +18,7 @@ export * from "./components/ButtonDestructive";
 export * from "./components/ButtonGroup";
 export * from "./components/ButtonGroupSegment";
 export * from "./components/ButtonUtility";
+export * from "./components/Calendar";
 export * from "./components/CalendarCell";
 export * from "./components/CalendarCellDayWeekView";
 export * from "./components/CalendarColumnHeader";
@@ -135,6 +136,7 @@ export * from "./components/TableHeaderCell";
 export * from "./components/TableHeaderLabel";
 export * from "./components/Tabs";
 export * from "./components/Tag";
+export * from "./components/TextEditor";
 export * from "./components/TextEditorToolbar";
 export * from "./components/TextEditorTooltip";
 export * from "./components/TextareaInputField";
@@ -144,6 +146,9 @@ export * from "./components/TreeView";
 export * from "./components/TreeViewConnector";
 export * from "./components/TreeViewItem";
 export * from "./components/VerificationCodeInput";
+// Hooks
+export { useTextEditor } from "./hooks/useTextEditor";
+export type { UseTextEditorOptions } from "./hooks/useTextEditor";
 // Illustration set — namespaced group (not individual barrel exports).
 export * as illustrations from "./illustrations";
 // figma-to-react appends one line here per new component, e.g.: