@taicode/common-web 1.1.21 → 3.1.0

package/output/catalyst/fieldset.jsx

@@ -1,41 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,14 +0,0 @@
-/**
- * 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

@@ -1,120 +0,0 @@
-'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

@@ -1,67 +0,0 @@
-'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

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

package/output/catalyst/radio.jsx

@@ -1,103 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

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