@mostrom/app-shell 0.1.0

package/src/components/patterns/p-command-6.tsx

@@ -0,0 +1,113 @@
+"use client"
+
+import { useState } from "react"
+import { Badge } from "@/components/reui/badge"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+
+const users = [
+  {
+    name: "Alex Johnson",
+    email: "alex@example.com",
+    avatar:
+      "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=96&h=96&dpr=2&q=80",
+    role: "Admin",
+  },
+  {
+    name: "Sarah Chen",
+    email: "sarah@example.com",
+    avatar:
+      "https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=96&h=96&dpr=2&q=80",
+    role: "Editor",
+  },
+  {
+    name: "David Kim",
+    email: "david@example.com",
+    avatar:
+      "https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?w=96&h=96&dpr=2&q=80",
+    role: "Viewer",
+  },
+  {
+    name: "Emma Wilson",
+    email: "emma@example.com",
+    avatar:
+      "https://images.unsplash.com/photo-1485893086445-ed75865251e0?w=96&h=96&dpr=2&q=80",
+    role: "Admin",
+  },
+  {
+    name: "Michael Rodriguez",
+    email: "michael@example.com",
+    avatar:
+      "https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?w=96&h=96&dpr=2&q=80",
+    role: "Editor",
+  },
+]
+
+export function Pattern() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)} variant="outline">
+        Search Users
+      </Button>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <Command className="**:data-[selected=true]:bg-muted **:data-selected:bg-transparent">
+          <CommandInput placeholder="Search by name or email..." />
+          <CommandList>
+            <CommandEmpty>No users found.</CommandEmpty>
+            <CommandGroup heading="Team Members">
+              {users.map((user) => (
+                <CommandItem key={user.email} className="gap-2 py-2">
+                  <Avatar className="size-6 shrink-0">
+                    <AvatarImage src={user.avatar} alt={user.name} />
+                    <AvatarFallback className="text-xs">
+                      {user.name
+                        .split(" ")
+                        .map((n) => n[0])
+                        .join("")}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex flex-1 flex-col">
+                    <span className="text-sm font-medium">{user.name}</span>
+                    <span className="text-muted-foreground text-xs">
+                      {user.email}
+                    </span>
+                  </div>
+                  <div className="ml-auto" data-slot="command-shortcut">
+                    <Badge
+                      variant={
+                        user.role === "Admin"
+                          ? "primary-light"
+                          : user.role === "Editor"
+                            ? "info-light"
+                            : "success-light"
+                      }
+                      size="sm"
+                    >
+                      {user.role}
+                    </Badge>
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </CommandDialog>
+    </>
+  )
+}

package/src/components/patterns/p-dialog-1.tsx

@@ -0,0 +1,56 @@
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+
+export function Pattern() {
+  return (
+    <div className="flex items-center justify-center">
+      <Dialog>
+        <form>
+          <DialogTrigger asChild>
+            <Button variant="outline">Basic Dialog</Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Edit profile</DialogTitle>
+              <DialogDescription>
+                Make changes to your profile here. Click save when you&apos;re
+                done. Your profile will be updated immediately.
+              </DialogDescription>
+            </DialogHeader>
+            <FieldGroup>
+              <Field>
+                <FieldLabel htmlFor="name-1">Name</FieldLabel>
+                <Input id="name-1" name="name" defaultValue="Pedro Duarte" />
+              </Field>
+              <Field>
+                <FieldLabel htmlFor="username-1">Username</FieldLabel>
+                <Input
+                  id="username-1"
+                  name="username"
+                  defaultValue="@peduarte"
+                />
+              </Field>
+            </FieldGroup>
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button variant="outline">Cancel</Button>
+              </DialogClose>
+              <Button type="submit">Save changes</Button>
+            </DialogFooter>
+          </DialogContent>
+        </form>
+      </Dialog>
+    </div>
+  )
+}

package/src/components/patterns/p-dropdown-menu-1.tsx

@@ -0,0 +1,38 @@
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function Pattern() {
+  return (
+    <div className="flex items-center justify-center">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" className="w-fit">
+            Open
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>My Account</DropdownMenuLabel>
+            <DropdownMenuItem>Profile</DropdownMenuItem>
+            <DropdownMenuItem>Billing</DropdownMenuItem>
+            <DropdownMenuItem>Settings</DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>GitHub</DropdownMenuItem>
+            <DropdownMenuItem>Support</DropdownMenuItem>
+            <DropdownMenuItem disabled>API</DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}

package/src/components/patterns/p-dropdown-menu-11.tsx

@@ -0,0 +1,122 @@
+import { Badge } from "@/components/reui/badge"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { BellIcon } from "lucide-react"
+
+const notifications = [
+  {
+    id: "1",
+    user: "Sarah",
+    avatar:
+      "https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=96&h=96&dpr=2&q=80",
+    initials: "SC",
+    action: "commented on",
+    target: "Design System v2",
+    time: "2 min ago",
+    unread: false,
+  },
+  {
+    id: "2",
+    user: "James Wilson",
+    avatar:
+      "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=96&h=96&dpr=2&q=80",
+    initials: "JW",
+    action: "shared",
+    target: "Q4 Report",
+    time: "1 hour ago",
+    unread: true,
+  },
+  {
+    id: "3",
+    user: "Emily Davis",
+    avatar:
+      "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=96&h=96&dpr=2&q=80",
+    initials: "ED",
+    action: "invited you to",
+    target: "Project Alpha",
+    time: "3 hours ago",
+    unread: false,
+  },
+]
+
+export function Pattern() {
+  return (
+    <div className="flex items-center justify-center">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" size="icon" className="relative">
+            <BellIcon aria-hidden="true" />
+            <Badge
+              variant="destructive"
+              size="sm"
+              className="absolute -top-1.5 -right-2 rounded-full px-1"
+              aria-hidden="true"
+            >
+              8
+            </Badge>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-80" align="end" sideOffset={8}>
+          <DropdownMenuGroup>
+            <DropdownMenuLabel className="flex items-center justify-between">
+              <span>Notifications</span>
+              <button className="text-foreground text-xs font-normal underline-offset-2 hover:underline">
+                Mark all as read
+              </button>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              {notifications.map((notification) => (
+                <DropdownMenuItem
+                  key={notification.id}
+                  className="flex items-start gap-2 py-1"
+                >
+                  <Avatar className="mt-0.5 size-6 shrink-0">
+                    <AvatarImage
+                      src={notification.avatar}
+                      alt={notification.user}
+                    />
+                    <AvatarFallback>{notification.initials}</AvatarFallback>
+                  </Avatar>
+                  <div className="flex flex-1 flex-col gap-px">
+                    <p className="leading-snug">
+                      <span className="font-medium">{notification.user}</span>{" "}
+                      <span className="text-muted-foreground">
+                        {notification.action}
+                      </span>{" "}
+                      <span className="font-medium">{notification.target}</span>
+                    </p>
+                    <span className="text-muted-foreground">
+                      {notification.time}
+                    </span>
+                  </div>
+                  {notification.unread && (
+                    <span className="bg-primary mt-2 size-1.5 shrink-0 rounded-full" />
+                  )}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="justify-center">
+              View all notifications
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}

package/src/components/patterns/p-dropdown-menu-14.tsx

@@ -0,0 +1,165 @@
+"use client"
+
+import { useState } from "react"
+import { Badge } from "@/components/reui/badge"
+
+import { cn } from "@/lib/utils"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { ChevronsUpDownIcon, SunIcon, MoonIcon, MonitorIcon, BuildingIcon, PhoneIcon, CheckIcon, SettingsIcon, LifeBuoyIcon, LogOutIcon } from "lucide-react"
+
+const statuses = [
+  { value: "available", label: "Available", color: "bg-green-500" },
+  { value: "away", label: "Away", color: "bg-amber-500" },
+  { value: "busy", label: "Busy", color: "bg-red-500" },
+  { value: "offline", label: "Offline", color: "bg-gray-400" },
+]
+
+export function Pattern() {
+  const [status, setStatus] = useState("available")
+  const [theme, setTheme] = useState("light")
+
+  const activeStatus = statuses.find((s) => s.value === status) || statuses[0]
+
+  return (
+    <div className="flex items-center justify-center">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" className="w-40">
+            <Avatar className="size-4">
+              <AvatarImage src="https://github.com/shadcn.png" />
+              <AvatarFallback>CN</AvatarFallback>
+            </Avatar>
+            <span className="text-sm font-medium">shadcn</span>
+
+            <ChevronsUpDownIcon className="ml-auto opacity-60" aria-hidden="true" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-60" align="start" sideOffset={8}>
+          <div className="flex items-center gap-3 px-1 pt-1.5">
+            <Avatar className="size-8">
+              <AvatarImage src="https://github.com/shadcn.png" />
+              <AvatarFallback>CN</AvatarFallback>
+            </Avatar>
+            <div className="flex flex-col">
+              <span className="text-foreground text-sm font-medium">
+                shadcn
+              </span>
+              <span className="text-muted-foreground text-xs">
+                ui@shadcn.com
+              </span>
+            </div>
+          </div>
+          <div className="py-2.5">
+            <Tabs value={theme} onValueChange={setTheme}>
+              <TabsList className="w-full">
+                <TabsTrigger value="light" className="h-6 flex-1">
+                  <SunIcon className="size-4" aria-hidden="true" />
+                </TabsTrigger>
+                <TabsTrigger value="dark" className="h-6 flex-1">
+                  <MoonIcon className="size-4" aria-hidden="true" />
+                </TabsTrigger>
+                <TabsTrigger value="system" className="h-6 flex-1">
+                  <MonitorIcon className="size-4" aria-hidden="true" />
+                </TabsTrigger>
+              </TabsList>
+            </Tabs>
+          </div>
+          <DropdownMenuGroup>
+            <DropdownMenuItem
+              onSelect={(e) => e.preventDefault()}
+              className="justify-between"
+            >
+              <span className="flex items-center gap-2">
+                <BuildingIcon aria-hidden="true" />
+                Your Companies
+              </span>
+              <Badge
+                variant="secondary"
+                size="sm"
+                className="rounded-full px-1.5"
+              >
+                12
+              </Badge>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={(e) => e.preventDefault()}
+              className="justify-between"
+            >
+              <span className="flex items-center gap-2">
+                <PhoneIcon aria-hidden="true" />
+                Your Numbers
+              </span>
+              <Badge
+                variant="secondary"
+                size="sm"
+                className="rounded-full px-1.5"
+              >
+                2
+              </Badge>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+              <span className="flex items-center gap-2">
+                <span
+                  className={cn("size-2 rounded-full", activeStatus.color)}
+                />
+                {activeStatus.label}
+              </span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent className="w-40">
+              {statuses.map((s) => (
+                <DropdownMenuItem
+                  key={s.value}
+                  onClick={() => setStatus(s.value)}
+                  className="justify-between"
+                >
+                  <span className="flex items-center gap-2">
+                    <span className={`size-2 rounded-full ${s.color}`} />
+                    {s.label}
+                  </span>
+                  {status === s.value && (
+                    <CheckIcon className="text-muted-foreground size-4" aria-hidden="true" />
+                  )}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <SettingsIcon aria-hidden="true" />
+              Settings
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <LifeBuoyIcon aria-hidden="true" />
+              Help Center
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem variant="destructive">
+            <LogOutIcon aria-hidden="true" />
+            Logout
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}

package/src/components/patterns/p-dropdown-menu-9.tsx

@@ -0,0 +1,108 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { ChevronDownIcon, UserIcon, CreditCardIcon, SettingsIcon, UsersIcon, PlusIcon, LifeBuoyIcon, BookOpenIcon, LogOutIcon } from "lucide-react"
+
+export function Pattern() {
+  return (
+    <div className="flex items-center justify-center">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" className="w-52">
+            <div className="gap-1.5 flex items-center">
+              <Avatar className="size-5">
+                <AvatarImage
+                  src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=96&h=96&dpr=2&q=80"
+                  alt="Alex Johnson"
+                />
+                <AvatarFallback>AJ</AvatarFallback>
+              </Avatar>
+              <span className="text-sm font-medium">Alex Johnson</span>
+            </div>
+
+            <ChevronDownIcon className="ml-auto size-4 opacity-60" aria-hidden="true" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56" align="end" sideOffset={8}>
+          <DropdownMenuGroup>
+            <DropdownMenuLabel className="flex items-center gap-2 py-2">
+              <Avatar className="size-8">
+                <AvatarImage
+                  src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=96&h=96&dpr=2&q=80"
+                  alt="Alex Johnson"
+                />
+                <AvatarFallback>AJ</AvatarFallback>
+              </Avatar>
+              <div className="flex flex-col">
+                <span className="text-foreground text-sm font-medium">
+                  Alex Johnson
+                </span>
+                <span className="text-muted-foreground text-xs font-normal">
+                  alex@example.com
+                </span>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <UserIcon aria-hidden="true" />
+                Profile
+                <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCardIcon aria-hidden="true" />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <SettingsIcon aria-hidden="true" />
+                Settings
+                <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <UsersIcon aria-hidden="true" />
+                Team
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <PlusIcon aria-hidden="true" />
+                Invite Members
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <LifeBuoyIcon aria-hidden="true" />
+                Support
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <BookOpenIcon aria-hidden="true" />
+                Documentation
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem variant="destructive">
+              <LogOutIcon aria-hidden="true" />
+              Log out
+              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}

package/src/components/patterns/p-empty-2.tsx

@@ -0,0 +1,34 @@
+import { Button } from "@/components/ui/button"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/components/ui/empty"
+import { ArrowUpRightIcon } from "lucide-react"
+
+export function Pattern() {
+  return (
+    <div className="flex items-center justify-center">
+      <Empty className="bg-muted">
+        <EmptyHeader>
+          <EmptyTitle>No results found</EmptyTitle>
+          <EmptyDescription>
+            No results found for your search. Try adjusting your search terms.
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <Button>Try again</Button>
+          <Button variant="link" asChild className="text-muted-foreground">
+            <a href="#">
+              Learn more{" "}
+              <ArrowUpRightIcon
+              />
+            </a>
+          </Button>
+        </EmptyContent>
+      </Empty>
+    </div>
+  )
+}