@gentleduck/registry-ui 0.2.1

package/src/input-group/input-group.tsx

@@ -0,0 +1,170 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import { type Direction, useDirection } from '@gentleduck/primitives/direction'
+import { cva, type VariantProps } from '@gentleduck/variants'
+import * as React from 'react'
+import { Button } from '../button'
+import { Input } from '../input'
+import { Textarea } from '../textarea'
+
+const InputGroup = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
+  ({ className, dir, children, ...props }, ref) => {
+    const direction = useDirection(dir as Direction)
+    return (
+      <div
+        className={cn(
+          'group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs outline-none transition-[color,box-shadow] dark:bg-input/30',
+          'h-9 has-[>textarea]:h-auto',
+
+          // Variants based on alignment.
+          'has-[>[data-align=inline-start]]:[&>input]:ps-2',
+          'has-[>[data-align=inline-end]]:[&>input]:pe-2',
+          'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
+          'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
+
+          // Focus state.
+          'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50',
+
+          // Error state.
+          'has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+
+          className,
+        )}
+        data-slot="input-group"
+        dir={direction}
+        ref={ref}
+        role="group"
+        {...props}>
+        {children}
+      </div>
+    )
+  },
+)
+InputGroup.displayName = 'InputGroup'
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 font-medium text-muted-foreground text-sm group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    defaultVariants: {
+      align: 'inline-start',
+    },
+    variants: {
+      align: {
+        'block-end': 'order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3',
+        'block-start':
+          'order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3',
+        'inline-end': 'order-last pe-3 has-[>button]:me-[-0.45rem] has-[>kbd]:me-[-0.35rem]',
+        'inline-start': 'order-first ps-3 has-[>button]:ms-[-0.45rem] has-[>kbd]:ms-[-0.35rem]',
+      },
+    },
+  },
+)
+
+const InputGroupAddon = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof inputGroupAddonVariants>
+>(({ className, align = 'inline-start', ...props }, ref) => {
+  return (
+    <div
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      data-align={align}
+      data-slot="input-group-addon"
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest('button')) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector('input')?.focus()
+      }}
+      ref={ref}
+      role="group"
+      {...props}
+    />
+  )
+})
+InputGroupAddon.displayName = 'InputGroupAddon'
+
+const inputGroupButtonVariants = cva('flex items-center gap-2 text-sm shadow-none', {
+  defaultVariants: {
+    size: 'xs',
+  },
+  variants: {
+    size: {
+      'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+      'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
+      xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+      sm: 'h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5',
+    },
+  },
+})
+
+const InputGroupButton = React.forwardRef<
+  HTMLButtonElement,
+  Omit<React.ComponentPropsWithoutRef<typeof Button>, 'size'> & VariantProps<typeof inputGroupButtonVariants>
+>(({ className, type = 'button', variant = 'ghost', size = 'xs', ...props }, ref) => {
+  return (
+    <Button
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      data-size={size}
+      ref={ref}
+      type={type}
+      variant={variant}
+      {...props}
+    />
+  )
+})
+InputGroupButton.displayName = 'InputGroupButton'
+
+const InputGroupText = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <span
+        className={cn(
+          "flex items-center gap-2 text-muted-foreground text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+InputGroupText.displayName = 'InputGroupText'
+
+const InputGroupInput = React.forwardRef<HTMLInputElement, React.ComponentPropsWithoutRef<'input'>>(
+  ({ className, dir, ...props }, ref) => {
+    const direction = useDirection(dir as Direction)
+    return (
+      <Input
+        className={cn(
+          'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
+          className,
+        )}
+        dir={direction}
+        data-slot="input-group-control"
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+InputGroupInput.displayName = 'InputGroupInput'
+
+const InputGroupTextarea = React.forwardRef<HTMLTextAreaElement, React.ComponentPropsWithoutRef<'textarea'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <Textarea
+        className={cn(
+          'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
+          className,
+        )}
+        data-slot="input-group-control"
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+InputGroupTextarea.displayName = 'InputGroupTextarea'
+
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea }

package/src/input-otp/index.ts

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

package/src/input-otp/input-otp.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import * as InputOTPPrimitive from '@gentleduck/primitives/input-otp'
+import { Dot } from 'lucide-react'
+import * as React from 'react'
+
+const InputOTP = React.forwardRef<
+  React.ComponentRef<typeof InputOTPPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof InputOTPPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <InputOTPPrimitive.Root
+    ref={ref}
+    className={cn('flex items-center gap-2 disabled:cursor-not-allowed has-disabled:opacity-50', className)}
+    data-slot="input-otp"
+    {...props}
+  />
+))
+InputOTP.displayName = 'InputOTP'
+
+const InputOTPGroup = React.forwardRef<
+  React.ComponentRef<typeof InputOTPPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof InputOTPPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <InputOTPPrimitive.Group
+    ref={ref}
+    className={cn('flex items-center', className)}
+    data-slot="input-otp-group"
+    {...props}
+  />
+))
+InputOTPGroup.displayName = 'InputOTPGroup'
+
+const InputOTPSlot = React.forwardRef<
+  React.ComponentRef<typeof InputOTPPrimitive.Slot>,
+  React.ComponentPropsWithoutRef<typeof InputOTPPrimitive.Slot>
+>(({ className, ...props }, ref) => (
+  <InputOTPPrimitive.Slot
+    ref={ref}
+    className={cn(
+      'relative -ms-px h-10 w-10 rounded-none border border-input border-y border-e text-center text-sm transition-all first:ms-0 first:rounded-s-md last:rounded-e-md focus:relative focus:z-10 focus:outline-none focus:ring-2 focus:ring-ring',
+      className,
+    )}
+    data-slot="input-otp-slot"
+    {...props}
+  />
+))
+InputOTPSlot.displayName = 'InputOTPSlot'
+
+const InputOTPSeparator = React.forwardRef<
+  React.ComponentRef<typeof InputOTPPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof InputOTPPrimitive.Separator>
+>(({ customIndicator, ...props }, ref) => (
+  <InputOTPPrimitive.Separator
+    ref={ref}
+    customIndicator={customIndicator ?? <Dot />}
+    data-slot="input-otp-separator"
+    {...props}
+  />
+))
+InputOTPSeparator.displayName = 'InputOTPSeparator'
+
+const REGEXP_ONLY_DIGITS_AND_CHARS = InputOTPPrimitive.REGEXP_ONLY_DIGITS_AND_CHARS
+const REGEXP_ONLY_DIGITS = InputOTPPrimitive.REGEXP_ONLY_DIGITS
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, REGEXP_ONLY_DIGITS_AND_CHARS, REGEXP_ONLY_DIGITS }

package/src/item/index.ts

@@ -0,0 +1,2 @@
+export * from './item'
+export * from './item.constants'

package/src/item/item.constants.ts

@@ -0,0 +1,22 @@
+import { cva } from '@gentleduck/variants'
+
+export const itemVariants = cva(
+  'group/item flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50',
+  {
+    defaultVariants: {
+      size: 'default',
+      variant: 'default',
+    },
+    variants: {
+      size: {
+        default: 'gap-4 p-4',
+        sm: 'gap-2.5 px-4 py-3',
+      },
+      variant: {
+        default: 'bg-transparent',
+        muted: 'bg-muted/50',
+        outline: 'border-border',
+      },
+    },
+  },
+)

package/src/item/item.tsx

@@ -0,0 +1,185 @@
+import { cn } from '@gentleduck/libs/cn'
+import { type Direction, useDirection } from '@gentleduck/primitives/direction'
+import { Slot } from '@gentleduck/primitives/slot'
+import { cva, type VariantProps } from '@gentleduck/variants'
+import * as React from 'react'
+import { Separator } from '../separator'
+import { itemVariants } from './item.constants'
+
+const ItemGroup = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
+  ({ className, dir, ...props }, ref) => {
+    const direction = useDirection(dir as Direction)
+    return (
+      <div
+        className={cn('group/item-group flex flex-col', className)}
+        dir={direction}
+        data-slot="item-group"
+        ref={ref}
+        role="list"
+        {...props}
+      />
+    )
+  },
+)
+ItemGroup.displayName = 'ItemGroup'
+
+const ItemSeparator = React.forwardRef<
+  React.ComponentRef<typeof Separator>,
+  React.ComponentPropsWithoutRef<typeof Separator>
+>(({ className, ...props }, ref) => {
+  return (
+    <Separator
+      className={cn('my-0', className)}
+      data-slot="item-separator"
+      orientation="horizontal"
+      ref={ref}
+      {...props}
+    />
+  )
+})
+ItemSeparator.displayName = 'ItemSeparator'
+
+const Item = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof itemVariants> & { asChild?: boolean }
+>(({ className, variant = 'default', size = 'default', asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'div'
+  return (
+    <Comp
+      className={cn(itemVariants({ className, size, variant }))}
+      data-size={size}
+      data-slot="item"
+      data-variant={variant}
+      ref={ref}
+      role="listitem"
+      {...props}
+    />
+  )
+})
+Item.displayName = 'Item'
+
+const itemMediaVariants = cva(
+  'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none',
+  {
+    defaultVariants: {
+      variant: 'default',
+    },
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: "size-8 rounded-sm border bg-muted [&_svg:not([class*='size-'])]:size-4",
+        image: 'size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover',
+      },
+    },
+  },
+)
+
+const ItemMedia = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof itemMediaVariants>
+>(({ className, variant = 'default', ...props }, ref) => {
+  return (
+    <div
+      className={cn(itemMediaVariants({ className, variant }))}
+      data-slot="item-media"
+      data-variant={variant}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+ItemMedia.displayName = 'ItemMedia'
+
+const ItemContent = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        className={cn('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', className)}
+        data-slot="item-content"
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+ItemContent.displayName = 'ItemContent'
+
+const ItemTitle = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        className={cn('flex w-fit items-center gap-2 font-medium text-sm leading-snug', className)}
+        data-slot="item-title"
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+ItemTitle.displayName = 'ItemTitle'
+
+const ItemDescription = React.forwardRef<HTMLParagraphElement, React.ComponentPropsWithoutRef<'p'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <p
+        className={cn(
+          'line-clamp-2 text-balance font-normal text-muted-foreground text-sm leading-normal',
+          '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+          className,
+        )}
+        data-slot="item-description"
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+ItemDescription.displayName = 'ItemDescription'
+
+const ItemActions = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => {
+    return <div className={cn('flex items-center gap-2', className)} data-slot="item-actions" ref={ref} {...props} />
+  },
+)
+ItemActions.displayName = 'ItemActions'
+
+const ItemHeader = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        className={cn('flex basis-full items-center justify-between gap-2', className)}
+        data-slot="item-header"
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+ItemHeader.displayName = 'ItemHeader'
+
+const ItemFooter = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        className={cn('flex basis-full items-center justify-between gap-2', className)}
+        data-slot="item-footer"
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+ItemFooter.displayName = 'ItemFooter'
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+}

package/src/json-editor/index.ts

@@ -0,0 +1,4 @@
+export * from './json-editor'
+export * from './json-editor.hooks'
+export * from './json-editor.libs'
+export * from './json-editor.types'

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

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import type { UseJsonEditorHotkeysOptions } from './json-editor.types'
+
+export function useJsonEditorHotkeys(options: UseJsonEditorHotkeysOptions) {
+  return React.useCallback(
+    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (!options.enabled) return
+
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        options.onEscape()
+      }
+
+      if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+        event.preventDefault()
+        options.onSave()
+      }
+    },
+    [options],
+  )
+}

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

@@ -0,0 +1,34 @@
+import type { JsonParseResult } from './json-editor.types'
+
+export function safeStringify(value: unknown): string {
+  try {
+    if (value === null || value === undefined) return ''
+    if (typeof value === 'string') return value
+    return JSON.stringify(value, null, 2)
+  } catch {
+    return ''
+  }
+}
+
+export function tryParseJson(text: string): JsonParseResult {
+  const raw = text.trim()
+  if (!raw) return { ok: true, value: null }
+
+  try {
+    return { ok: true, value: JSON.parse(raw) }
+  } catch (error) {
+    return { ok: false, message: error instanceof Error ? error.message : 'Invalid JSON' }
+  }
+}
+
+export function isObjectLike(value: unknown): value is Record<string, unknown> {
+  return !!value && typeof value === 'object' && !Array.isArray(value)
+}
+
+export function formatJson(text: string): { ok: true; formatted: string } | { ok: false; message: string } {
+  const parsed = tryParseJson(text)
+  if (!parsed.ok) return parsed
+  if (parsed.value === null) return { ok: true, formatted: '' }
+
+  return { ok: true, formatted: JSON.stringify(parsed.value, null, 2) }
+}