@taicode/common-web 1.1.20 → 1.1.21

package/output/catalyst/radio.jsx

@@ -0,0 +1,103 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as Headless from '@headlessui/react';
+import clsx from 'clsx';
+export function RadioGroup(_a) {
+    var { className } = _a, props = __rest(_a, ["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(_a) {
+    var { className } = _a, props = __rest(_a, ["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',
+};
+export function Radio(_a) {
+    var { color = 'dark/zinc', className } = _a, props = __rest(_a, ["color", "className"]);
+    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/output/catalyst/select.jsx

@@ -0,0 +1,59 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as Headless from '@headlessui/react';
+import clsx from 'clsx';
+import React, { forwardRef } from 'react';
+export const Select = forwardRef(function Select(_a, ref) {
+    var { className, multiple } = _a, props = __rest(_a, ["className", "multiple"]);
+    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/output/catalyst/sidebar-layout.jsx

@@ -0,0 +1,58 @@
+'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 }) {
+    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, }) {
+    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>);
+}

package/output/catalyst/sidebar.jsx

@@ -0,0 +1,85 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return <nav {...props} className={clsx(className, 'flex h-full min-h-0 flex-col')}/>;
+}
+export function SidebarHeader(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<div {...props} className={clsx(className, 'flex flex-col border-b border-zinc-950/5 p-4 dark:border-white/5 [&>[data-slot=section]+[data-slot=section]]:mt-2.5')}/>);
+}
+export function SidebarBody(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<div {...props} className={clsx(className, 'flex flex-1 flex-col overflow-y-auto p-4 [&>[data-slot=section]+[data-slot=section]]:mt-8')}/>);
+}
+export function SidebarFooter(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<div {...props} className={clsx(className, 'flex flex-col border-t border-zinc-950/5 p-4 dark:border-white/5 [&>[data-slot=section]+[data-slot=section]]:mt-2.5')}/>);
+}
+export function SidebarSection(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    let id = useId();
+    return (<LayoutGroup id={id}>
+      <div {...props} data-slot="section" className={clsx(className, 'flex flex-col gap-0.5')}/>
+    </LayoutGroup>);
+}
+export function SidebarDivider(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return <hr {...props} className={clsx(className, 'my-4 border-t border-zinc-950/5 lg:-mx-4 dark:border-white/5')}/>;
+}
+export function SidebarSpacer(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return <div aria-hidden="true" {...props} className={clsx(className, 'mt-8 flex-1')}/>;
+}
+export function SidebarHeading(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<h3 {...props} className={clsx(className, 'mb-1 px-2 text-xs/6 font-medium text-zinc-500 dark:text-zinc-400')}/>);
+}
+export const SidebarItem = forwardRef(function SidebarItem(_a, ref) {
+    var { current, className, children } = _a, props = __rest(_a, ["current", "className", "children"]);
+    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 (<span className={clsx(className, 'relative')}>
+      {current && (<motion.span layoutId="current-indicator" className="absolute inset-y-2 -left-4 w-0.5 rounded-full bg-zinc-950 dark:bg-white"/>)}
+      {'href' in props ? (<Headless.CloseButton as={Link} {...props} className={classes} data-current={current ? 'true' : undefined} ref={ref}>
+          <TouchTarget>{children}</TouchTarget>
+        </Headless.CloseButton>) : (<Headless.Button {...props} className={clsx('cursor-default', classes)} data-current={current ? 'true' : undefined} ref={ref}>
+          <TouchTarget>{children}</TouchTarget>
+        </Headless.Button>)}
+    </span>);
+});
+export function SidebarLabel(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return <span {...props} className={clsx(className, 'truncate')}/>;
+}

package/output/catalyst/stacked-layout.jsx

@@ -0,0 +1,55 @@
+'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 }) {
+    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 StackedLayout({ navbar, sidebar, children, }) {
+    let [showSidebar, setShowSidebar] = useState(false);
+    return (<div className="relative isolate flex min-h-svh w-full flex-col bg-white lg:bg-zinc-100 dark:bg-zinc-900 dark:lg:bg-zinc-950">
+      {/* Sidebar on mobile */}
+      <MobileSidebar open={showSidebar} close={() => setShowSidebar(false)}>
+        {sidebar}
+      </MobileSidebar>
+
+      {/* Navbar */}
+      <header className="flex items-center px-4">
+        <div className="py-2.5 lg:hidden">
+          <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:px-2">
+        <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>);
+}

package/output/catalyst/switch.jsx

@@ -0,0 +1,161 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as Headless from '@headlessui/react';
+import clsx from 'clsx';
+export function SwitchGroup(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<div 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 SwitchField(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<Headless.Field data-slot="field" {...props} className={clsx(className, 
+        // Base layout
+        'grid grid-cols-[1fr_auto] gap-x-8 gap-y-1 sm:grid-cols-[1fr_auto]', 
+        // Control layout
+        '*:data-[slot=control]:col-start-2 *:data-[slot=control]:self-start sm:*:data-[slot=control]:mt-0.5', 
+        // Label layout
+        '*:data-[slot=label]:col-start-1 *:data-[slot=label]:row-start-1', 
+        // Description layout
+        '*:data-[slot=description]:col-start-1 *:data-[slot=description]:row-start-2', 
+        // With description
+        'has-data-[slot=description]:**:data-[slot=label]:font-medium')}/>);
+}
+const colors = {
+    'dark/zinc': [
+        '[--switch-bg-ring:var(--color-zinc-950)]/90 [--switch-bg:var(--color-zinc-900)] dark:[--switch-bg-ring:transparent] dark:[--switch-bg:var(--color-white)]/25',
+        '[--switch-ring:var(--color-zinc-950)]/90 [--switch-shadow:var(--color-black)]/10 [--switch:white] dark:[--switch-ring:var(--color-zinc-700)]/90',
+    ],
+    'dark/white': [
+        '[--switch-bg-ring:var(--color-zinc-950)]/90 [--switch-bg:var(--color-zinc-900)] dark:[--switch-bg-ring:transparent] dark:[--switch-bg:var(--color-white)]',
+        '[--switch-ring:var(--color-zinc-950)]/90 [--switch-shadow:var(--color-black)]/10 [--switch:white] dark:[--switch-ring:transparent] dark:[--switch:var(--color-zinc-900)]',
+    ],
+    dark: [
+        '[--switch-bg-ring:var(--color-zinc-950)]/90 [--switch-bg:var(--color-zinc-900)] dark:[--switch-bg-ring:var(--color-white)]/15',
+        '[--switch-ring:var(--color-zinc-950)]/90 [--switch-shadow:var(--color-black)]/10 [--switch:white]',
+    ],
+    zinc: [
+        '[--switch-bg-ring:var(--color-zinc-700)]/90 [--switch-bg:var(--color-zinc-600)] dark:[--switch-bg-ring:transparent]',
+        '[--switch-shadow:var(--color-black)]/10 [--switch:white] [--switch-ring:var(--color-zinc-700)]/90',
+    ],
+    white: [
+        '[--switch-bg-ring:var(--color-black)]/15 [--switch-bg:white] dark:[--switch-bg-ring:transparent]',
+        '[--switch-shadow:var(--color-black)]/10 [--switch-ring:transparent] [--switch:var(--color-zinc-950)]',
+    ],
+    red: [
+        '[--switch-bg-ring:var(--color-red-700)]/90 [--switch-bg:var(--color-red-600)] dark:[--switch-bg-ring:transparent]',
+        '[--switch:white] [--switch-ring:var(--color-red-700)]/90 [--switch-shadow:var(--color-red-900)]/20',
+    ],
+    orange: [
+        '[--switch-bg-ring:var(--color-orange-600)]/90 [--switch-bg:var(--color-orange-500)] dark:[--switch-bg-ring:transparent]',
+        '[--switch:white] [--switch-ring:var(--color-orange-600)]/90 [--switch-shadow:var(--color-orange-900)]/20',
+    ],
+    amber: [
+        '[--switch-bg-ring:var(--color-amber-500)]/80 [--switch-bg:var(--color-amber-400)] dark:[--switch-bg-ring:transparent]',
+        '[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:var(--color-amber-950)]',
+    ],
+    yellow: [
+        '[--switch-bg-ring:var(--color-yellow-400)]/80 [--switch-bg:var(--color-yellow-300)] dark:[--switch-bg-ring:transparent]',
+        '[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:var(--color-yellow-950)]',
+    ],
+    lime: [
+        '[--switch-bg-ring:var(--color-lime-400)]/80 [--switch-bg:var(--color-lime-300)] dark:[--switch-bg-ring:transparent]',
+        '[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:var(--color-lime-950)]',
+    ],
+    green: [
+        '[--switch-bg-ring:var(--color-green-700)]/90 [--switch-bg:var(--color-green-600)] dark:[--switch-bg-ring:transparent]',
+        '[--switch:white] [--switch-ring:var(--color-green-700)]/90 [--switch-shadow:var(--color-green-900)]/20',
+    ],
+    emerald: [
+        '[--switch-bg-ring:var(--color-emerald-600)]/90 [--switch-bg:var(--color-emerald-500)] dark:[--switch-bg-ring:transparent]',
+        '[--switch:white] [--switch-ring:var(--color-emerald-600)]/90 [--switch-shadow:var(--color-emerald-900)]/20',
+    ],
+    teal: [
+        '[--switch-bg-ring:var(--color-teal-700)]/90 [--switch-bg:var(--color-teal-600)] dark:[--switch-bg-ring:transparent]',
+        '[--switch:white] [--switch-ring:var(--color-teal-700)]/90 [--switch-shadow:var(--color-teal-900)]/20',
+    ],
+    cyan: [
+        '[--switch-bg-ring:var(--color-cyan-400)]/80 [--switch-bg:var(--color-cyan-300)] dark:[--switch-bg-ring:transparent]',
+        '[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:var(--color-cyan-950)]',
+    ],
+    sky: [
+        '[--switch-bg-ring:var(--color-sky-600)]/80 [--switch-bg:var(--color-sky-500)] dark:[--switch-bg-ring:transparent]',
+        '[--switch:white] [--switch-ring:var(--color-sky-600)]/80 [--switch-shadow:var(--color-sky-900)]/20',
+    ],
+    blue: [
+        '[--switch-bg-ring:var(--color-blue-700)]/90 [--switch-bg:var(--color-blue-600)] dark:[--switch-bg-ring:transparent]',
+        '[--switch:white] [--switch-ring:var(--color-blue-700)]/90 [--switch-shadow:var(--color-blue-900)]/20',
+    ],
+    indigo: [
+        '[--switch-bg-ring:var(--color-indigo-600)]/90 [--switch-bg:var(--color-indigo-500)] dark:[--switch-bg-ring:transparent]',
+        '[--switch:white] [--switch-ring:var(--color-indigo-600)]/90 [--switch-shadow:var(--color-indigo-900)]/20',
+    ],
+    violet: [
+        '[--switch-bg-ring:var(--color-violet-600)]/90 [--switch-bg:var(--color-violet-500)] dark:[--switch-bg-ring:transparent]',
+        '[--switch:white] [--switch-ring:var(--color-violet-600)]/90 [--switch-shadow:var(--color-violet-900)]/20',
+    ],
+    purple: [
+        '[--switch-bg-ring:var(--color-purple-600)]/90 [--switch-bg:var(--color-purple-500)] dark:[--switch-bg-ring:transparent]',
+        '[--switch:white] [--switch-ring:var(--color-purple-600)]/90 [--switch-shadow:var(--color-purple-900)]/20',
+    ],
+    fuchsia: [
+        '[--switch-bg-ring:var(--color-fuchsia-600)]/90 [--switch-bg:var(--color-fuchsia-500)] dark:[--switch-bg-ring:transparent]',
+        '[--switch:white] [--switch-ring:var(--color-fuchsia-600)]/90 [--switch-shadow:var(--color-fuchsia-900)]/20',
+    ],
+    pink: [
+        '[--switch-bg-ring:var(--color-pink-600)]/90 [--switch-bg:var(--color-pink-500)] dark:[--switch-bg-ring:transparent]',
+        '[--switch:white] [--switch-ring:var(--color-pink-600)]/90 [--switch-shadow:var(--color-pink-900)]/20',
+    ],
+    rose: [
+        '[--switch-bg-ring:var(--color-rose-600)]/90 [--switch-bg:var(--color-rose-500)] dark:[--switch-bg-ring:transparent]',
+        '[--switch:white] [--switch-ring:var(--color-rose-600)]/90 [--switch-shadow:var(--color-rose-900)]/20',
+    ],
+};
+export function Switch(_a) {
+    var { color = 'dark/zinc', className } = _a, props = __rest(_a, ["color", "className"]);
+    return (<Headless.Switch data-slot="control" {...props} className={clsx(className, 
+        // Base styles
+        'group relative isolate inline-flex h-6 w-10 cursor-default rounded-full p-[3px] sm:h-5 sm:w-8', 
+        // Transitions
+        'transition duration-0 ease-in-out data-changing:duration-200', 
+        // Outline and background color in forced-colors mode so switch is still visible
+        'forced-colors:outline forced-colors:[--switch-bg:Highlight] dark:forced-colors:[--switch-bg:Highlight]', 
+        // Unchecked
+        'bg-zinc-200 ring-1 ring-black/5 ring-inset dark:bg-white/5 dark:ring-white/15', 
+        // Checked
+        'data-checked:bg-(--switch-bg) data-checked:ring-(--switch-bg-ring) dark:data-checked:bg-(--switch-bg) dark:data-checked:ring-(--switch-bg-ring)', 
+        // Focus
+        'focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500', 
+        // Hover
+        'data-hover:ring-black/15 data-hover:data-checked:ring-(--switch-bg-ring)', 'dark:data-hover:ring-white/25 dark:data-hover:data-checked:ring-(--switch-bg-ring)', 
+        // Disabled
+        'data-disabled:bg-zinc-200 data-disabled:opacity-50 data-disabled:data-checked:bg-zinc-200 data-disabled:data-checked:ring-black/5', 'dark:data-disabled:bg-white/15 dark:data-disabled:data-checked:bg-white/15 dark:data-disabled:data-checked:ring-white/15', 
+        // Color specific styles
+        colors[color])}>
+      <span aria-hidden="true" className={clsx(
+        // Basic layout
+        'pointer-events-none relative inline-block size-4.5 rounded-full sm:size-3.5', 
+        // Transition
+        'translate-x-0 transition duration-200 ease-in-out', 
+        // Invisible border so the switch is still visible in forced-colors mode
+        'border border-transparent', 
+        // Unchecked
+        'bg-white shadow-sm ring-1 ring-black/5', 
+        // Checked
+        'group-data-checked:bg-(--switch) group-data-checked:shadow-(--switch-shadow) group-data-checked:ring-(--switch-ring)', 'group-data-checked:translate-x-4 sm:group-data-checked:translate-x-3', 
+        // Disabled
+        'group-data-checked:group-data-disabled:bg-white group-data-checked:group-data-disabled:shadow-sm group-data-checked:group-data-disabled:ring-black/5')}/>
+    </Headless.Switch>);
+}

package/output/catalyst/table.jsx

@@ -0,0 +1,68 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import clsx from 'clsx';
+import { createContext, useContext, useState } from 'react';
+import { Link } from './link';
+const TableContext = createContext({
+    bleed: false,
+    dense: false,
+    grid: false,
+    striped: false,
+});
+export function Table(_a) {
+    var { bleed = false, dense = false, grid = false, striped = false, className, children } = _a, props = __rest(_a, ["bleed", "dense", "grid", "striped", "className", "children"]);
+    return (<TableContext.Provider value={{ bleed, dense, grid, striped }}>
+      <div className="flow-root">
+        <div {...props} className={clsx(className, '-mx-(--gutter) overflow-x-auto whitespace-nowrap')}>
+          <div className={clsx('inline-block min-w-full align-middle', !bleed && 'sm:px-(--gutter)')}>
+            <table className="min-w-full text-left text-sm/6 text-zinc-950 dark:text-white">{children}</table>
+          </div>
+        </div>
+      </div>
+    </TableContext.Provider>);
+}
+export function TableHead(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return <thead {...props} className={clsx(className, 'text-zinc-500 dark:text-zinc-400')}/>;
+}
+export function TableBody(props) {
+    return <tbody {...props}/>;
+}
+const TableRowContext = createContext({
+    href: undefined,
+    target: undefined,
+    title: undefined,
+});
+export function TableRow(_a) {
+    var { href, target, title, className } = _a, props = __rest(_a, ["href", "target", "title", "className"]);
+    let { striped } = useContext(TableContext);
+    return (<TableRowContext.Provider value={{ href, target, title }}>
+      <tr {...props} className={clsx(className, href &&
+            'has-[[data-row-link][data-focus]]:outline-2 has-[[data-row-link][data-focus]]:-outline-offset-2 has-[[data-row-link][data-focus]]:outline-blue-500 dark:focus-within:bg-white/2.5', striped && 'even:bg-zinc-950/2.5 dark:even:bg-white/2.5', href && striped && 'hover:bg-zinc-950/5 dark:hover:bg-white/5', href && !striped && 'hover:bg-zinc-950/2.5 dark:hover:bg-white/2.5')}/>
+    </TableRowContext.Provider>);
+}
+export function TableHeader(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    let { bleed, grid } = useContext(TableContext);
+    return (<th {...props} className={clsx(className, 'border-b border-b-zinc-950/10 px-4 py-2 font-medium first:pl-(--gutter,--spacing(2)) last:pr-(--gutter,--spacing(2)) dark:border-b-white/10', grid && 'border-l border-l-zinc-950/5 first:border-l-0 dark:border-l-white/5', !bleed && 'sm:first:pl-1 sm:last:pr-1')}/>);
+}
+export function TableCell(_a) {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    let { bleed, dense, grid, striped } = useContext(TableContext);
+    let { href, target, title } = useContext(TableRowContext);
+    let [cellRef, setCellRef] = useState(null);
+    return (<td ref={href ? setCellRef : undefined} {...props} className={clsx(className, 'relative px-4 first:pl-(--gutter,--spacing(2)) last:pr-(--gutter,--spacing(2))', !striped && 'border-b border-zinc-950/5 dark:border-white/5', grid && 'border-l border-l-zinc-950/5 first:border-l-0 dark:border-l-white/5', dense ? 'py-2.5' : 'py-4', !bleed && 'sm:first:pl-1 sm:last:pr-1')}>
+      {href && (<Link data-row-link href={href} target={target} aria-label={title} tabIndex={(cellRef === null || cellRef === void 0 ? void 0 : cellRef.previousElementSibling) === null ? 0 : -1} className="absolute inset-0 focus:outline-hidden"/>)}
+      {children}
+    </td>);
+}

package/output/catalyst/text.jsx

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import clsx from 'clsx';
+import { Link } from './link';
+export function Text(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<p data-slot="text" {...props} className={clsx(className, 'text-base/6 text-zinc-500 sm:text-sm/6 dark:text-zinc-400')}/>);
+}
+export function TextLink(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<Link {...props} className={clsx(className, 'text-zinc-950 underline decoration-zinc-950/50 data-hover:decoration-zinc-950 dark:text-white dark:decoration-white/50 dark:data-hover:decoration-white')}/>);
+}
+export function Strong(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return <strong {...props} className={clsx(className, 'font-medium text-zinc-950 dark:text-white')}/>;
+}
+export function Code(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<code {...props} className={clsx(className, 'rounded-sm border border-zinc-950/10 bg-zinc-950/2.5 px-0.5 text-sm font-medium text-zinc-950 sm:text-[0.8125rem] dark:border-white/20 dark:bg-white/5 dark:text-white')}/>);
+}