Merge branch 'main' into main

shadcn-ui · Aug 17, 2023 · 4be56fc · 4be56fc
2 parents df9674d + 9441130
commit 4be56fc
Show file tree

Hide file tree

Showing 10 changed files with 201 additions and 117 deletions.
diff --git a/apps/www/app/examples/cards/components/payment-method.tsx b/apps/www/app/examples/cards/components/payment-method.tsx
@@ -30,42 +30,52 @@ export function DemoPaymentMethod() {
       </CardHeader>
       <CardContent className="grid gap-6">
         <RadioGroup defaultValue="card" className="grid grid-cols-3 gap-4">
-          <Label
-            htmlFor="card"
-            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
-          >
-            <RadioGroupItem value="card" id="card" className="sr-only" />
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              className="mb-3 h-6 w-6"
+          <div>
+            <RadioGroupItem value="card" id="card" className="peer sr-only" />
+            <Label
+              htmlFor="card"
+              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
             >
-              <rect width="20" height="14" x="2" y="5" rx="2" />
-              <path d="M2 10h20" />
-            </svg>
-            Card
-          </Label>
-          <Label
-            htmlFor="paypal"
-            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
-          >
-            <RadioGroupItem value="paypal" id="paypal" className="sr-only" />
-            <Icons.paypal className="mb-3 h-6 w-6" />
-            Paypal
-          </Label>
-          <Label
-            htmlFor="apple"
-            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
-          >
-            <RadioGroupItem value="apple" id="apple" className="sr-only" />
-            <Icons.apple className="mb-3 h-6 w-6" />
-            Apple
-          </Label>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="mb-3 h-6 w-6"
+              >
+                <rect width="20" height="14" x="2" y="5" rx="2" />
+                <path d="M2 10h20" />
+              </svg>
+              Card
+            </Label>
+          </div>
+          <div>
+            <RadioGroupItem
+              value="paypal"
+              id="paypal"
+              className="peer sr-only"
+            />
+            <Label
+              htmlFor="paypal"
+              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+            >
+              <Icons.paypal className="mb-3 h-6 w-6" />
+              Paypal
+            </Label>
+          </div>
+          <div>
+            <RadioGroupItem value="apple" id="apple" className="peer sr-only" />
+            <Label
+              htmlFor="apple"
+              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+            >
+              <Icons.apple className="mb-3 h-6 w-6" />
+              Apple
+            </Label>
+          </div>
         </RadioGroup>
         <div className="grid gap-2">
           <Label htmlFor="name">Name</Label>

diff --git a/apps/www/config/site.ts b/apps/www/config/site.ts
@@ -6,7 +6,7 @@ export const siteConfig = {
     "Beautifully designed components built with Radix UI and Tailwind CSS.",
   links: {
     twitter: "https://twitter.com/shadcn",
-    github: "https://github.com/shadcn/ui",
+    github: "https://github.com/shadcn-ui/ui",
   },
 }
 

diff --git a/apps/www/content/docs/components/aspect-ratio.mdx b/apps/www/content/docs/components/aspect-ratio.mdx
@@ -58,11 +58,7 @@ import { AspectRatio } from "@/components/ui/aspect-ratio"
 ```tsx
 <div className="w-[450px]">
   <AspectRatio ratio={16 / 9}>
-    <Image
-      src="..."
-      alt=Image""
-      className="rounded-md object-cover"
-    />
+    <Image src="..." alt="Image" className="rounded-md object-cover" />
   </AspectRatio>
 </div>
 ```
diff --git a/apps/www/content/docs/components/form.mdx b/apps/www/content/docs/components/form.mdx
@@ -73,6 +73,14 @@ const form = useForm()
 
 ## Installation
 
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
 <Steps>
 
 ### Command
@@ -83,6 +91,30 @@ npx shadcn-ui@latest add form
 
 </Steps>
 
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-label @radix-ui/react-slot react-hook-form
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="form" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
 ## Usage
 
 <Steps>

diff --git a/apps/www/content/docs/components/toast.mdx b/apps/www/content/docs/components/toast.mdx
@@ -61,8 +61,18 @@ npm install @radix-ui/react-toast
 
 <Step>Copy and paste the following code into your project.</Step>
 
+`toast.tsx`
+
 <ComponentSource name="toast" />
 
+`toaster.tsx`
+
+<ComponentSource name="toast" fileName="toaster" />
+
+`use-toast.tsx`
+
+<ComponentSource name="toast" fileName="use-toast" />
+
 <Step>Update the import paths to match your project setup.</Step>
 
 <Step>Add the Toaster component</Step>

diff --git a/apps/www/lib/rehype-component.ts b/apps/www/lib/rehype-component.ts
@@ -10,19 +10,41 @@ import { styles } from "../registry/styles"
 export function rehypeComponent() {
   return async (tree: UnistTree) => {
     visit(tree, (node: UnistNode) => {
-      const { value: src } = getNodeAttributeByName(node, "src") || {}
+      // src prop overrides both name and fileName.
+      const { value: srcPath } =
+        (getNodeAttributeByName(node, "src") as {
+          name: string
+          value?: string
+          type?: string
+        }) || {}
 
       if (node.name === "ComponentSource") {
         const name = getNodeAttributeByName(node, "name")?.value as string
+        const fileName = getNodeAttributeByName(node, "fileName")?.value as
+          | string
+          | undefined
 
-        if (!name) {
+        if (!name && !srcPath) {
           return null
         }
 
         try {
           for (const style of styles) {
-            const component = Index[style.name][name]
-            const src = component.files[0]
+            let src: string
+
+            if (srcPath) {
+              src = srcPath
+            } else {
+              const component = Index[style.name][name]
+              src = fileName
+                ? component.files.find((file: string) => {
+                    return (
+                      file.endsWith(`${fileName}.tsx`) ||
+                      file.endsWith(`${fileName}.ts`)
+                    )
+                  }) || component.files[0]
+                : component.files[0]
+            }
 
             // Read the source file.
             const filePath = path.join(process.cwd(), src)

diff --git a/apps/www/public/registry/themes.css b/apps/www/public/registry/themes.css
@@ -6,7 +6,7 @@
     --muted: 240 4.8% 95.9%;
     --muted-foreground: 240 3.8% 46.1%;
 
-    --popover: 0 0% 100%;;
+    --popover: 0 0% 100%;
     --popover-foreground: 240 10% 3.9%;
 
     --card: 0 0% 100%;

diff --git a/apps/www/registry/default/example/cards/payment-method.tsx b/apps/www/registry/default/example/cards/payment-method.tsx
@@ -32,57 +32,65 @@ export function CardsPaymentMethod() {
       </CardHeader>
       <CardContent className="grid gap-6">
         <RadioGroup defaultValue="card" className="grid grid-cols-3 gap-4">
-          <Label
-            htmlFor="card"
-            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
-          >
+          <div>
             <RadioGroupItem
               value="card"
               id="card"
-              className="sr-only"
+              className="peer sr-only"
               aria-label="Card"
             />
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              className="mb-3 h-6 w-6"
+            <Label
+              htmlFor="card"
+              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
             >
-              <rect width="20" height="14" x="2" y="5" rx="2" />
-              <path d="M2 10h20" />
-            </svg>
-            Card
-          </Label>
-          <Label
-            htmlFor="paypal"
-            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
-          >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="mb-3 h-6 w-6"
+              >
+                <rect width="20" height="14" x="2" y="5" rx="2" />
+                <path d="M2 10h20" />
+              </svg>
+              Card
+            </Label>
+          </div>
+
+          <div>
             <RadioGroupItem
               value="paypal"
               id="paypal"
-              className="sr-only"
+              className="peer sr-only"
               aria-label="Paypal"
             />
-            <Icons.paypal className="mb-3 h-6 w-6" />
-            Paypal
-          </Label>
-          <Label
-            htmlFor="apple"
-            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
-          >
+            <Label
+              htmlFor="paypal"
+              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+            >
+              <Icons.paypal className="mb-3 h-6 w-6" />
+              Paypal
+            </Label>
+          </div>
+
+          <div>
             <RadioGroupItem
               value="apple"
               id="apple"
-              className="sr-only"
+              className="peer sr-only"
               aria-label="Apple"
             />
-            <Icons.apple className="mb-3 h-6 w-6" />
-            Apple
-          </Label>
+            <Label
+              htmlFor="apple"
+              className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+            >
+              <Icons.apple className="mb-3 h-6 w-6" />
+              Apple
+            </Label>
+          </div>
         </RadioGroup>
         <div className="grid gap-2">
           <Label htmlFor="name">Name</Label>