@exegia/corpora-ui 0.5.0

package/src/components/composed/social-providers.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import {
+  RiAppleFill,
+  RiGithubFill,
+  RiGoogleFill,
+  RiTwitterXFill,
+} from "@remixicon/react";
+import type * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export type SocialProvider = "google" | "apple" | "github" | "x";
+
+const PROVIDERS: Record<
+  SocialProvider,
+  { label: string; Icon: React.ComponentType<{ className?: string }> }
+> = {
+  google: { label: "Google", Icon: RiGoogleFill },
+  apple: { label: "Apple", Icon: RiAppleFill },
+  github: { label: "GitHub", Icon: RiGithubFill },
+  x: { label: "X", Icon: RiTwitterXFill },
+};
+
+const ACTION_LABELS = {
+  login: "Login with",
+  signup: "Sign up with",
+  continue: "Continue with",
+} as const;
+
+export interface SocialProvidersProps {
+  providers?: SocialProvider[];
+  /** Verb used in the stacked layout labels. */
+  action?: keyof typeof ACTION_LABELS;
+  /** "stack" = full-width labeled buttons; "row" = icon-only buttons. */
+  layout?: "stack" | "row";
+  /** Shows the matching button in its loading state and disables the rest. */
+  loadingProvider?: SocialProvider | null;
+  disabled?: boolean;
+  onSelect?: (provider: SocialProvider) => void;
+  className?: string;
+}
+
+/** Social auth buttons (coss particle p-button-38). UI only — wire onSelect. */
+export function SocialProviders({
+  providers = ["google", "apple", "github"],
+  action = "continue",
+  layout = "stack",
+  loadingProvider = null,
+  disabled = false,
+  onSelect,
+  className,
+}: SocialProvidersProps) {
+  const row = layout === "row";
+
+  return (
+    <div
+      className={cn(
+        "flex w-full gap-2",
+        row ? "flex-row justify-center" : "flex-col",
+        className,
+      )}
+    >
+      {providers.map((provider) => {
+        const { label, Icon } = PROVIDERS[provider];
+        return (
+          <Button
+            key={provider}
+            variant="outline"
+            size={row ? "icon" : "default"}
+            className={row ? undefined : "w-full"}
+            aria-label={`${ACTION_LABELS[action]} ${label}`}
+            loading={loadingProvider === provider}
+            disabled={disabled || (loadingProvider !== null && loadingProvider !== provider)}
+            onClick={() => onSelect?.(provider)}
+          >
+            <Icon aria-hidden="true" />
+            {!row && (
+              <span className="flex-1">
+                {ACTION_LABELS[action]} {label}
+              </span>
+            )}
+          </Button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/docs/code-block.tsx

@@ -0,0 +1,8 @@
+/** Plain code snippet shell — syntax highlighting can be layered in later. */
+export function CodeBlock({ code }: { code: string }) {
+  return (
+    <pre className="overflow-x-auto rounded-lg border bg-muted/50 p-4 font-mono text-xs leading-relaxed">
+      <code>{code}</code>
+    </pre>
+  )
+}

package/src/components/docs/component-preview.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+
+import type { RegistryEntry } from "@/registry"
+
+/**
+ * Renders an entry's lazy demo (created at registry module scope) inside a
+ * bordered canvas. Falls back to a placeholder while the demo is not
+ * implemented yet.
+ */
+export function ComponentPreview({ entry }: { entry: RegistryEntry }) {
+  const Demo = entry.preview
+
+  return (
+    <div className="flex min-h-48 items-center justify-center rounded-lg border p-8">
+      {Demo ? (
+        <React.Suspense
+          fallback={<p className="text-sm text-muted-foreground">Loading…</p>}
+        >
+          <Demo />
+        </React.Suspense>
+      ) : (
+        <p className="text-sm text-muted-foreground">
+          Preview coming soon ({entry.status}).
+        </p>
+      )}
+    </div>
+  )
+}

package/src/components/docs/demo-controls.tsx

@@ -0,0 +1,118 @@
+import type * as React from "react"
+
+/**
+ * Lightweight playground controls for registry demos. Plain native elements
+ * on purpose — docs-only, never part of the published library.
+ */
+
+export function DemoSelect<T extends string>({
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  label: string
+  value: T
+  options: readonly T[]
+  onChange: (value: T) => void
+}) {
+  return (
+    <label className="flex flex-col gap-1 text-xs text-muted-foreground">
+      {label}
+      <select
+        value={value}
+        onChange={(event) => onChange(event.target.value as T)}
+        className="h-7 rounded-md border bg-background px-2 text-xs text-foreground"
+      >
+        {options.map((option) => (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
+    </label>
+  )
+}
+
+/**
+ * Stand-in brand mark for demos of the auth blocks' `logo` slot. Deliberately
+ * unbranded — it exists to show the slot's spacing and default sizing, not to
+ * represent a real product.
+ */
+export function DemoBrandMark() {
+  return (
+    <svg
+      aria-label="Example logo"
+      role="img"
+      viewBox="0 0 32 32"
+      className="text-foreground"
+    >
+      <rect
+        x="2"
+        y="2"
+        width="28"
+        height="28"
+        rx="9"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2.5"
+      />
+      <path
+        d="M11 20.5V11.5h4.5a3.5 3.5 0 0 1 0 7H11"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function DemoToggle({
+  label,
+  checked,
+  onChange,
+}: {
+  label: string
+  checked: boolean
+  onChange: (checked: boolean) => void
+}) {
+  return (
+    <label className="flex items-center gap-1.5 text-xs text-muted-foreground">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(event) => onChange(event.target.checked)}
+      />
+      {label}
+    </label>
+  )
+}
+
+/** Standard layout: centered preview canvas above a wrapping controls row. */
+export function DemoStage({
+  controls,
+  children,
+  canvasClassName,
+}: {
+  controls: React.ReactNode
+  children: React.ReactNode
+  canvasClassName?: string
+}) {
+  return (
+    <div className="flex w-full flex-col items-center gap-6">
+      <div
+        className={
+          canvasClassName ??
+          "flex min-h-28 w-full items-center justify-center rounded-lg"
+        }
+      >
+        {children}
+      </div>
+      <div className="flex flex-wrap items-end justify-center gap-x-4 gap-y-3">
+        {controls}
+      </div>
+    </div>
+  )
+}

package/src/components/docs/props-table.tsx

@@ -0,0 +1,35 @@
+import type { PropDef } from "@/registry"
+
+export function PropsTable({ props }: { props: PropDef[] }) {
+  return (
+    <div className="overflow-x-auto rounded-lg border">
+      <table className="w-full text-left text-sm">
+        <thead className="border-b bg-muted/50">
+          <tr>
+            <th className="p-3 font-medium">Prop</th>
+            <th className="p-3 font-medium">Type</th>
+            <th className="p-3 font-medium">Default</th>
+            <th className="p-3 font-medium">Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          {props.map((prop) => (
+            <tr key={prop.name} className="border-b last:border-b-0">
+              <td className="p-3 font-mono text-xs">
+                {prop.name}
+                {prop.required ? <span className="text-destructive">*</span> : null}
+              </td>
+              <td className="p-3 font-mono text-xs text-muted-foreground">
+                {prop.type}
+              </td>
+              <td className="p-3 font-mono text-xs text-muted-foreground">
+                {prop.default ?? "—"}
+              </td>
+              <td className="p-3 text-muted-foreground">{prop.description}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}

package/src/components/theme-provider.tsx

@@ -0,0 +1,230 @@
+/* eslint-disable react-refresh/only-export-components */
+import * as React from "react"
+
+type Theme = "dark" | "light" | "system"
+type ResolvedTheme = "dark" | "light"
+
+type ThemeProviderProps = {
+  children: React.ReactNode
+  defaultTheme?: Theme
+  storageKey?: string
+  disableTransitionOnChange?: boolean
+}
+
+type ThemeProviderState = {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}
+
+const COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)"
+const THEME_VALUES: Theme[] = ["dark", "light", "system"]
+
+const ThemeProviderContext = React.createContext<
+  ThemeProviderState | undefined
+>(undefined)
+
+function isTheme(value: string | null): value is Theme {
+  if (value === null) {
+    return false
+  }
+
+  return THEME_VALUES.includes(value as Theme)
+}
+
+function getSystemTheme(): ResolvedTheme {
+  if (window.matchMedia(COLOR_SCHEME_QUERY).matches) {
+    return "dark"
+  }
+
+  return "light"
+}
+
+function disableTransitionsTemporarily() {
+  const style = document.createElement("style")
+  style.appendChild(
+    document.createTextNode(
+      "*,*::before,*::after{-webkit-transition:none!important;transition:none!important}"
+    )
+  )
+  document.head.appendChild(style)
+
+  return () => {
+    window.getComputedStyle(document.body)
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        style.remove()
+      })
+    })
+  }
+}
+
+function isEditableTarget(target: EventTarget | null) {
+  if (!(target instanceof HTMLElement)) {
+    return false
+  }
+
+  if (target.isContentEditable) {
+    return true
+  }
+
+  const editableParent = target.closest(
+    "input, textarea, select, [contenteditable='true']"
+  )
+  if (editableParent) {
+    return true
+  }
+
+  return false
+}
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "theme",
+  disableTransitionOnChange = true,
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setThemeState] = React.useState<Theme>(() => {
+    const storedTheme = localStorage.getItem(storageKey)
+    if (isTheme(storedTheme)) {
+      return storedTheme
+    }
+
+    return defaultTheme
+  })
+
+  const setTheme = React.useCallback(
+    (nextTheme: Theme) => {
+      localStorage.setItem(storageKey, nextTheme)
+      setThemeState(nextTheme)
+    },
+    [storageKey]
+  )
+
+  const applyTheme = React.useCallback(
+    (nextTheme: Theme) => {
+      const root = document.documentElement
+      const resolvedTheme =
+        nextTheme === "system" ? getSystemTheme() : nextTheme
+      const restoreTransitions = disableTransitionOnChange
+        ? disableTransitionsTemporarily()
+        : null
+
+      root.classList.remove("light", "dark")
+      root.classList.add(resolvedTheme)
+
+      if (restoreTransitions) {
+        restoreTransitions()
+      }
+    },
+    [disableTransitionOnChange]
+  )
+
+  React.useEffect(() => {
+    applyTheme(theme)
+
+    if (theme !== "system") {
+      return undefined
+    }
+
+    const mediaQuery = window.matchMedia(COLOR_SCHEME_QUERY)
+    const handleChange = () => {
+      applyTheme("system")
+    }
+
+    mediaQuery.addEventListener("change", handleChange)
+
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange)
+    }
+  }, [theme, applyTheme])
+
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.repeat) {
+        return
+      }
+
+      if (event.metaKey || event.ctrlKey || event.altKey) {
+        return
+      }
+
+      if (isEditableTarget(event.target)) {
+        return
+      }
+
+      if (event.key.toLowerCase() !== "d") {
+        return
+      }
+
+      setThemeState((currentTheme) => {
+        const nextTheme =
+          currentTheme === "dark"
+            ? "light"
+            : currentTheme === "light"
+              ? "dark"
+              : getSystemTheme() === "dark"
+                ? "light"
+                : "dark"
+
+        localStorage.setItem(storageKey, nextTheme)
+        return nextTheme
+      })
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown)
+    }
+  }, [storageKey])
+
+  React.useEffect(() => {
+    const handleStorageChange = (event: StorageEvent) => {
+      if (event.storageArea !== localStorage) {
+        return
+      }
+
+      if (event.key !== storageKey) {
+        return
+      }
+
+      if (isTheme(event.newValue)) {
+        setThemeState(event.newValue)
+        return
+      }
+
+      setThemeState(defaultTheme)
+    }
+
+    window.addEventListener("storage", handleStorageChange)
+
+    return () => {
+      window.removeEventListener("storage", handleStorageChange)
+    }
+  }, [defaultTheme, storageKey])
+
+  const value = React.useMemo(
+    () => ({
+      theme,
+      setTheme,
+    }),
+    [theme, setTheme]
+  )
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  )
+}
+
+export const useTheme = () => {
+  const context = React.useContext(ThemeProviderContext)
+
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider")
+  }
+
+  return context
+}