[pull] master from supabase:master

apps/design-system/__registry__/index.tsx

@@ -2975,5 +2975,93 @@ export const Index: Record<string, any> = {
       subcategory: "Composed",
       chunks: []
     },
+    "copy-button-verbs": {
+      name: "copy-button-verbs",
+      type: "components:example",
+      registryDependencies: ["button"],
+      component: React.lazy(() => import("@/registry/default/example/copy-button-verbs")),
+      source: "",
+      files: ["registry/default/example/copy-button-verbs.tsx"],
+      category: "Getting Started",
+      subcategory: "Copywriting",
+      chunks: []
+    },
+    "copy-form-labels": {
+      name: "copy-form-labels",
+      type: "components:example",
+      registryDependencies: ["form"],
+      component: React.lazy(() => import("@/registry/default/example/copy-form-labels")),
+      source: "",
+      files: ["registry/default/example/copy-form-labels.tsx"],
+      category: "Getting Started",
+      subcategory: "Copywriting",
+      chunks: []
+    },
+    "copy-error-messages": {
+      name: "copy-error-messages",
+      type: "components:example",
+      registryDependencies: ["form"],
+      component: React.lazy(() => import("@/registry/default/example/copy-error-messages")),
+      source: "",
+      files: ["registry/default/example/copy-error-messages.tsx"],
+      category: "Getting Started",
+        subcategory: "Copywriting",
+      chunks: []
+    },
+    "copy-success-messages": {
+      name: "copy-success-messages",
+      type: "components:example",
+      registryDependencies: ["form"],
+      component: React.lazy(() => import("@/registry/default/example/copy-success-messages")),
+      source: "",
+      files: ["registry/default/example/copy-success-messages.tsx"],
+      category: "Getting Started",
+      subcategory: "Copywriting",
+      chunks: []
+    },
+    "copy-tooltips": {
+      name: "copy-tooltips",
+      type: "components:example",
+      registryDependencies: ["tooltip"],
+      component: React.lazy(() => import("@/registry/default/example/copy-tooltips")),
+      source: "",
+      files: ["registry/default/example/copy-tooltips.tsx"],
+      category: "Getting Started",
+      subcategory: "Copywriting",
+      chunks: []
+    },
+    "copy-loading-states": {
+      name: "copy-loading-states",
+      type: "components:example",
+      registryDependencies: ["loading-state"],
+      component: React.lazy(() => import("@/registry/default/example/copy-loading-states")),
+      source: "",
+      files: ["registry/default/example/copy-loading-states.tsx"],
+      category: "Getting Started",
+      subcategory: "Copywriting",
+      chunks: []
+    },
+    "copy-empty-states": {
+      name: "copy-empty-states",
+      type: "components:example",
+      registryDependencies: ["empty-state"],
+      component: React.lazy(() => import("@/registry/default/example/copy-empty-states")),
+      source: "",
+      files: ["registry/default/example/copy-empty-states.tsx"],
+      category: "Getting Started",
+      subcategory: "Copywriting",
+      chunks: []
+    },
+    "copy-confirmations": {
+      name: "copy-confirmations",
+      type: "components:example",
+      registryDependencies: ["confirmation"],
+      component: React.lazy(() => import("@/registry/default/example/copy-confirmations")),
+      source: "",
+      files: ["registry/default/example/copy-confirmations.tsx"],
+      category: "Getting Started",
+        subcategory: "Copywriting",
+      chunks: []
+    },
   },
 }

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

@@ -23,6 +23,7 @@ interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
   showGrid?: boolean
   showDottedGrid?: boolean
   wide?: boolean
+  hideCode?: boolean
 }
 
 export function ComponentPreview({
@@ -36,6 +37,7 @@ export function ComponentPreview({
   showGrid = false,
   showDottedGrid = true,
   wide = false,
+  hideCode = false,
   ...props
 }: ComponentPreviewProps) {
   const [config] = useConfig()
@@ -136,7 +138,10 @@ export function ComponentPreview({
   return (
     <div className={cn('mt-4 mb-12', wideClasses)}>
       <div
-        className={cn('relative rounded-tl-md rounded-tr-md border-t border-l border-r bg-studio')}
+        className={cn('relative bg-studio', {
+          'rounded-tl-md rounded-tr-md border-t border-l border-r': !hideCode,
+          'rounded-md border': hideCode,
+        })}
       >
         {showGrid && (
           <div className="pointer-events-none absolute h-full w-full bg-[linear-gradient(to_right,hsla(var(--foreground-default)/0.02)_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
@@ -146,42 +151,44 @@ export function ComponentPreview({
         )}
         <div className="z-10 relative">{ComponentPreview}</div>
       </div>
-      <Collapsible_Shadcn_>
-        <CollapsibleTrigger_Shadcn_
-          className={`
-            flex 
-            gap-3 items-center 
-            w-full
-            font-mono
-            text-xs 
-            text-foreground-light
-            px-4 py-4 
-            border border-r 
-            group
-            data-[state=closed]:rounded-bl-md data-[state=closed]:rounded-br-md
-
-        `}
-        >
-          <ChevronRight
-            className="transition-all group-data-[state=open]:rotate-90 text-foreground-lighter"
-            size={14}
-          />
-          View code
-        </CollapsibleTrigger_Shadcn_>
-        <CollapsibleContent_Shadcn_ className="transition-all">
-          <div
-            className={cn(
-              'relative',
-              'w-full rounded-md [&_pre]:my-0',
-              '[&_pre]:overflow-auto',
-              '[&_pre]:max-h-[320px]',
-              '[&_pre]:rounded-tr-none [&_pre]:rounded-tl-none [&_pre]:border-t-transparent'
-            )}
+      {!hideCode && (
+        <Collapsible_Shadcn_>
+          <CollapsibleTrigger_Shadcn_
+            className={`
+              flex 
+              gap-3 items-center 
+              w-full
+              font-mono
+              text-xs 
+              text-foreground-light
+              px-4 py-4 
+              border border-r 
+              group
+              data-[state=closed]:rounded-bl-md data-[state=closed]:rounded-br-md
+
+          `}
           >
-            {Code}
-          </div>
-        </CollapsibleContent_Shadcn_>
-      </Collapsible_Shadcn_>
+            <ChevronRight
+              className="transition-all group-data-[state=open]:rotate-90 text-foreground-lighter"
+              size={14}
+            />
+            View code
+          </CollapsibleTrigger_Shadcn_>
+          <CollapsibleContent_Shadcn_ className="transition-all">
+            <div
+              className={cn(
+                'relative',
+                'w-full rounded-md [&_pre]:my-0',
+                '[&_pre]:overflow-auto',
+                '[&_pre]:max-h-[320px]',
+                '[&_pre]:rounded-tr-none [&_pre]:rounded-tl-none [&_pre]:border-t-transparent'
+              )}
+            >
+              {Code}
+            </div>
+          </CollapsibleContent_Shadcn_>
+        </Collapsible_Shadcn_>
+      )}
     </div>
   )
 }

apps/design-system/config/docs.ts

@@ -9,41 +9,48 @@ export const docsConfig: DocsConfig = {
   sidebarNav: [
     {
       title: 'Getting Started',
-      sortOrder: 'manual',
+      sortOrder: 'alphabetical',
       items: [
         {
           title: 'Introduction',
           href: '/docs',
+          priority: true,
           items: [],
         },
         {
-          title: 'Tailwind Classes',
-          href: '/docs/tailwind-classes',
+          title: 'Accessibility',
+          href: '/docs/accessibility',
           items: [],
         },
+
         {
           title: 'Color Usage',
           href: '/docs/color-usage',
           items: [],
         },
         {
-          title: 'Typography',
-          href: '/docs/typography',
+          title: 'Copywriting',
+          href: '/docs/copywriting',
           items: [],
         },
         {
-          title: 'Theming',
-          href: '/docs/theming',
+          title: 'Icons',
+          href: '/docs/icons',
           items: [],
         },
         {
-          title: 'Icons',
-          href: '/docs/icons',
+          title: 'Tailwind Classes',
+          href: '/docs/tailwind-classes',
           items: [],
         },
         {
-          title: 'Accessibility',
-          href: '/docs/accessibility',
+          title: 'Theming',
+          href: '/docs/theming',
+          items: [],
+        },
+        {
+          title: 'Typography',
+          href: '/docs/typography',
           items: [],
         },
       ],