@gentleduck/registry-ui 0.2.1

package/src/json-editor/json-editor.tsx

@@ -0,0 +1,425 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import { Portal } from '@gentleduck/primitives/portal'
+import { Maximize } from 'lucide-react'
+import * as React from 'react'
+import type { FieldValues } from 'react-hook-form'
+import { useController } from 'react-hook-form'
+import { toast } from 'sonner'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '../alert-dialog'
+import { Button } from '../button'
+import { Field, FieldDescription, FieldError, FieldLabel } from '../field'
+import { Popover, PopoverContent, PopoverTrigger } from '../popover'
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '../sheet'
+import { useJsonEditorHotkeys } from './json-editor.hooks'
+import { formatJson, isObjectLike, safeStringify, tryParseJson } from './json-editor.libs'
+import type { JsonEditorText, JsonTextareaFieldProps } from './json-editor.types'
+import { JsonEditorView } from './json-editor.view'
+
+export function JsonTextareaField<TFieldValues extends FieldValues>(
+  props: JsonTextareaFieldProps<TFieldValues>,
+): React.JSX.Element {
+  const {
+    control,
+    name,
+    label,
+    description,
+    className,
+    actionsClassName,
+    isEditable = true,
+    allowArray = true,
+    mode = 'inline',
+    rows = 12,
+    placeholder = '{\n  "theme": "dark"\n}',
+    lineNumbers = true,
+    lineHeightPx = 20,
+    dir,
+    lang,
+    expandMode = 'sheet',
+    sheetSide = 'right',
+    sheetTitle = 'Edit JSON',
+    text: textProp,
+    onExpandEditor,
+  } = props
+
+  const t: Required<JsonEditorText> = {
+    format: textProp?.format ?? 'Format',
+    cancel: textProp?.cancel ?? 'Cancel',
+    save: textProp?.save ?? 'Save',
+    full: textProp?.full ?? 'Full',
+    close: textProp?.close ?? 'Close',
+    keepEditing: textProp?.keepEditing ?? 'Keep editing',
+    discard: textProp?.discard ?? 'Discard',
+    discardTitle: textProp?.discardTitle ?? 'Discard changes?',
+    discardDescription:
+      textProp?.discardDescription ?? 'You have unsaved changes in the editor. If you close now, they will be lost.',
+    statusHint: textProp?.statusHint ?? 'Ctrl/Cmd + Enter: Save, Esc: Cancel',
+    sheetStatusHint: textProp?.sheetStatusHint ?? 'Ctrl/Cmd + Enter: Save, Esc: Close',
+    unsavedChanges: textProp?.unsavedChanges ?? 'Unsaved changes',
+    saved: textProp?.saved ?? 'Saved',
+    nullPreview: textProp?.nullPreview ?? 'NULL',
+  }
+
+  const { field, fieldState } = useController({ control, name })
+  const committedText = React.useMemo(() => safeStringify(field.value), [field.value])
+
+  const [draft, setDraft] = React.useState(committedText)
+  const [dirty, setDirty] = React.useState(false)
+  const [scrollTop, setScrollTop] = React.useState(0)
+
+  React.useEffect(() => {
+    if (dirty) return
+    setDraft(committedText)
+  }, [committedText, dirty])
+
+  const [popoverOpen, setPopoverOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    if (mode !== 'popover') {
+      setPopoverOpen(false)
+    }
+  }, [mode])
+
+  const [sheetOpen, setSheetOpen] = React.useState(false)
+  const [sheetDraft, setSheetDraft] = React.useState('')
+  const [sheetDirty, setSheetDirty] = React.useState(false)
+  const [sheetScrollTop, setSheetScrollTop] = React.useState(0)
+  const [confirmDiscardOpen, setConfirmDiscardOpen] = React.useState(false)
+
+  const validateAndCommitValue = React.useCallback(
+    (text: string): boolean => {
+      if (!isEditable) return false
+
+      const parsed = tryParseJson(text)
+      if (!parsed.ok) {
+        toast.error(parsed.message || 'Please enter valid JSON')
+        return false
+      }
+
+      if (parsed.value === null) {
+        field.onChange(null)
+        return true
+      }
+
+      if (!allowArray && Array.isArray(parsed.value)) {
+        toast.error('Value must be a JSON object (arrays are not allowed).')
+        return false
+      }
+
+      if (!allowArray && !isObjectLike(parsed.value)) {
+        toast.error('Value must be a JSON object.')
+        return false
+      }
+
+      field.onChange(parsed.value)
+      return true
+    },
+    [allowArray, field, isEditable],
+  )
+
+  const cancelInline = React.useCallback(() => {
+    setDraft(committedText)
+    setDirty(false)
+    if (mode === 'popover') {
+      setPopoverOpen(false)
+    }
+  }, [committedText, mode])
+
+  const saveInline = React.useCallback(() => {
+    if (!validateAndCommitValue(draft)) return
+    setDirty(false)
+    if (mode === 'popover') {
+      setPopoverOpen(false)
+    }
+  }, [draft, mode, validateAndCommitValue])
+
+  const formatInline = React.useCallback(() => {
+    if (!isEditable) return
+
+    const result = formatJson(draft)
+    if (!result.ok) {
+      toast.error(result.message || 'Please enter valid JSON to format')
+      return
+    }
+
+    setDraft(result.formatted)
+    setDirty(true)
+  }, [draft, isEditable])
+
+  const inlineHotkeys = useJsonEditorHotkeys({
+    enabled: mode === 'inline' || popoverOpen,
+    onEscape: cancelInline,
+    onSave: saveInline,
+  })
+
+  const openSheet = React.useCallback(() => {
+    setSheetDraft(draft)
+    setSheetDirty(false)
+    setSheetScrollTop(0)
+    setSheetOpen(true)
+  }, [draft])
+
+  const requestCloseSheet = React.useCallback(() => {
+    if (!sheetDirty) {
+      setSheetOpen(false)
+      return
+    }
+
+    setConfirmDiscardOpen(true)
+  }, [sheetDirty])
+
+  const discardSheetChanges = React.useCallback(() => {
+    setConfirmDiscardOpen(false)
+    setSheetDirty(false)
+    setSheetOpen(false)
+  }, [])
+
+  const saveSheet = React.useCallback(() => {
+    if (!validateAndCommitValue(sheetDraft)) return
+
+    setDraft(sheetDraft)
+    setDirty(false)
+    setSheetDirty(false)
+    setSheetOpen(false)
+  }, [sheetDraft, validateAndCommitValue])
+
+  const formatSheet = React.useCallback(() => {
+    if (!isEditable) return
+
+    const result = formatJson(sheetDraft)
+    if (!result.ok) {
+      toast.error(result.message || 'Please enter valid JSON to format')
+      return
+    }
+
+    setSheetDraft(result.formatted)
+    setSheetDirty(true)
+  }, [isEditable, sheetDraft])
+
+  const sheetHotkeys = useJsonEditorHotkeys({
+    enabled: sheetOpen,
+    onEscape: requestCloseSheet,
+    onSave: saveSheet,
+  })
+
+  const handleExpand = React.useCallback(() => {
+    if (expandMode === 'none') return
+
+    if (expandMode === 'callback') {
+      const parsed = tryParseJson(draft)
+      onExpandEditor?.({
+        name,
+        rawText: draft,
+        value: parsed.ok ? parsed.value : field.value,
+      })
+      return
+    }
+
+    openSheet()
+  }, [draft, expandMode, field.value, name, onExpandEditor, openSheet])
+
+  const canFormatDraft = React.useMemo(() => {
+    const parsed = tryParseJson(draft)
+    return parsed.ok && parsed.value !== null
+  }, [draft])
+
+  const canFormatSheet = React.useMemo(() => {
+    const parsed = tryParseJson(sheetDraft)
+    return parsed.ok && parsed.value !== null
+  }, [sheetDraft])
+
+  const preview = React.useMemo(() => {
+    if (!committedText.trim()) return t.nullPreview
+
+    const oneLine = committedText.replace(/\s+/g, ' ').trim()
+    return oneLine.length > 120 ? `${oneLine.slice(0, 117)}...` : oneLine
+  }, [committedText])
+
+  const inlineEditor = (
+    <div className="space-y-2" data-slot="json-editor-inline">
+      <JsonEditorView
+        dir={dir}
+        lang={lang}
+        lineHeightPx={lineHeightPx}
+        lineNumbers={lineNumbers}
+        onChange={(value) => {
+          setDraft(value)
+          setDirty(true)
+        }}
+        onKeyDown={inlineHotkeys}
+        onScroll={setScrollTop}
+        placeholder={placeholder}
+        readOnly={!isEditable}
+        rows={rows}
+        scrollTop={scrollTop}
+        value={draft}
+      />
+
+      <div
+        className="flex items-center justify-between gap-2 text-muted-foreground text-xs"
+        data-slot="json-editor-status">
+        <span>{t.statusHint}</span>
+        {dirty ? <span className="text-foreground">{t.unsavedChanges}</span> : <span>{t.saved}</span>}
+      </div>
+    </div>
+  )
+
+  return (
+    <Field className={cn('space-y-3', className)} data-slot="json-editor-field" dir={dir}>
+      <div className="mb-1 flex items-start justify-between gap-4" data-slot="json-editor-header">
+        <div className="space-y-1">
+          <FieldLabel className="font-semibold text-base">{label}</FieldLabel>
+          {description ? <FieldDescription>{description}</FieldDescription> : null}
+        </div>
+
+        <div className={cn('flex items-center gap-2', actionsClassName)} data-slot="json-editor-actions">
+          <Button
+            disabled={!isEditable || !canFormatDraft}
+            onClick={formatInline}
+            size="sm"
+            type="button"
+            variant="outline">
+            {t.format}
+          </Button>
+
+          {dirty ? (
+            <>
+              <Button onClick={cancelInline} size="sm" type="button" variant="outline">
+                {t.cancel}
+              </Button>
+              <Button disabled={!isEditable} onClick={saveInline} size="sm" type="button">
+                {t.save}
+              </Button>
+            </>
+          ) : null}
+
+          {expandMode !== 'none' ? (
+            <Button onClick={handleExpand} size="sm" type="button" variant="outline">
+              <Maximize aria-hidden="true" size={14} />
+              <span className="ms-2">{t.full}</span>
+            </Button>
+          ) : null}
+        </div>
+      </div>
+
+      <div>
+        {mode === 'inline' ? (
+          inlineEditor
+        ) : (
+          <div data-slot="json-editor-popover">
+            <Popover onOpenChange={setPopoverOpen} open={popoverOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  className="w-full justify-start overflow-hidden text-start font-mono text-xs"
+                  type="button"
+                  variant="outline">
+                  <span className="truncate">{preview}</span>
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-[min(96vw,720px)] p-2">{inlineEditor}</PopoverContent>
+            </Popover>
+          </div>
+        )}
+      </div>
+
+      {fieldState.error ? <FieldError errors={[fieldState.error]} /> : null}
+
+      {expandMode === 'sheet' ? (
+        <>
+          <Sheet
+            onOpenChange={(nextOpen) => {
+              if (nextOpen) {
+                openSheet()
+                return
+              }
+
+              requestCloseSheet()
+            }}
+            open={sheetOpen}>
+            <SheetContent className="w-full sm:max-w-3xl" dir={dir} side={sheetSide}>
+              <SheetHeader>
+                <SheetTitle>{sheetTitle}</SheetTitle>
+              </SheetHeader>
+
+              <div className="mt-4 space-y-3" data-slot="json-editor-sheet-content">
+                <JsonEditorView
+                  dir={dir}
+                  lang={lang}
+                  lineHeightPx={lineHeightPx}
+                  lineNumbers={lineNumbers}
+                  onChange={(value) => {
+                    setSheetDraft(value)
+                    setSheetDirty(true)
+                  }}
+                  onKeyDown={sheetHotkeys}
+                  onScroll={setSheetScrollTop}
+                  placeholder={placeholder}
+                  readOnly={!isEditable}
+                  rows={24}
+                  scrollTop={sheetScrollTop}
+                  value={sheetDraft}
+                />
+
+                <div className="flex items-center justify-between gap-2" data-slot="json-editor-sheet-actions">
+                  <div className="text-muted-foreground text-xs">{t.sheetStatusHint}</div>
+
+                  <div className="flex items-center gap-2">
+                    <Button
+                      disabled={!isEditable || !canFormatSheet}
+                      onClick={formatSheet}
+                      size="sm"
+                      type="button"
+                      variant="outline">
+                      {t.format}
+                    </Button>
+
+                    <Button onClick={requestCloseSheet} size="sm" type="button" variant="outline">
+                      {t.close}
+                    </Button>
+
+                    <Button disabled={!isEditable} onClick={saveSheet} size="sm" type="button">
+                      {t.save}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </SheetContent>
+          </Sheet>
+        </>
+      ) : null}
+
+      <Portal>
+        <AlertDialog onOpenChange={setConfirmDiscardOpen} open={confirmDiscardOpen}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>{t.discardTitle}</AlertDialogTitle>
+              <AlertDialogDescription>{t.discardDescription}</AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel asChild onClick={() => setConfirmDiscardOpen(false)}>
+                <Button variant="outline" size="sm">
+                  {t.keepEditing}
+                </Button>
+              </AlertDialogCancel>
+              <AlertDialogAction asChild onClick={discardSheetChanges}>
+                <Button variant="default" size="sm">
+                  {t.discard}
+                </Button>
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </Portal>
+    </Field>
+  )
+}

package/src/json-editor/json-editor.types.ts

@@ -0,0 +1,80 @@
+import type { Control, FieldPath, FieldValues } from 'react-hook-form'
+
+export type JsonEditorMode = 'inline' | 'popover'
+export type JsonEditorExpandMode = 'none' | 'callback' | 'sheet'
+
+export type JsonEditorExpandPayload<TFieldValues extends FieldValues> = {
+  name: FieldPath<TFieldValues>
+  rawText: string
+  value: unknown
+}
+
+export type JsonTextareaFieldProps<TFieldValues extends FieldValues> = {
+  control: Control<TFieldValues>
+  name: FieldPath<TFieldValues>
+  label: string
+  description?: string
+  className?: string
+  actionsClassName?: string
+
+  isEditable?: boolean
+  allowArray?: boolean
+
+  mode?: JsonEditorMode
+  rows?: number
+  placeholder?: string
+
+  lineNumbers?: boolean
+  lineHeightPx?: number
+
+  dir?: 'ltr' | 'rtl'
+  lang?: string
+
+  expandMode?: JsonEditorExpandMode
+  sheetSide?: 'left' | 'right'
+  sheetTitle?: string
+
+  text?: JsonEditorText
+
+  onExpandEditor?: (payload: JsonEditorExpandPayload<TFieldValues>) => void
+}
+
+export type JsonEditorText = {
+  format?: string
+  cancel?: string
+  save?: string
+  full?: string
+  close?: string
+  keepEditing?: string
+  discard?: string
+  discardTitle?: string
+  discardDescription?: string
+  statusHint?: string
+  sheetStatusHint?: string
+  unsavedChanges?: string
+  saved?: string
+  nullPreview?: string
+}
+
+export type JsonParseResult = { ok: true; value: unknown } | { ok: false; message: string }
+
+export type JsonEditorViewProps = {
+  value: string
+  onChange: (value: string) => void
+  onScroll?: (scrollTop: number) => void
+  scrollTop: number
+  rows: number
+  placeholder: string
+  readOnly: boolean
+  lineNumbers: boolean
+  lineHeightPx: number
+  dir?: 'ltr' | 'rtl'
+  lang?: string
+  onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void
+}
+
+export type UseJsonEditorHotkeysOptions = {
+  enabled: boolean
+  onEscape: () => void
+  onSave: () => void
+}

package/src/json-editor/json-editor.view.tsx

@@ -0,0 +1,110 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import { type Direction, useDirection } from '@gentleduck/primitives/direction'
+import * as React from 'react'
+import { Textarea } from '../textarea'
+import type { JsonEditorViewProps } from './json-editor.types'
+
+const LOCALE_NUMBERING_SYSTEMS: Record<string, string> = {
+  ar: 'arab',
+  bn: 'beng',
+  fa: 'arabext',
+  gu: 'gujr',
+  hi: 'deva',
+  km: 'khmr',
+  kn: 'knda',
+  lo: 'laoo',
+  ml: 'mlym',
+  mr: 'deva',
+  my: 'mymr',
+  ne: 'deva',
+  or: 'orya',
+  pa: 'guru',
+  ps: 'arabext',
+  ta: 'tamldec',
+  te: 'telu',
+  th: 'thai',
+  ur: 'arabext',
+}
+
+export function JsonEditorView({
+  value,
+  onChange,
+  onScroll,
+  scrollTop,
+  rows,
+  placeholder,
+  readOnly,
+  lineNumbers,
+  lineHeightPx,
+  dir,
+  lang,
+  onKeyDown,
+}: JsonEditorViewProps) {
+  const direction = useDirection(dir as Direction)
+  const lineCount = React.useMemo(() => {
+    const count = value ? value.split(/\r\n|\r|\n/).length : 1
+    return Math.max(1, count)
+  }, [value])
+
+  const numbers = React.useMemo(() => {
+    if (!lang) {
+      return Array.from({ length: lineCount }, (_, i) => String(i + 1)).join('\n')
+    }
+
+    // Build formatter; if the locale already includes a -u-nu- extension, use as-is.
+    // Otherwise append the native numbering system for known locales so that
+    // environments defaulting to latn still produce locale-appropriate digits.
+    let localeTag = lang
+    if (!lang.includes('-u-') || !lang.includes('-nu-')) {
+      const [base = ''] = lang.toLowerCase().split('-')
+      const numberingSystem = LOCALE_NUMBERING_SYSTEMS[base]
+      if (numberingSystem) {
+        localeTag = `${lang}-u-nu-${numberingSystem}`
+      }
+    }
+
+    const fmt = new Intl.NumberFormat(localeTag, { useGrouping: false })
+    return Array.from({ length: lineCount }, (_, i) => fmt.format(i + 1)).join('\n')
+  }, [lineCount, lang])
+
+  return (
+    <div className="overflow-hidden rounded-md border bg-background" data-slot="json-editor-shell" dir={direction}>
+      <div className="relative" data-slot="json-editor-container">
+        {lineNumbers ? (
+          <div className="absolute inset-y-0 start-0 w-12 border-e bg-muted/30" data-slot="json-editor-gutter">
+            <pre
+              aria-hidden
+              className="select-none px-2 py-2 text-end font-mono text-muted-foreground text-xs"
+              data-slot="json-editor-line-numbers"
+              style={{
+                lineHeight: `${lineHeightPx}px`,
+                transform: `translateY(-${scrollTop}px)`,
+              }}>
+              {numbers}
+            </pre>
+          </div>
+        ) : null}
+
+        <Textarea
+          className={cn(
+            'w-full resize-y bg-transparent px-3 py-2 font-mono text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring',
+            lineNumbers ? 'ps-14' : '',
+          )}
+          data-slot="json-editor-textarea"
+          dir="ltr"
+          onChange={(event) => onChange(event.currentTarget.value)}
+          onKeyDown={onKeyDown}
+          onScroll={(event) => onScroll?.(event.currentTarget.scrollTop)}
+          placeholder={placeholder}
+          readOnly={readOnly}
+          rows={rows}
+          spellCheck={false}
+          style={{ lineHeight: `${lineHeightPx}px` }}
+          value={value}
+        />
+      </div>
+    </div>
+  )
+}

package/src/json-editor/json-text-area.tsx

@@ -0,0 +1,7 @@
+export { JsonTextareaField } from './json-editor'
+export type {
+  JsonEditorExpandMode,
+  JsonEditorExpandPayload,
+  JsonEditorMode,
+  JsonTextareaFieldProps,
+} from './json-editor.types'

package/src/kbd/index.ts

@@ -0,0 +1 @@
+export * from './kbd'

package/src/kbd/kbd.tsx

@@ -0,0 +1,39 @@
+import { cn } from '@gentleduck/libs/cn'
+import { type Direction, useDirection } from '@gentleduck/primitives/direction'
+import * as React from 'react'
+
+const Kbd = React.forwardRef<HTMLElement, React.ComponentPropsWithoutRef<'kbd'>>(
+  ({ className, dir, ...props }, ref) => {
+    const direction = useDirection(dir as Direction)
+    return (
+      <kbd
+        className={cn(
+          'pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm bg-muted px-1 font-medium font-sans text-muted-foreground text-xs',
+          "[&_svg:not([class*='size-'])]:size-3",
+          className,
+        )}
+        data-slot="kbd"
+        dir={direction}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+Kbd.displayName = 'Kbd'
+
+const KbdGroup = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <kbd
+        className={cn('inline-flex items-center gap-1', className)}
+        data-slot="kbd-group"
+        ref={ref as React.Ref<HTMLElement>}
+        {...props}
+      />
+    )
+  },
+)
+KbdGroup.displayName = 'KbdGroup'
+
+export { Kbd, KbdGroup }

package/src/label/index.ts

@@ -0,0 +1 @@
+export * from './label'

package/src/label/label.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import { type Direction, useDirection } from '@gentleduck/primitives/direction'
+import * as React from 'react'
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {}
+
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(({ className, htmlFor, dir, ...props }, ref) => {
+  const direction = useDirection(dir as Direction)
+
+  return (
+    <label
+      className={cn(
+        'text-balance font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        className,
+      )}
+      data-slot="label"
+      dir={direction}
+      htmlFor={htmlFor}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Label.displayName = 'Label'
+
+export { Label }

package/src/menubar/index.ts

@@ -0,0 +1 @@
+export * from './menubar'