@modern-admin/ui 0.1.0

package/src/components/richtext-render.tsx

@@ -0,0 +1,51 @@
+// Read-only renderer for HTML/Markdown produced by <RichtextEditor>.
+// Sanitizes HTML through DOMPurify before injection. Markdown is parsed
+// with `marked`, then sanitized. Output is wrapped in Tailwind `prose`
+// utilities so headings/lists/code blocks/etc. get long-form typography.
+
+import * as React from 'react'
+import DOMPurify from 'dompurify'
+import { marked } from 'marked'
+import { cn } from '../lib/utils.js'
+
+const proseRenderClass =
+  'prose prose-sm max-w-none text-foreground prose-headings:text-foreground ' +
+  'prose-p:text-foreground prose-strong:text-foreground prose-li:text-foreground ' +
+  'prose-code:text-foreground prose-pre:text-foreground prose-pre:bg-muted ' +
+  'prose-blockquote:text-muted-foreground prose-blockquote:border-border ' +
+  'prose-a:text-foreground dark:prose-invert'
+
+export interface RichtextRenderProps {
+  value: string
+  format?: 'html' | 'markdown'
+  className?: string
+}
+
+function renderHtml(html: string): string {
+  // DOMPurify is browser-only; on SSR fall back to escaping.
+  if (typeof window === 'undefined') return html
+  return DOMPurify.sanitize(html, { USE_PROFILES: { html: true } })
+}
+
+export function RichtextRender({
+  value,
+  format = 'html',
+  className,
+}: RichtextRenderProps): React.ReactElement {
+  const html = React.useMemo(() => {
+    if (!value) return ''
+    if (format === 'markdown') {
+      // marked.parse is sync when no async extensions are configured.
+      const out = marked.parse(value, { async: false }) as string
+      return renderHtml(out)
+    }
+    return renderHtml(value)
+  }, [value, format])
+
+  return (
+    <div
+      className={cn(proseRenderClass, className)}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  )
+}

package/src/components/richtext-sync.ts

@@ -0,0 +1,57 @@
+// Pure helpers for RichtextEditor content sync logic.
+// Extracted so they can be unit-tested without a DOM/React environment.
+
+import type { RichtextFormat } from './richtext-editor.js'
+
+/**
+ * Reads the current content from a Tiptap editor instance.
+ * Returns the HTML or Markdown string depending on `format`.
+ */
+export function readEditorContent(
+  ed: { getHTML(): string; storage: unknown },
+  format: RichtextFormat,
+): string {
+  if (format === 'markdown') {
+    return (
+      (ed.storage as { markdown?: { getMarkdown?(): string } }).markdown?.getMarkdown?.() ?? ''
+    )
+  }
+  return ed.getHTML()
+}
+
+/**
+ * Returns `true` if the editor content should be replaced with the external
+ * `value` (i.e. `editor.commands.setContent(value)` should be called).
+ *
+ * Returns `false` when:
+ *
+ * 1. `pendingFormatChange === true` — a format switch was just initiated.
+ *    In this intermediate React render, `activeFormat` has already been
+ *    updated to the new format while the external `value` still holds the
+ *    previous format's string (the parent hasn't re-rendered yet).
+ *    Calling `setContent` here would write the stale, wrong-format string
+ *    into the editor and corrupt the content. The flag is cleared after the
+ *    first effect run, so once `value` catches up the normal diff logic
+ *    takes over again.
+ *
+ * 2. `value === lastEmitted` — the parent is just echoing back a value we
+ *    ourselves emitted via onChange.  This is the common race during fast
+ *    typing: the user keeps typing while React is still committing the
+ *    previous onChange, so by the time the effect runs the editor is
+ *    *already* ahead of value.  Calling setContent in that frame would
+ *    rewind the editor to a stale state, dropping the most recent
+ *    keystrokes and resetting the cursor.  When value matches lastEmitted
+ *    we trust the editor and skip the sync.
+ *
+ * 3. `editorContent === value` — the editor already has the correct content.
+ */
+export function shouldSyncToEditor(
+  editorContent: string,
+  value: string,
+  pendingFormatChange: boolean,
+  lastEmitted?: string,
+): boolean {
+  if (pendingFormatChange) return false
+  if (lastEmitted !== undefined && value === lastEmitted) return false
+  return editorContent !== value
+}

package/src/components/scroll-area.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react'
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+import { cn } from '../lib/utils.js'
+
+export const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+export const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

package/src/components/select.tsx

@@ -0,0 +1,200 @@
+import * as React from 'react'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { Check, ChevronDown, ChevronUp } from 'lucide-react'
+import { cn } from '../lib/utils.js'
+
+/**
+ * Thin wrapper around `SelectPrimitive.Root` that suppresses the spurious
+ * empty-string callback Radix fires through its hidden bubble-input while
+ * `SelectItem` nodes register lazily via Portal after an external `value`
+ * change (e.g. `form.reset()` after an async data load). Without this guard
+ * the externally-set value is immediately overwritten with `''`.
+ *
+ * The empty string is never a legitimate choice from a rendered `SelectItem`,
+ * so dropping it is always safe. Call sites should NOT add their own
+ * `if (v === '') return` guards — this component handles it centrally.
+ */
+function SelectRoot({
+  onValueChange,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>): React.ReactElement {
+  const handleValueChange = React.useCallback(
+    (value: string) => {
+      if (value !== '') onValueChange?.(value)
+    },
+    [onValueChange],
+  )
+  return <SelectPrimitive.Root onValueChange={handleValueChange} {...props} />
+}
+SelectRoot.displayName = 'Select'
+
+export const Select = SelectRoot
+export const SelectGroup = SelectPrimitive.Group
+export const SelectValue = SelectPrimitive.Value
+
+export const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, onMouseEnter, ...props }, ref) => {
+  const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>): void => {
+    // Set native title only when the value span is actually clipped so the
+    // tooltip doesn't appear redundantly on short values.
+    const valueSpan = e.currentTarget.querySelector<HTMLElement>('span')
+    if (valueSpan && valueSpan.scrollWidth > valueSpan.offsetWidth) {
+      e.currentTarget.title = valueSpan.textContent ?? ''
+    } else {
+      e.currentTarget.removeAttribute('title')
+    }
+    onMouseEnter?.(e)
+  }
+
+  return (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex h-9 w-full cursor-pointer items-center justify-between rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+        className,
+      )}
+      onMouseEnter={handleMouseEnter}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDown className="h-4 w-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+})
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+export const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+export const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
+
+export const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1',
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+export const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+export const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    title={typeof children === 'string' ? children : undefined}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>
+      <span className="block truncate">{children}</span>
+    </SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+export const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+/**
+ * Plain native `<select>` styled to match the rest of the kit. Useful when
+ * you need a no-JS, SSR-friendly fallback or simple form posts. Most call
+ * sites should prefer the Radix-based `Select` family above.
+ */
+export type NativeSelectProps = React.SelectHTMLAttributes<HTMLSelectElement>
+
+export const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
+  ({ className, children, ...props }, ref) => (
+    <select
+      ref={ref}
+      className={cn(
+        'flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </select>
+  ),
+)
+NativeSelect.displayName = 'NativeSelect'

package/src/components/separator.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import { cn } from '../lib/utils.js'
+
+export const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      'shrink-0 bg-border',
+      orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
+      className,
+    )}
+    {...props}
+  />
+))
+Separator.displayName = SeparatorPrimitive.Root.displayName

package/src/components/sheet.tsx

@@ -0,0 +1,109 @@
+// shadcn-style Sheet — side-anchored Dialog. Built on @radix-ui/react-dialog,
+// shares the same primitive as <Dialog>. Variants: top / bottom / left / right.
+
+import * as React from 'react'
+import * as SheetPrimitive from '@radix-ui/react-dialog'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { X } from 'lucide-react'
+import { cn } from '../lib/utils.js'
+
+export const Sheet = SheetPrimitive.Root
+export const SheetTrigger = SheetPrimitive.Trigger
+export const SheetClose = SheetPrimitive.Close
+export const SheetPortal = SheetPrimitive.Portal
+
+export const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: { side: 'right' },
+  },
+)
+
+export interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {
+  /** Set to true to suppress the built-in absolute close button (e.g. when
+   *  the consumer renders its own close control inside the header). */
+  hideCloseButton?: boolean
+}
+
+export const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = 'right', className, children, hideCloseButton, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+      {children}
+      {!hideCloseButton && (
+        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+          <X className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      )}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+export const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement => (
+  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+)
+SheetHeader.displayName = 'SheetHeader'
+
+export const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement => (
+  <div
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+    {...props}
+  />
+)
+SheetFooter.displayName = 'SheetFooter'
+
+export const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold text-foreground', className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+export const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName