@moloodev/ui 0.0.0-stage → 0.1.0

package/src/components/ui/field.tsx

@@ -0,0 +1,238 @@
+"use client"
+
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+import { Label } from "./label"
+import { Separator } from "./separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-2.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+        horizontal:
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        responsive:
+          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-0.5 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border-2 *:data-[slot=field]:p-2 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm/relaxed group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-left text-sm/relaxed leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}

package/src/components/ui/form.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+import { Label } from "./label"
+
+/**
+ * Lightweight form composition helpers matching common shadcn Form patterns
+ * without requiring react-hook-form. Pair with Field for denser layouts.
+ */
+
+const formItemVariants = cva("grid gap-2")
+
+function Form({ className, ...props }: React.ComponentProps<"form">) {
+  return (
+    <form
+      data-slot="form"
+      className={cn("grid gap-6", className)}
+      {...props}
+    />
+  )
+}
+
+function FormItem({
+  className,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof formItemVariants>) {
+  return (
+    <div
+      data-slot="form-item"
+      className={cn(formItemVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function FormLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="form-label"
+      className={cn("font-display text-sm font-bold tracking-[-0.02em]", className)}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="form-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="form-message"
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="form-control" className={cn(className)} {...props} />
+  )
+}
+
+export {
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  formItemVariants,
+}

package/src/components/ui/highlighted-source.tsx

@@ -0,0 +1,200 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const shellVariants = cva(
+  "source-highlight relative min-h-0 w-full min-w-0 flex-1 overflow-hidden",
+  {
+    variants: {
+      variant: {
+        field:
+          "moloo-field moloo-focus-within has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:shadow-[var(--moloo-invalid-shadow)]",
+        plain: "border-0 bg-background shadow-none",
+      },
+    },
+    defaultVariants: {
+      variant: "field",
+    },
+  }
+)
+
+const layerVariants = cva(
+  "absolute inset-0 m-0 box-border h-full w-full overflow-auto font-mono text-sm leading-relaxed whitespace-pre-wrap break-words [overflow-wrap:anywhere] [tab-size:2] [font-variant-ligatures:none] [font-synthesis:none]",
+  {
+    variants: {
+      variant: {
+        field: "px-3 py-3",
+        plain: "px-6 pt-8 pb-32",
+      },
+    },
+    defaultVariants: {
+      variant: "field",
+    },
+  }
+)
+
+const MIRROR_STYLES = [
+  "box-sizing",
+  "width",
+  "border-top-width",
+  "border-right-width",
+  "border-bottom-width",
+  "border-left-width",
+  "padding-top",
+  "padding-right",
+  "padding-bottom",
+  "padding-left",
+  "font",
+  "font-family",
+  "font-size",
+  "font-style",
+  "font-variant",
+  "font-weight",
+  "letter-spacing",
+  "line-height",
+  "tab-size",
+  "text-indent",
+  "text-transform",
+  "white-space",
+  "word-break",
+  "overflow-wrap",
+  "word-wrap",
+] as const
+
+const CARET_GAP = 96
+
+export type HighlightedSourceProps = {
+  value: string
+  onValueChange: (value: string) => void
+  highlight: (value: string) => string
+  textareaRef?: React.Ref<HTMLTextAreaElement | null>
+} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange"> &
+  VariantProps<typeof shellVariants>
+
+function assignTextareaRef(
+  textareaRef: HighlightedSourceProps["textareaRef"],
+  node: HTMLTextAreaElement | null
+) {
+  if (typeof textareaRef === "function") textareaRef(node)
+  else if (textareaRef) textareaRef.current = node
+}
+
+function caretTop(node: HTMLTextAreaElement) {
+  const mirror = document.createElement("div")
+  const style = getComputedStyle(node)
+  for (const name of MIRROR_STYLES) {
+    mirror.style.setProperty(name, style.getPropertyValue(name))
+  }
+  mirror.style.position = "absolute"
+  mirror.style.visibility = "hidden"
+  mirror.style.pointerEvents = "none"
+  mirror.style.top = "0"
+  mirror.style.left = "-9999px"
+  mirror.style.height = "auto"
+  mirror.style.width = `${node.clientWidth}px`
+  mirror.style.overflow = "hidden"
+  mirror.textContent = node.value.slice(0, node.selectionEnd)
+  const mark = document.createElement("span")
+  mark.textContent = "\u200b"
+  mirror.append(mark)
+  document.body.append(mirror)
+  const top = mark.offsetTop
+  mirror.remove()
+  return top
+}
+
+function revealCaret(node: HTMLTextAreaElement, gap = CARET_GAP) {
+  const style = getComputedStyle(node)
+  const lineHeight = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.625
+  const bottom = caretTop(node) + lineHeight
+  const limit = node.scrollTop + node.clientHeight - gap
+  if (bottom <= limit) return
+  const max = Math.max(0, node.scrollHeight - node.clientHeight)
+  node.scrollTop = Math.min(max, node.scrollTop + (bottom - limit))
+}
+
+function HighlightedSource({
+  value,
+  onValueChange,
+  highlight,
+  textareaRef,
+  className,
+  onScroll,
+  variant = "field",
+  ...textareaProps
+}: HighlightedSourceProps) {
+  const layerClass = layerVariants({ variant })
+  const preRef = React.useRef<HTMLPreElement>(null)
+  const nodeRef = React.useRef<HTMLTextAreaElement | null>(null)
+  const scrollRef = React.useRef({ top: 0, left: 0 })
+  const valueRef = React.useRef(value)
+  const html = `${highlight(value)}\n`
+
+  function bindTextarea(node: HTMLTextAreaElement | null) {
+    nodeRef.current = node
+    assignTextareaRef(textareaRef, node)
+  }
+
+  React.useLayoutEffect(() => {
+    const node = nodeRef.current
+    if (!node) return
+    const run = () => {
+      node.scrollTop = scrollRef.current.top
+      node.scrollLeft = scrollRef.current.left
+      if (document.activeElement === node) {
+        revealCaret(node)
+        scrollRef.current = { top: node.scrollTop, left: node.scrollLeft }
+      }
+      if (preRef.current) {
+        preRef.current.scrollTop = node.scrollTop
+        preRef.current.scrollLeft = node.scrollLeft
+      }
+      valueRef.current = value
+    }
+    run()
+    const frame = requestAnimationFrame(run)
+    return () => cancelAnimationFrame(frame)
+  }, [value])
+
+  return (
+    <div
+      data-slot="highlighted-source"
+      data-variant={variant}
+      className={cn(shellVariants({ variant }), className)}
+    >
+      <pre
+        ref={preRef}
+        aria-hidden
+        className={cn(layerClass, "pointer-events-none text-foreground")}
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+      <textarea
+        {...textareaProps}
+        ref={bindTextarea}
+        value={value}
+        spellCheck={false}
+        onChange={(event) => {
+          onValueChange(event.target.value)
+        }}
+        onScroll={(event) => {
+          if (valueRef.current !== value) return
+          const node = event.currentTarget
+          scrollRef.current = { top: node.scrollTop, left: node.scrollLeft }
+          if (preRef.current) {
+            preRef.current.scrollTop = node.scrollTop
+            preRef.current.scrollLeft = node.scrollLeft
+          }
+          onScroll?.(event)
+        }}
+        className={cn(
+          layerClass,
+          "z-1 resize-none appearance-none rounded-none border-0 bg-transparent text-transparent caret-foreground shadow-none outline-none",
+          "[field-sizing:fixed] [-webkit-text-fill-color:transparent] selection:bg-primary/25"
+        )}
+      />
+    </div>
+  )
+}
+
+export { HighlightedSource }

package/src/components/ui/hover-card.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card"
+
+import { cn } from "../../lib/utils"
+
+function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
+  return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {
+  return (
+    <PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 4,
+  ...props
+}: PreviewCardPrimitive.Popup.Props &
+  Pick<
+    PreviewCardPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <PreviewCardPrimitive.Portal data-slot="hover-card-portal">
+      <PreviewCardPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <PreviewCardPrimitive.Popup
+          data-slot="hover-card-content"
+          className={cn(
+            "z-50 w-64 origin-(--transform-origin) rounded-md moloo-surface bg-popover p-2.5 text-sm/relaxed text-popover-foreground shadow-moloo-lg outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        />
+      </PreviewCardPrimitive.Positioner>
+    </PreviewCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }