[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-dialog-close-only": {
+      name: "alert-dialog-close-only",
+      type: "components:example",
+      registryDependencies: ["alert-dialog","button"],
+      component: React.lazy(() => import("@/registry/default/example/alert-dialog-close-only")),
+      source: "",
+      files: ["registry/default/example/alert-dialog-close-only.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
     "aspect-ratio-demo": {
       name: "aspect-ratio-demo",
       type: "components:example",
@@ -159,6 +170,28 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: []
     },
+    "alert-dialog-destructive": {
+      name: "alert-dialog-destructive",
+      type: "components:example",
+      registryDependencies: ["alert-dialog","button"],
+      component: React.lazy(() => import("@/registry/default/example/alert-dialog-destructive")),
+      source: "",
+      files: ["registry/default/example/alert-dialog-destructive.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "alert-dialog-warning": {
+      name: "alert-dialog-warning",
+      type: "components:example",
+      registryDependencies: ["alert-dialog","button"],
+      component: React.lazy(() => import("@/registry/default/example/alert-dialog-warning")),
+      source: "",
+      files: ["registry/default/example/alert-dialog-warning.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
     "avatar-demo": {
       name: "avatar-demo",
       type: "components:example",
@@ -1237,6 +1270,17 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: []
     },
+    "sheet-nonmodal": {
+      name: "sheet-nonmodal",
+      type: "components:example",
+      registryDependencies: ["sheet"],
+      component: React.lazy(() => import("@/registry/default/example/sheet-nonmodal")),
+      source: "",
+      files: ["registry/default/example/sheet-nonmodal.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
     "sheet-side": {
       name: "sheet-side",
       type: "components:example",
@@ -1820,39 +1864,6 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: []
     },
-    "text-confirm-dialog-with-info-alert": {
-      name: "text-confirm-dialog-with-info-alert",
-      type: "components:example",
-      registryDependencies: undefined,
-      component: React.lazy(() => import("@/registry/default/example/text-confirm-dialog-with-info-alert")),
-      source: "",
-      files: ["registry/default/example/text-confirm-dialog-with-info-alert.tsx"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    },
-    "text-confirm-dialog-with-warning-alert": {
-      name: "text-confirm-dialog-with-warning-alert",
-      type: "components:example",
-      registryDependencies: undefined,
-      component: React.lazy(() => import("@/registry/default/example/text-confirm-dialog-with-warning-alert")),
-      source: "",
-      files: ["registry/default/example/text-confirm-dialog-with-warning-alert.tsx"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    },
-    "text-confirm-dialog-with-destructive-alert": {
-      name: "text-confirm-dialog-with-destructive-alert",
-      type: "components:example",
-      registryDependencies: undefined,
-      component: React.lazy(() => import("@/registry/default/example/text-confirm-dialog-with-destructive-alert")),
-      source: "",
-      files: ["registry/default/example/text-confirm-dialog-with-destructive-alert.tsx"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    },
     "text-confirm-dialog-with-size": {
       name: "text-confirm-dialog-with-size",
       type: "components:example",
@@ -2458,46 +2469,13 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: []
     },
-    "modal-demo": {
-      name: "modal-demo",
-      type: "components:example",
-      registryDependencies: undefined,
-      component: React.lazy(() => import("@/registry/default/example/modal-demo")),
-      source: "",
-      files: ["registry/default/example/modal-demo.tsx"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    },
-    "modal-aligned-footer": {
-      name: "modal-aligned-footer",
-      type: "components:example",
-      registryDependencies: undefined,
-      component: React.lazy(() => import("@/registry/default/example/modal-aligned-footer")),
-      source: "",
-      files: ["registry/default/example/modal-aligned-footer.tsx"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    },
-    "modal-custom-footer": {
-      name: "modal-custom-footer",
+    "confirmation-modal-demo": {
+      name: "confirmation-modal-demo",
       type: "components:example",
       registryDependencies: undefined,
-      component: React.lazy(() => import("@/registry/default/example/modal-custom-footer")),
+      component: React.lazy(() => import("@/registry/default/example/confirmation-modal-demo")),
       source: "",
-      files: ["registry/default/example/modal-custom-footer.tsx"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    },
-    "modal-hide-footer": {
-      name: "modal-hide-footer",
-      type: "components:example",
-      registryDependencies: undefined,
-      component: React.lazy(() => import("@/registry/default/example/modal-hide-footer")),
-      source: "",
-      files: ["registry/default/example/modal-hide-footer.tsx"],
+      files: ["registry/default/example/confirmation-modal-demo.tsx"],
       category: "undefined",
       subcategory: "undefined",
       chunks: []
@@ -3005,7 +2983,7 @@ export const Index: Record<string, any> = {
       source: "",
       files: ["registry/default/example/copy-error-messages.tsx"],
       category: "Getting Started",
-        subcategory: "Copywriting",
+      subcategory: "Copywriting",
       chunks: []
     },
     "copy-success-messages": {
@@ -3060,7 +3038,7 @@ export const Index: Record<string, any> = {
       source: "",
       files: ["registry/default/example/copy-confirmations.tsx"],
       category: "Getting Started",
-        subcategory: "Copywriting",
+      subcategory: "Copywriting",
       chunks: []
     },
   },

apps/design-system/app/(app)/page.tsx

@@ -1,7 +1,7 @@
 import { HomepageSvgHandler } from '@/components/homepage-svg-handler'
-import Link from 'next/link'
+import { Auth, Database, Realtime } from 'icons/src/icons'
 import { Paintbrush } from 'lucide-react'
-import { Realtime, Database, Auth } from 'icons/src/icons'
+import Link from 'next/link'
 
 export default function Home() {
   return (
@@ -15,75 +15,77 @@ export default function Home() {
         </div>
 
         <div className="grid md:grid-cols-2 grid-cols-1 gap-4 w-full">
-          <Link href="/docs/components/atom-components" className="h-full flex">
+          <Link href="/docs/color-usage" className="h-full flex">
             <div className="p-6 gap-4 flex flex-col justify-between h-full w-full bg-surface-75 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
-              <div className="flex items-center justify-start min-h-[24px]">
-                <HomepageSvgHandler name="atoms" className="w-6 h-6" />
+              <div className="flex flex-col gap-2 min-h-[24px]">
+                <HomepageSvgHandler name="colours" className="w-6 h-6" />
               </div>
               <div>
-                <h3 className="font-medium text-foreground">Atom components</h3>
-                <p className="text-sm text-foreground-light">Building blocks of User interfaces</p>
+                <h3 className="font-medium text-foreground">Colors</h3>
+                <p className="text-sm text-foreground-light">Custom color palette for Supabase</p>
               </div>
             </div>
           </Link>
-          <Link href="/docs/fragments/fragment-components" className="h-full flex">
+
+          <Link href="/docs/icons" className="h-full flex">
             <div className="p-6 gap-4 flex flex-col justify-between h-full w-full bg-surface-75 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
-              <div className="flex items-center justify-start min-h-[24px]">
-                <HomepageSvgHandler name="fragments" className="w-6 h-6" />
+              <div className="flex items-center justify-start min-h-[24px] gap-3 text-brand">
+                <Realtime className="w-5 h-5" strokeWidth={1.5} stroke="currentColor" />
+                <Database className="w-5 h-5 opacity-60" strokeWidth={1.5} stroke="currentColor" />
+                <Auth className="w-5 h-5 opacity-30" strokeWidth={1.5} stroke="currentColor" />
               </div>
               <div>
-                <h3 className="font-medium text-foreground">Fragment components</h3>
-                <p className="text-sm text-foreground-light">Components assembled from Atoms</p>
+                <h3 className="font-medium text-foreground">Icons</h3>
+                <p className="text-sm text-foreground-light">Custom icons for Supabase</p>
               </div>
             </div>
           </Link>
-          <Link href="/docs/components/ui-patterns" className="h-full flex">
+
+          <Link href="/docs/theming" className="h-full flex">
             <div className="p-6 gap-4 flex flex-col justify-between h-full w-full bg-surface-75 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
-              <div className="flex items-center justify-start min-h-[24px]">
-                <HomepageSvgHandler name="ui-patterns" className="w-6 h-6" />
+              <div className="flex items-center justify-start min-h-[24px] text-brand">
+                <Paintbrush className="w-6 h-6" strokeWidth={1.5} stroke="currentColor" />
               </div>
               <div>
-                <h3 className="font-medium text-foreground">UI Patterns components</h3>
-                <p className="text-sm text-foreground-light">
-                  Components assembled from Atoms &amp; Fragments
-                </p>
+                <h3 className="font-medium text-foreground">Theming</h3>
+                <p className="text-sm text-foreground-light">Simple extensible theming system</p>
               </div>
             </div>
           </Link>
-          <Link href="/docs/color-usage" className="h-full flex">
+          <Link href="/docs/ui-patterns/introduction" className="h-full flex">
             <div className="p-6 gap-4 flex flex-col justify-between h-full w-full bg-surface-75 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
-              <div className="flex flex-col gap-2 min-h-[24px]">
-                <HomepageSvgHandler name="colours" className="w-6 h-6" />
+              <div className="flex items-center justify-start min-h-[24px]">
+                <HomepageSvgHandler name="ui-patterns" className="w-6 h-6" />
               </div>
               <div>
-                <h3 className="font-medium text-foreground">Colors</h3>
-                <p className="text-sm text-foreground-light">Building blocks of User interfaces</p>
+                <h3 className="font-medium text-foreground">UI patterns</h3>
+                <p className="text-sm text-foreground-light">
+                  Design guidelines for common interface patterns
+                </p>
               </div>
             </div>
           </Link>
 
-          <Link href="/docs/theming" className="h-full flex">
+          <Link href="/docs/fragments/introduction" className="h-full flex">
             <div className="p-6 gap-4 flex flex-col justify-between h-full w-full bg-surface-75 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
-              <div className="flex items-center justify-start min-h-[24px] text-brand">
-                <Paintbrush className="w-6 h-6" strokeWidth={1.5} stroke="currentColor" />
+              <div className="flex items-center justify-start min-h-[24px]">
+                <HomepageSvgHandler name="fragments" className="w-6 h-6" />
               </div>
               <div>
-                <h3 className="font-medium text-foreground">Theming</h3>
-                <p className="text-sm text-foreground-light">Simple extensible theming system</p>
+                <h3 className="font-medium text-foreground">Fragment components</h3>
+                <p className="text-sm text-foreground-light">Components assembled from atoms</p>
               </div>
             </div>
           </Link>
 
-          <Link href="/docs/icons" className="h-full flex">
+          <Link href="/docs/components/introduction" className="h-full flex">
             <div className="p-6 gap-4 flex flex-col justify-between h-full w-full bg-surface-75 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
-              <div className="flex items-center justify-start min-h-[24px] gap-3 text-brand">
-                <Realtime className="w-5 h-5" strokeWidth={1.5} stroke="currentColor" />
-                <Database className="w-5 h-5 opacity-60" strokeWidth={1.5} stroke="currentColor" />
-                <Auth className="w-5 h-5 opacity-30" strokeWidth={1.5} stroke="currentColor" />
+              <div className="flex items-center justify-start min-h-[24px]">
+                <HomepageSvgHandler name="atoms" className="w-6 h-6" />
               </div>
               <div>
-                <h3 className="font-medium text-foreground">Icons</h3>
-                <p className="text-sm text-foreground-light">Custom icons for Supabase</p>
+                <h3 className="font-medium text-foreground">Atom components</h3>
+                <p className="text-sm text-foreground-light">Building blocks of user interfaces</p>
               </div>
             </div>
           </Link>

apps/design-system/components/component-preview.tsx

@@ -1,18 +1,18 @@
 'use client'
 
-import * as React from 'react'
 import { Index } from '@/__registry__'
+import * as React from 'react'
 
+import { useConfig } from '@/hooks/use-config'
+import { styles } from '@/registry/styles'
+import { ChevronRight, Expand } from 'lucide-react'
 import {
   Button,
   CollapsibleContent_Shadcn_,
   CollapsibleTrigger_Shadcn_,
   Collapsible_Shadcn_,
   cn,
 } from 'ui'
-import { useConfig } from '@/hooks/use-config'
-import { styles } from '@/registry/styles'
-import { ChevronRight, Expand } from 'lucide-react'
 
 interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
   name: string
@@ -70,7 +70,7 @@ export function ComponentPreview({
     return (
       <>
         <div
-          className={cn('preview flex min-h-[350px] w-full justify-center p-10', {
+          className={cn('preview flex min-h-[256px] w-full justify-center p-10', {
             'items-center': align === 'center',
             'items-start': align === 'start',
             'items-end': align === 'end',