@taicode/common-web 1.0.2 → 1.0.4

package/source/catalyst/listbox.tsx

@@ -0,0 +1,177 @@
+'use client'
+
+import * as Headless from '@headlessui/react'
+import clsx from 'clsx'
+import { Fragment } from 'react'
+
+export function Listbox<T>({
+  className,
+  placeholder,
+  autoFocus,
+  'aria-label': ariaLabel,
+  children: options,
+  ...props
+}: {
+  className?: string
+  placeholder?: React.ReactNode
+  autoFocus?: boolean
+  'aria-label'?: string
+  children?: React.ReactNode
+} & Omit<Headless.ListboxProps<typeof Fragment, T>, 'as' | 'multiple'>) {
+  return (
+    <Headless.Listbox {...props} multiple={false}>
+      <Headless.ListboxButton
+        autoFocus={autoFocus}
+        data-slot="control"
+        aria-label={ariaLabel}
+        className={clsx([
+          className,
+          // Basic layout
+          'group relative block w-full',
+          // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
+          'before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm',
+          // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
+          'dark:before:hidden',
+          // Hide default focus styles
+          'focus:outline-hidden',
+          // Focus ring
+          'after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset data-focus:after:ring-2 data-focus:after:ring-blue-500',
+          // Disabled state
+          'data-disabled:opacity-50 data-disabled:before:bg-zinc-950/5 data-disabled:before:shadow-none',
+        ])}
+      >
+        <Headless.ListboxSelectedOption
+          as="span"
+          options={options}
+          placeholder={placeholder && <span className="block truncate text-zinc-500">{placeholder}</span>}
+          className={clsx([
+            // Basic layout
+            'relative block w-full appearance-none rounded-lg py-[calc(--spacing(2.5)-1px)] sm:py-[calc(--spacing(1.5)-1px)]',
+            // Set minimum height for when no value is selected
+            'min-h-11 sm:min-h-9',
+            // Horizontal padding
+            'pr-[calc(--spacing(7)-1px)] pl-[calc(--spacing(3.5)-1px)] sm:pl-[calc(--spacing(3)-1px)]',
+            // Typography
+            'text-left text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]',
+            // Border
+            'border border-zinc-950/10 group-data-active:border-zinc-950/20 group-data-hover:border-zinc-950/20 dark:border-white/10 dark:group-data-active:border-white/20 dark:group-data-hover:border-white/20',
+            // Background color
+            'bg-transparent dark:bg-white/5',
+            // Invalid state
+            'group-data-invalid:border-red-500 group-data-hover:group-data-invalid:border-red-500 dark:group-data-invalid:border-red-600 dark:data-hover:group-data-invalid:border-red-600',
+            // Disabled state
+            'group-data-disabled:border-zinc-950/20 group-data-disabled:opacity-100 dark:group-data-disabled:border-white/15 dark:group-data-disabled:bg-white/2.5 dark:group-data-disabled:data-hover:border-white/15',
+          ])}
+        />
+        <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+          <svg
+            className="size-5 stroke-zinc-500 group-data-disabled:stroke-zinc-600 sm:size-4 dark:stroke-zinc-400 forced-colors:stroke-[CanvasText]"
+            viewBox="0 0 16 16"
+            aria-hidden="true"
+            fill="none"
+          >
+            <path d="M5.75 10.75L8 13L10.25 10.75" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M10.25 5.25L8 3L5.75 5.25" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </span>
+      </Headless.ListboxButton>
+      <Headless.ListboxOptions
+        transition
+        anchor="selection start"
+        className={clsx(
+          // Anchor positioning
+          '[--anchor-offset:-1.625rem] [--anchor-padding:--spacing(4)] sm:[--anchor-offset:-1.375rem]',
+          // Base styles
+          'isolate w-max min-w-[calc(var(--button-width)+1.75rem)] scroll-py-1 rounded-xl p-1 select-none',
+          // Invisible border that is only visible in `forced-colors` mode for accessibility purposes
+          'outline outline-transparent focus:outline-hidden',
+          // Handle scrolling when menu won't fit in viewport
+          'overflow-y-scroll overscroll-contain',
+          // Popover background
+          'bg-white/75 backdrop-blur-xl dark:bg-zinc-800/75',
+          // Shadows
+          'shadow-lg ring-1 ring-zinc-950/10 dark:ring-white/10 dark:ring-inset',
+          // Transitions
+          'transition-opacity duration-100 ease-in data-closed:data-leave:opacity-0 data-transition:pointer-events-none'
+        )}
+      >
+        {options}
+      </Headless.ListboxOptions>
+    </Headless.Listbox>
+  )
+}
+
+export function ListboxOption<T>({
+  children,
+  className,
+  ...props
+}: { className?: string; children?: React.ReactNode } & Omit<
+  Headless.ListboxOptionProps<'div', T>,
+  'as' | 'className'
+>) {
+  let sharedClasses = clsx(
+    // Base
+    'flex min-w-0 items-center',
+    // Icons
+    '*:data-[slot=icon]:size-5 *:data-[slot=icon]:shrink-0 sm:*:data-[slot=icon]:size-4',
+    '*:data-[slot=icon]:text-zinc-500 group-data-focus/option:*:data-[slot=icon]:text-white dark:*:data-[slot=icon]:text-zinc-400',
+    'forced-colors:*:data-[slot=icon]:text-[CanvasText] forced-colors:group-data-focus/option:*:data-[slot=icon]:text-[Canvas]',
+    // Avatars
+    '*:data-[slot=avatar]:-mx-0.5 *:data-[slot=avatar]:size-6 sm:*:data-[slot=avatar]:size-5'
+  )
+
+  return (
+    <Headless.ListboxOption as={Fragment} {...props}>
+      {({ selectedOption }) => {
+        if (selectedOption) {
+          return <div className={clsx(className, sharedClasses)}>{children}</div>
+        }
+
+        return (
+          <div
+            className={clsx(
+              // Basic layout
+              'group/option grid cursor-default grid-cols-[--spacing(5)_1fr] items-baseline gap-x-2 rounded-lg py-2.5 pr-3.5 pl-2 sm:grid-cols-[--spacing(4)_1fr] sm:py-1.5 sm:pr-3 sm:pl-1.5',
+              // Typography
+              'text-base/6 text-zinc-950 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]',
+              // Focus
+              'outline-hidden data-focus:bg-blue-500 data-focus:text-white',
+              // Forced colors mode
+              'forced-color-adjust-none forced-colors:data-focus:bg-[Highlight] forced-colors:data-focus:text-[HighlightText]',
+              // Disabled
+              'data-disabled:opacity-50'
+            )}
+          >
+            <svg
+              className="relative hidden size-5 self-center stroke-current group-data-selected/option:inline sm:size-4"
+              viewBox="0 0 16 16"
+              fill="none"
+              aria-hidden="true"
+            >
+              <path d="M4 8.5l3 3L12 4" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+            <span className={clsx(className, sharedClasses, 'col-start-2')}>{children}</span>
+          </div>
+        )
+      }}
+    </Headless.ListboxOption>
+  )
+}
+
+export function ListboxLabel({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) {
+  return <span {...props} className={clsx(className, 'ml-2.5 truncate first:ml-0 sm:ml-2 sm:first:ml-0')} />
+}
+
+export function ListboxDescription({ className, children, ...props }: React.ComponentPropsWithoutRef<'span'>) {
+  return (
+    <span
+      {...props}
+      className={clsx(
+        className,
+        'flex flex-1 overflow-hidden text-zinc-500 group-data-focus/option:text-white before:w-2 before:min-w-0 before:shrink dark:text-zinc-400'
+      )}
+    >
+      <span className="flex-1 truncate">{children}</span>
+    </span>
+  )
+}

package/source/catalyst/navbar.tsx

@@ -0,0 +1,96 @@
+'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 Navbar({ className, ...props }: React.ComponentPropsWithoutRef<'nav'>) {
+  return <nav {...props} className={clsx(className, 'flex flex-1 items-center gap-4 py-2.5')} />
+}
+
+export function NavbarDivider({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+  return <div aria-hidden="true" {...props} className={clsx(className, 'h-6 w-px bg-zinc-950/10 dark:bg-white/10')} />
+}
+
+export function NavbarSection({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+  let id = useId()
+
+  return (
+    <LayoutGroup id={id}>
+      <div {...props} className={clsx(className, 'flex items-center gap-3')} />
+    </LayoutGroup>
+  )
+}
+
+export function NavbarSpacer({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+  return <div aria-hidden="true" {...props} className={clsx(className, '-ml-4 flex-1')} />
+}
+
+export const NavbarItem = forwardRef(function NavbarItem(
+  {
+    current,
+    className,
+    children,
+    ...props
+  }: { current?: boolean; className?: string; children: React.ReactNode } & (
+    | Omit<Headless.ButtonProps, 'as' | 'className'>
+    | Omit<React.ComponentPropsWithoutRef<typeof Link>, 'className'>
+  ),
+  ref: React.ForwardedRef<HTMLAnchorElement | HTMLButtonElement>
+) {
+  let classes = clsx(
+    // Base
+    'relative flex min-w-0 items-center gap-3 rounded-lg p-2 text-left text-base/6 font-medium text-zinc-950 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)
+    '*:not-nth-2:last:data-[slot=icon]:ml-auto *:not-nth-2:last:data-[slot=icon]:size-5 sm:*:not-nth-2:last:data-[slot=icon]:size-4',
+    // Avatar
+    '*:data-[slot=avatar]:-m-0.5 *:data-[slot=avatar]:size-7 *:data-[slot=avatar]:[--avatar-radius:var(--radius-md)] 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',
+    // 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'
+  )
+
+  return (
+    <span className={clsx(className, 'relative')}>
+      {current && (
+        <motion.span
+          layoutId="current-indicator"
+          className="absolute inset-x-2 -bottom-2.5 h-0.5 rounded-full bg-zinc-950 dark:bg-white"
+        />
+      )}
+      {'href' in props ? (
+        <Link
+          {...props}
+          className={classes}
+          data-current={current ? 'true' : undefined}
+          ref={ref as React.ForwardedRef<HTMLAnchorElement>}
+        >
+          <TouchTarget>{children}</TouchTarget>
+        </Link>
+      ) : (
+        <Headless.Button
+          {...props}
+          className={clsx('cursor-default', classes)}
+          data-current={current ? 'true' : undefined}
+          ref={ref}
+        >
+          <TouchTarget>{children}</TouchTarget>
+        </Headless.Button>
+      )}
+    </span>
+  )
+})
+
+export function NavbarLabel({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) {
+  return <span {...props} className={clsx(className, 'truncate')} />
+}

package/source/catalyst/pagination.tsx

@@ -0,0 +1,98 @@
+import clsx from 'clsx'
+import type React from 'react'
+import { Button } from './button'
+
+export function Pagination({
+  'aria-label': ariaLabel = 'Page navigation',
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<'nav'>) {
+  return <nav aria-label={ariaLabel} {...props} className={clsx(className, 'flex gap-x-2')} />
+}
+
+export function PaginationPrevious({
+  href = null,
+  className,
+  children = 'Previous',
+}: React.PropsWithChildren<{ href?: string | null; className?: string }>) {
+  return (
+    <span className={clsx(className, 'grow basis-0')}>
+      <Button {...(href === null ? { disabled: true } : { href })} plain aria-label="Previous page">
+        <svg className="stroke-current" data-slot="icon" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+          <path
+            d="M2.75 8H13.25M2.75 8L5.25 5.5M2.75 8L5.25 10.5"
+            strokeWidth={1.5}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+        {children}
+      </Button>
+    </span>
+  )
+}
+
+export function PaginationNext({
+  href = null,
+  className,
+  children = 'Next',
+}: React.PropsWithChildren<{ href?: string | null; className?: string }>) {
+  return (
+    <span className={clsx(className, 'flex grow basis-0 justify-end')}>
+      <Button {...(href === null ? { disabled: true } : { href })} plain aria-label="Next page">
+        {children}
+        <svg className="stroke-current" data-slot="icon" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+          <path
+            d="M13.25 8L2.75 8M13.25 8L10.75 10.5M13.25 8L10.75 5.5"
+            strokeWidth={1.5}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </Button>
+    </span>
+  )
+}
+
+export function PaginationList({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) {
+  return <span {...props} className={clsx(className, 'hidden items-baseline gap-x-2 sm:flex')} />
+}
+
+export function PaginationPage({
+  href,
+  className,
+  current = false,
+  children,
+}: React.PropsWithChildren<{ href: string; className?: string; current?: boolean }>) {
+  return (
+    <Button
+      href={href}
+      plain
+      aria-label={`Page ${children}`}
+      aria-current={current ? 'page' : undefined}
+      className={clsx(
+        className,
+        'min-w-9 before:absolute before:-inset-px before:rounded-lg',
+        current && 'before:bg-zinc-950/5 dark:before:bg-white/10'
+      )}
+    >
+      <span className="-mx-0.5">{children}</span>
+    </Button>
+  )
+}
+
+export function PaginationGap({
+  className,
+  children = <>&hellip;</>,
+  ...props
+}: React.ComponentPropsWithoutRef<'span'>) {
+  return (
+    <span
+      aria-hidden="true"
+      {...props}
+      className={clsx(className, 'w-9 text-center text-sm/6 font-semibold text-zinc-950 select-none dark:text-white')}
+    >
+      {children}
+    </span>
+  )
+}

package/source/catalyst/radio.tsx

@@ -0,0 +1,142 @@
+import * as Headless from '@headlessui/react'
+import clsx from 'clsx'
+
+export function RadioGroup({
+  className,
+  ...props
+}: { className?: string } & Omit<Headless.RadioGroupProps, 'as' | 'className'>) {
+  return (
+    <Headless.RadioGroup
+      data-slot="control"
+      {...props}
+      className={clsx(
+        className,
+        // Basic groups
+        'space-y-3 **:data-[slot=label]:font-normal',
+        // With descriptions
+        'has-data-[slot=description]:space-y-6 has-data-[slot=description]:**:data-[slot=label]:font-medium'
+      )}
+    />
+  )
+}
+
+export function RadioField({
+  className,
+  ...props
+}: { className?: string } & Omit<Headless.FieldProps, 'as' | 'className'>) {
+  return (
+    <Headless.Field
+      data-slot="field"
+      {...props}
+      className={clsx(
+        className,
+        // Base layout
+        'grid grid-cols-[1.125rem_1fr] gap-x-4 gap-y-1 sm:grid-cols-[1rem_1fr]',
+        // Control layout
+        '*:data-[slot=control]:col-start-1 *:data-[slot=control]:row-start-1 *:data-[slot=control]:mt-0.75 sm:*:data-[slot=control]:mt-1',
+        // Label layout
+        '*:data-[slot=label]:col-start-2 *:data-[slot=label]:row-start-1',
+        // Description layout
+        '*:data-[slot=description]:col-start-2 *:data-[slot=description]:row-start-2',
+        // With description
+        'has-data-[slot=description]:**:data-[slot=label]:font-medium'
+      )}
+    />
+  )
+}
+
+const base = [
+  // Basic layout
+  'relative isolate flex size-4.75 shrink-0 rounded-full sm:size-4.25',
+  // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
+  'before:absolute before:inset-0 before:-z-10 before:rounded-full before:bg-white before:shadow-sm',
+  // Background color when checked
+  'group-data-checked:before:bg-(--radio-checked-bg)',
+  // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
+  'dark:before:hidden',
+  // Background color applied to control in dark mode
+  'dark:bg-white/5 dark:group-data-checked:bg-(--radio-checked-bg)',
+  // Border
+  'border border-zinc-950/15 group-data-checked:border-transparent group-data-hover:group-data-checked:border-transparent group-data-hover:border-zinc-950/30 group-data-checked:bg-(--radio-checked-border)',
+  'dark:border-white/15 dark:group-data-checked:border-white/5 dark:group-data-hover:group-data-checked:border-white/5 dark:group-data-hover:border-white/30',
+  // Inner highlight shadow
+  'after:absolute after:inset-0 after:rounded-full after:shadow-[inset_0_1px_--theme(--color-white/15%)]',
+  'dark:after:-inset-px dark:after:hidden dark:after:rounded-full dark:group-data-checked:after:block',
+  // Indicator color (light mode)
+  '[--radio-indicator:transparent] group-data-checked:[--radio-indicator:var(--radio-checked-indicator)] group-data-hover:group-data-checked:[--radio-indicator:var(--radio-checked-indicator)] group-data-hover:[--radio-indicator:var(--color-zinc-900)]/10',
+  // Indicator color (dark mode)
+  'dark:group-data-hover:group-data-checked:[--radio-indicator:var(--radio-checked-indicator)] dark:group-data-hover:[--radio-indicator:var(--color-zinc-700)]',
+  // Focus ring
+  'group-data-focus:outline group-data-focus:outline-2 group-data-focus:outline-offset-2 group-data-focus:outline-blue-500',
+  // Disabled state
+  'group-data-disabled:opacity-50',
+  'group-data-disabled:border-zinc-950/25 group-data-disabled:bg-zinc-950/5 group-data-disabled:[--radio-checked-indicator:var(--color-zinc-950)]/50 group-data-disabled:before:bg-transparent',
+  'dark:group-data-disabled:border-white/20 dark:group-data-disabled:bg-white/2.5 dark:group-data-disabled:[--radio-checked-indicator:var(--color-white)]/50 dark:group-data-checked:group-data-disabled:after:hidden',
+]
+
+const colors = {
+  'dark/zinc': [
+    '[--radio-checked-bg:var(--color-zinc-900)] [--radio-checked-border:var(--color-zinc-950)]/90 [--radio-checked-indicator:var(--color-white)]',
+    'dark:[--radio-checked-bg:var(--color-zinc-600)]',
+  ],
+  'dark/white': [
+    '[--radio-checked-bg:var(--color-zinc-900)] [--radio-checked-border:var(--color-zinc-950)]/90 [--radio-checked-indicator:var(--color-white)]',
+    'dark:[--radio-checked-bg:var(--color-white)] dark:[--radio-checked-border:var(--color-zinc-950)]/15 dark:[--radio-checked-indicator:var(--color-zinc-900)]',
+  ],
+  white:
+    '[--radio-checked-bg:var(--color-white)] [--radio-checked-border:var(--color-zinc-950)]/15 [--radio-checked-indicator:var(--color-zinc-900)]',
+  dark: '[--radio-checked-bg:var(--color-zinc-900)] [--radio-checked-border:var(--color-zinc-950)]/90 [--radio-checked-indicator:var(--color-white)]',
+  zinc: '[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-zinc-600)] [--radio-checked-border:var(--color-zinc-700)]/90',
+  red: '[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-red-600)] [--radio-checked-border:var(--color-red-700)]/90',
+  orange:
+    '[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-orange-500)] [--radio-checked-border:var(--color-orange-600)]/90',
+  amber:
+    '[--radio-checked-bg:var(--color-amber-400)] [--radio-checked-border:var(--color-amber-500)]/80 [--radio-checked-indicator:var(--color-amber-950)]',
+  yellow:
+    '[--radio-checked-bg:var(--color-yellow-300)] [--radio-checked-border:var(--color-yellow-400)]/80 [--radio-checked-indicator:var(--color-yellow-950)]',
+  lime: '[--radio-checked-bg:var(--color-lime-300)] [--radio-checked-border:var(--color-lime-400)]/80 [--radio-checked-indicator:var(--color-lime-950)]',
+  green:
+    '[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-green-600)] [--radio-checked-border:var(--color-green-700)]/90',
+  emerald:
+    '[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-emerald-600)] [--radio-checked-border:var(--color-emerald-700)]/90',
+  teal: '[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-teal-600)] [--radio-checked-border:var(--color-teal-700)]/90',
+  cyan: '[--radio-checked-bg:var(--color-cyan-300)] [--radio-checked-border:var(--color-cyan-400)]/80 [--radio-checked-indicator:var(--color-cyan-950)]',
+  sky: '[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-sky-500)] [--radio-checked-border:var(--color-sky-600)]/80',
+  blue: '[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-blue-600)] [--radio-checked-border:var(--color-blue-700)]/90',
+  indigo:
+    '[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-indigo-500)] [--radio-checked-border:var(--color-indigo-600)]/90',
+  violet:
+    '[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-violet-500)] [--radio-checked-border:var(--color-violet-600)]/90',
+  purple:
+    '[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-purple-500)] [--radio-checked-border:var(--color-purple-600)]/90',
+  fuchsia:
+    '[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-fuchsia-500)] [--radio-checked-border:var(--color-fuchsia-600)]/90',
+  pink: '[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-pink-500)] [--radio-checked-border:var(--color-pink-600)]/90',
+  rose: '[--radio-checked-indicator:var(--color-white)] [--radio-checked-bg:var(--color-rose-500)] [--radio-checked-border:var(--color-rose-600)]/90',
+}
+
+type Color = keyof typeof colors
+
+export function Radio({
+  color = 'dark/zinc',
+  className,
+  ...props
+}: { color?: Color; className?: string } & Omit<Headless.RadioProps, 'as' | 'className' | 'children'>) {
+  return (
+    <Headless.Radio
+      data-slot="control"
+      {...props}
+      className={clsx(className, 'group inline-flex focus:outline-hidden')}
+    >
+      <span className={clsx([base, colors[color]])}>
+        <span
+          className={clsx(
+            'size-full rounded-full border-[4.5px] border-transparent bg-(--radio-indicator) bg-clip-padding',
+            // Forced colors mode
+            'forced-colors:border-[Canvas] forced-colors:group-data-checked:border-[Highlight]'
+          )}
+        />
+      </span>
+    </Headless.Radio>
+  )
+}

package/source/catalyst/select.tsx

@@ -0,0 +1,68 @@
+import * as Headless from '@headlessui/react'
+import clsx from 'clsx'
+import React, { forwardRef } from 'react'
+
+export const Select = forwardRef(function Select(
+  { className, multiple, ...props }: { className?: string } & Omit<Headless.SelectProps, 'as' | 'className'>,
+  ref: React.ForwardedRef<HTMLSelectElement>
+) {
+  return (
+    <span
+      data-slot="control"
+      className={clsx([
+        className,
+        // Basic layout
+        'group relative block w-full',
+        // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
+        'before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm',
+        // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
+        'dark:before:hidden',
+        // Focus ring
+        'after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset has-data-focus:after:ring-2 has-data-focus:after:ring-blue-500',
+        // Disabled state
+        'has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none',
+      ])}
+    >
+      <Headless.Select
+        ref={ref}
+        multiple={multiple}
+        {...props}
+        className={clsx([
+          // Basic layout
+          'relative block w-full appearance-none rounded-lg py-[calc(--spacing(2.5)-1px)] sm:py-[calc(--spacing(1.5)-1px)]',
+          // Horizontal padding
+          multiple
+            ? 'px-[calc(--spacing(3.5)-1px)] sm:px-[calc(--spacing(3)-1px)]'
+            : 'pr-[calc(--spacing(10)-1px)] pl-[calc(--spacing(3.5)-1px)] sm:pr-[calc(--spacing(9)-1px)] sm:pl-[calc(--spacing(3)-1px)]',
+          // Options (multi-select)
+          '[&_optgroup]:font-semibold',
+          // Typography
+          'text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white dark:*:text-white',
+          // Border
+          'border border-zinc-950/10 data-hover:border-zinc-950/20 dark:border-white/10 dark:data-hover:border-white/20',
+          // Background color
+          'bg-transparent dark:bg-white/5 dark:*:bg-zinc-800',
+          // Hide default focus styles
+          'focus:outline-hidden',
+          // Invalid state
+          'data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:border-red-600 dark:data-invalid:data-hover:border-red-600',
+          // Disabled state
+          'data-disabled:border-zinc-950/20 data-disabled:opacity-100 dark:data-disabled:border-white/15 dark:data-disabled:bg-white/2.5 dark:data-hover:data-disabled:border-white/15',
+        ])}
+      />
+      {!multiple && (
+        <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+          <svg
+            className="size-5 stroke-zinc-500 group-has-data-disabled:stroke-zinc-600 sm:size-4 dark:stroke-zinc-400 forced-colors:stroke-[CanvasText]"
+            viewBox="0 0 16 16"
+            aria-hidden="true"
+            fill="none"
+          >
+            <path d="M5.75 10.75L8 13L10.25 10.75" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M10.25 5.25L8 3L5.75 5.25" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </span>
+      )}
+    </span>
+  )
+})

package/source/catalyst/sidebar-layout.tsx

@@ -0,0 +1,82 @@
+'use client'
+
+import * as Headless from '@headlessui/react'
+import React, { useState } from 'react'
+import { NavbarItem } from './navbar'
+
+function OpenMenuIcon() {
+  return (
+    <svg data-slot="icon" viewBox="0 0 20 20" aria-hidden="true">
+      <path d="M2 6.75C2 6.33579 2.33579 6 2.75 6H17.25C17.6642 6 18 6.33579 18 6.75C18 7.16421 17.6642 7.5 17.25 7.5H2.75C2.33579 7.5 2 7.16421 2 6.75ZM2 13.25C2 12.8358 2.33579 12.5 2.75 12.5H17.25C17.6642 12.5 18 12.8358 18 13.25C18 13.6642 17.6642 14 17.25 14H2.75C2.33579 14 2 13.6642 2 13.25Z" />
+    </svg>
+  )
+}
+
+function CloseMenuIcon() {
+  return (
+    <svg data-slot="icon" viewBox="0 0 20 20" aria-hidden="true">
+      <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
+    </svg>
+  )
+}
+
+function MobileSidebar({ open, close, children }: React.PropsWithChildren<{ open: boolean; close: () => void }>) {
+  return (
+    <Headless.Dialog open={open} onClose={close} className="lg:hidden">
+      <Headless.DialogBackdrop
+        transition
+        className="fixed inset-0 bg-black/30 transition data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+      />
+      <Headless.DialogPanel
+        transition
+        className="fixed inset-y-0 w-full max-w-80 p-2 transition duration-300 ease-in-out data-closed:-translate-x-full"
+      >
+        <div className="flex h-full flex-col rounded-lg bg-white shadow-xs ring-1 ring-zinc-950/5 dark:bg-zinc-900 dark:ring-white/10">
+          <div className="-mb-3 px-4 pt-3">
+            <Headless.CloseButton as={NavbarItem} aria-label="Close navigation">
+              <CloseMenuIcon />
+            </Headless.CloseButton>
+          </div>
+          {children}
+        </div>
+      </Headless.DialogPanel>
+    </Headless.Dialog>
+  )
+}
+
+export function SidebarLayout({
+  navbar,
+  sidebar,
+  children,
+}: React.PropsWithChildren<{ navbar: React.ReactNode; sidebar: React.ReactNode }>) {
+  let [showSidebar, setShowSidebar] = useState(false)
+
+  return (
+    <div className="relative isolate flex min-h-svh w-full bg-white max-lg:flex-col lg:bg-zinc-100 dark:bg-zinc-900 dark:lg:bg-zinc-950">
+      {/* Sidebar on desktop */}
+      <div className="fixed inset-y-0 left-0 w-64 max-lg:hidden">{sidebar}</div>
+
+      {/* Sidebar on mobile */}
+      <MobileSidebar open={showSidebar} close={() => setShowSidebar(false)}>
+        {sidebar}
+      </MobileSidebar>
+
+      {/* Navbar on mobile */}
+      <header className="flex items-center px-4 lg:hidden">
+        <div className="py-2.5">
+          <NavbarItem onClick={() => setShowSidebar(true)} aria-label="Open navigation">
+            <OpenMenuIcon />
+          </NavbarItem>
+        </div>
+        <div className="min-w-0 flex-1">{navbar}</div>
+      </header>
+
+      {/* Content */}
+      <main className="flex flex-1 flex-col pb-2 lg:min-w-0 lg:pt-2 lg:pr-2 lg:pl-64">
+        <div className="grow p-6 lg:rounded-lg lg:bg-white lg:p-10 lg:shadow-xs lg:ring-1 lg:ring-zinc-950/5 dark:lg:bg-zinc-900 dark:lg:ring-white/10">
+          <div className="mx-auto max-w-6xl">{children}</div>
+        </div>
+      </main>
+    </div>
+  )
+}