+ {children}
+
+
+
+
+
+ {children}
+
+
+ + ) +} diff --git a/src/components/dropdown.tsx b/src/components/dropdown.tsx new file mode 100644 index 0000000..02bbc71 --- /dev/null +++ b/src/components/dropdown.tsx @@ -0,0 +1,188 @@ +'use client' + +import * as Headless from '@headlessui/react' +import clsx from 'clsx' +import type React from 'react' +import { Button } from './button' +import { Link } from './link' + +export function Dropdown(props: Headless.MenuProps) { + return
{children}
+ }
+
+ return (
+
+
+ {children}
+
+ )
+ }}
+
+
+
+
+
+
+ {children}
+
+ {/* Sidebar on desktop */}
+ setShowSidebar(false)}>
+ {sidebar}
+
+
+ {/* Navbar on mobile */}
+
+
+
+ {/* Content */}
+
+
+
+ )
+}
diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
new file mode 100644
index 0000000..ac7bad5
--- /dev/null
+++ b/src/components/sidebar.tsx
@@ -0,0 +1,142 @@
+'use client'
+
+import * as Headless from '@headlessui/react'
+import clsx from 'clsx'
+import { LayoutGroup, motion } from 'framer-motion'
+import React, { forwardRef, useId } from 'react'
+import { TouchTarget } from './button'
+import { Link } from './link'
+
+export function Sidebar({ className, ...props }: React.ComponentPropsWithoutRef<'nav'>) {
+ return
+}
+
+export function SidebarHeader({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+ return (
+ {sidebar}
+
+ {/* Sidebar on mobile */}
+
+ setShowSidebar(true)} aria-label="Open navigation">
+
+
+ {navbar}
+
+
+ {children}
+ [data-slot=section]+[data-slot=section]]:mt-2.5'
+ )}
+ />
+ )
+}
+
+export function SidebarBody({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+ return (
+
[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, 'as' | '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)
+ '*:last:data-[slot=icon]:ml-auto *:last:data-[slot=icon]:size-5 sm:*:last:data-[slot=icon]:size-4',
+ // Avatar
+ '*:data-[slot=avatar]:-m-0.5 *:data-[slot=avatar]:size-7 sm:*:data-[slot=avatar]:size-6',
+ // Hover
+ 'data-hover:bg-zinc-950/5 data-hover:*:data-[slot=icon]:fill-zinc-950',
+ // Active
+ 'data-active:bg-zinc-950/5 data-active:*:data-[slot=icon]:fill-zinc-950',
+ // Current
+ 'data-current:*:data-[slot=icon]:fill-zinc-950',
+ // Dark mode
+ 'dark:text-white dark:*:data-[slot=icon]:fill-zinc-400',
+ 'dark:data-hover:bg-white/5 dark:data-hover:*:data-[slot=icon]:fill-white',
+ 'dark:data-active:bg-white/5 dark:data-active:*:data-[slot=icon]:fill-white',
+ 'dark:data-current:*:data-[slot=icon]:fill-white'
+ )
+
+ return (
+
+ {current && (
+
+ {children}
+
+ ) : (
+
+ {children}
+
+ )}
+
+ )
+})
+
+export function SidebarLabel({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) {
+ return
+}
diff --git a/src/components/stacked-layout.tsx b/src/components/stacked-layout.tsx
new file mode 100644
index 0000000..5b1c40e
--- /dev/null
+++ b/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 (
+ ) {
+ return (
+ ) {
+ return (
+
+
+
+ )
+}
diff --git a/src/components/table.tsx b/src/components/table.tsx
new file mode 100644
index 0000000..d944623
--- /dev/null
+++ b/src/components/table.tsx
@@ -0,0 +1,124 @@
+'use client'
+
+import clsx from 'clsx'
+import type React from 'react'
+import { createContext, useContext, useState } from 'react'
+import { Link } from './link'
+
+const TableContext = createContext<{ bleed: boolean; dense: boolean; grid: boolean; striped: boolean }>({
+ bleed: false,
+ dense: false,
+ grid: false,
+ striped: false,
+})
+
+export function Table({
+ bleed = false,
+ dense = false,
+ grid = false,
+ striped = false,
+ className,
+ children,
+ ...props
+}: { bleed?: boolean; dense?: boolean; grid?: boolean; striped?: boolean } & React.ComponentPropsWithoutRef<'div'>) {
+ return (
+ }>
+
+ )
+}
+
+export function TableHead({ className, ...props }: React.ComponentPropsWithoutRef<'thead'>) {
+ return
+}
+
+export function TableBody(props: React.ComponentPropsWithoutRef<'tbody'>) {
+ return
+}
+
+const TableRowContext = createContext<{ href?: string; target?: string; title?: string }>({
+ href: undefined,
+ target: undefined,
+ title: undefined,
+})
+
+export function TableRow({
+ href,
+ target,
+ title,
+ className,
+ ...props
+}: { href?: string; target?: string; title?: string } & React.ComponentPropsWithoutRef<'tr'>) {
+ let { striped } = useContext(TableContext)
+
+ return (
+ }>
+
+ )
+}
+
+export function TableHeader({ className, ...props }: React.ComponentPropsWithoutRef<'th'>) {
+ let { bleed, grid } = useContext(TableContext)
+
+ return (
+ (null)
+
+ return (
+
+ {href && (
+
+ )}
+ {children}
+
+ )
+}
diff --git a/src/components/text.tsx b/src/components/text.tsx
new file mode 100644
index 0000000..95b1e5d
--- /dev/null
+++ b/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 (
+ ,
+ ref: React.ForwardedRef
+) {
+ 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
+
+
+
+
+
+ {children}
+
+ {/* Sidebar on mobile */}
+ setShowSidebar(false)}>
+ {sidebar}
+
+
+ {/* Navbar */}
+
+
+
+ {/* Content */}
+
+
+
+ )
+}
diff --git a/src/components/switch.tsx b/src/components/switch.tsx
new file mode 100644
index 0000000..4b6b787
--- /dev/null
+++ b/src/components/switch.tsx
@@ -0,0 +1,195 @@
+import * as Headless from '@headlessui/react'
+import clsx from 'clsx'
+import type React from 'react'
+
+export function SwitchGroup({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+ return (
+
+ )
+}
+
+export function SwitchField({
+ className,
+ ...props
+}: { className?: string } & Omit
+ setShowSidebar(true)} aria-label="Open navigation">
+
+
+ {navbar}
+
+
+ {children}
+
+
+
+
+
+ {children}
+
+