Merge branch 'main' into aakash19here/tooltip-fix

shadcn-ui · Jun 29, 2024 · d6427c9 · d6427c9
2 parents b9af8c7 + 06cc0cd
commit d6427c9
Show file tree

Hide file tree

Showing 49 changed files with 3,183 additions and 3,529 deletions.
diff --git a/apps/www/app/(app)/examples/layout.tsx b/apps/www/app/(app)/examples/layout.tsx
@@ -23,43 +23,38 @@ interface ExamplesLayoutProps {
 
 export default function ExamplesLayout({ children }: ExamplesLayoutProps) {
   return (
-    <>
-      <div className="container relative">
-        <PageHeader>
-          <Announcement />
-          <PageHeaderHeading className="hidden md:block">
-            Check out some examples
-          </PageHeaderHeading>
-          <PageHeaderHeading className="md:hidden">Examples</PageHeaderHeading>
-          <PageHeaderDescription>
-            Dashboard, cards, authentication. Some examples built using the
-            components. Use this as a guide to build your own.
-          </PageHeaderDescription>
-          <PageActions>
-            <Link
-              href="/docs"
-              className={cn(buttonVariants(), "rounded-[6px]")}
-            >
-              Get Started
-            </Link>
-            <Link
-              href="/components"
-              className={cn(
-                buttonVariants({ variant: "outline" }),
-                "rounded-[6px]"
-              )}
-            >
-              Components
-            </Link>
-          </PageActions>
-        </PageHeader>
-        <section>
-          <ExamplesNav />
-          <div className="overflow-hidden rounded-[0.5rem] border bg-background shadow-md md:shadow-xl">
-            {children}
-          </div>
-        </section>
-      </div>
-    </>
+    <div className="container relative">
+      <PageHeader>
+        <Announcement />
+        <PageHeaderHeading className="hidden md:block">
+          Check out some examples
+        </PageHeaderHeading>
+        <PageHeaderHeading className="md:hidden">Examples</PageHeaderHeading>
+        <PageHeaderDescription>
+          Dashboard, cards, authentication. Some examples built using the
+          components. Use this as a guide to build your own.
+        </PageHeaderDescription>
+        <PageActions>
+          <Link href="/docs" className={cn(buttonVariants(), "rounded-[6px]")}>
+            Get Started
+          </Link>
+          <Link
+            href="/components"
+            className={cn(
+              buttonVariants({ variant: "outline" }),
+              "rounded-[6px]"
+            )}
+          >
+            Components
+          </Link>
+        </PageActions>
+      </PageHeader>
+      <section>
+        <ExamplesNav />
+        <div className="overflow-hidden rounded-[0.5rem] border bg-background shadow">
+          {children}
+        </div>
+      </section>
+    </div>
   )
 }
diff --git a/apps/www/app/(app)/examples/playground/components/model-selector.tsx b/apps/www/app/(app)/examples/playground/components/model-selector.tsx
@@ -149,7 +149,7 @@ function ModelItem({ model, isSelected, onSelect, onPeek }: ModelItemProps) {
       key={model.id}
       onSelect={onSelect}
       ref={ref}
-      className="aria-selected:bg-primary aria-selected:text-primary-foreground"
+      className="data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground"
     >
       {model.name}
       <CheckIcon

diff --git a/apps/www/app/(app)/page.tsx b/apps/www/app/(app)/page.tsx
@@ -58,7 +58,7 @@ export default function IndexPage() {
         />
       </section>
       <section className="hidden md:block">
-        <div className="overflow-hidden rounded-lg border bg-background shadow-lg">
+        <div className="overflow-hidden rounded-lg border bg-background shadow">
           <MailPage />
         </div>
       </section>

diff --git a/apps/www/components/block-toolbar.tsx b/apps/www/components/block-toolbar.tsx
@@ -113,11 +113,11 @@ export function BlockToolbar({
           {block.hasLiftMode && (
             <>
               <div className="flex h-7 items-center justify-between gap-2">
-                <Label htmlFor="lift-mode" className="text-xs">
+                <Label htmlFor={`lift-mode-${block.name}`} className="text-xs">
                   Lift Mode
                 </Label>
                 <Switch
-                  id="lift-mode"
+                  id={`lift-mode-${block.name}`}
                   checked={isLiftMode}
                   onCheckedChange={(value) => {
                     resizablePanelRef.current?.resize(100)

diff --git a/apps/www/components/component-preview.tsx b/apps/www/components/component-preview.tsx
@@ -9,6 +9,7 @@ import { CopyButton, CopyWithClassNames } from "@/components/copy-button"
 import { Icons } from "@/components/icons"
 import { StyleSwitcher } from "@/components/style-switcher"
 import { ThemeWrapper } from "@/components/theme-wrapper"
+import { V0Button } from "@/components/v0-button"
 import {
   Tabs,
   TabsContent,
@@ -22,6 +23,7 @@ interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
   extractClassname?: boolean
   extractedClassNames?: string
   align?: "center" | "start" | "end"
+  description?: string
 }
 
 export function ComponentPreview({
@@ -31,6 +33,7 @@ export function ComponentPreview({
   extractClassname,
   extractedClassNames,
   align = "center",
+  description,
   ...props
 }: ComponentPreviewProps) {
   const [config] = useConfig()
@@ -61,7 +64,7 @@ export function ComponentPreview({
     if (
       typeof Code?.props["data-rehype-pretty-code-fragment"] !== "undefined"
     ) {
-      const [, Button] = React.Children.toArray(
+      const [Button] = React.Children.toArray(
         Code.props.children
       ) as React.ReactElement[]
       return Button?.props?.value || Button?.props?.__rawString__ || null
@@ -93,14 +96,23 @@ export function ComponentPreview({
         <TabsContent value="preview" className="relative rounded-md border">
           <div className="flex items-center justify-between p-4">
             <StyleSwitcher />
-            {extractedClassNames ? (
-              <CopyWithClassNames
+            <div className="flex items-center gap-2">
+              {config.style === "default" && description ? (
+                <V0Button
+                  block={{
+                    code: codeString,
+                    name,
+                    style: config.style,
+                    description,
+                  }}
+                />
+              ) : null}
+              <CopyButton
                 value={codeString}
-                classNames={extractedClassNames}
+                variant="outline"
+                className="h-7 w-7 text-foreground opacity-100 hover:bg-muted hover:text-foreground [&_svg]:size-3.5"
               />
-            ) : (
-              codeString && <CopyButton value={codeString} />
-            )}
+            </div>
           </div>
           <ThemeWrapper defaultTheme="zinc">
             <div

diff --git a/apps/www/components/copy-button.tsx b/apps/www/components/copy-button.tsx
@@ -2,20 +2,20 @@
 
 import * as React from "react"
 import { DropdownMenuTriggerProps } from "@radix-ui/react-dropdown-menu"
-import { CheckIcon, CopyIcon } from "@radix-ui/react-icons"
+import { CheckIcon, ClipboardIcon } from "lucide-react"
 import { NpmCommands } from "types/unist"
 
 import { Event, trackEvent } from "@/lib/events"
 import { cn } from "@/lib/utils"
-import { Button } from "@/registry/new-york/ui/button"
+import { Button, ButtonProps } from "@/registry/new-york/ui/button"
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/registry/new-york/ui/dropdown-menu"
 
-interface CopyButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+interface CopyButtonProps extends ButtonProps {
   value: string
   src?: string
   event?: Event["name"]
@@ -32,6 +32,7 @@ export function CopyButton({
   value,
   className,
   src,
+  variant = "ghost",
   event,
   ...props
 }: CopyButtonProps) {
@@ -46,9 +47,9 @@ export function CopyButton({
   return (
     <Button
       size="icon"
-      variant="ghost"
+      variant={variant}
       className={cn(
-        "relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50",
+        "relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:size-3",
         className
       )}
       onClick={() => {
@@ -68,11 +69,7 @@ export function CopyButton({
       {...props}
     >
       <span className="sr-only">Copy</span>
-      {hasCopied ? (
-        <CheckIcon className="h-3 w-3" />
-      ) : (
-        <CopyIcon className="h-3 w-3" />
-      )}
+      {hasCopied ? <CheckIcon /> : <ClipboardIcon />}
     </Button>
   )
 }
@@ -116,7 +113,7 @@ export function CopyWithClassNames({
           {hasCopied ? (
             <CheckIcon className="h-3 w-3" />
           ) : (
-            <CopyIcon className="h-3 w-3" />
+            <ClipboardIcon className="h-3 w-3" />
           )}
           <span className="sr-only">Copy</span>
         </Button>
@@ -178,7 +175,7 @@ export function CopyNpmCommandButton({
           {hasCopied ? (
             <CheckIcon className="h-3 w-3" />
           ) : (
-            <CopyIcon className="h-3 w-3" />
+            <ClipboardIcon className="h-3 w-3" />
           )}
           <span className="sr-only">Copy</span>
         </Button>

diff --git a/apps/www/components/page-header.tsx b/apps/www/components/page-header.tsx
@@ -27,7 +27,7 @@ function PageHeaderHeading({
   return (
     <h1
       className={cn(
-        "text-center text-3xl font-bold leading-tight tracking-tighter md:text-6xl lg:leading-[1.1]",
+        "text-center text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]",
         className
       )}
       {...props}
@@ -42,7 +42,7 @@ function PageHeaderDescription({
   return (
     <Balance
       className={cn(
-        "max-w-[750px] text-center text-lg text-muted-foreground sm:text-xl",
+        "max-w-[750px] text-center text-lg font-light text-foreground",
         className
       )}
       {...props}

diff --git a/apps/www/content/docs/components/accordion.mdx b/apps/www/content/docs/components/accordion.mdx
@@ -10,6 +10,7 @@ links:
 <ComponentPreview
   name="accordion-demo"
   className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
+  description="An accordion with items"
 />
 
 ## Installation

diff --git a/apps/www/content/docs/components/alert-dialog.mdx b/apps/www/content/docs/components/alert-dialog.mdx
@@ -8,7 +8,10 @@ links:
   api: https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference
 ---
 
-<ComponentPreview name="alert-dialog-demo" />
+<ComponentPreview
+  name="alert-dialog-demo"
+  description="An alert dialog with cancel and continue buttons."
+/>
 
 ## Installation
 

diff --git a/apps/www/content/docs/components/alert.mdx b/apps/www/content/docs/components/alert.mdx
@@ -4,7 +4,10 @@ description: Displays a callout for user attention.
 component: true
 ---
 
-<ComponentPreview name="alert-demo" />
+<ComponentPreview
+  name="alert-demo"
+  description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
+/>
 
 ## Installation
 
@@ -58,8 +61,14 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 
 ### Default
 
-<ComponentPreview name="alert-demo" />
+<ComponentPreview
+  name="alert-demo"
+  description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
+/>
 
 ### Destructive
 
-<ComponentPreview name="alert-destructive" />
+<ComponentPreview
+  name="alert-destructive"
+  description="An alert with a destructive variant. The title says 'Delete this item?' and the description is 'This action cannot be undone.'."
+/>
diff --git a/apps/www/content/docs/components/avatar.mdx b/apps/www/content/docs/components/avatar.mdx
@@ -7,7 +7,7 @@ links:
   api: https://www.radix-ui.com/docs/primitives/components/avatar#api-reference
 ---
 
-<ComponentPreview name="avatar-demo" />
+<ComponentPreview name="avatar-demo" description="An avatar with a fallback." />
 
 ## Installation
 

diff --git a/apps/www/content/docs/components/badge.mdx b/apps/www/content/docs/components/badge.mdx
@@ -4,7 +4,7 @@ description: Displays a badge or a component that looks like a badge.
 component: true
 ---
 
-<ComponentPreview name="badge-demo" />
+<ComponentPreview name="badge-demo" description="A badge" />
 
 ## Installation
 
@@ -64,22 +64,28 @@ import { badgeVariants } from "@/components/ui/badge"
 
 ### Default
 
-<ComponentPreview name="badge-demo" />
+<ComponentPreview name="badge-demo" description="A badge" />
 
 ---
 
 ### Secondary
 
-<ComponentPreview name="badge-secondary" />
+<ComponentPreview
+  name="badge-secondary"
+  description="A badge using secondary as variant."
+/>
 
 ---
 
 ### Outline
 
-<ComponentPreview name="badge-outline" />
+<ComponentPreview
+  name="badge-outline"
+  description="A badge using outline as variant."
+/>
 
 ---
 
 ### Destructive
 
-<ComponentPreview name="badge-destructive" />
+<ComponentPreview name="badge-destructive" description="A destructive badge." />