Feature/all components

apps/docs/package.json

@@ -14,6 +14,9 @@
   "dependencies": {
     "@corvu/calendar": "^0.1.2",
     "@corvu/drawer": "^0.2.4",
+    "@corvu/otp-field": "^0.1.4",
+    "@corvu/resizable": "^0.2.5",
+    "@date-fns/tz": "^1.5.0",
     "@fontsource-variable/geist": "^5.2.8",
     "@fontsource-variable/geist-mono": "^5.2.7",
     "@kobalte/core": "^0.13.11",
@@ -26,12 +29,17 @@
     "chokidar": "^5.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.4.0",
+    "cmdk-solid": "^1.1.2",
     "embla-carousel": "^8.6.0",
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-solid": "^8.6.0",
+    "input-otp": "^1.4.2",
     "lucide-solid": "^0.575.0",
     "rimraf": "^6.0.1",
     "solid-js": "^1.9.9",
+    "solid-sonner": "^0.3.1",
+    "solid-recharts": "^1.0.1",
     "tailwind-merge": "^3.3.1",
     "vinxi": "^0.5.7",
     "zod": "^4.1.12"

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

@@ -1,34 +1,151 @@
-import { type ComponentProps, createMemo, splitProps } from "solid-js"
+import {
+  type ComponentProps,
+  children,
+  createMemo,
+  createSignal,
+  type ParentProps,
+  Show,
+  Suspense,
+  splitProps,
+} from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { cn } from "~/lib/utils";
+import { getDocsExample } from "~/lib/docs-examples";
+import { Button } from "~/registry/ui/button";
+import { Tabs } from "~/registry/ui/tabs";
 
-import { Index } from "~/registry/__index__"
+type ComponentPreviewProps = ParentProps<{
+  name: string;
+  align?: "center" | "start" | "end";
+  class?: string;
+  previewClass?: string;
+  hideCode?: boolean;
+  /**
+   * Contain full-app demos (e.g. sidebar) whose components use
+   * `position: fixed` inside the preview frame. `contain-layout` turns the
+   * preview into the containing block of fixed descendants so they stop
+   * escaping to the page viewport, and the data-slot overrides size the
+   * sidebar primitives to the frame instead of the viewport.
+   */
+  contained?: boolean;
+}>;
 
-export function ComponentPreview(props: ComponentProps<"div"> & { name: string }) {
-  const [local, others] = splitProps(props, ["name"])
+export function ComponentPreview(props: ComponentPreviewProps) {
+  const [local, others] = splitProps(props, [
+    "name",
+    "align",
+    "class",
+    "previewClass",
+    "hideCode",
+    "contained",
+    "children",
+  ]);
+  const [expanded, setExpanded] = createSignal(false);
+  const source = children(() => local.children);
+  const example = createMemo(() => getDocsExample(local.name));
 
-  const Preview = createMemo(() => {
-    const Component = Index[local.name]?.component
-
-    if (!Component) {
-      return (
-        <p class="text-muted-foreground text-sm">
-          Component{" "}
-          <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
-            {local.name}
-          </code>{" "}
-          not found in registry.
-        </p>
-      )
-    }
+  return (
+    <div
+      data-slot="component-preview"
+      data-not-typeset
+      class={cn(
+        "group relative mt-4 mb-12 flex flex-col overflow-hidden rounded-2xl border",
+        local.class,
+      )}
+      {...others}
+    >
+      <div
+        data-slot="preview"
+        data-align={local.align ?? "center"}
+        class={cn(
+          "preview relative flex min-h-72 w-full justify-center p-10 data-[align=center]:items-center data-[align=end]:items-end data-[align=start]:items-start",
+          local.contained && [
+            "overflow-hidden contain-layout",
+            "[&_[data-slot=sidebar-container]]:h-full",
+            "[&_[data-slot=sidebar-wrapper]]:h-full [&_[data-slot=sidebar-wrapper]]:min-h-0",
+          ],
+          local.previewClass,
+        )}
+      >
+        <Show
+          when={example()}
+          fallback={
+            <p class="text-muted-foreground text-sm">
+              Preview <code>{local.name}</code> was not found.
+            </p>
+          }
+        >
+          {(Example) => (
+            <Suspense>
+              <Dynamic component={Example()} />
+            </Suspense>
+          )}
+        </Show>
+      </div>
 
-    return <Component />
-  })
+      <Show when={!local.hideCode}>
+        <div
+          data-slot="component-preview-source"
+          data-expanded={expanded()}
+          class="relative overflow-hidden border-t bg-neutral-100 dark:bg-zinc-900 [&_.expressive-code]:mx-0 [&_.expressive-code]:mt-0 [&_.expressive-code_.frame_pre]:rounded-none"
+        >
+          <div
+            class={cn(
+              "relative",
+              expanded()
+                ? "max-h-72 overflow-auto"
+                : "max-h-[108px] overflow-hidden",
+            )}
+          >
+            {source()}
+          </div>
+          <Show when={!expanded()}>
+            <div class="pointer-events-none absolute inset-x-0 bottom-0 h-20 bg-linear-to-t from-neutral-100 via-neutral-100/80 to-transparent dark:from-zinc-900 dark:via-zinc-900/80" />
+          </Show>
+          <Show when={!expanded()}>
+            <div class="absolute inset-0 flex items-center justify-center pb-4">
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                class="relative z-10 rounded-lg bg-background shadow-none"
+                onClick={() => setExpanded(true)}
+              >
+                View Code
+              </Button>
+            </div>
+          </Show>
+        </div>
+      </Show>
+    </div>
+  );
+}
 
+export function ComponentSource(props: ParentProps<{ class?: string }>) {
+  const [local, others] = splitProps(props, ["class", "children"]);
   return (
     <div
-      class="preview flex min-h-[450px] w-full items-center justify-center rounded-lg border p-10"
+      data-slot="component-source"
+      data-not-typeset
+      class={cn("relative mt-6 [&_.expressive-code]:mt-0", local.class)}
       {...others}
     >
-      <Preview />
+      {local.children}
     </div>
-  )
+  );
+}
+
+export function CodeTabs(props: ComponentProps<typeof Tabs>) {
+  const [local, others] = splitProps(props, ["class"]);
+  return (
+    <Tabs
+      data-not-typeset
+      defaultValue="cli"
+      class={cn(
+        "relative mt-6 w-full gap-2 [&>[data-slot=tabs-list]]:gap-6 [&>[data-slot=tabs-list]]:p-0 [&>[data-slot=tabs-list]>[data-slot=tabs-trigger]]:rounded-none [&>[data-slot=tabs-list]>[data-slot=tabs-trigger]]:px-0 [&>[data-slot=tabs-list]>[data-slot=tabs-trigger]]:py-1",
+        local.class,
+      )}
+      {...others}
+    />
+  );
 }

apps/docs/src/components/docs-layout.tsx

@@ -20,7 +20,7 @@ export function DocsLayout(props: ParentProps) {
 
   return (
     <div class="container-wrapper flex flex-1 flex-col px-2">
-      <SidebarProvider class="3xl:fixed:container min-h-min flex-1 items-start 3xl:fixed:px-3 px-0 [--sidebar-width:220px] [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--sidebar-width:240px] lg:[--top-spacing:calc(var(--spacing)*4)]">
+      <SidebarProvider class="min-h-min flex-1 items-start px-0 has-data-[variant=inset]:bg-transparent [--sidebar-width:--spacing(72)] [--toc-width:--spacing(64)] [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--top-spacing:--spacing(4)] 3xl:fixed:container 3xl:fixed:px-3">
         <MainNavigation />
         <div class="size-full">
           <div class="flex items-stretch text-[1.05rem] sm:text-[15px] xl:w-full" data-slot="docs">