[data-slot=section]+[data-slot=section]]:mt-8'
+ )}
+ />
+ )
+}
+
+export function SidebarFooter({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+ return (
+
[data-slot=section]+[data-slot=section]]:mt-2.5'
+ )}
+ />
+ )
+}
+
+export function SidebarSection({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+ let id = useId()
+
+ return (
+
+
+
+ )
+}
+
+export function SidebarDivider({ className, ...props }: React.ComponentPropsWithoutRef<'hr'>) {
+ return
+}
+
+export function SidebarSpacer({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+ return
+}
+
+export function SidebarHeading({ className, ...props }: React.ComponentPropsWithoutRef<'h3'>) {
+ return (
+
+ )
+}
+
+export const SidebarItem = forwardRef(function SidebarItem(
+ {
+ current,
+ className,
+ children,
+ ...props
+ }: { current?: boolean; className?: string; children: React.ReactNode } & (
+ | Omit
+ | Omit, 'className'>
+ ),
+ ref: React.ForwardedRef
+) {
+ let classes = clsx(
+ // Base
+ 'flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left text-base/6 font-medium text-zinc-950 sm:py-2 sm:text-sm/5',
+ // Leading icon/icon-only
+ 'data-[slot=icon]:*:size-6 data-[slot=icon]:*:shrink-0 data-[slot=icon]:*:fill-zinc-500 sm:data-[slot=icon]:*:size-5',
+ // Trailing icon (down chevron or similar)
+ 'data-[slot=icon]:last:*:ml-auto data-[slot=icon]:last:*:size-5 sm:data-[slot=icon]:last:*:size-4',
+ // Avatar
+ 'data-[slot=avatar]:*:-m-0.5 data-[slot=avatar]:*:size-7 data-[slot=avatar]:*:[--ring-opacity:10%] sm:data-[slot=avatar]:*:size-6',
+ // Hover
+ 'data-[hover]:bg-zinc-950/5 data-[slot=icon]:*:data-[hover]:fill-zinc-950',
+ // Active
+ 'data-[active]:bg-zinc-950/5 data-[slot=icon]:*:data-[active]:fill-zinc-950',
+ // Current
+ 'data-[slot=icon]:*:data-[current]:fill-zinc-950',
+ // Dark mode
+ 'dark:text-white dark:data-[slot=icon]:*:fill-zinc-400',
+ 'dark:data-[hover]:bg-white/5 dark:data-[slot=icon]:*:data-[hover]:fill-white',
+ 'dark:data-[active]:bg-white/5 dark:data-[slot=icon]:*:data-[active]:fill-white',
+ 'dark:data-[slot=icon]:*:data-[current]:fill-white'
+ )
+
+ return (
+
+ {current && (
+
+ )}
+ {'href' in props ? (
+
+
+ {children}
+
+
+ ) : (
+
+ {children}
+
+ )}
+
+ )
+})
+
+export function SidebarLabel({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) {
+ return
+}
diff --git a/apps/nextjs/src/components/stacked-layout.tsx b/apps/nextjs/src/components/stacked-layout.tsx
new file mode 100644
index 0000000..9f2149c
--- /dev/null
+++ b/apps/nextjs/src/components/stacked-layout.tsx
@@ -0,0 +1,79 @@
+'use client'
+
+import * as Headless from '@headlessui/react'
+import React, { useState } from 'react'
+import { NavbarItem } from './navbar'
+
+function OpenMenuIcon() {
+ return (
+
+ )
+}
+
+function CloseMenuIcon() {
+ return (
+
+ )
+}
+
+function MobileSidebar({ open, close, children }: React.PropsWithChildren<{ open: boolean; close: () => void }>) {
+ return (
+
+
+
+
+
+
+ )
+}
+
+export function StackedLayout({
+ navbar,
+ sidebar,
+ children,
+}: React.PropsWithChildren<{ navbar: React.ReactNode; sidebar: React.ReactNode }>) {
+ let [showSidebar, setShowSidebar] = useState(false)
+
+ return (
+
+ {/* Sidebar on mobile */}
+
setShowSidebar(false)}>
+ {sidebar}
+
+
+ {/* Navbar */}
+
+
+ {/* Content */}
+
+
+
+
|
+
+ )
+}
+
+export function TableHeader({ className, ...props }: React.ComponentPropsWithoutRef<'th'>) {
+ let { bleed, grid } = useContext(TableContext)
+
+ return (
+ |
+ )
+}
+
+export function TableCell({ className, children, ...props }: React.ComponentPropsWithoutRef<'td'>) {
+ let { bleed, dense, grid, striped } = useContext(TableContext)
+ let { href, target, title } = useContext(TableRowContext)
+ let [cellRef, setCellRef] = useState(null)
+
+ return (
+
+ {href && (
+
+ )}
+ {children}
+ |
+ )
+}
diff --git a/apps/nextjs/src/components/text.tsx b/apps/nextjs/src/components/text.tsx
new file mode 100644
index 0000000..906f7a6
--- /dev/null
+++ b/apps/nextjs/src/components/text.tsx
@@ -0,0 +1,40 @@
+import clsx from 'clsx'
+import { Link } from './link'
+
+export function Text({ className, ...props }: React.ComponentPropsWithoutRef<'p'>) {
+ return (
+
+ )
+}
+
+export function TextLink({ className, ...props }: React.ComponentPropsWithoutRef) {
+ return (
+
+ )
+}
+
+export function Strong({ className, ...props }: React.ComponentPropsWithoutRef<'strong'>) {
+ return
+}
+
+export function Code({ className, ...props }: React.ComponentPropsWithoutRef<'code'>) {
+ return (
+ 
+ 
+ {order.customer.country}
+
+