[pull] master from supabase:master

apps/design-system/__registry__/index.tsx

@@ -148,6 +148,17 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: []
     },
+    "alert-collapsible-demo": {
+      name: "alert-collapsible-demo",
+      type: "components:example",
+      registryDependencies: ["alert","collapsible","button"],
+      component: React.lazy(() => import("@/registry/default/example/alert-collapsible-demo")),
+      source: "",
+      files: ["registry/default/example/alert-collapsible-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
     "alert-dialog-demo": {
       name: "alert-dialog-demo",
       type: "components:example",

apps/design-system/content/docs/components/collapsible.mdx

@@ -1,67 +1,37 @@
 ---
-title: Collapsible
-description: An interactive component which expands/collapses a panel.
+title: Alert Collapsible
+description: An alert-styled block with a collapsible content section, toggled by an icon button.
 component: true
-featured: true
-links:
-  doc: https://www.radix-ui.com/docs/primitives/components/collapsible
-  api: https://www.radix-ui.com/docs/primitives/components/collapsible#api-reference
-source:
-  radix: true
-  shadcn: true
 ---
 
-<ComponentPreview name="collapsible-demo" peekCode wide />
+<ComponentPreview name="alert-collapsible-demo" peekCode wide />
 
-## Installation
-
-<Tabs defaultValue="cli">
-
-<TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
-  <TabsTrigger value="manual">Manual</TabsTrigger>
-</TabsList>
-<TabsContent value="cli">
+## Usage
 
-```bash
-npx shadcn-ui@latest add collapsible
+```tsx
+import { AlertCollapsible } from 'ui'
 ```
 
-</TabsContent>
-
-<TabsContent value="manual">
-
-<Steps>
-
-<Step>Install the following dependencies:</Step>
-
-```bash
-npm install @radix-ui/react-collapsible
+```tsx
+<AlertCollapsible trigger="Need help?">
+  <p>Content revealed when expanded.</p>
+</AlertCollapsible>
 ```
 
-<Step>Copy and paste the following code into your project.</Step>
-
-<ComponentSource name="collapsible" />
-
-<Step>Update the import paths to match your project setup.</Step>
-
-</Steps>
-
-</TabsContent>
-
-</Tabs>
-
-## Usage
+### Default open
 
 ```tsx
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
+<AlertCollapsible trigger="Details" defaultOpen>
+  <p>This section is expanded by default.</p>
+</AlertCollapsible>
 ```
 
+### Variants
+
+Supports the same `variant` prop as `Alert`: `default`, `destructive`, and `warning`.
+
 ```tsx
-<Collapsible>
-  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
-  <CollapsibleContent>
-    Yes. Free to use for personal and commercial projects. No attribution required.
-  </CollapsibleContent>
-</Collapsible>
+<AlertCollapsible trigger="Warning" variant="warning">
+  <p>Something needs attention.</p>
+</AlertCollapsible>
 ```

apps/design-system/registry/default/example/alert-collapsible-demo.tsx

@@ -0,0 +1,11 @@
+import { AlertCollapsible } from 'ui'
+
+export default function AlertCollapsibleDemo() {
+  return (
+    <AlertCollapsible trigger="Need help?">
+      <p className="text-sm text-foreground-light">
+        Try a different browser or disable extensions that block network requests.
+      </p>
+    </AlertCollapsible>
+  )
+}

apps/design-system/registry/examples.ts

@@ -43,6 +43,12 @@ export const examples: Registry = [
     registryDependencies: ['alert'],
     files: ['example/alert-demo.tsx'],
   },
+  {
+    name: 'alert-collapsible-demo',
+    type: 'components:example',
+    registryDependencies: ['alert', 'collapsible', 'button'],
+    files: ['example/alert-collapsible-demo.tsx'],
+  },
   {
     name: 'alert-dialog-demo',
     type: 'components:example',