@webjsdev/ui 0.3.17 → 0.4.0

package/packages/registry/blocks/sidebar-12/components/app-sidebar.ts

@@ -0,0 +1,63 @@
+/**
+ * The sidebar-12 app sidebar: the signed-in user, a calendar, the list of
+ * calendars, and a "New Calendar" button. A fragment helper, so the markup is
+ * rendered by the server; the sidebar and its rail are the kit's elements.
+ * Ported from shadcn/ui's sidebar-12.
+ *
+ * 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 appSidebar() {
+  return html`
+    <ui-sidebar>
+      <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-rail></ui-sidebar-rail>
+    </ui-sidebar>
+  `;
+}

package/packages/registry/blocks/sidebar-12/components/calendars.ts

@@ -0,0 +1,53 @@
+/**
+ * The sidebar-12 calendars list: one collapsible group per set of calendars,
+ * each calendar a menu button with a check box drawn beside its name. A
+ * fragment helper; each group is a native `<details>`, so it opens and closes
+ * with no JavaScript. Ported from shadcn/ui's sidebar-12.
+ *
+ * The boxes are decoration, as in shadcn: the first two calendars of a group
+ * render checked. Turn each button into a real control (a checkbox in a form,
+ * or a link that toggles the calendar) when you wire it to your data.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { collapsibleClass, collapsibleContentClass } from '../../../components/collapsible.ts';
+import {
+  sidebarGroupClass,
+  sidebarGroupContentClass,
+  sidebarGroupLabelClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+  sidebarSeparatorClass,
+} from '../../../components/sidebar.ts';
+import { CheckIcon, ChevronRightIcon } from '../../../lib/icons.ts';
+
+export function calendars({ calendars }: { calendars: { name: string; items: string[] }[] }) {
+  return calendars.map((calendar, index) => html`
+    <div data-slot="sidebar-group" data-sidebar="group" class=${sidebarGroupClass()}>
+      <details data-slot="collapsible" class=${cn(collapsibleClass(), 'group/collapsible')} ?open=${index === 0}>
+        <summary data-slot="sidebar-group-label" data-sidebar="group-label" class=${cn(sidebarGroupLabelClass(), 'group/label w-full cursor-pointer list-none text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground [&::-webkit-details-marker]:hidden')}>
+          ${calendar.name}
+          ${ChevronRightIcon('ml-auto transition-transform group-open/collapsible:rotate-90')}
+        </summary>
+        <div data-slot="collapsible-content" class=${collapsibleContentClass()}>
+          <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${sidebarGroupContentClass()}>
+            <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+              ${calendar.items.map((item, i) => html`
+                <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()}>
+                    <div data-active=${i < 2 ? 'true' : 'false'} class="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary">
+                      ${CheckIcon('hidden size-3 group-data-[active=true]/calendar-item:block')}
+                    </div>
+                    ${item}
+                  </button>
+                </li>
+              `)}
+            </ul>
+          </div>
+        </div>
+      </details>
+    </div>
+    <div role="none" data-slot="sidebar-separator" data-sidebar="separator" data-orientation="horizontal" class=${cn(sidebarSeparatorClass(), 'mx-0')}></div>
+  `);
+}

package/packages/registry/blocks/sidebar-12/components/date-picker.ts

@@ -0,0 +1,26 @@
+/**
+ * The sidebar-12 date picker: the kit's `<ui-calendar>` with month and year
+ * dropdowns, in a sidebar group. A fragment helper; the calendar is rendered
+ * by the server and picking a day needs JavaScript. Ported from shadcn/ui's
+ * sidebar-12.
+ *
+ * It opens on the 12th of the current month, as shadcn's does. Listen for
+ * `ui-value-change` on the calendar, or give it a `name` inside a form, to use
+ * the chosen date.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import '../../../components/calendar.ts';
+import { sidebarGroupClass, sidebarGroupContentClass } from '../../../components/sidebar.ts';
+
+export function datePicker() {
+  const now = new Date();
+  const value = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-12`;
+  return html`
+    <div data-slot="sidebar-group" data-sidebar="group" class=${cn(sidebarGroupClass(), 'px-0')}>
+      <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${sidebarGroupContentClass()}>
+        <ui-calendar mode="single" value=${value} caption-layout="dropdown" class="**:data-[slot=calendar]:bg-transparent **:data-[slot=calendar]:[--cell-size:2.1rem]"></ui-calendar>
+      </div>
+    </div>
+  `;
+}

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

@@ -0,0 +1,70 @@
+/**
+ * The sidebar-12 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-12.
+ *
+ * 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-12/page.ts

@@ -0,0 +1,43 @@
+/**
+ * The sidebar-12 block's page: a sidebar with a calendar and a list of
+ * calendars, beside a sticky header and a grid of day placeholders.
+ *
+ * Installed by `npx @webjsdev/ui add sidebar-12` at `app/dashboard/page.ts`.
+ * It is app code you own, so edit it freely. Ported from shadcn/ui's
+ * sidebar-12.
+ */
+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 { appSidebar } from './components/app-sidebar.ts';
+
+export const metadata: Metadata = { title: 'Dashboard' };
+
+export default function DashboardPage() {
+  return html`
+    <ui-sidebar-provider>
+      ${appSidebar()}
+      <ui-sidebar-inset>
+        <header class="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
+          <ui-sidebar-trigger class="-ml-1"></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=${breadcrumbPageClass()} aria-current="page">October 2024</span>
+              </li>
+            </ol>
+          </nav>
+        </header>
+        <div class="flex flex-1 flex-col gap-4 p-4">
+          <div class="grid auto-rows-min gap-4 md:grid-cols-5">
+            ${Array.from({ length: 20 }, () => html`<div class="aspect-square rounded-xl bg-muted/50"></div>`)}
+          </div>
+        </div>
+      </ui-sidebar-inset>
+    </ui-sidebar-provider>
+  `;
+}

package/packages/registry/blocks/sidebar-13/components/settings-dialog.ts

@@ -0,0 +1,114 @@
+/**
+ * The sidebar-13 settings dialog: the kit's `<ui-dialog>` holding a
+ * non-collapsible sidebar of settings sections beside the current section's
+ * content. A fragment helper; the dialog and the sidebar are the kit's
+ * elements. Ported from shadcn/ui's sidebar-13.
+ *
+ * shadcn's dialog starts open. A modal opens only through `showModal()`, so
+ * the small inline script below opens it once the element is ready, and the
+ * trigger reopens it after a close. Drop the script for a dialog that waits
+ * for its trigger. "Messages & media" is the current section. Point each
+ * `href` at a real settings route and mark the current one from your router.
+ */
+import { html, cspNonce } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import {
+  breadcrumbItemClass,
+  breadcrumbLinkClass,
+  breadcrumbListClass,
+  breadcrumbPageClass,
+  breadcrumbSeparatorClass,
+} from '../../../components/breadcrumb.ts';
+import { buttonClass } from '../../../components/button.ts';
+import '../../../components/dialog.ts';
+import '../../../components/sidebar.ts';
+import {
+  sidebarContentClass,
+  sidebarGroupClass,
+  sidebarGroupContentClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { BellIcon, CheckIcon, ChevronRightIcon, GlobeIcon, HomeIcon, KeyboardIcon, LinkIcon, LockIcon, MenuIcon, MessageCircleIcon, PaintbrushIcon, SettingsIcon, VideoIcon } from '../../../lib/icons.ts';
+
+const data: { nav: { name: string; icon: (cls?: string) => TemplateResult }[] } = {
+  nav: [
+    { name: 'Notifications', icon: BellIcon },
+    { name: 'Navigation', icon: MenuIcon },
+    { name: 'Home', icon: HomeIcon },
+    { name: 'Appearance', icon: PaintbrushIcon },
+    { name: 'Messages & media', icon: MessageCircleIcon },
+    { name: 'Language & region', icon: GlobeIcon },
+    { name: 'Accessibility', icon: KeyboardIcon },
+    { name: 'Mark as read', icon: CheckIcon },
+    { name: 'Audio & video', icon: VideoIcon },
+    { name: 'Connected accounts', icon: LinkIcon },
+    { name: 'Privacy & visibility', icon: LockIcon },
+    { name: 'Advanced', icon: SettingsIcon },
+  ],
+};
+
+export function settingsDialog() {
+  return html`
+    <ui-dialog id="settings-dialog">
+      <ui-dialog-trigger>
+        <button type="button" data-slot="button" data-size="sm" class=${buttonClass({ size: 'sm' })}>Open Dialog</button>
+      </ui-dialog-trigger>
+      <ui-dialog-content class="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
+        <h2 data-slot="dialog-title" class="sr-only">Settings</h2>
+        <p data-slot="dialog-description" class="sr-only">Customize your settings here.</p>
+        <ui-sidebar-provider class="[&>[data-slot=sidebar-wrapper]]:items-start">
+          <ui-sidebar collapsible="none" class="hidden md:flex">
+            <div data-slot="sidebar-content" data-sidebar="content" class=${sidebarContentClass()}>
+              <div data-slot="sidebar-group" data-sidebar="group" class=${sidebarGroupClass()}>
+                <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${sidebarGroupContentClass()}>
+                  <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+                    ${data.nav.map((item) => {
+                      const active = item.name === 'Messages & media';
+                      return 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" data-active=${active ? 'true' : 'false'} aria-current=${active ? 'page' : null} class=${sidebarMenuButtonClass()}>
+                            ${item.icon()}
+                            <span>${item.name}</span>
+                          </a>
+                        </li>
+                      `;
+                    })}
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </ui-sidebar>
+          <main class="flex h-[480px] flex-1 flex-col overflow-hidden">
+            <header class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+              <div class="flex items-center gap-2 px-4">
+                <nav aria-label="breadcrumb" data-slot="breadcrumb">
+                  <ol data-slot="breadcrumb-list" class=${breadcrumbListClass()}>
+                    <li data-slot="breadcrumb-item" class=${cn(breadcrumbItemClass(), 'hidden md:block')}>
+                      <a data-slot="breadcrumb-link" class=${breadcrumbLinkClass()} href="#">Settings</a>
+                    </li>
+                    <li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" class=${cn(breadcrumbSeparatorClass(), 'hidden md:block')}>${ChevronRightIcon()}</li>
+                    <li data-slot="breadcrumb-item" class=${breadcrumbItemClass()}>
+                      <span data-slot="breadcrumb-page" class=${breadcrumbPageClass()} aria-current="page">Messages &amp; media</span>
+                    </li>
+                  </ol>
+                </nav>
+              </div>
+            </header>
+            <div class="flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0">
+              ${Array.from({ length: 10 }, () => html`<div class="aspect-video max-w-3xl rounded-xl bg-muted/50"></div>`)}
+            </div>
+          </main>
+        </ui-sidebar-provider>
+      </ui-dialog-content>
+    </ui-dialog>
+    <script nonce=${cspNonce()}>
+      customElements.whenDefined('ui-dialog').then(function () {
+        var d = document.getElementById('settings-dialog');
+        if (d) d.updateComplete.then(function () { d.open = true; });
+      });
+    </script>
+  `;
+}

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

@@ -0,0 +1,21 @@
+/**
+ * The sidebar-13 block's page: a settings dialog with a sidebar inside it,
+ * open on load, centred on an otherwise empty page.
+ *
+ * Installed by `npx @webjsdev/ui add sidebar-13` at `app/dashboard/page.ts`.
+ * It is app code you own, so edit it freely. Ported from shadcn/ui's
+ * sidebar-13.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { settingsDialog } from './components/settings-dialog.ts';
+
+export const metadata: Metadata = { title: 'Dashboard' };
+
+export default function DashboardPage() {
+  return html`
+    <div class="flex h-svh items-center justify-center">
+      ${settingsDialog()}
+    </div>
+  `;
+}

package/packages/registry/blocks/sidebar-14/components/app-sidebar.ts

@@ -0,0 +1,120 @@
+/**
+ * The sidebar-14 app sidebar: a "Table of Contents" group listing each
+ * section as a link with its pages in a submenu, always open. A fragment
+ * helper, so the markup is rendered by the server; the sidebar and its rail
+ * are the kit's elements. Ported from shadcn/ui's sidebar-14.
+ *
+ * The data below is sample data. Replace it with your own, point each `url`
+ * at a real route, and mark the current page from your router.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import {
+  sidebarContentClass,
+  sidebarGroupClass,
+  sidebarGroupContentClass,
+  sidebarGroupLabelClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+  sidebarMenuSubButtonClass,
+  sidebarMenuSubClass,
+  sidebarMenuSubItemClass,
+} from '../../../components/sidebar.ts';
+
+interface NavSection {
+  title: string;
+  url: string;
+  items?: { title: string; url: string; isActive?: boolean }[];
+}
+
+// This is sample data.
+const data: { navMain: NavSection[] } = {
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        { title: 'Installation', url: '#' },
+        { title: 'Project Structure', url: '#' },
+      ],
+    },
+    {
+      title: 'Build Your Application',
+      url: '#',
+      items: [
+        { title: 'Routing', url: '#' },
+        { title: 'Data Fetching', url: '#', isActive: true },
+        { title: 'Rendering', url: '#' },
+        { title: 'Caching', url: '#' },
+        { title: 'Styling', url: '#' },
+        { title: 'Optimizing', url: '#' },
+        { title: 'Configuring', url: '#' },
+        { title: 'Testing', url: '#' },
+        { title: 'Authentication', url: '#' },
+        { title: 'Deploying', url: '#' },
+        { title: 'Upgrading', url: '#' },
+        { title: 'Examples', url: '#' },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        { title: 'Components', url: '#' },
+        { title: 'File Conventions', url: '#' },
+        { title: 'Functions', url: '#' },
+        { title: 'next.config.js Options', url: '#' },
+        { title: 'CLI', url: '#' },
+        { title: 'Edge Runtime', url: '#' },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        { title: 'Accessibility', url: '#' },
+        { title: 'Fast Refresh', url: '#' },
+        { title: 'Next.js Compiler', url: '#' },
+        { title: 'Supported Browsers', url: '#' },
+        { title: 'Turbopack', url: '#' },
+      ],
+    },
+    {
+      title: 'Community',
+      url: '#',
+      items: [{ title: 'Contribution Guide', url: '#' }],
+    },
+  ],
+};
+
+export function appSidebar(opts: { side?: 'left' | 'right' } = {}) {
+  return html`
+    <ui-sidebar side=${opts.side ?? 'left'}>
+      <div data-slot="sidebar-content" data-sidebar="content" class=${sidebarContentClass()}>
+        <nav aria-label="Table of Contents" data-slot="sidebar-group" data-sidebar="group" class=${sidebarGroupClass()}>
+          <div data-slot="sidebar-group-label" data-sidebar="group-label" class=${sidebarGroupLabelClass()}>Table of Contents</div>
+          <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${sidebarGroupContentClass()}>
+            <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+              ${data.navMain.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=${cn(sidebarMenuButtonClass(), 'font-medium')}>${item.title}</a>
+                  ${item.items?.length
+                    ? html`<ul data-slot="sidebar-menu-sub" data-sidebar="menu-sub" class=${sidebarMenuSubClass()}>
+                        ${item.items.map((sub) => html`
+                          <li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" class=${sidebarMenuSubItemClass()}>
+                            <a href=${sub.url} data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" data-size="md" data-active=${sub.isActive ? 'true' : 'false'} aria-current=${sub.isActive ? 'page' : null} class=${sidebarMenuSubButtonClass()}>${sub.title}</a>
+                          </li>
+                        `)}
+                      </ul>`
+                    : ''}
+                </li>
+              `)}
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <ui-sidebar-rail></ui-sidebar-rail>
+    </ui-sidebar>
+  `;
+}

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

@@ -0,0 +1,55 @@
+/**
+ * The sidebar-14 block's page: a table-of-contents sidebar on the right of
+ * the page, beside a header with a breadcrumb and a placeholder content grid.
+ *
+ * Installed by `npx @webjsdev/ui add sidebar-14` at `app/dashboard/page.ts`.
+ * It is app code you own, so edit it freely. Ported from shadcn/ui's
+ * sidebar-14.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  breadcrumbItemClass,
+  breadcrumbLinkClass,
+  breadcrumbListClass,
+  breadcrumbPageClass,
+  breadcrumbSeparatorClass,
+} from '../../components/breadcrumb.ts';
+import '../../components/sidebar.ts';
+import { appSidebar } from './components/app-sidebar.ts';
+import { ChevronRightIcon } from '../../lib/icons.ts';
+
+export const metadata: Metadata = { title: 'Dashboard' };
+
+export default function DashboardPage() {
+  return html`
+    <ui-sidebar-provider>
+      <ui-sidebar-inset>
+        <header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <nav aria-label="breadcrumb" data-slot="breadcrumb">
+            <ol data-slot="breadcrumb-list" class=${breadcrumbListClass()}>
+              <li data-slot="breadcrumb-item" class=${cn(breadcrumbItemClass(), 'hidden md:block')}>
+                <a data-slot="breadcrumb-link" class=${breadcrumbLinkClass()} href="#">Build Your Application</a>
+              </li>
+              <li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" class=${cn(breadcrumbSeparatorClass(), 'hidden md:block')}>${ChevronRightIcon()}</li>
+              <li data-slot="breadcrumb-item" class=${breadcrumbItemClass()}>
+                <span data-slot="breadcrumb-page" class=${breadcrumbPageClass()} aria-current="page">Data Fetching</span>
+              </li>
+            </ol>
+          </nav>
+          <ui-sidebar-trigger class="-mr-1 ml-auto rotate-180"></ui-sidebar-trigger>
+        </header>
+        <div class="flex flex-1 flex-col gap-4 p-4">
+          <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div class="aspect-video rounded-xl bg-muted/50"></div>
+            <div class="aspect-video rounded-xl bg-muted/50"></div>
+            <div class="aspect-video rounded-xl bg-muted/50"></div>
+          </div>
+          <div class="min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min"></div>
+        </div>
+      </ui-sidebar-inset>
+      ${appSidebar({ side: 'right' })}
+    </ui-sidebar-provider>
+  `;
+}

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

@@ -0,0 +1,53 @@
+/**
+ * The sidebar-15 calendars list: one collapsible group per set of calendars,
+ * each calendar a menu button with a check box drawn beside its name. A
+ * fragment helper; each group is a native `<details>`, so it opens and closes
+ * with no JavaScript. Ported from shadcn/ui's sidebar-15.
+ *
+ * The boxes are decoration, as in shadcn: the first two calendars of a group
+ * render checked. Turn each button into a real control (a checkbox in a form,
+ * or a link that toggles the calendar) when you wire it to your data.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { collapsibleClass, collapsibleContentClass } from '../../../components/collapsible.ts';
+import {
+  sidebarGroupClass,
+  sidebarGroupContentClass,
+  sidebarGroupLabelClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+  sidebarSeparatorClass,
+} from '../../../components/sidebar.ts';
+import { CheckIcon, ChevronRightIcon } from '../../../lib/icons.ts';
+
+export function calendars({ calendars }: { calendars: { name: string; items: string[] }[] }) {
+  return calendars.map((calendar, index) => html`
+    <div data-slot="sidebar-group" data-sidebar="group" class=${sidebarGroupClass()}>
+      <details data-slot="collapsible" class=${cn(collapsibleClass(), 'group/collapsible')} ?open=${index === 0}>
+        <summary data-slot="sidebar-group-label" data-sidebar="group-label" class=${cn(sidebarGroupLabelClass(), 'group/label w-full cursor-pointer list-none text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground [&::-webkit-details-marker]:hidden')}>
+          ${calendar.name}
+          ${ChevronRightIcon('ml-auto transition-transform group-open/collapsible:rotate-90')}
+        </summary>
+        <div data-slot="collapsible-content" class=${collapsibleContentClass()}>
+          <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${sidebarGroupContentClass()}>
+            <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+              ${calendar.items.map((item, i) => html`
+                <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()}>
+                    <div data-active=${i < 2 ? 'true' : 'false'} class="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary">
+                      ${CheckIcon('hidden size-3 group-data-[active=true]/calendar-item:block')}
+                    </div>
+                    ${item}
+                  </button>
+                </li>
+              `)}
+            </ul>
+          </div>
+        </div>
+      </details>
+    </div>
+    <div role="none" data-slot="sidebar-separator" data-sidebar="separator" data-orientation="horizontal" class=${cn(sidebarSeparatorClass(), 'mx-0')}></div>
+  `);
+}

package/packages/registry/blocks/sidebar-15/components/date-picker.ts

@@ -0,0 +1,26 @@
+/**
+ * The sidebar-15 date picker: the kit's `<ui-calendar>` with month and year
+ * dropdowns, in a sidebar group. A fragment helper; the calendar is rendered
+ * by the server and picking a day needs JavaScript. Ported from shadcn/ui's
+ * sidebar-15.
+ *
+ * It opens on the 12th of the current month, as shadcn's does. Listen for
+ * `ui-value-change` on the calendar, or give it a `name` inside a form, to use
+ * the chosen date.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import '../../../components/calendar.ts';
+import { sidebarGroupClass, sidebarGroupContentClass } from '../../../components/sidebar.ts';
+
+export function datePicker() {
+  const now = new Date();
+  const value = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-12`;
+  return html`
+    <div data-slot="sidebar-group" data-sidebar="group" class=${cn(sidebarGroupClass(), 'px-0')}>
+      <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${sidebarGroupContentClass()}>
+        <ui-calendar mode="single" value=${value} caption-layout="dropdown" class="**:data-[slot=calendar]:bg-transparent **:data-[slot=calendar]:[--cell-size:2.1rem]"></ui-calendar>
+      </div>
+    </div>
+  `;
+}