@taicode/common-web 1.1.19 → 1.1.21

package/output/catalyst/dialog.jsx

@@ -0,0 +1,55 @@
+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 { Text } from './text';
+const sizes = {
+    xs: 'sm:max-w-xs',
+    sm: 'sm:max-w-sm',
+    md: 'sm:max-w-md',
+    lg: 'sm:max-w-lg',
+    xl: 'sm:max-w-xl',
+    '2xl': 'sm:max-w-2xl',
+    '3xl': 'sm:max-w-3xl',
+    '4xl': 'sm:max-w-4xl',
+    '5xl': 'sm:max-w-5xl',
+};
+export function Dialog(_a) {
+    var { size = 'lg', className, children } = _a, props = __rest(_a, ["size", "className", "children"]);
+    return (<Headless.Dialog {...props}>
+      <Headless.DialogBackdrop transition className="fixed inset-0 flex w-screen justify-center overflow-y-auto bg-zinc-950/25 px-2 py-2 transition duration-100 focus:outline-0 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in sm:px-6 sm:py-8 lg:px-8 lg:py-16 dark:bg-zinc-950/50"/>
+
+      <div className="fixed inset-0 w-screen overflow-y-auto pt-6 sm:pt-0">
+        <div className="grid min-h-full grid-rows-[1fr_auto] justify-items-center sm:grid-rows-[1fr_auto_3fr] sm:p-4">
+          <Headless.DialogPanel transition className={clsx(className, sizes[size], 'row-start-2 w-full min-w-0 rounded-t-3xl bg-white p-(--gutter) shadow-lg ring-1 ring-zinc-950/10 [--gutter:--spacing(8)] sm:mb-auto sm:rounded-2xl dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline', 'transition duration-100 will-change-transform data-closed:translate-y-12 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in sm:data-closed:translate-y-0 sm:data-closed:data-enter:scale-95')}>
+            {children}
+          </Headless.DialogPanel>
+        </div>
+      </div>
+    </Headless.Dialog>);
+}
+export function DialogTitle(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<Headless.DialogTitle {...props} className={clsx(className, 'text-lg/6 font-semibold text-balance text-zinc-950 sm:text-base/6 dark:text-white')}/>);
+}
+export function DialogDescription(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return <Headless.Description as={Text} {...props} className={clsx(className, 'mt-2 text-pretty')}/>;
+}
+export function DialogBody(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return <div {...props} className={clsx(className, 'mt-6')}/>;
+}
+export function DialogActions(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<div {...props} className={clsx(className, 'mt-8 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:flex-row sm:*:w-auto')}/>);
+}

package/output/catalyst/divider.jsx

@@ -0,0 +1,16 @@
+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';
+export function Divider(_a) {
+    var { soft = false, className } = _a, props = __rest(_a, ["soft", "className"]);
+    return (<hr role="presentation" {...props} className={clsx(className, 'w-full border-t', soft && 'border-zinc-950/5 dark:border-white/5', !soft && 'border-zinc-950/10 dark:border-white/10')}/>);
+}

package/output/catalyst/dropdown.jsx

@@ -0,0 +1,102 @@
+'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 { Button } from './button';
+import { Link } from './link';
+export function Dropdown(props) {
+    return <Headless.Menu {...props}/>;
+}
+export function DropdownButton(_a) {
+    var { as = Button } = _a, props = __rest(_a, ["as"]);
+    return <Headless.MenuButton as={as} {...props}/>;
+}
+export function DropdownMenu(_a) {
+    var { anchor = 'bottom', className } = _a, props = __rest(_a, ["anchor", "className"]);
+    return (<Headless.MenuItems {...props} transition anchor={anchor} className={clsx(className, 
+        // Anchor positioning
+        '[--anchor-gap:--spacing(2)] [--anchor-padding:--spacing(1)] data-[anchor~=end]:[--anchor-offset:6px] data-[anchor~=start]:[--anchor-offset:-6px] sm:data-[anchor~=end]:[--anchor-offset:4px] sm:data-[anchor~=start]:[--anchor-offset:-4px]', 
+        // Base styles
+        'isolate w-max rounded-xl p-1', 
+        // 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-auto', 
+        // 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', 
+        // Define grid at the menu level if subgrid is supported
+        'supports-[grid-template-columns:subgrid]:grid supports-[grid-template-columns:subgrid]:grid-cols-[auto_1fr_1.5rem_0.5rem_auto]', 
+        // Transitions
+        'transition data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0')}/>);
+}
+export function DropdownItem(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    let classes = clsx(className, 
+    // Base styles
+    'group cursor-default rounded-lg px-3.5 py-2.5 focus:outline-hidden sm:px-3 sm:py-1.5', 
+    // Text styles
+    'text-left text-base/6 text-zinc-950 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]', 
+    // Focus
+    'data-focus:bg-blue-500 data-focus:text-white', 
+    // Disabled state
+    'data-disabled:opacity-50', 
+    // Forced colors mode
+    'forced-color-adjust-none forced-colors:data-focus:bg-[Highlight] forced-colors:data-focus:text-[HighlightText] forced-colors:data-focus:*:data-[slot=icon]:text-[HighlightText]', 
+    // Use subgrid when available but fallback to an explicit grid layout if not
+    'col-span-full grid grid-cols-[auto_1fr_1.5rem_0.5rem_auto] items-center supports-[grid-template-columns:subgrid]:grid-cols-subgrid', 
+    // Icons
+    '*:data-[slot=icon]:col-start-1 *:data-[slot=icon]:row-start-1 *:data-[slot=icon]:mr-2.5 *:data-[slot=icon]:-ml-0.5 *:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:mr-2 sm:*:data-[slot=icon]:size-4', '*:data-[slot=icon]:text-zinc-500 data-focus:*:data-[slot=icon]:text-white dark:*:data-[slot=icon]:text-zinc-400 dark:data-focus:*:data-[slot=icon]:text-white', 
+    // Avatar
+    '*:data-[slot=avatar]:mr-2.5 *:data-[slot=avatar]:-ml-1 *:data-[slot=avatar]:size-6 sm:*:data-[slot=avatar]:mr-2 sm:*:data-[slot=avatar]:size-5');
+    return 'href' in props ? (<Headless.MenuItem as={Link} {...props} className={classes}/>) : (<Headless.MenuItem as="button" type="button" {...props} className={classes}/>);
+}
+export function DropdownHeader(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return <div {...props} className={clsx(className, 'col-span-5 px-3.5 pt-2.5 pb-1 sm:px-3')}/>;
+}
+export function DropdownSection(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<Headless.MenuSection {...props} className={clsx(className, 
+        // Define grid at the section level instead of the item level if subgrid is supported
+        'col-span-full supports-[grid-template-columns:subgrid]:grid supports-[grid-template-columns:subgrid]:grid-cols-[auto_1fr_1.5rem_0.5rem_auto]')}/>);
+}
+export function DropdownHeading(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<Headless.MenuHeading {...props} className={clsx(className, 'col-span-full grid grid-cols-[1fr_auto] gap-x-12 px-3.5 pt-2 pb-1 text-sm/5 font-medium text-zinc-500 sm:px-3 sm:text-xs/5 dark:text-zinc-400')}/>);
+}
+export function DropdownDivider(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<Headless.MenuSeparator {...props} className={clsx(className, 'col-span-full mx-3.5 my-1 h-px border-0 bg-zinc-950/5 sm:mx-3 dark:bg-white/10 forced-colors:bg-[CanvasText]')}/>);
+}
+export function DropdownLabel(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return <div {...props} data-slot="label" className={clsx(className, 'col-start-2 row-start-1')} {...props}/>;
+}
+export function DropdownDescription(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<Headless.Description data-slot="description" {...props} className={clsx(className, 'col-span-2 col-start-2 row-start-2 text-sm/5 text-zinc-500 group-data-focus:text-white sm:text-xs/5 dark:text-zinc-400 forced-colors:group-data-focus:text-[HighlightText]')}/>);
+}
+export function DropdownShortcut(_a) {
+    var { keys, className } = _a, props = __rest(_a, ["keys", "className"]);
+    return (<Headless.Description as="kbd" {...props} className={clsx(className, 'col-start-5 row-start-1 flex justify-self-end')}>
+      {(Array.isArray(keys) ? keys : keys.split('')).map((char, index) => (<kbd key={index} className={clsx([
+                'min-w-[2ch] text-center font-sans text-zinc-400 capitalize group-data-focus:text-white forced-colors:group-data-focus:text-[HighlightText]',
+                // Make sure key names that are longer than one character (like "Tab") have extra space
+                index > 0 && char.length > 1 && 'pl-1',
+            ])}>
+          {char}
+        </kbd>))}
+    </Headless.Description>);
+}

package/output/catalyst/fieldset.jsx

@@ -0,0 +1,41 @@
+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 Fieldset(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<Headless.Fieldset {...props} className={clsx(className, '*:data-[slot=text]:mt-1 [&>*+[data-slot=control]]:mt-6')}/>);
+}
+export function Legend(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<Headless.Legend data-slot="legend" {...props} className={clsx(className, 'text-base/6 font-semibold text-zinc-950 data-disabled:opacity-50 sm:text-sm/6 dark:text-white')}/>);
+}
+export function FieldGroup(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return <div data-slot="control" {...props} className={clsx(className, 'space-y-8')}/>;
+}
+export function Field(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<Headless.Field {...props} className={clsx(className, '[&>[data-slot=label]+[data-slot=control]]:mt-3', '[&>[data-slot=label]+[data-slot=description]]:mt-1', '[&>[data-slot=description]+[data-slot=control]]:mt-3', '[&>[data-slot=control]+[data-slot=description]]:mt-3', '[&>[data-slot=control]+[data-slot=error]]:mt-3', '*:data-[slot=label]:font-medium')}/>);
+}
+export function Label(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<Headless.Label data-slot="label" {...props} className={clsx(className, 'text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6 dark:text-white')}/>);
+}
+export function Description(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<Headless.Description data-slot="description" {...props} className={clsx(className, 'text-base/6 text-zinc-500 data-disabled:opacity-50 sm:text-sm/6 dark:text-zinc-400')}/>);
+}
+export function ErrorMessage(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<Headless.Description data-slot="error" {...props} className={clsx(className, 'text-base/6 text-red-600 data-disabled:opacity-50 sm:text-sm/6 dark:text-red-500')}/>);
+}

package/output/catalyst/heading.jsx

@@ -0,0 +1,22 @@
+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';
+export function Heading(_a) {
+    var { className, level = 1 } = _a, props = __rest(_a, ["className", "level"]);
+    let Element = `h${level}`;
+    return (<Element {...props} className={clsx(className, 'text-2xl/8 font-semibold text-zinc-950 sm:text-xl/8 dark:text-white')}/>);
+}
+export function Subheading(_a) {
+    var { className, level = 2 } = _a, props = __rest(_a, ["className", "level"]);
+    let Element = `h${level}`;
+    return (<Element {...props} className={clsx(className, 'text-base/7 font-semibold text-zinc-950 sm:text-sm/6 dark:text-white')}/>);
+}

package/output/catalyst/input.jsx

@@ -0,0 +1,73 @@
+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 function InputGroup({ children }) {
+    return (<span data-slot="control" className={clsx('relative isolate block', 'has-[[data-slot=icon]:first-child]:[&_input]:pl-10 has-[[data-slot=icon]:last-child]:[&_input]:pr-10 sm:has-[[data-slot=icon]:first-child]:[&_input]:pl-8 sm:has-[[data-slot=icon]:last-child]:[&_input]:pr-8', '*:data-[slot=icon]:pointer-events-none *:data-[slot=icon]:absolute *:data-[slot=icon]:top-3 *:data-[slot=icon]:z-10 *:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:top-2.5 sm:*:data-[slot=icon]:size-4', '[&>[data-slot=icon]:first-child]:left-3 sm:[&>[data-slot=icon]:first-child]:left-2.5 [&>[data-slot=icon]:last-child]:right-3 sm:[&>[data-slot=icon]:last-child]:right-2.5', '*:data-[slot=icon]:text-zinc-500 dark:*:data-[slot=icon]:text-zinc-400')}>
+      {children}
+    </span>);
+}
+const dateTypes = ['date', 'datetime-local', 'month', 'time', 'week'];
+export const Input = forwardRef(function Input(_a, ref) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<span data-slot="control" className={clsx([
+            className,
+            // Basic layout
+            '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 sm:focus-within:after:ring-2 sm:focus-within: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',
+            // Invalid state
+            'has-data-invalid:before:shadow-red-500/10',
+        ])}>
+      <Headless.Input ref={ref} {...props} className={clsx([
+            // Date classes
+            props.type &&
+                dateTypes.includes(props.type) && [
+                '[&::-webkit-datetime-edit-fields-wrapper]:p-0',
+                '[&::-webkit-date-and-time-value]:min-h-[1.5em]',
+                '[&::-webkit-datetime-edit]:inline-flex',
+                '[&::-webkit-datetime-edit]:p-0',
+                '[&::-webkit-datetime-edit-year-field]:p-0',
+                '[&::-webkit-datetime-edit-month-field]:p-0',
+                '[&::-webkit-datetime-edit-day-field]:p-0',
+                '[&::-webkit-datetime-edit-hour-field]:p-0',
+                '[&::-webkit-datetime-edit-minute-field]:p-0',
+                '[&::-webkit-datetime-edit-second-field]:p-0',
+                '[&::-webkit-datetime-edit-millisecond-field]:p-0',
+                '[&::-webkit-datetime-edit-meridiem-field]:p-0',
+            ],
+            // Basic layout
+            'relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)]',
+            // Typography
+            'text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 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',
+            // 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-500 dark:data-invalid:data-hover:border-red-500',
+            // Disabled state
+            'data-disabled:border-zinc-950/20 dark:data-disabled:border-white/15 dark:data-disabled:bg-white/2.5 dark:data-hover:data-disabled:border-white/15',
+            // System icons
+            'dark:scheme-dark',
+        ])}/>
+    </span>);
+});

package/output/catalyst/link.jsx

@@ -0,0 +1,14 @@
+/**
+ * TODO: Update this component to use your client-side framework's link
+ * component. We've provided examples of how to do this for Next.js, Remix, and
+ * Inertia.js in the Catalyst documentation:
+ *
+ * https://catalyst.tailwindui.com/docs#client-side-router-integration
+ */
+import * as Headless from '@headlessui/react';
+import React, { forwardRef } from 'react';
+export const Link = forwardRef(function Link(props, ref) {
+    return (<Headless.DataInteractive>
+      <a {...props} ref={ref}/>
+    </Headless.DataInteractive>);
+});

package/output/catalyst/listbox.jsx

@@ -0,0 +1,120 @@
+'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 { Fragment } from 'react';
+export function Listbox(_a) {
+    var { className, placeholder, autoFocus, 'aria-label': ariaLabel, children: options } = _a, props = __rest(_a, ["className", "placeholder", "autoFocus", 'aria-label', "children"]);
+    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(_a) {
+    var { children, className } = _a, props = __rest(_a, ["children", "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(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return <span {...props} className={clsx(className, 'ml-2.5 truncate first:ml-0 sm:ml-2 sm:first:ml-0')}/>;
+}
+export function ListboxDescription(_a) {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    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/output/catalyst/navbar.jsx

@@ -0,0 +1,67 @@
+'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 Navbar(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return <nav {...props} className={clsx(className, 'flex flex-1 items-center gap-4 py-2.5')}/>;
+}
+export function NavbarDivider(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return <div aria-hidden="true" {...props} className={clsx(className, 'h-6 w-px bg-zinc-950/10 dark:bg-white/10')}/>;
+}
+export function NavbarSection(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    let id = useId();
+    return (<LayoutGroup id={id}>
+      <div {...props} className={clsx(className, 'flex items-center gap-3')}/>
+    </LayoutGroup>);
+}
+export function NavbarSpacer(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return <div aria-hidden="true" {...props} className={clsx(className, '-ml-4 flex-1')}/>;
+}
+export const NavbarItem = forwardRef(function NavbarItem(_a, ref) {
+    var { current, className, children } = _a, props = __rest(_a, ["current", "className", "children"]);
+    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}>
+          <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(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return <span {...props} className={clsx(className, 'truncate')}/>;
+}

package/output/catalyst/pagination.jsx

@@ -0,0 +1,52 @@
+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 { Button } from './button';
+export function Pagination(_a) {
+    var { 'aria-label': ariaLabel = 'Page navigation', className } = _a, props = __rest(_a, ['aria-label', "className"]);
+    return <nav aria-label={ariaLabel} {...props} className={clsx(className, 'flex gap-x-2')}/>;
+}
+export function PaginationPrevious({ href = null, className, children = 'Previous', }) {
+    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', }) {
+    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(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return <span {...props} className={clsx(className, 'hidden items-baseline gap-x-2 sm:flex')}/>;
+}
+export function PaginationPage({ href, className, current = false, children, }) {
+    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(_a) {
+    var { className, children = <>&hellip;</> } = _a, props = __rest(_a, ["className", "children"]);
+    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>);
+}