Merge branch 'master' into chore/move-policies

apps/design-system/__registry__/index.tsx

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

apps/design-system/config/docs.ts

@@ -117,6 +117,11 @@ export const docsConfig: DocsConfig = {
           href: '/docs/fragments/admonition',
           items: [],
         },
+        {
+          title: 'Collapsible Alert',
+          href: '/docs/fragments/collapsible-alert',
+          items: [],
+        },
         {
           title: 'Assistant Chat',
           href: '/docs/fragments/assistant-chat',

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

@@ -1,29 +1,24 @@
 ---
 title: Alert
-description: Displays a callout for user attention.
+description: Displays a low-level callout primitive for user attention.
 component: true
 source:
   radix: true
   shadcn: true
 ---
 
-Alert forms the core primitives for [Admonition](../fragments/admonition). Use the Admonition component unless you must deviate from our consistent patterns. Examples where Alert might make sense include:
+Alert is the low-level shadcn primitive that forms the foundation for [Admonition](../fragments/admonition). Use Admonition for product callouts unless you need custom composition that the Admonition API does not support.
 
-- Bespoke icon requirement
-- Highly custom internal contents
+Examples where Alert may be appropriate include bespoke icons, custom internal layouts, or wrapper components that need direct access to `alertVariants`.
+
+Use [Collapsible Alert](../fragments/collapsible-alert) when a callout also needs expandable detail. Use [Collapsible](./collapsible) only for generic disclosure behaviour that is not itself an alert.
 
 <ComponentPreview name="alert-demo" peekCode wide />
 
-## Installation
-
-```bash
-npx shadcn-ui@latest add alert
-```
-
 ## Usage
 
 ```tsx
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Alert, AlertDescription, AlertTitle } from 'ui/src/components/shadcn/ui/alert'
 ```
 
 ```tsx
@@ -35,3 +30,11 @@ import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
   </AlertDescription>
 </Alert>
 ```
+
+### Variants
+
+Use `alertVariants` when building shared wrappers around the primitive.
+
+```tsx
+import { alertVariants } from 'ui/src/components/shadcn/ui/alert'
+```

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

@@ -1,37 +1,51 @@
 ---
-title: Alert Collapsible
-description: An alert-styled block with a collapsible content section, toggled by an icon button.
+title: Collapsible
+description: An expandable content region using the shadcn Collapsible primitive.
 component: true
 ---
 
-<ComponentPreview name="alert-collapsible-demo" peekCode wide />
+Collapsible is a low-level primitive for revealing and hiding related content. Use it when a component needs custom trigger or content composition.
+
+Use Collapsible for generic disclosure behaviour: rows, sections, menus, tool details, and custom layouts. Use [Collapsible Alert](../fragments/collapsible-alert) instead when the disclosure is an alert-styled callout that should keep standard alert padding, variants, trigger styling, and toggle treatment.
+
+<ComponentPreview name="collapsible-demo" peekCode wide />
 
 ## Usage
 
 ```tsx
-import { AlertCollapsible } from 'ui'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from 'ui/src/components/shadcn/ui/collapsible'
 ```
 
 ```tsx
-<AlertCollapsible trigger="Need help?">
-  <p>Content revealed when expanded.</p>
-</AlertCollapsible>
+<Collapsible>
+  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+  <CollapsibleContent>
+    <p>Content revealed when expanded.</p>
+  </CollapsibleContent>
+</Collapsible>
 ```
 
 ### Default open
 
 ```tsx
-<AlertCollapsible trigger="Details" defaultOpen>
-  <p>This section is expanded by default.</p>
-</AlertCollapsible>
+<Collapsible defaultOpen>
+  <CollapsibleTrigger>Details</CollapsibleTrigger>
+  <CollapsibleContent>
+    <p>This section is expanded by default.</p>
+  </CollapsibleContent>
+</Collapsible>
 ```
 
-### Variants
+### Animation
 
-Supports the same `variant` prop as `Alert`: `default`, `destructive`, and `warning`.
+Add animation classes to `CollapsibleContent` when animated open and close transitions are needed.
 
 ```tsx
-<AlertCollapsible trigger="Warning" variant="warning">
-  <p>Something needs attention.</p>
-</AlertCollapsible>
+<CollapsibleContent className="data-closed:animate-collapsible-up data-open:animate-collapsible-down">
+  <p>Content revealed when expanded.</p>
+</CollapsibleContent>
 ```

apps/design-system/content/docs/fragments/admonition.mdx

@@ -4,7 +4,7 @@ description: Displays a callout for user attention.
 fragment: true
 ---
 
-Admonition provides focus for situations that require a callout.
+Admonition provides the standard product callout pattern for situations that require user attention.
 
 <ComponentPreview
   name="admonition-demo"
@@ -13,7 +13,9 @@ Admonition provides focus for situations that require a callout.
   wide
 />
 
-Use Admonition instead of [Alert](../components/alert) unless you specifically need the primitives. If in doubt, stick with Admonition.
+Use Admonition instead of the low-level [Alert](../components/alert) primitive unless you specifically need custom composition. If in doubt, stick with Admonition.
+
+Use [Collapsible Alert](./collapsible-alert) when the callout needs to remain visible while optional detail can be expanded. Use [Collapsible](../components/collapsible) for generic disclosure behaviour that is not itself a callout.
 
 Use `title` for the heading slot when the callout needs its own heading. `title` is optional: short callouts may use `description` without a title when nearby content already provides enough context.
 

apps/design-system/content/docs/fragments/collapsible-alert.mdx

@@ -0,0 +1,43 @@
+---
+title: Collapsible Alert
+description: An alert-styled block with a collapsible content section, toggled by an icon button.
+fragment: true
+---
+
+Collapsible Alert combines an Alert-style container with a collapsible content section. Use it when the callout itself needs to stay visible while optional detail can be expanded.
+
+Use Collapsible Alert when the disclosure is itself a callout. It owns the alert styling, padding, trigger treatment, and toggle button. Use [Collapsible](../components/collapsible) instead when you only need generic reveal and hide behaviour and the surrounding layout is not an alert.
+
+For non-expandable product callouts, use [Admonition](./admonition). Use the low-level [Alert](../components/alert) primitive only when a wrapper or bespoke composition needs direct control over the alert structure.
+
+<ComponentPreview name="collapsible-alert-demo" peekCode wide />
+
+## Usage
+
+```tsx
+import { CollapsibleAlert } from 'ui-patterns/collapsible-alert'
+```
+
+```tsx
+<CollapsibleAlert trigger="Need help?">
+  <p>Content revealed when expanded.</p>
+</CollapsibleAlert>
+```
+
+### Default open
+
+```tsx
+<CollapsibleAlert trigger="Details" defaultOpen>
+  <p>This section is expanded by default.</p>
+</CollapsibleAlert>
+```
+
+### Variants
+
+Supports the same `variant` prop as Alert: `default`, `destructive`, and `warning`.
+
+```tsx
+<CollapsibleAlert trigger="Warning" variant="warning">
+  <p>Something needs attention.</p>
+</CollapsibleAlert>
+```

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

@@ -1,11 +0,0 @@
-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/default/example/alert-demo.tsx

@@ -1,14 +1,12 @@
 import { Terminal } from 'lucide-react'
-import { Alert_Shadcn_, AlertDescription_Shadcn_, AlertTitle_Shadcn_ } from 'ui'
+import { Alert, AlertDescription, AlertTitle } from 'ui/src/components/shadcn/ui/alert'
 
 export default function AlertDemo() {
   return (
-    <Alert_Shadcn_>
+    <Alert>
       <Terminal size={16} />
-      <AlertTitle_Shadcn_>Heads up!</AlertTitle_Shadcn_>
-      <AlertDescription_Shadcn_>
-        You can also add components to your app using the CLI.
-      </AlertDescription_Shadcn_>
-    </Alert_Shadcn_>
+      <AlertTitle>Heads up!</AlertTitle>
+      <AlertDescription>You can also add components to your app using the CLI.</AlertDescription>
+    </Alert>
   )
 }

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

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

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

@@ -1,33 +1,33 @@
 'use client'
 
-import { ChevronsUpDown, Plus, X } from 'lucide-react'
+import { ChevronsUpDown } from 'lucide-react'
 import * as React from 'react'
+import { Button } from 'ui'
 import {
-  Button,
-  Collapsible_Shadcn_,
-  CollapsibleContent_Shadcn_,
-  CollapsibleTrigger_Shadcn_,
-} from 'ui'
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from 'ui/src/components/shadcn/ui/collapsible'
 
 export default function CollapsibleDemo() {
   const [isOpen, setIsOpen] = React.useState(false)
 
   return (
-    <Collapsible_Shadcn_ open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
+    <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
       <div className="flex items-center justify-between space-x-4 px-4">
         <h4 className="text-sm font-semibold">@peduarte starred 3 repositories</h4>
-        <CollapsibleTrigger_Shadcn_ asChild>
+        <CollapsibleTrigger asChild>
           <Button type="outline" size="medium" className="w-9 p-0">
             <ChevronsUpDown className="h-4 w-4" />
             <span className="sr-only">Toggle</span>
           </Button>
-        </CollapsibleTrigger_Shadcn_>
+        </CollapsibleTrigger>
       </div>
       <div className="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/primitives</div>
-      <CollapsibleContent_Shadcn_ className="space-y-2">
+      <CollapsibleContent className="space-y-2">
         <div className="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/colors</div>
         <div className="rounded-md border px-4 py-3 font-mono text-sm">@stitches/react</div>
-      </CollapsibleContent_Shadcn_>
-    </Collapsible_Shadcn_>
+      </CollapsibleContent>
+    </Collapsible>
   )
 }

apps/design-system/registry/examples.ts

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

apps/studio/components/interfaces/SignIn/SessionTimeoutModal.tsx

@@ -3,7 +3,6 @@ import { SupportCategories } from '@supabase/shared-types/out/constants'
 import { useEffect } from 'react'
 import { toast } from 'sonner'
 import {
-  AlertCollapsible,
   AlertDialog,
   AlertDialogAction,
   AlertDialogCancel,
@@ -14,6 +13,7 @@ import {
   AlertDialogTitle,
   Button,
 } from 'ui'
+import { CollapsibleAlert } from 'ui-patterns/collapsible-alert'
 
 import { SupportLink } from '../Support/SupportLink'
 import { InlineLink, InlineLinkClassName } from '@/components/ui/InlineLink'
@@ -61,7 +61,7 @@ export const SessionTimeoutModal = ({
           <AlertDialogDescription asChild>
             <div className="space-y-4">
               <p>Please sign in again to continue.</p>
-              <AlertCollapsible trigger="Having trouble?">
+              <CollapsibleAlert trigger="Having trouble?">
                 <div className="space-y-3 text-foreground-light">
                   <p>
                     Try a different browser or disable extensions that block network requests. If
@@ -93,7 +93,7 @@ export const SessionTimeoutModal = ({
                     from your session to help us investigate.
                   </p>
                 </div>
-              </AlertCollapsible>
+              </CollapsibleAlert>
             </div>
           </AlertDialogDescription>
         </AlertDialogHeader>

packages/ui-patterns/package.json

@@ -714,6 +714,10 @@
       "import": "./src/consent.tsx",
       "types": "./src/consent.tsx"
     },
+    "./collapsible-alert": {
+      "import": "./src/collapsible-alert.tsx",
+      "types": "./src/collapsible-alert.tsx"
+    },
     "./form/FormItemLayout/FormItemLayout": {
       "import": "./src/form/FormItemLayout/FormItemLayout.tsx",
       "types": "./src/form/FormItemLayout/FormItemLayout.tsx"

packages/ui-patterns/src/collapsible-alert.tsx

@@ -3,19 +3,21 @@
 import { type VariantProps } from 'class-variance-authority'
 import { ChevronDown } from 'lucide-react'
 import * as React from 'react'
+import { Button, cn } from 'ui'
+import { alertVariants } from 'ui/src/components/shadcn/ui/alert'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from 'ui/src/components/shadcn/ui/collapsible'
 
-import { cn } from '../../lib/utils/cn'
-import { Button } from '../Button'
-import { alertVariants } from '../shadcn/ui/alert'
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../shadcn/ui/collapsible'
-
-export interface AlertCollapsibleProps
+export interface CollapsibleAlertProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>, VariantProps<typeof alertVariants> {
   trigger: React.ReactNode
   defaultOpen?: boolean
 }
 
-const AlertCollapsible = React.forwardRef<HTMLDivElement, AlertCollapsibleProps>(
+const CollapsibleAlert = React.forwardRef<HTMLDivElement, CollapsibleAlertProps>(
   ({ className, variant = 'default', trigger, defaultOpen, children, ...props }, ref) => (
     <div
       ref={ref}
@@ -45,6 +47,6 @@ const AlertCollapsible = React.forwardRef<HTMLDivElement, AlertCollapsibleProps>
     </div>
   )
 )
-AlertCollapsible.displayName = 'AlertCollapsible'
+CollapsibleAlert.displayName = 'CollapsibleAlert'
 
-export { AlertCollapsible }
+export { CollapsibleAlert }

packages/ui/index.tsx

@@ -107,8 +107,6 @@ export {
   AlertDescription as AlertDescription_Shadcn_,
 } from './src/components/shadcn/ui/alert'
 
-export * from './src/components/AlertCollapsible'
-
 export {
   Field as Field_Shadcn_,
   FieldContent as FieldContent_Shadcn_,

packages/ui/src/components/AlertCollapsible/index.tsx

@@ -1,2 +0,0 @@
-export { AlertCollapsible } from './AlertCollapsible'
-export type { AlertCollapsibleProps } from './AlertCollapsible'