@supatype/ui 0.1.0-alpha.9

package/src/Badge.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import { clsx } from "clsx"
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: "default" | "success" | "warning" | "danger" | "purple"
+}
+
+export const Badge: React.FC<BadgeProps> = ({ variant = "default", className, children, ...props }) => {
+  return (
+    <span
+      className={clsx(
+        "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
+        {
+          "bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300": variant === "default",
+          "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300": variant === "success",
+          "bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300": variant === "warning",
+          "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300": variant === "danger",
+          "bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300": variant === "purple",
+        },
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}

package/src/Button.tsx

@@ -0,0 +1,36 @@
+import React from "react"
+import { clsx } from "clsx"
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "ghost" | "danger"
+  size?: "sm" | "md" | "lg"
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = "primary", size = "md", className, children, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={clsx(
+          "inline-flex items-center justify-center rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+          {
+            "bg-purple-600 text-white hover:bg-purple-700": variant === "primary",
+            "border border-neutral-300 bg-white text-neutral-900 hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800": variant === "secondary",
+            "text-neutral-600 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:bg-neutral-800": variant === "ghost",
+            "bg-red-600 text-white hover:bg-red-700": variant === "danger",
+          },
+          {
+            "h-8 px-3 text-sm": size === "sm",
+            "h-10 px-4 text-sm": size === "md",
+            "h-12 px-6 text-base": size === "lg",
+          },
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    )
+  },
+)
+Button.displayName = "Button"

package/src/Card.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import { clsx } from "clsx"
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  padding?: "sm" | "md" | "lg"
+}
+
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ padding = "md", className, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={clsx(
+          "rounded-xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-900",
+          {
+            "p-4": padding === "sm",
+            "p-6": padding === "md",
+            "p-8": padding === "lg",
+          },
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  },
+)
+Card.displayName = "Card"

package/src/Input.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+import { clsx } from "clsx"
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string
+  error?: string
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ label, error, className, id, ...props }, ref) => {
+    const inputId = id ?? label?.toLowerCase().replace(/\s+/g, "-")
+    return (
+      <div className="flex flex-col gap-1.5">
+        {label && (
+          <label htmlFor={inputId} className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+            {label}
+          </label>
+        )}
+        <input
+          ref={ref}
+          id={inputId}
+          className={clsx(
+            "h-10 rounded-lg border px-3 text-sm transition-colors",
+            "border-neutral-300 bg-white text-neutral-900 placeholder:text-neutral-500",
+            "dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100 dark:placeholder:text-neutral-500",
+            "focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500",
+            error && "border-red-500 focus:border-red-500 focus:ring-red-500",
+            className,
+          )}
+          {...props}
+        />
+        {error && <p className="text-sm text-red-500">{error}</p>}
+      </div>
+    )
+  },
+)
+Input.displayName = "Input"

package/src/RichTextEditor.tsx

@@ -0,0 +1,206 @@
+"use client"
+
+import React, { useCallback, useEffect, useMemo, useRef } from "react"
+import type { SerializedEditorState } from "@supatype/types/lexical"
+import { LexicalComposer } from "@lexical/react/LexicalComposer"
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin"
+import { ContentEditable } from "@lexical/react/LexicalContentEditable"
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin"
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin"
+import { ListPlugin } from "@lexical/react/LexicalListPlugin"
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin"
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import {
+  $getSelection,
+  $isRangeSelection,
+  FORMAT_TEXT_COMMAND,
+  type EditorState,
+  type LexicalEditor,
+  type TextFormatType,
+} from "lexical"
+import { $createHeadingNode, HeadingNode, QuoteNode } from "@lexical/rich-text"
+import { ListNode, ListItemNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from "@lexical/list"
+import { AutoLinkNode, LinkNode } from "@lexical/link"
+import { $setBlocksType } from "@lexical/selection"
+import { $createParagraphNode, $getRoot } from "lexical"
+import clsx from "clsx"
+
+const EDITOR_NODES = [HeadingNode, QuoteNode, ListNode, ListItemNode, LinkNode, AutoLinkNode]
+
+const EDITOR_THEME = {
+  heading: { h1: "su-rt-h1", h2: "su-rt-h2", h3: "su-rt-h3" },
+  text: { bold: "su-rt-bold", italic: "su-rt-italic", underline: "su-rt-underline", strikethrough: "su-rt-strikethrough" },
+  list: { ul: "su-rt-ul", ol: "su-rt-ol", listitem: "su-rt-li" },
+  link: "su-rt-link",
+  paragraph: "su-rt-p",
+}
+
+function ToolbarPlugin(): React.ReactElement {
+  const [editor] = useLexicalComposerContext()
+
+  const format = useCallback((fmt: TextFormatType) => {
+    editor.dispatchCommand(FORMAT_TEXT_COMMAND, fmt)
+  }, [editor])
+
+  const setHeading = useCallback((tag: "h1" | "h2" | "h3") => {
+    editor.update(() => {
+      const selection = $getSelection()
+      if ($isRangeSelection(selection)) {
+        $setBlocksType(selection, () => $createHeadingNode(tag))
+      }
+    })
+  }, [editor])
+
+  const setParagraph = useCallback(() => {
+    editor.update(() => {
+      const selection = $getSelection()
+      if ($isRangeSelection(selection)) {
+        $setBlocksType(selection, () => $createParagraphNode())
+      }
+    })
+  }, [editor])
+
+  return (
+    <div className="su-richtext-toolbar" role="toolbar" aria-label="Formatting">
+      <button type="button" title="Bold" onMouseDown={(e) => { e.preventDefault(); format("bold") }}>
+        B
+      </button>
+      <button type="button" title="Italic" onMouseDown={(e) => { e.preventDefault(); format("italic") }}>
+        I
+      </button>
+      <button type="button" title="Underline" onMouseDown={(e) => { e.preventDefault(); format("underline") }}>
+        U
+      </button>
+      <span className="su-richtext-toolbar-divider" aria-hidden />
+      <button type="button" title="Heading 1" onMouseDown={(e) => { e.preventDefault(); setHeading("h1") }}>
+        H1
+      </button>
+      <button type="button" title="Heading 2" onMouseDown={(e) => { e.preventDefault(); setHeading("h2") }}>
+        H2
+      </button>
+      <button type="button" title="Paragraph" onMouseDown={(e) => { e.preventDefault(); setParagraph() }}>
+        ¶
+      </button>
+      <span className="su-richtext-toolbar-divider" aria-hidden />
+      <button
+        type="button"
+        title="Bullet list"
+        onMouseDown={(e) => {
+          e.preventDefault()
+          editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)
+        }}
+      >
+        •
+      </button>
+      <button
+        type="button"
+        title="Numbered list"
+        onMouseDown={(e) => {
+          e.preventDefault()
+          editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined)
+        }}
+      >
+        1.
+      </button>
+    </div>
+  )
+}
+
+function InitialStatePlugin({ value }: { value: SerializedEditorState | null | undefined }): null {
+  const [editor] = useLexicalComposerContext()
+  const loaded = useRef(false)
+
+  useEffect(() => {
+    if (loaded.current) return
+    loaded.current = true
+    if (value !== null && value !== undefined && typeof value === "object") {
+      try {
+        const state = editor.parseEditorState(JSON.stringify(value))
+        editor.setEditorState(state)
+      } catch {
+        editor.update(() => {
+          const root = $getRoot()
+          root.clear()
+          root.append($createParagraphNode())
+        })
+      }
+    }
+  }, [editor, value])
+
+  return null
+}
+
+export interface RichTextEditorProps {
+  /** Initial document (Lexical JSON). Updates only on mount; use `documentKey` to reload. */
+  value?: SerializedEditorState | null | undefined
+  onChange: (json: SerializedEditorState) => void
+  placeholder?: string | undefined
+  className?: string | undefined
+  editable?: boolean | undefined
+  /** Change when switching documents so Lexical remounts with new `value`. */
+  documentKey?: string | undefined
+  /** `id` on the editable surface (e.g. for `<label htmlFor>`). */
+  contentEditableId?: string | undefined
+}
+
+/**
+ * Lexical-based rich text editor aligned with `@supatype/types` `RichText` / `SerializedEditorState`.
+ *
+ * Peer dependencies: `lexical`, `@lexical/react`, `@lexical/rich-text`, `@lexical/list`, `@lexical/link`, `@lexical/selection`.
+ */
+export function RichTextEditor({
+  value,
+  onChange,
+  placeholder = "Write something…",
+  className,
+  editable = true,
+  documentKey = "default",
+  contentEditableId,
+}: RichTextEditorProps): React.ReactElement {
+  const initialConfig = useMemo(
+    () => ({
+      namespace: `supatype-richtext-${documentKey}`,
+      theme: EDITOR_THEME,
+      nodes: EDITOR_NODES,
+      editable,
+      onError: (err: Error) => {
+        console.error("[RichTextEditor]", err)
+      },
+    }),
+    [documentKey, editable],
+  )
+
+  const handleChange = useCallback(
+    (editorState: EditorState, _editor: LexicalEditor) => {
+      onChange(editorState.toJSON() as SerializedEditorState)
+    },
+    [onChange],
+  )
+
+  return (
+    <div className={clsx("su-richtext", className, !editable && "su-richtext-readonly")}>
+      <LexicalComposer key={documentKey} initialConfig={initialConfig}>
+        {editable ? <ToolbarPlugin /> : null}
+        <InitialStatePlugin value={value} />
+        <div className="su-richtext-surface">
+          <RichTextPlugin
+            contentEditable={
+              <ContentEditable
+                id={contentEditableId}
+                className="su-richtext-editable"
+                aria-label={placeholder}
+              />
+            }
+            placeholder={<div className="su-richtext-placeholder">{placeholder}</div>}
+            ErrorBoundary={LexicalErrorBoundary}
+          />
+        </div>
+        <HistoryPlugin />
+        <ListPlugin />
+        <LinkPlugin />
+        <OnChangePlugin onChange={handleChange} ignoreSelectionChange />
+      </LexicalComposer>
+    </div>
+  )
+}

package/src/Skeleton.tsx

@@ -0,0 +1,11 @@
+import React from "react"
+import { clsx } from "clsx"
+
+export const Skeleton: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, ...props }) => {
+  return (
+    <div
+      className={clsx("animate-pulse rounded-md bg-neutral-200 dark:bg-neutral-800", className)}
+      {...props}
+    />
+  )
+}

package/src/ThemeProvider.tsx

@@ -0,0 +1,64 @@
+import React, { createContext, useContext, useEffect, useState } from "react"
+
+type Theme = "light" | "dark" | "system"
+
+interface ThemeContextValue {
+  theme: Theme
+  resolvedTheme: "light" | "dark"
+  setTheme: (theme: Theme) => void
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null)
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext)
+  if (!ctx) throw new Error("useTheme must be used within a ThemeProvider")
+  return ctx
+}
+
+function getSystemTheme(): "light" | "dark" {
+  if (typeof window === "undefined") return "dark"
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+}
+
+export const ThemeProvider: React.FC<{ defaultTheme?: Theme; children: React.ReactNode }> = ({
+  defaultTheme = "system",
+  children,
+}) => {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    if (typeof window === "undefined") return defaultTheme
+    return (localStorage.getItem("supatype-theme") as Theme) ?? defaultTheme
+  })
+  const [resolvedTheme, setResolved] = useState<"light" | "dark">(() =>
+    theme === "system" ? getSystemTheme() : theme,
+  )
+
+  useEffect(() => {
+    const resolved = theme === "system" ? getSystemTheme() : theme
+    setResolved(resolved)
+    document.documentElement.classList.toggle("dark", resolved === "dark")
+  }, [theme])
+
+  useEffect(() => {
+    if (theme !== "system") return
+    const mq = window.matchMedia("(prefers-color-scheme: dark)")
+    const handler = () => {
+      const resolved = getSystemTheme()
+      setResolved(resolved)
+      document.documentElement.classList.toggle("dark", resolved === "dark")
+    }
+    mq.addEventListener("change", handler)
+    return () => mq.removeEventListener("change", handler)
+  }, [theme])
+
+  const setTheme = (t: Theme) => {
+    setThemeState(t)
+    localStorage.setItem("supatype-theme", t)
+  }
+
+  return (
+    <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}

package/src/index.ts

@@ -0,0 +1,22 @@
+// @supatype/ui — Shared component library
+
+export { Button } from "./Button.js"
+export type { ButtonProps } from "./Button.js"
+
+export { Input } from "./Input.js"
+export type { InputProps } from "./Input.js"
+
+export { Card } from "./Card.js"
+export type { CardProps } from "./Card.js"
+
+export { Badge } from "./Badge.js"
+export type { BadgeProps } from "./Badge.js"
+
+export { Skeleton } from "./Skeleton.js"
+
+export { ThemeProvider, useTheme } from "./ThemeProvider.js"
+
+export { RichTextEditor } from "./RichTextEditor.js"
+export type { RichTextEditorProps } from "./RichTextEditor.js"
+export { emptyRichTextDocument, normalizeRichTextDefault, richTextIsEmpty, stringToRichTextDocument } from "./richtext-utils.js"
+export type { SerializedEditorState, SerializedLexicalNode } from "@supatype/types/lexical"

package/src/richtext-utils.ts

@@ -0,0 +1,112 @@
+import type { SerializedEditorState, SerializedLexicalNode } from "@supatype/types/lexical"
+
+/** Lexical-compatible empty document (one empty paragraph). */
+export function emptyRichTextDocument(): SerializedEditorState {
+  return {
+    root: {
+      type: "root",
+      format: "",
+      indent: 0,
+      version: 1,
+      children: [
+        {
+          type: "paragraph",
+          format: "",
+          indent: 0,
+          version: 1,
+          children: [
+            {
+              type: "text",
+              text: "",
+              format: 0,
+              style: "",
+              mode: "normal",
+              detail: 0,
+              version: 1,
+            },
+          ],
+        },
+      ],
+    },
+  }
+}
+
+/** Plain sentence → minimal Lexical document (single paragraph). Not HTML — literal text only. */
+export function stringToRichTextDocument(text: string): SerializedEditorState {
+  return {
+    root: {
+      type: "root",
+      format: "",
+      indent: 0,
+      version: 1,
+      children: [
+        {
+          type: "paragraph",
+          format: "",
+          indent: 0,
+          version: 1,
+          children: [
+            {
+              type: "text",
+              text,
+              format: 0,
+              style: "",
+              mode: "normal",
+              detail: 0,
+              version: 1,
+            },
+          ],
+        },
+      ],
+    },
+  }
+}
+
+function isLexicalDocument(value: unknown): value is SerializedEditorState {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "root" in value &&
+    typeof (value as SerializedEditorState).root === "object"
+  )
+}
+
+/**
+ * Normalize a RichText default or seed value: Lexical object passthrough, JSON Lexical string, or plain string → Lexical.
+ * Does not parse HTML.
+ */
+export function normalizeRichTextDefault(
+  value: SerializedEditorState | string | null | undefined,
+): SerializedEditorState | null {
+  if (value === null || value === undefined) return null
+  if (isLexicalDocument(value)) return value
+  if (typeof value === "string") {
+    const trimmed = value.trim()
+    if (trimmed.startsWith("{")) {
+      try {
+        const parsed = JSON.parse(trimmed) as unknown
+        if (isLexicalDocument(parsed)) return parsed
+      } catch {
+        // fall through — treat as plain text
+      }
+    }
+    return stringToRichTextDocument(value)
+  }
+  return null
+}
+
+function collectText(node: SerializedLexicalNode): string {
+  let out = ""
+  if (typeof node.text === "string") out += node.text
+  const children = node.children
+  if (Array.isArray(children)) {
+    for (const c of children) out += collectText(c as SerializedLexicalNode)
+  }
+  return out
+}
+
+/** True when the editor has no visible text (whitespace-only counts as empty). */
+export function richTextIsEmpty(state: SerializedEditorState | null | undefined): boolean {
+  if (state === null || state === undefined) return true
+  return collectText(state.root).trim() === ""
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "composite": true,
+    "jsx": "react-jsx",
+    "lib": ["ES2022", "DOM"]
+  },
+  "include": ["src"]
+}