@voltro/ui-shadcn 0.1.0

package/src/primitives/checkbox.tsx

@@ -0,0 +1,55 @@
+// shadcn-style Checkbox — native `<input type=checkbox>` (no Radix dep)
+// with indeterminate support. Drives the check / dash glyphs purely via
+// CSS peer variants so it can't desync from the input's real state.
+
+import { useEffect, useRef, type InputHTMLAttributes, type ReactNode } from 'react'
+import { cn } from '../cn'
+
+export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+  /** Tri-state middle: renders a dash. Wired to the DOM `indeterminate`
+   *  property (not an attribute) via a ref effect. */
+  readonly indeterminate?: boolean
+}
+
+export const Checkbox = ({ className, indeterminate, ...props }: CheckboxProps): ReactNode => {
+  const ref = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = indeterminate === true
+  }, [indeterminate])
+
+  return (
+    <span className="relative inline-flex size-4 shrink-0 items-center justify-center">
+      <input
+        ref={ref}
+        type="checkbox"
+        data-slot="checkbox"
+        className={cn(
+          'peer size-4 appearance-none rounded-[4px] border shadow-xs outline-none',
+          'border-input bg-transparent dark:bg-input/30',
+          'checked:bg-primary checked:border-primary',
+          'indeterminate:bg-primary indeterminate:border-primary',
+          'transition-[color,box-shadow]',
+          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          'cursor-pointer',
+          className,
+        )}
+        {...props}
+      />
+      {/* checkmark — visible only when checked (and not indeterminate) */}
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={3}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="pointer-events-none absolute hidden size-3 text-primary-foreground peer-checked:peer-indeterminate:hidden peer-checked:block"
+      >
+        <path d="M20 6 9 17l-5-5" />
+      </svg>
+      {/* indeterminate dash */}
+      <span className="pointer-events-none absolute hidden h-[2px] w-2.5 rounded-full bg-primary-foreground peer-indeterminate:block" />
+    </span>
+  )
+}

package/src/primitives/codeBlock.tsx

@@ -0,0 +1,134 @@
+// CodeBlock — pretty wrapper for a `<pre><code>` fragment with an
+// optional filename header, language label, and a one-click copy
+// button. Three rendering modes, in priority order:
+//   1. `html` set     → render pre-highlighted Shiki HTML verbatim.
+//                       (The docs app's MDX pipeline pre-renders code
+//                       fences at build time and feeds them here.)
+//   2. `code` + `language` matching SHIKI_LANGS → lazy-load Shiki and
+//                       highlight at runtime via <HighlightedCode>.
+//                       Until the WASM lands, the body falls back to
+//                       plain escaped code so layout doesn't jump.
+//   3. `code` only    → plain <pre><code>, no highlighting.
+//
+// Browser-only behaviour (copy button) is opt-in: when `interactive:
+// 'islands'` strips the rest of the JS, the button stays a static
+// <button> that doesn't do anything until JS lands; visually still
+// looks right, just non-functional. That's the same compromise the
+// rest of the kit makes.
+//
+// For Fumadocs-style tabs around a CodeBlock, use the `Tabs` primitive
+// in this folder.
+
+import { useState, type ReactNode } from 'react'
+import { cn } from '../cn'
+import { HighlightedCode, SHIKI_LANGS, type ShikiLang } from './highlightedCode'
+
+const SHIKI_LANG_SET = SHIKI_LANGS as ReadonlyArray<string>
+const asShikiLang = (s: string | undefined): ShikiLang | null =>
+  s && SHIKI_LANG_SET.includes(s) ? (s as ShikiLang) : null
+
+interface CodeBlockProps {
+  /** Filename label shown in the header. Optional. */
+  readonly filename?: string
+  /** Language label shown in the top-right. Optional. */
+  readonly language?: string
+  /** Pre-highlighted HTML (e.g. from Shiki) — rendered via
+   *  dangerouslySetInnerHTML. Pick this OR `code`, not both. */
+  readonly html?: string
+  /** Plain code text — renders inside a styled <pre><code>. */
+  readonly code?: string
+  readonly className?: string
+  /** Copy-button caption + `aria-label` before a copy. Default `'Copy'` /
+   *  `'Copy code'`. */
+  readonly copyLabel?: string
+  readonly copyAriaLabel?: string
+  /** Copy-button caption + `aria-label` after a successful copy. Default
+   *  `'Copied'`. */
+  readonly copiedLabel?: string
+  readonly copiedAriaLabel?: string
+}
+
+export const CodeBlock = ({
+  filename, language, html, code, className,
+  copyLabel = 'Copy', copyAriaLabel = 'Copy code',
+  copiedLabel = 'Copied', copiedAriaLabel = 'Copied',
+}: CodeBlockProps): ReactNode => {
+  const [copied, setCopied] = useState(false)
+  // Text used by the copy button: prefer the raw `code`; when only
+  // pre-rendered HTML is available, fall back to stripping tags at
+  // copy time.
+  const copyText = (): string => {
+    if (code) return code
+    if (html) {
+      const tmp = typeof document !== 'undefined' ? document.createElement('div') : null
+      if (!tmp) return ''
+      tmp.innerHTML = html
+      return tmp.textContent ?? ''
+    }
+    return ''
+  }
+  const doCopy = (): void => {
+    const text = copyText()
+    if (!text || typeof navigator === 'undefined' || !navigator.clipboard) return
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1400)
+    }).catch(() => { /* clipboard denied; ignore */ })
+  }
+
+  return (
+    <figure className={cn('not-prose my-5 rounded-lg overflow-hidden border border-border bg-[oklch(0.18_0.005_280)]', className)}>
+      {(filename || language) ? (
+        <header className="flex items-center justify-between border-b border-border/60 px-4 py-2 bg-card/40">
+          {filename ? (
+            <span className="text-xs text-muted-foreground font-mono">{filename}</span>
+          ) : <span />}
+          {language ? (
+            <span className="text-[0.65rem] uppercase tracking-wider text-muted-foreground/80 font-semibold">
+              {language}
+            </span>
+          ) : null}
+        </header>
+      ) : null}
+      <div className="relative">
+        <button
+          type="button"
+          onClick={doCopy}
+          aria-label={copied ? copiedAriaLabel : copyAriaLabel}
+          className="absolute top-3 right-3 inline-flex items-center gap-1 rounded-md border border-border/60 bg-background/70 backdrop-blur px-2 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+        >
+          {copied ? (
+            <>
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+                <path d="M3 6.5 L5 8.5 L9 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+              {copiedLabel}
+            </>
+          ) : (
+            <>
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+                <rect x="3" y="3" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1.5" />
+                <path d="M5 3 V2.5 A0.5 0.5 0 0 1 5.5 2 H8.5 A0.5 0.5 0 0 1 9 2.5 V5.5 A0.5 0.5 0 0 1 8.5 6 H8" stroke="currentColor" strokeWidth="1.5" />
+              </svg>
+              {copyLabel}
+            </>
+          )}
+        </button>
+        {html ? (
+          <div
+            className="text-sm leading-relaxed [&_pre]:!m-0 [&_pre]:!bg-transparent [&_pre]:p-4 overflow-x-auto"
+            dangerouslySetInnerHTML={{ __html: html }}
+          />
+        ) : code && asShikiLang(language) ? (
+          <HighlightedCode
+            code={code}
+            lang={asShikiLang(language)!}
+            className="[&_pre]:!p-4 [&_pre]:!m-0 [&_pre]:!bg-transparent"
+          />
+        ) : (
+          <pre className="p-4 text-sm leading-relaxed overflow-x-auto"><code>{code}</code></pre>
+        )}
+      </div>
+    </figure>
+  )
+}

package/src/primitives/codeWindow.tsx

@@ -0,0 +1,84 @@
+// CodeWindow — chrome'd code preview for the landing hero / feature
+// callouts. Looks like a terminal/editor surface without claiming a
+// specific platform (no fake macOS dots).
+//
+// Two states:
+//   - Pass `code` (string) + `lang` for a plain (no-syntax) preview
+//   - Pass `html` for pre-highlighted (e.g. Shiki) output
+//
+// A subtle blinking caret is appended at the end of the last line
+// when `caret` is true — adds the "live, just typed" feel without
+// real animation cost.
+
+import type { ReactNode } from 'react'
+import { cn } from '../cn'
+import { HighlightedCode, type ShikiLang } from './highlightedCode'
+
+interface CodeWindowProps {
+  /** Title shown in the chrome — usually a filename. */
+  readonly title?: string
+  /** Tag in the corner — language label, e.g. "TypeScript". */
+  readonly tag?: string
+  /** Plain code text. When `lang` is also provided, the component
+   *  runs Shiki syntax highlighting automatically. */
+  readonly code?: string
+  /** Shiki language. Triggers syntax highlighting on `code`. */
+  readonly lang?: ShikiLang
+  /** Pre-highlighted HTML (skips Shiki). */
+  readonly html?: string
+  /** Show a blinking caret after the code. Default false. Only
+   *  applies to plain (non-highlighted) rendering. */
+  readonly caret?: boolean
+  /** Outer wrapper class — useful for sizing. */
+  readonly className?: string
+}
+
+export const CodeWindow = ({
+  title, tag, code, lang, html, caret = false, className,
+}: CodeWindowProps): ReactNode => (
+  <div
+    className={cn(
+      'relative overflow-hidden rounded-xl border border-border bg-card/60 backdrop-blur-sm shadow-2xl',
+      // Hairline highlight along the top — sells the "lit from above" feel
+      'before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-gradient-to-r before:from-transparent before:via-primary/60 before:to-transparent',
+      className,
+    )}
+  >
+    {(title || tag) ? (
+      <div className="flex items-center justify-between px-4 py-2 border-b border-border/60 bg-background/40">
+        <div className="flex items-center gap-2 text-xs text-muted-foreground font-mono">
+          {/* Three soft indicator dots — not platform-specific colours */}
+          <span className="inline-flex gap-1.5" aria-hidden="true">
+            <span className="w-2.5 h-2.5 rounded-full bg-muted-foreground/30" />
+            <span className="w-2.5 h-2.5 rounded-full bg-muted-foreground/30" />
+            <span className="w-2.5 h-2.5 rounded-full bg-muted-foreground/30" />
+          </span>
+          {title ? <span className="ml-2">{title}</span> : null}
+        </div>
+        {tag ? (
+          <span className="text-[0.65rem] uppercase tracking-[0.08em] text-muted-foreground/80 font-semibold">
+            {tag}
+          </span>
+        ) : null}
+      </div>
+    ) : null}
+    <div className="relative">
+      {html ? (
+        <div
+          className="text-sm leading-relaxed [&_pre]:!m-0 [&_pre]:!bg-transparent [&_pre]:p-5 overflow-x-auto"
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      ) : code && lang ? (
+        // `code + lang` → run Shiki transparently.
+        <HighlightedCode code={code} lang={lang} />
+      ) : (
+        <pre className="p-5 text-sm leading-relaxed overflow-x-auto font-mono">
+          <code>{code}</code>
+          {caret ? (
+            <span className="ml-0.5 inline-block w-[7px] h-[1.1em] -mb-[3px] align-text-bottom bg-primary motion-safe:animate-caret-blink" />
+          ) : null}
+        </pre>
+      )}
+    </div>
+  </div>
+)

package/src/primitives/dialog.tsx

@@ -0,0 +1,43 @@
+// shadcn Dialog — uses the native HTML <dialog> element. Honest V1:
+// no Radix focus-trap, no portal magic. <dialog> handles modal stacking
+// + ESC dismissal + backdrop click natively in modern browsers; we
+// add the shadcn styling on top.
+//
+// Caller controls open state via the ref or via `open` prop. The
+// imperative API (`dialogRef.current?.showModal()`) is the native
+// path; we surface it as a uncontrolled wrapper for now.
+
+import type { DialogHTMLAttributes, HTMLAttributes, ReactNode } from 'react'
+import { cn } from '../cn'
+
+export const Dialog = ({ className, children, ...props }: DialogHTMLAttributes<HTMLDialogElement>): ReactNode => (
+  <dialog
+    data-slot="dialog"
+    className={cn(
+      'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
+      'w-full max-w-lg rounded-lg border bg-background text-foreground p-6 shadow-lg',
+      'backdrop:bg-black/50 backdrop:backdrop-blur-sm',
+      'open:animate-in open:fade-in-0 open:zoom-in-95',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </dialog>
+)
+
+export const DialogHeader = ({ className, ...props }: HTMLAttributes<HTMLDivElement>): ReactNode => (
+  <div data-slot="dialog-header" className={cn('flex flex-col gap-1.5 text-left mb-4', className)} {...props} />
+)
+
+export const DialogTitle = ({ className, ...props }: HTMLAttributes<HTMLHeadingElement>): ReactNode => (
+  <h2 data-slot="dialog-title" className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />
+)
+
+export const DialogDescription = ({ className, ...props }: HTMLAttributes<HTMLParagraphElement>): ReactNode => (
+  <p data-slot="dialog-description" className={cn('text-sm text-muted-foreground', className)} {...props} />
+)
+
+export const DialogFooter = ({ className, ...props }: HTMLAttributes<HTMLDivElement>): ReactNode => (
+  <div data-slot="dialog-footer" className={cn('mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} {...props} />
+)

package/src/primitives/docCard.tsx

@@ -0,0 +1,109 @@
+// DocCard + DocCards — grid of clickable cards for docs landing pages
+// (Fumadocs calls these `<Cards>` / `<Card>`). The wrapper handles the
+// grid; each card is a Link with a hover indicator.
+//
+// Usage:
+//   <DocCards>
+//     <DocCard
+//       title="Getting started"
+//       description="Scaffold your first project and boot it locally."
+//       href="/docs/intro/getting-started"
+//       icon="🚀"
+//     />
+//     <DocCard … />
+//   </DocCards>
+
+import type { ComponentType, ReactNode } from 'react'
+import { cn } from '../cn'
+import type { ShellLinkProps } from '../compositions/docShell'
+
+interface DocCardsProps {
+  readonly children: ReactNode
+  readonly className?: string
+  /** Override the grid columns. Default: 1 on mobile, 2 on md+. */
+  readonly cols?: 1 | 2 | 3
+  /** Stagger the first paint — each card fades + slides up with a
+   *  ~40ms delay. Respects prefers-reduced-motion. Default true. */
+  readonly stagger?: boolean
+}
+
+interface DocCardProps {
+  readonly title: ReactNode
+  readonly description?: ReactNode
+  readonly href: string
+  readonly icon?: ReactNode
+  readonly className?: string
+  /** Optional client-router Link; falls back to plain <a>. */
+  readonly LinkComponent?: ComponentType<ShellLinkProps>
+}
+
+const PlainLink = ({ to, className, children }: ShellLinkProps): ReactNode => (
+  <a href={to} className={className}>{children}</a>
+)
+
+const colClass: Record<NonNullable<DocCardsProps['cols']>, string> = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-1 md:grid-cols-2',
+  3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+}
+
+export const DocCards = ({
+  children, className, cols = 2, stagger = true,
+}: DocCardsProps): ReactNode => (
+  <div
+    className={cn(
+      'not-prose my-6 grid gap-4',
+      colClass[cols],
+      stagger && 'stagger-in',
+      className,
+    )}
+  >
+    {children}
+  </div>
+)
+
+export const DocCard = ({
+  title, description, href, icon, className, LinkComponent = PlainLink,
+}: DocCardProps): ReactNode => {
+  const Link = LinkComponent
+  return (
+    <Link
+      to={href}
+      prefetch
+      className={cn(
+        'group relative block p-5 rounded-lg border border-border bg-card/30',
+        'hover:bg-card/60 hover:border-primary/40 hover:-translate-y-0.5',
+        'active:translate-y-0 active:scale-[0.99]',
+        'transition-[transform,background-color,border-color] duration-150 ease-out',
+        // Subtle gradient accent on the top edge — fades in on hover.
+        'before:absolute before:inset-x-4 before:top-0 before:h-px before:bg-gradient-to-r before:from-transparent before:via-primary/50 before:to-transparent before:opacity-0 before:transition-opacity group-hover:before:opacity-100',
+        className,
+      )}
+    >
+      <div className={cn('flex items-center gap-4', description ? 'mb-4' : '')}>
+        {icon ? (
+          <div
+            className="flex shrink-0 items-center justify-center w-9 h-9 rounded-md bg-primary/10 text-primary [&_svg]:w-5 [&_svg]:h-5"
+            aria-hidden="true"
+          >
+            {icon}
+          </div>
+        ) : null}
+        <div className="min-w-0 font-semibold text-foreground group-hover:text-primary transition-colors flex items-center gap-2">
+          <span className="min-w-0">{title}</span>
+          <span
+            className="shrink-0 text-muted-foreground group-hover:text-primary group-hover:translate-x-0.5 transition-all"
+            aria-hidden="true"
+          >
+            →
+          </span>
+        </div>
+      </div>
+      {description ? (
+        <div className="text-sm text-muted-foreground leading-relaxed">
+          {description}
+        </div>
+      ) : null}
+    </Link>
+  )
+}