feat: sync docs and examples to upstream base structure

- Sync 56 MDX docs to shadcn-ui/ui v4 base pattern (frontmatter, CodeTabs→Tabs, Steps)
- Move 423 examples to examples/stylex/ with React.lazy registry
- Add ExamplesIndex.stylex with getComponent() for name-based resolution
- Remove children-based ComponentPreview, use childless name prop
- Remove changelog sections from component docs
- Add StyleX configuration step to all manual installation tabs
- Remove Tailwind mentions from docs
- Remove barrel __index__.tsx re-exports (unused)
- Fix lint and typecheck (0 errors)

Author: Aniket-508

.gitignore

@@ -49,3 +49,4 @@ next-env.d.ts
 # package builds
 **/dist
 **/.turbo
+**/styled-system

apps/www/components/component-preview.tsx

@@ -1,37 +1,52 @@
-import type { ReactNode } from "react";
-
 import { ComponentPreviewTabs } from "@/components/component-preview-tabs";
 import { ComponentSource } from "@/components/component-source";
+import { getComponent } from "@/examples/__index__";
 
 export const ComponentPreview = ({
   name,
-  children,
   className,
   previewClassName,
   align = "center",
   direction = "ltr",
   hideCode = false,
 }: {
   name?: string;
-  children?: ReactNode;
   className?: string;
   previewClassName?: string;
   align?: "center" | "start" | "end";
   direction?: "ltr" | "rtl";
   hideCode?: boolean;
-}) => (
-  <ComponentPreviewTabs
-    align={align}
-    className={className}
-    component={children}
-    direction={direction}
-    hideCode={hideCode || !name}
-    previewClassName={previewClassName}
-    source={name ? <ComponentSource collapsible={false} name={name} /> : null}
-    sourcePreview={
-      name ? (
+}) => {
+  if (!name) {
+    return null;
+  }
+
+  const Component = getComponent(name);
+
+  if (!Component) {
+    return (
+      <p className="mt-6 text-sm text-muted-foreground">
+        Component{" "}
+        <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
+          {name}
+        </code>{" "}
+        not found in registry.
+      </p>
+    );
+  }
+
+  return (
+    <ComponentPreviewTabs
+      align={align}
+      className={className}
+      component={<Component />}
+      direction={direction}
+      hideCode={hideCode}
+      previewClassName={previewClassName}
+      source={<ComponentSource collapsible={false} name={name} />}
+      sourcePreview={
         <ComponentSource collapsible={false} maxLines={6} name={name} />
-      ) : null
-    }
-  />
-);
+      }
+    />
+  );
+};

apps/www/content/docs/components/accordion.mdx

@@ -1,28 +1,24 @@
 ---
 title: Accordion
 description: A vertically stacked set of interactive headings that each reveal a section of content.
+component: true
 links:
   doc: https://base-ui.com/react/components/accordion
   api: https://base-ui.com/react/components/accordion#api-reference
 ---
 
-import AccordionDemo from "@/examples/accordion-demo";
-import AccordionBasic from "@/examples/accordion-basic";
-import AccordionMultiple from "@/examples/accordion-multiple";
-import AccordionDisabled from "@/examples/accordion-disabled";
-import AccordionBorders from "@/examples/accordion-borders";
-import AccordionCard from "@/examples/accordion-card";
-
-<ComponentPreview name="accordion-demo" align="start">
-  <AccordionDemo />
-</ComponentPreview>
+<ComponentPreview
+  name="accordion-demo"
+  align="start"
+  previewClassName="*:data-[slot=accordion]:max-w-sm h-[300px]"
+/>
 
 ## Installation
 
 <Tabs defaultValue="cli">
 
 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
   <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 
@@ -63,16 +59,16 @@ pnpm add @base-ui/react @stylexjs/stylex
 
 ## Usage
 
-```tsx
+```tsx showLineNumbers
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@/components/ui/accordion/accordion";
+} from "@/components/ui/accordion";
 ```
 
-```tsx
+```tsx showLineNumbers
 <Accordion defaultValue={["item-1"]}>
   <AccordionItem value="item-1">
     <AccordionTrigger>Is it accessible?</AccordionTrigger>
@@ -87,7 +83,7 @@ import {
 
 Use the following composition to build an `Accordion`:
 
-```txt
+```text
 Accordion
 ├── AccordionItem
 │   ├── AccordionTrigger
@@ -97,59 +93,62 @@ Accordion
     └── AccordionContent
 ```
 
-## Examples
-
-### Basic
+## Basic
 
 A basic accordion that shows one item at a time. The first item is open by default.
 
-<ComponentPreview name="accordion-basic" align="start">
-  <AccordionBasic />
-</ComponentPreview>
+<ComponentPreview
+  name="accordion-basic"
+  align="start"
+  previewClassName="*:data-[slot=accordion]:max-w-sm h-[300px]"
+/>
 
-### Multiple
+## Multiple
 
 Use the `multiple` prop to allow multiple items to be open at the same time.
 
-<ComponentPreview name="accordion-multiple" align="start">
-  <AccordionMultiple />
-</ComponentPreview>
+<ComponentPreview
+  name="accordion-multiple"
+  align="start"
+  previewClassName="*:data-[slot=accordion]:max-w-sm h-[450px]"
+/>
 
-### Disabled
+## Disabled
 
 Use the `disabled` prop on `AccordionItem` to disable individual items.
 
-<ComponentPreview name="accordion-disabled" align="start">
-  <AccordionDisabled />
-</ComponentPreview>
+<ComponentPreview
+  name="accordion-disabled"
+  align="start"
+  previewClassName="*:data-[slot=accordion]:max-w-sm h-[300px]"
+/>
 
-### Borders
+## Borders
 
-Wrap the `Accordion` in a bordered, rounded container to group the items.
+Add `border` to the `Accordion` and `border-b last:border-b-0` to the `AccordionItem` to add borders to the items.
 
-<ComponentPreview name="accordion-borders" align="start">
-  <AccordionBorders />
-</ComponentPreview>
+<ComponentPreview
+  name="accordion-borders"
+  align="start"
+  previewClassName="*:data-[slot=accordion]:max-w-sm h-[300px]"
+/>
 
-### Card
+## Card
 
 Wrap the `Accordion` in a `Card` component.
 
-<ComponentPreview name="accordion-card" align="start">
-  <AccordionCard />
-</ComponentPreview>
-
-import AccordionRtl from "@/examples/accordion-rtl";
+<ComponentPreview
+  name="accordion-card"
+  align="start"
+  previewClassName="*:data-[slot=accordion]:max-w-sm h-[435px]"
+/>
 
 ## RTL
 
-To enable right-to-left support, see the [RTL guide](/docs/rtl).
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
 
-<ComponentPreview name="accordion-rtl" direction="rtl">
-  <AccordionRtl />
-</ComponentPreview>
+<ComponentPreview name="accordion-rtl" align="start" direction="rtl" />
 
 ## API Reference
 
-See the [Base UI](https://base-ui.com/react/components/accordion#api-reference)
-documentation for the full API.
+See the [Base UI](https://base-ui.com/react/components/accordion#api-reference) documentation for more information.