@webjsdev/ui 0.3.17 → 0.4.0

package/packages/registry/blocks/sidebar-15/components/nav-favorites.ts

@@ -0,0 +1,66 @@
+/**
+ * The sidebar-15 favorites list: one link per favorite page, each with a
+ * "More" menu that shows on hover, and a trailing "More" item. A fragment
+ * helper; the menus are the kit's `<ui-dropdown-menu>`. Ported from
+ * shadcn/ui's sidebar-15.
+ *
+ * Each "More" button sits right after its link, a sibling of it, because the
+ * kit's styles place it with `peer-*` selectors that need exactly that. The
+ * menu names it through `trigger="<id>"`, so the ids must be unique on the page.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import '../../../components/dropdown-menu.ts';
+import {
+  sidebarGroupClass,
+  sidebarGroupLabelClass,
+  sidebarMenuActionClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { ArrowUpRightIcon, LinkIcon, MoreHorizontalIcon, StarOffIcon, Trash2Icon } from '../../../lib/icons.ts';
+
+export interface Favorite {
+  name: string;
+  url: string;
+  emoji: string;
+}
+
+export function navFavorites({ favorites }: { favorites: Favorite[] }) {
+  return html`
+    <div data-slot="sidebar-group" data-sidebar="group" class=${cn(sidebarGroupClass(), 'group-data-[collapsible=icon]:hidden')}>
+      <div data-slot="sidebar-group-label" data-sidebar="group-label" class=${sidebarGroupLabelClass()}>Favorites</div>
+      <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+        ${favorites.map((item, i) => html`
+          <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+            <a href=${item.url} title=${item.name} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${sidebarMenuButtonClass()}>
+              <span>${item.emoji}</span>
+              <span>${item.name}</span>
+            </a>
+            <button type="button" id=${`nav-favorite-more-${i}`} data-slot="sidebar-menu-action" data-sidebar="menu-action" class=${cn(sidebarMenuActionClass({ showOnHover: true }), 'aria-expanded:bg-muted')}>
+              ${MoreHorizontalIcon()}
+              <span class="sr-only">More</span>
+            </button>
+            <ui-dropdown-menu trigger=${`nav-favorite-more-${i}`}>
+              <ui-dropdown-menu-content class="w-56 rounded-lg" side="right" align="start">
+                <ui-dropdown-menu-item>${StarOffIcon('text-muted-foreground')}<span>Remove from Favorites</span></ui-dropdown-menu-item>
+                <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+                <ui-dropdown-menu-item>${LinkIcon('text-muted-foreground')}<span>Copy Link</span></ui-dropdown-menu-item>
+                <ui-dropdown-menu-item>${ArrowUpRightIcon('text-muted-foreground')}<span>Open in New Tab</span></ui-dropdown-menu-item>
+                <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+                <ui-dropdown-menu-item>${Trash2Icon('text-muted-foreground')}<span>Delete</span></ui-dropdown-menu-item>
+              </ui-dropdown-menu-content>
+            </ui-dropdown-menu>
+          </li>
+        `)}
+        <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+          <button type="button" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${cn(sidebarMenuButtonClass(), 'text-sidebar-foreground/70')}>
+            ${MoreHorizontalIcon()}
+            <span>More</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  `;
+}

package/packages/registry/blocks/sidebar-15/components/nav-main.ts

@@ -0,0 +1,35 @@
+/**
+ * The sidebar-15 main nav: a short list of top-level links (search, ask AI,
+ * home, inbox) under the team switcher. A fragment helper. Ported from
+ * shadcn/ui's sidebar-15.
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import {
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+
+export interface NavMainItem {
+  title: string;
+  url: string;
+  icon: (cls?: string) => TemplateResult;
+  isActive?: boolean;
+  badge?: string;
+}
+
+export function navMain({ items }: { items: NavMainItem[] }) {
+  return html`
+    <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+      ${items.map((item) => html`
+        <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+          <a href=${item.url} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active=${item.isActive ? 'true' : 'false'} aria-current=${item.isActive ? 'page' : null} class=${sidebarMenuButtonClass()}>
+            ${item.icon()}
+            <span>${item.title}</span>
+          </a>
+        </li>
+      `)}
+    </ul>
+  `;
+}

package/packages/registry/blocks/sidebar-15/components/nav-secondary.ts

@@ -0,0 +1,43 @@
+/**
+ * The sidebar-15 secondary nav: calendar, settings, templates, trash and
+ * help at the foot of the left sidebar, each with an optional badge. A
+ * fragment helper. Ported from shadcn/ui's sidebar-15.
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import {
+  sidebarGroupClass,
+  sidebarGroupContentClass,
+  sidebarMenuBadgeClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+
+export interface NavSecondaryItem {
+  title: string;
+  url: string;
+  icon: (cls?: string) => TemplateResult;
+  badge?: string;
+}
+
+export function navSecondary({ items, class: className }: { items: NavSecondaryItem[]; class?: string }) {
+  return html`
+    <div data-slot="sidebar-group" data-sidebar="group" class=${cn(sidebarGroupClass(), className)}>
+      <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${sidebarGroupContentClass()}>
+        <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+          ${items.map((item) => html`
+            <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+              <a href=${item.url} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${sidebarMenuButtonClass()}>
+                ${item.icon()}
+                <span>${item.title}</span>
+              </a>
+              ${item.badge ? html`<div data-slot="sidebar-menu-badge" data-sidebar="menu-badge" class=${sidebarMenuBadgeClass()}>${item.badge}</div>` : ''}
+            </li>
+          `)}
+        </ul>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/sidebar-15/components/nav-user.ts

@@ -0,0 +1,70 @@
+/**
+ * The sidebar-15 user menu: the signed-in user's avatar, name and email,
+ * opening an account menu. A fragment helper; the menu is the kit's
+ * `<ui-dropdown-menu>`. Ported from shadcn/ui's sidebar-15.
+ *
+ * The menu items are placeholders. Make "Log out" a form that posts to your
+ * sign-out action, and the others links to your account pages.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { avatarClass, avatarFallbackClass, avatarImageClass } from '../../../components/avatar.ts';
+import '../../../components/dropdown-menu.ts';
+import {
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { BadgeCheckIcon, BellIcon, ChevronsUpDownIcon, CreditCardIcon, LogOutIcon, SparklesIcon } from '../../../lib/icons.ts';
+
+function userAvatar(user: { name: string; avatar: string }) {
+  return html`<span data-slot="avatar" data-size="default" class=${cn(avatarClass(), 'h-8 w-8 rounded-lg')}>
+    <span data-slot="avatar-fallback" class=${cn(avatarFallbackClass(), 'rounded-lg')}>VK</span>
+    <img data-slot="avatar-image" src=${user.avatar} alt="@vivek" class=${avatarImageClass()}>
+  </span>`;
+}
+
+function userText(user: { name: string; email: string }) {
+  return html`<div class="grid flex-1 text-left text-sm leading-tight">
+    <span class="truncate font-medium">${user.name}</span>
+    <span class="truncate text-xs">${user.email}</span>
+  </div>`;
+}
+
+export function navUser({ user }: { user: { name: string; email: string; avatar: string } }) {
+  return html`
+    <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+      <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+        <ui-dropdown-menu>
+          <ui-dropdown-menu-trigger>
+            <button type="button" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="lg" class=${cn(sidebarMenuButtonClass({ size: 'lg' }), 'aria-expanded:bg-sidebar-accent aria-expanded:text-sidebar-accent-foreground')}>
+              ${userAvatar(user)}
+              ${userText(user)}
+              ${ChevronsUpDownIcon('ml-auto size-4')}
+            </button>
+          </ui-dropdown-menu-trigger>
+          <ui-dropdown-menu-content class="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg" side="right" align="start">
+            <ui-dropdown-menu-label class="p-0 font-normal">
+              <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                ${userAvatar(user)}
+                ${userText(user)}
+              </div>
+            </ui-dropdown-menu-label>
+            <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+            <ui-dropdown-menu-group>
+              <ui-dropdown-menu-item>${SparklesIcon()}Upgrade to Pro</ui-dropdown-menu-item>
+            </ui-dropdown-menu-group>
+            <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+            <ui-dropdown-menu-group>
+              <ui-dropdown-menu-item>${BadgeCheckIcon()}Account</ui-dropdown-menu-item>
+              <ui-dropdown-menu-item>${CreditCardIcon()}Billing</ui-dropdown-menu-item>
+              <ui-dropdown-menu-item>${BellIcon()}Notifications</ui-dropdown-menu-item>
+            </ui-dropdown-menu-group>
+            <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+            <ui-dropdown-menu-item>${LogOutIcon()}Log out</ui-dropdown-menu-item>
+          </ui-dropdown-menu-content>
+        </ui-dropdown-menu>
+      </li>
+    </ul>
+  `;
+}

package/packages/registry/blocks/sidebar-15/components/nav-workspaces.ts

@@ -0,0 +1,75 @@
+/**
+ * The sidebar-15 workspaces list: one link per workspace with two hover
+ * actions, a toggle over its emoji that opens its pages in a submenu and a
+ * "+" to add a page, and a trailing "More" item. A fragment helper; each
+ * toggle is the `<summary>` of a native `<details>`, so the submenus open and
+ * close with no JavaScript. Ported from shadcn/ui's sidebar-15.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { collapsibleClass, collapsibleContentClass } from '../../../components/collapsible.ts';
+import {
+  sidebarGroupClass,
+  sidebarGroupContentClass,
+  sidebarGroupLabelClass,
+  sidebarMenuActionClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+  sidebarMenuSubButtonClass,
+  sidebarMenuSubClass,
+  sidebarMenuSubItemClass,
+} from '../../../components/sidebar.ts';
+import { ChevronRightIcon, MoreHorizontalIcon, PlusIcon } from '../../../lib/icons.ts';
+
+export interface Workspace {
+  name: string;
+  emoji: string;
+  pages: { name: string; url: string; emoji: string }[];
+}
+
+export function navWorkspaces({ workspaces }: { workspaces: Workspace[] }) {
+  return html`
+    <div data-slot="sidebar-group" data-sidebar="group" class=${sidebarGroupClass()}>
+      <div data-slot="sidebar-group-label" data-sidebar="group-label" class=${sidebarGroupLabelClass()}>Workspaces</div>
+      <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${sidebarGroupContentClass()}>
+        <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+          ${workspaces.map((workspace) => html`
+            <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+              <a href="#" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${sidebarMenuButtonClass()}>
+                <span>${workspace.emoji}</span>
+                <span>${workspace.name}</span>
+              </a>
+              <button type="button" data-slot="sidebar-menu-action" data-sidebar="menu-action" aria-label=${`Add a page to ${workspace.name}`} class=${sidebarMenuActionClass({ showOnHover: true })}>
+                ${PlusIcon()}
+              </button>
+              <details data-slot="collapsible" class=${cn(collapsibleClass(), 'group/collapsible')}>
+                <summary data-slot="sidebar-menu-action" data-sidebar="menu-action" aria-label=${`Show the pages of ${workspace.name}`} class=${cn(sidebarMenuActionClass({ showOnHover: true }), 'top-1.5 left-2 cursor-pointer list-none bg-sidebar-accent text-sidebar-accent-foreground group-open/collapsible:rotate-90 group-open/collapsible:opacity-100 [&::-webkit-details-marker]:hidden')}>
+                  ${ChevronRightIcon()}
+                </summary>
+                <div data-slot="collapsible-content" class=${collapsibleContentClass()}>
+                  <ul data-slot="sidebar-menu-sub" data-sidebar="menu-sub" class=${sidebarMenuSubClass()}>
+                    ${workspace.pages.map((page) => html`
+                      <li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" class=${sidebarMenuSubItemClass()}>
+                        <a href=${page.url} data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" data-size="md" class=${sidebarMenuSubButtonClass()}>
+                          <span>${page.emoji}</span>
+                          <span>${page.name}</span>
+                        </a>
+                      </li>
+                    `)}
+                  </ul>
+                </div>
+              </details>
+            </li>
+          `)}
+          <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+            <button type="button" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${cn(sidebarMenuButtonClass(), 'text-sidebar-foreground/70')}>
+              ${MoreHorizontalIcon()}
+              <span>More</span>
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/sidebar-15/components/sidebar-left.ts

@@ -0,0 +1,126 @@
+/**
+ * The sidebar-15 left sidebar: the team switcher and main nav in the header,
+ * then the favorites, the workspaces and a secondary nav. A fragment helper,
+ * so the markup is rendered by the server; the sidebar, its rail and the
+ * menus are the kit's elements. Ported from shadcn/ui's sidebar-15.
+ *
+ * The data below is sample data. Replace it with your own, and point each
+ * `url` at a real route.
+ */
+import { html } from '@webjsdev/core';
+import {
+  sidebarContentClass,
+  sidebarHeaderClass,
+} from '../../../components/sidebar.ts';
+import { navFavorites, type Favorite } from './nav-favorites.ts';
+import { navMain, type NavMainItem } from './nav-main.ts';
+import { navSecondary, type NavSecondaryItem } from './nav-secondary.ts';
+import { navWorkspaces, type Workspace } from './nav-workspaces.ts';
+import { teamSwitcher, type Team } from './team-switcher.ts';
+import { AudioLinesIcon, BlocksIcon, CalendarIcon, HomeIcon, InboxIcon, MessageCircleQuestionIcon, SearchIcon, Settings2Icon, SparklesIcon, TerminalIcon, Trash2Icon } from '../../../lib/icons.ts';
+
+// This is sample data.
+const data: {
+  teams: Team[];
+  navMain: NavMainItem[];
+  navSecondary: NavSecondaryItem[];
+  favorites: Favorite[];
+  workspaces: Workspace[];
+} = {
+  teams: [
+    { name: 'Acme Inc', logo: TerminalIcon, plan: 'Enterprise' },
+    { name: 'Acme Corp.', logo: AudioLinesIcon, plan: 'Startup' },
+    { name: 'Evil Corp.', logo: TerminalIcon, plan: 'Free' },
+  ],
+  navMain: [
+    { title: 'Search', url: '#', icon: SearchIcon },
+    { title: 'Ask AI', url: '#', icon: SparklesIcon },
+    { title: 'Home', url: '#', icon: HomeIcon, isActive: true },
+    { title: 'Inbox', url: '#', icon: InboxIcon, badge: '10' },
+  ],
+  navSecondary: [
+    { title: 'Calendar', url: '#', icon: CalendarIcon },
+    { title: 'Settings', url: '#', icon: Settings2Icon },
+    { title: 'Templates', url: '#', icon: BlocksIcon },
+    { title: 'Trash', url: '#', icon: Trash2Icon },
+    { title: 'Help', url: '#', icon: MessageCircleQuestionIcon },
+  ],
+  favorites: [
+    { name: 'Project Management & Task Tracking', url: '#', emoji: '📊' },
+    { name: 'Family Recipe Collection & Meal Planning', url: '#', emoji: '🍳' },
+    { name: 'Fitness Tracker & Workout Routines', url: '#', emoji: '💪' },
+    { name: 'Book Notes & Reading List', url: '#', emoji: '📚' },
+    { name: 'Sustainable Gardening Tips & Plant Care', url: '#', emoji: '🌱' },
+    { name: 'Language Learning Progress & Resources', url: '#', emoji: '🗣️' },
+    { name: 'Home Renovation Ideas & Budget Tracker', url: '#', emoji: '🏠' },
+    { name: 'Personal Finance & Investment Portfolio', url: '#', emoji: '💰' },
+    { name: 'Movie & TV Show Watchlist with Reviews', url: '#', emoji: '🎬' },
+    { name: 'Daily Habit Tracker & Goal Setting', url: '#', emoji: '✅' },
+  ],
+  workspaces: [
+    {
+      name: 'Personal Life Management',
+      emoji: '🏠',
+      pages: [
+        { name: 'Daily Journal & Reflection', url: '#', emoji: '📔' },
+        { name: 'Health & Wellness Tracker', url: '#', emoji: '🍏' },
+        { name: 'Personal Growth & Learning Goals', url: '#', emoji: '🌟' },
+      ],
+    },
+    {
+      name: 'Professional Development',
+      emoji: '💼',
+      pages: [
+        { name: 'Career Objectives & Milestones', url: '#', emoji: '🎯' },
+        { name: 'Skill Acquisition & Training Log', url: '#', emoji: '🧠' },
+        { name: 'Networking Contacts & Events', url: '#', emoji: '🤝' },
+      ],
+    },
+    {
+      name: 'Creative Projects',
+      emoji: '🎨',
+      pages: [
+        { name: 'Writing Ideas & Story Outlines', url: '#', emoji: '✍️' },
+        { name: 'Art & Design Portfolio', url: '#', emoji: '🖼️' },
+        { name: 'Music Composition & Practice Log', url: '#', emoji: '🎵' },
+      ],
+    },
+    {
+      name: 'Home Management',
+      emoji: '🏡',
+      pages: [
+        { name: 'Household Budget & Expense Tracking', url: '#', emoji: '💰' },
+        { name: 'Home Maintenance Schedule & Tasks', url: '#', emoji: '🔧' },
+        { name: 'Family Calendar & Event Planning', url: '#', emoji: '📅' },
+      ],
+    },
+    {
+      name: 'Travel & Adventure',
+      emoji: '🧳',
+      pages: [
+        { name: 'Trip Planning & Itineraries', url: '#', emoji: '🗺️' },
+        { name: 'Travel Bucket List & Inspiration', url: '#', emoji: '🌎' },
+        { name: 'Travel Journal & Photo Gallery', url: '#', emoji: '📸' },
+      ],
+    },
+  ],
+};
+
+export function sidebarLeft() {
+  // shadcn's className lands on the sidebar's fixed container, which the
+  // kit's <ui-sidebar> renders as its data-slot="sidebar-container" child.
+  return html`
+    <ui-sidebar class="[&>[data-slot=sidebar-container]]:border-r-0">
+      <div data-slot="sidebar-header" data-sidebar="header" class=${sidebarHeaderClass()}>
+        ${teamSwitcher({ teams: data.teams })}
+        ${navMain({ items: data.navMain })}
+      </div>
+      <div data-slot="sidebar-content" data-sidebar="content" class=${sidebarContentClass()}>
+        ${navFavorites({ favorites: data.favorites })}
+        ${navWorkspaces({ workspaces: data.workspaces })}
+        ${navSecondary({ items: data.navSecondary, class: 'mt-auto' })}
+      </div>
+      <ui-sidebar-rail></ui-sidebar-rail>
+    </ui-sidebar>
+  `;
+}

package/packages/registry/blocks/sidebar-15/components/sidebar-right.ts

@@ -0,0 +1,62 @@
+/**
+ * The sidebar-15 right sidebar: the signed-in user, a calendar, the list of
+ * calendars and a "New Calendar" button, in a sidebar that does not collapse
+ * and shows from the large breakpoint up. A fragment helper, so the markup is
+ * rendered by the server. Ported from shadcn/ui's sidebar-15.
+ *
+ * The data below is sample data. Replace it with your own.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import {
+  sidebarContentClass,
+  sidebarFooterClass,
+  sidebarHeaderClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+  sidebarSeparatorClass,
+} from '../../../components/sidebar.ts';
+import { calendars } from './calendars.ts';
+import { datePicker } from './date-picker.ts';
+import { navUser } from './nav-user.ts';
+import { PlusIcon } from '../../../lib/icons.ts';
+
+// This is sample data.
+const data = {
+  user: {
+    name: 'vivek',
+    email: 'vivek@example.com',
+    avatar: 'https://webjs.dev/public/avatars/vivek.jpg',
+  },
+  calendars: [
+    { name: 'My Calendars', items: ['Personal', 'Work', 'Family'] },
+    { name: 'Favorites', items: ['Holidays', 'Birthdays'] },
+    { name: 'Other', items: ['Travel', 'Reminders', 'Deadlines'] },
+  ],
+};
+
+export function sidebarRight() {
+  return html`
+    <ui-sidebar collapsible="none" class="sticky top-0 hidden h-svh border-l lg:flex">
+      <div data-slot="sidebar-header" data-sidebar="header" class=${cn(sidebarHeaderClass(), 'h-16 border-b border-sidebar-border')}>
+        ${navUser({ user: data.user })}
+      </div>
+      <div data-slot="sidebar-content" data-sidebar="content" class=${sidebarContentClass()}>
+        ${datePicker()}
+        <div role="none" data-slot="sidebar-separator" data-sidebar="separator" data-orientation="horizontal" class=${cn(sidebarSeparatorClass(), 'mx-0')}></div>
+        ${calendars({ calendars: data.calendars })}
+      </div>
+      <div data-slot="sidebar-footer" data-sidebar="footer" class=${sidebarFooterClass()}>
+        <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+          <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+            <button type="button" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${sidebarMenuButtonClass()}>
+              ${PlusIcon()}
+              <span>New Calendar</span>
+            </button>
+          </li>
+        </ul>
+      </div>
+    </ui-sidebar>
+  `;
+}

package/packages/registry/blocks/sidebar-15/components/team-switcher.ts

@@ -0,0 +1,63 @@
+/**
+ * The sidebar-15 team switcher: a compact button with the active team's logo
+ * and name, opening a menu of the teams. A fragment helper; the menu is the
+ * kit's `<ui-dropdown-menu>`. Ported from shadcn/ui's sidebar-15.
+ *
+ * It renders the first team as the active one. shadcn keeps the choice in
+ * React state; in your app the active team is server data (a session value or
+ * a route segment), so render the right one on the server and make each item
+ * a link or a form that switches it.
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import '../../../components/dropdown-menu.ts';
+import {
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { ChevronDownIcon, PlusIcon } from '../../../lib/icons.ts';
+
+export interface Team {
+  name: string;
+  logo: (cls?: string) => TemplateResult;
+  plan: string;
+}
+
+export function teamSwitcher({ teams }: { teams: Team[] }) {
+  const active = teams[0];
+  if (!active) return '';
+  return html`
+    <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+      <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+        <ui-dropdown-menu>
+          <ui-dropdown-menu-trigger>
+            <button type="button" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${cn(sidebarMenuButtonClass(), 'w-fit px-1.5')}>
+              <div class="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+                ${active.logo()}
+              </div>
+              <span class="truncate font-medium">${active.name}</span>
+              ${ChevronDownIcon('opacity-50')}
+            </button>
+          </ui-dropdown-menu-trigger>
+          <ui-dropdown-menu-content class="w-64 rounded-lg" side="bottom" align="start">
+            <ui-dropdown-menu-label class="text-xs text-muted-foreground">Teams</ui-dropdown-menu-label>
+            ${teams.map((team, index) => html`
+              <ui-dropdown-menu-item class="gap-2 p-2">
+                <div class="flex size-6 items-center justify-center rounded-xs border">${team.logo()}</div>
+                ${team.name}
+                <ui-dropdown-menu-shortcut>⌘${index + 1}</ui-dropdown-menu-shortcut>
+              </ui-dropdown-menu-item>
+            `)}
+            <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+            <ui-dropdown-menu-item class="gap-2 p-2">
+              <div class="flex size-6 items-center justify-center rounded-md border bg-background">${PlusIcon('size-4')}</div>
+              <div class="font-medium text-muted-foreground">Add team</div>
+            </ui-dropdown-menu-item>
+          </ui-dropdown-menu-content>
+        </ui-dropdown-menu>
+      </li>
+    </ul>
+  `;
+}

package/packages/registry/blocks/sidebar-15/page.ts

@@ -0,0 +1,47 @@
+/**
+ * The sidebar-15 block's page: a collapsible sidebar on the left and a
+ * calendar sidebar on the right, around a sticky header and a document-like
+ * content column.
+ *
+ * Installed by `npx @webjsdev/ui add sidebar-15` at `app/dashboard/page.ts`.
+ * It is app code you own, so edit it freely. Ported from shadcn/ui's
+ * sidebar-15.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import { breadcrumbItemClass, breadcrumbListClass, breadcrumbPageClass } from '../../components/breadcrumb.ts';
+import { separatorClass } from '../../components/separator.ts';
+import '../../components/sidebar.ts';
+import { sidebarLeft } from './components/sidebar-left.ts';
+import { sidebarRight } from './components/sidebar-right.ts';
+
+export const metadata: Metadata = { title: 'Dashboard' };
+
+export default function DashboardPage() {
+  return html`
+    <ui-sidebar-provider>
+      ${sidebarLeft()}
+      <ui-sidebar-inset>
+        <header class="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
+          <div class="flex flex-1 items-center gap-2 px-3">
+            <ui-sidebar-trigger></ui-sidebar-trigger>
+            <div role="none" data-slot="separator" data-orientation="vertical" class=${cn(separatorClass(), 'mr-2 data-vertical:h-4 data-vertical:self-auto')}></div>
+            <nav aria-label="breadcrumb" data-slot="breadcrumb">
+              <ol data-slot="breadcrumb-list" class=${breadcrumbListClass()}>
+                <li data-slot="breadcrumb-item" class=${breadcrumbItemClass()}>
+                  <span data-slot="breadcrumb-page" class=${cn(breadcrumbPageClass(), 'line-clamp-1')} aria-current="page">Project Management &amp; Task Tracking</span>
+                </li>
+              </ol>
+            </nav>
+          </div>
+        </header>
+        <div class="flex flex-1 flex-col gap-4 p-4">
+          <div class="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50"></div>
+          <div class="mx-auto h-screen w-full max-w-3xl rounded-xl bg-muted/50"></div>
+        </div>
+      </ui-sidebar-inset>
+      ${sidebarRight()}
+    </ui-sidebar-provider>
+  `;
+}