Merge branch 'main' into patch-2

shadcn-ui · Dec 26, 2023 · b2a1cfc · b2a1cfc
2 parents 961d786 + 5eb33f7
commit b2a1cfc
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 35 deletions.
diff --git a/apps/www/app/examples/mail/components/account-switcher.tsx b/apps/www/app/examples/mail/components/account-switcher.tsx
@@ -32,9 +32,9 @@ export function AccountSwitcher({
     <Select defaultValue={selectedAccount} onValueChange={setSelectedAccount}>
       <SelectTrigger
         className={cn(
-          "flex flex-1 items-center gap-2 [&>span]:line-clamp-1 [&>span]:flex [&>span]:w-full [&>span]:items-center [&>span]:gap-1 [&>span]:truncate [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0",
+          "flex items-center gap-2 [&>span]:line-clamp-1 [&>span]:flex [&>span]:w-full [&>span]:items-center [&>span]:gap-1 [&>span]:truncate [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0",
           isCollapsed &&
-            "flex h-8 w-8 items-center justify-center p-0 [&>span]:w-auto [&>svg]:hidden"
+            "flex h-9 w-9 shrink-0 items-center justify-center p-0 [&>span]:w-auto [&>svg]:hidden"
         )}
         aria-label="Select account"
       >

diff --git a/apps/www/app/examples/mail/components/mail.tsx b/apps/www/app/examples/mail/components/mail.tsx
@@ -78,30 +78,12 @@ export function Mail({
               collapsed
             )}`
           }}
-          className={cn(isCollapsed && "transition-all duration-300 ease-in-out")}
+          className={cn(isCollapsed && "min-w-[50px] transition-all duration-300 ease-in-out")}
         >
-          <div className="flex items-center p-2">
-            <div
-            className="w-full"
-              // className={cn("w-full flex-1", isCollapsed ? "w-full" : "w-[80%]")}
-            >
-              <AccountSwitcher isCollapsed={isCollapsed} accounts={accounts} />
-            </div>
+          <div className={cn("flex h-[52px] items-center justify-center", isCollapsed ? 'h-[52px]': 'px-2')}>
+            <AccountSwitcher isCollapsed={isCollapsed} accounts={accounts} />
           </div>
           <Separator />
-          <div className={cn(isCollapsed ? "block" : "hidden")}>
-            <Nav
-              isCollapsed={isCollapsed}
-              links={[
-                {
-                  title: "Compose",
-                  label: "",
-                  icon: PenBox,
-                  variant: "ghost",
-                },
-              ]}
-            />
-          </div>
           <Nav
             isCollapsed={isCollapsed}
             links={[

diff --git a/apps/www/app/examples/mail/components/nav.tsx b/apps/www/app/examples/mail/components/nav.tsx
@@ -27,7 +27,7 @@ export function Nav({ links, isCollapsed }: NavProps) {
       data-collapsed={isCollapsed}
       className="group flex flex-col gap-4 py-2 data-[collapsed=true]:py-2"
     >
-      <nav className="grid gap-1 px-2 group-[[data-collapsed=true]]:px-2">
+      <nav className="grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
         {links.map((link, index) =>
           isCollapsed ? (
             <Tooltip key={index} delayDuration={0}>
@@ -36,9 +36,9 @@ export function Nav({ links, isCollapsed }: NavProps) {
                   href="#"
                   className={cn(
                     buttonVariants({ variant: link.variant, size: "icon" }),
-                    "h-8 w-8",
+                    "h-9 w-9",
                     link.variant === "default" &&
-                      "dark:bg-muted dark:text-muted-foreground"
+                      "dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white"
                   )}
                 >
                   <link.icon className="h-4 w-4" />
@@ -60,7 +60,8 @@ export function Nav({ links, isCollapsed }: NavProps) {
               href="#"
               className={cn(
                 buttonVariants({ variant: link.variant, size: "sm" }),
-                link.variant === "default" && "dark:bg-muted dark:text-white",
+                link.variant === "default" &&
+                  "dark:bg-muted dark:text-white dark:hover:bg-muted dark:hover:text-white",
                 "justify-start"
               )}
             >

diff --git a/apps/www/content/docs/components/drawer.mdx b/apps/www/content/docs/components/drawer.mdx
@@ -1,6 +1,6 @@
 ---
 title: Drawer
-description: An drawer component for React.
+description: A drawer component for React.
 component: true
 links:
   doc: https://github.com/emilkowalski/vaul
@@ -61,6 +61,7 @@ import {
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
+  DrawerFooter,
 } from "@/components/ui/drawer"
 ```
 

diff --git a/apps/www/content/docs/components/pagination.mdx b/apps/www/content/docs/components/pagination.mdx
@@ -49,7 +49,7 @@ import {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
-} from "@/components/ui/resizable"
+} from "@/components/ui/pagination"
 ```
 
 ```tsx

diff --git a/apps/www/content/docs/components/resizable.mdx b/apps/www/content/docs/components/resizable.mdx
@@ -62,11 +62,11 @@ import {
 ```
 
 ```tsx
-<ResizableGroup direction="horizontal">
+<ResizablePanelGroup direction="horizontal">
   <ResizablePanel>One</ResizablePanel>
   <ResizableHandle />
   <ResizablePanel>Two</ResizablePanel>
-</ResizableGroup>
+</ResizablePanelGroup>
 ```
 
 ## Examples
@@ -86,11 +86,11 @@ import {
 
 export default function Example() {
   return (
-    <ResizableGroup direction="vertical">
+    <ResizablePanelGroup direction="vertical">
       <ResizablePanel>One</ResizablePanel>
       <ResizableHandle />
       <ResizablePanel>Two</ResizablePanel>
-    </ResizableGroup>
+    </ResizablePanelGroup>
   )
 }
 ```
@@ -110,11 +110,11 @@ import {
 
 export default function Example() {
   return (
-    <ResizableGroup direction="vertical">
+    <ResizablePanelGroup direction="vertical">
       <ResizablePanel>One</ResizablePanel>
       <ResizableHandle withHandle />
       <ResizablePanel>Two</ResizablePanel>
-    </ResizableGroup>
+    </ResizablePanelGroup>
   )
 }
 ```