Merge branch 'main' into patch-1

.changeset/smart-pants-smile.md

@@ -0,0 +1,5 @@
+---
+"shadcn-ui": patch
+---
+
+use jsconfig for non-ts projects

.github/workflows/code-check.yml

@@ -7,7 +7,7 @@ on:
 jobs:
   lint:
     runs-on: ubuntu-latest
-    name: Lint
+    name: pnpm lint
     steps:
       - uses: actions/checkout@v3
         with:
@@ -43,7 +43,7 @@ jobs:
 
   format:
     runs-on: ubuntu-latest
-    name: Format
+    name: pnpm format:check
     steps:
       - uses: actions/checkout@v3
         with:
@@ -81,7 +81,7 @@ jobs:
 
   tsc:
     runs-on: ubuntu-latest
-    name: TypeScript
+    name: pnpm typecheck
     steps:
       - uses: actions/checkout@v3
         with:

.github/workflows/test.yml

@@ -7,7 +7,7 @@ on:
 jobs:
   test:
     runs-on: ubuntu-latest
-    name: Test
+    name: pnpm test
     steps:
       - uses: actions/checkout@v3
         with:

CONTRIBUTING.md

@@ -45,15 +45,31 @@ packages
 
 ## Development
 
-### Start by cloning the repository:
+### Fork this repo
 
+You can fork this repo by clicking the fork button in the top right corner of this page.
+
+### Clone on your local machine
+
+```bash
+git clone https://github.com/your-username/ui.git
 ```
-git clone [email protected]:shadcn-ui/ui.git
+
+### Navigate to project directory
+
+```bash
+cd ui
 ```
 
-### Install dependencies
+### Create a new Branch
 
+```bash
+git checkout -b my-new-branch
 ```
+
+### Install dependencies
+
+```bash
 pnpm install
 ```
 
@@ -65,13 +81,13 @@ You can use the `pnpm --filter=[WORKSPACE]` command to start the development pro
 
 1. To run the `ui.shadcn.com` website:
 
-```
+```bash
 pnpm --filter=www dev
 ```
 
 2. To run the `shadcn-ui` package:
 
-```
+```bash
 pnpm --filter=shadcn-ui dev
 ```
 
@@ -134,13 +150,10 @@ the following categories:
 
   e.g. `feat(components): add new prop to the avatar component`
 
-
 If you are interested in the detailed specification you can visit
 https://www.conventionalcommits.org/ or check out the
 [Angular Commit Message Guidelines](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#-commit-message-guidelines).
 
-
-
 ## Requests for new components
 
 If you have a request for a new component, please open a discussion on GitHub. We'll be happy to help you out.

apps/www/__registry__/index.tsx

@@ -705,13 +705,27 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/example/scroll-area-demo")),
       files: ["registry/default/example/scroll-area-demo.tsx"],
     },
+    "scroll-area-horizontal-demo": {
+      name: "scroll-area-horizontal-demo",
+      type: "components:example",
+      registryDependencies: ["scroll-area"],
+      component: React.lazy(() => import("@/registry/default/example/scroll-area-horizontal-demo")),
+      files: ["registry/default/example/scroll-area-horizontal-demo.tsx"],
+    },
     "select-demo": {
       name: "select-demo",
       type: "components:example",
       registryDependencies: ["select"],
       component: React.lazy(() => import("@/registry/default/example/select-demo")),
       files: ["registry/default/example/select-demo.tsx"],
     },
+    "select-scrollable": {
+      name: "select-scrollable",
+      type: "components:example",
+      registryDependencies: ["select"],
+      component: React.lazy(() => import("@/registry/default/example/select-scrollable")),
+      files: ["registry/default/example/select-scrollable.tsx"],
+    },
     "select-form": {
       name: "select-form",
       type: "components:example",
@@ -1721,13 +1735,27 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/new-york/example/scroll-area-demo")),
       files: ["registry/new-york/example/scroll-area-demo.tsx"],
     },
+    "scroll-area-horizontal-demo": {
+      name: "scroll-area-horizontal-demo",
+      type: "components:example",
+      registryDependencies: ["scroll-area"],
+      component: React.lazy(() => import("@/registry/new-york/example/scroll-area-horizontal-demo")),
+      files: ["registry/new-york/example/scroll-area-horizontal-demo.tsx"],
+    },
     "select-demo": {
       name: "select-demo",
       type: "components:example",
       registryDependencies: ["select"],
       component: React.lazy(() => import("@/registry/new-york/example/select-demo")),
       files: ["registry/new-york/example/select-demo.tsx"],
     },
+    "select-scrollable": {
+      name: "select-scrollable",
+      type: "components:example",
+      registryDependencies: ["select"],
+      component: React.lazy(() => import("@/registry/new-york/example/select-scrollable")),
+      files: ["registry/new-york/example/select-scrollable.tsx"],
+    },
     "select-form": {
       name: "select-form",
       type: "components:example",

apps/www/app/examples/music/components/menu.tsx

@@ -190,7 +190,7 @@ export function Menu() {
             <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
           </MenubarRadioGroup>
           <MenubarSeparator />
-          <MenubarItem inset>Manage Famliy...</MenubarItem>
+          <MenubarItem inset>Manage Family...</MenubarItem>
           <MenubarSeparator />
           <MenubarItem inset>Add Account...</MenubarItem>
         </MenubarContent>

apps/www/app/examples/music/components/podcast-empty-placeholder.tsx

@@ -35,7 +35,7 @@ export function PodcastEmptyPlaceholder() {
           You have not added any podcasts. Add one below.
         </p>
         <Dialog>
-          <DialogTrigger>
+          <DialogTrigger asChild>
             <Button size="sm" className="relative">
               Add Podcast
             </Button>

apps/www/components/icons.tsx

@@ -29,8 +29,14 @@ export const Icons = {
     </svg>
   ),
   twitter: (props: IconProps) => (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
-      <path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148a13.98 13.98 0 0 0 10.15 5.144 4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z" />
+    <svg
+      {...props}
+      height="23"
+      viewBox="0 0 1200 1227"
+      width="23"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" />
     </svg>
   ),
   gitHub: (props: IconProps) => (

apps/www/components/site-header.tsx

@@ -50,7 +50,7 @@ export function SiteHeader() {
                   "w-9 px-0"
                 )}
               >
-                <Icons.twitter className="h-4 w-4 fill-current" />
+                <Icons.twitter className="h-3 w-3 fill-current" />
                 <span className="sr-only">Twitter</span>
               </div>
             </Link>

apps/www/config/docs.ts

@@ -152,6 +152,11 @@ export const docsConfig: DocsConfig = {
           href: "/docs/dark-mode/astro",
           items: [],
         },
+        {
+          title: "Remix",
+          href: "/docs/dark-mode/remix",
+          items: [],
+        },
       ],
     },
     {

apps/www/content/docs/components/combobox.mdx

@@ -85,6 +85,7 @@ export function ComboboxDemo() {
             {frameworks.map((framework) => (
               <CommandItem
                 key={framework.value}
+                value={framework.value}
                 onSelect={(currentValue) => {
                   setValue(currentValue === value ? "" : currentValue)
                   setOpen(false)

apps/www/content/docs/components/form.mdx

@@ -141,6 +141,7 @@ Use the `useForm` hook from `react-hook-form` to create a form.
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
 import * as z from "zod"
 
 const formSchema = z.object({
@@ -177,6 +178,7 @@ We can now use the `<Form />` components to build our form.
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
 import * as z from "zod"
 
 import { Button } from "@/components/ui/button"

apps/www/content/docs/components/scroll-area.mdx

@@ -63,3 +63,9 @@ import { ScrollArea } from "@/components/ui/scroll-area"
   started laughing, they couldn't stop.
 </ScrollArea>
 ```
+
+## Examples
+
+### Horizontal Scrolling
+
+<ComponentPreview name="scroll-area-horizontal-demo" />

apps/www/content/docs/components/select.mdx

@@ -75,6 +75,10 @@ import {
 
 ## Examples
 
+### Scrollable
+
+<ComponentPreview name="select-scrollable" />
+
 ### Form
 
 <ComponentPreview name="select-form" />

apps/www/content/docs/dark-mode/index.mdx

@@ -43,6 +43,19 @@ description: Adding dark mode to your site.
     </svg>
     <p className="font-medium mt-2">Astro</p>
   </LinkedCard>
+  <LinkedCard href="/docs/dark-mode/remix">
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="w-10 h-10"
+      fill="currentColor"
+    >
+      <title>Remix</title>
+      <path d="M21.511 18.508c.216 2.773.216 4.073.216 5.492H15.31c0-.309.006-.592.011-.878.018-.892.036-1.821-.109-3.698-.19-2.747-1.374-3.358-3.55-3.358H1.574v-5h10.396c2.748 0 4.122-.835 4.122-3.049 0-1.946-1.374-3.125-4.122-3.125H1.573V0h11.541c6.221 0 9.313 2.938 9.313 7.632 0 3.511-2.176 5.8-5.114 6.182 2.48.497 3.93 1.909 4.198 4.694ZM1.573 24v-3.727h6.784c1.133 0 1.379.84 1.379 1.342V24Z" />
+    </svg>
+    <p className="font-medium mt-2">Remix</p>
+  </LinkedCard>
 </div>
 
 ## Other frameworks