@taicode/common-web 1.1.2 → 1.1.4

package/output/catalyst/fieldset.d.ts

@@ -2,21 +2,21 @@ import * as Headless from '@headlessui/react';
 import type React from 'react';
 export declare function Fieldset({ className, ...props }: {
     className?: string;
-} & Omit<Headless.FieldsetProps, 'as' | 'className'>): React.JSX.Element;
+} & Omit<Headless.FieldsetProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
 export declare function Legend({ className, ...props }: {
     className?: string;
-} & Omit<Headless.LegendProps, 'as' | 'className'>): React.JSX.Element;
-export declare function FieldGroup({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): React.JSX.Element;
+} & Omit<Headless.LegendProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
+export declare function FieldGroup({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
 export declare function Field({ className, ...props }: {
     className?: string;
-} & Omit<Headless.FieldProps, 'as' | 'className'>): React.JSX.Element;
+} & Omit<Headless.FieldProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
 export declare function Label({ className, ...props }: {
     className?: string;
-} & Omit<Headless.LabelProps, 'as' | 'className'>): React.JSX.Element;
+} & Omit<Headless.LabelProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
 export declare function Description({ className, ...props }: {
     className?: string;
-} & Omit<Headless.DescriptionProps, 'as' | 'className'>): React.JSX.Element;
+} & Omit<Headless.DescriptionProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
 export declare function ErrorMessage({ className, ...props }: {
     className?: string;
-} & Omit<Headless.DescriptionProps, 'as' | 'className'>): React.JSX.Element;
+} & Omit<Headless.DescriptionProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=fieldset.d.ts.map

package/output/catalyst/fieldset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fieldset.d.ts","sourceRoot":"","sources":["../../source/catalyst/fieldset.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,IAAI,GAAG,WAAW,CAAC,qBAO3E;AAED,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,IAAI,GAAG,WAAW,CAAC,qBAWzE;AAED,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAExF;AAED,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,IAAI,GAAG,WAAW,CAAC,qBAepH;AAED,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,IAAI,GAAG,WAAW,CAAC,qBAWpH;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,EAAE,IAAI,GAAG,WAAW,CAAC,qBAQ9E;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,EAAE,IAAI,GAAG,WAAW,CAAC,qBAQ9E"}
+{"version":3,"file":"fieldset.d.ts","sourceRoot":"","sources":["../../source/catalyst/fieldset.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,IAAI,GAAG,WAAW,CAAC,2CAO3E;AAED,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,IAAI,GAAG,WAAW,CAAC,2CAWzE;AAED,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAExF;AAED,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,IAAI,GAAG,WAAW,CAAC,2CAepH;AAED,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,IAAI,GAAG,WAAW,CAAC,2CAWpH;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,EAAE,IAAI,GAAG,WAAW,CAAC,2CAQ9E;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,EAAE,IAAI,GAAG,WAAW,CAAC,2CAQ9E"}

package/output/catalyst/fieldset.js

@@ -0,0 +1,42 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import * as Headless from '@headlessui/react';
+import clsx from 'clsx';
+export function Fieldset(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(Headless.Fieldset, Object.assign({}, 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 (_jsx(Headless.Legend, Object.assign({ "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 _jsx("div", Object.assign({ "data-slot": "control" }, props, { className: clsx(className, 'space-y-8') }));
+}
+export function Field(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(Headless.Field, Object.assign({}, 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 (_jsx(Headless.Label, Object.assign({ "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 (_jsx(Headless.Description, Object.assign({ "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 (_jsx(Headless.Description, Object.assign({ "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.d.ts

@@ -1,7 +1,7 @@
 type HeadingProps = {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
 } & React.ComponentPropsWithoutRef<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
-export declare function Heading({ className, level, ...props }: HeadingProps): import("react").JSX.Element;
-export declare function Subheading({ className, level, ...props }: HeadingProps): import("react").JSX.Element;
+export declare function Heading({ className, level, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+export declare function Subheading({ className, level, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=heading.d.ts.map

package/output/catalyst/heading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../source/catalyst/heading.tsx"],"names":[],"mappings":"AAEA,KAAK,YAAY,GAAG;IAAE,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;CAAE,GAAG,KAAK,CAAC,wBAAwB,CACpF,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CACxC,CAAA;AAED,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,KAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BASvE;AAED,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,KAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BAS1E"}
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../source/catalyst/heading.tsx"],"names":[],"mappings":"AAEA,KAAK,YAAY,GAAG;IAAE,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;CAAE,GAAG,KAAK,CAAC,wBAAwB,CACpF,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CACxC,CAAA;AAED,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,KAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CASvE;AAED,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,KAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAS1E"}

package/output/catalyst/{heading.jsx → heading.js}

@@ -9,14 +9,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx } from "react/jsx-runtime";
 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')}/>);
+    return (_jsx(Element, Object.assign({}, 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')}/>);
+    return (_jsx(Element, Object.assign({}, props, { className: clsx(className, 'text-base/7 font-semibold text-zinc-950 sm:text-sm/6 dark:text-white') })));
 }

package/output/catalyst/input.d.ts

@@ -1,6 +1,6 @@
 import * as Headless from '@headlessui/react';
 import React from 'react';
-export declare function InputGroup({ children }: React.ComponentPropsWithoutRef<'span'>): React.JSX.Element;
+export declare function InputGroup({ children }: React.ComponentPropsWithoutRef<'span'>): import("react/jsx-runtime").JSX.Element;
 declare const dateTypes: string[];
 type DateType = (typeof dateTypes)[number];
 export declare const Input: React.ForwardRefExoticComponent<{

package/output/catalyst/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../source/catalyst/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,qBAe9E;AAED,QAAA,MAAM,SAAS,UAAsD,CAAA;AACrE,KAAK,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;AAE1C,eAAO,MAAM,KAAK;gBAKF,MAAM;WACX,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ;mGA+DvF,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../source/catalyst/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,2CAe9E;AAED,QAAA,MAAM,SAAS,UAAsD,CAAA;AACrE,KAAK,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;AAE1C,eAAO,MAAM,KAAK;gBAKF,MAAM;WACX,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ;mGA+DvF,CAAA"}

package/output/catalyst/input.js

@@ -0,0 +1,70 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import * as Headless from '@headlessui/react';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export function InputGroup({ children }) {
+    return (_jsx("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: children }));
+}
+const dateTypes = ['date', 'datetime-local', 'month', 'time', 'week'];
+export const Input = forwardRef(function Input(_a, ref) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("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',
+        ]), children: _jsx(Headless.Input, Object.assign({ 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',
+            ]) })) }));
+});

package/output/catalyst/{link.jsx → link.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * 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
@@ -6,9 +7,7 @@
  * https://catalyst.tailwindui.com/docs#client-side-router-integration
  */
 import * as Headless from '@headlessui/react';
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 export const Link = forwardRef(function Link(props, ref) {
-    return (<Headless.DataInteractive>
-      <a {...props} ref={ref}/>
-    </Headless.DataInteractive>);
+    return (_jsx(Headless.DataInteractive, { children: _jsx("a", Object.assign({}, props, { ref: ref })) }));
 });

package/output/catalyst/listbox.d.ts

@@ -6,11 +6,11 @@ export declare function Listbox<T>({ className, placeholder, autoFocus, 'aria-la
     autoFocus?: boolean;
     'aria-label'?: string;
     children?: React.ReactNode;
-} & Omit<Headless.ListboxProps<typeof Fragment, T>, 'as' | 'multiple'>): import("react").JSX.Element;
+} & Omit<Headless.ListboxProps<typeof Fragment, T>, 'as' | 'multiple'>): import("react/jsx-runtime").JSX.Element;
 export declare function ListboxOption<T>({ children, className, ...props }: {
     className?: string;
     children?: React.ReactNode;
-} & Omit<Headless.ListboxOptionProps<'div', T>, 'as' | 'className'>): import("react").JSX.Element;
-export declare function ListboxLabel({ className, ...props }: React.ComponentPropsWithoutRef<'span'>): import("react").JSX.Element;
-export declare function ListboxDescription({ className, children, ...props }: React.ComponentPropsWithoutRef<'span'>): import("react").JSX.Element;
+} & Omit<Headless.ListboxOptionProps<'div', T>, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
+export declare function ListboxLabel({ className, ...props }: React.ComponentPropsWithoutRef<'span'>): import("react/jsx-runtime").JSX.Element;
+export declare function ListboxDescription({ className, children, ...props }: React.ComponentPropsWithoutRef<'span'>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=listbox.d.ts.map

package/output/catalyst/listbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"listbox.d.ts","sourceRoot":"","sources":["../../source/catalyst/listbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,wBAAgB,OAAO,CAAC,CAAC,EAAE,EACzB,SAAS,EACT,WAAW,EACX,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,QAAQ,EAAE,OAAO,EACjB,GAAG,KAAK,EACT,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,GAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,OAAO,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,GAAG,UAAU,CAAC,+BAkFrE;AAED,wBAAgB,aAAa,CAAC,CAAC,EAAE,EAC/B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,IAAI,CAC1D,QAAQ,CAAC,kBAAkB,CAAC,KAAK,EAAE,CAAC,CAAC,EACrC,IAAI,GAAG,WAAW,CACnB,+BAgDA;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,+BAE3F;AAED,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,+BAY3G"}
+{"version":3,"file":"listbox.d.ts","sourceRoot":"","sources":["../../source/catalyst/listbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,wBAAgB,OAAO,CAAC,CAAC,EAAE,EACzB,SAAS,EACT,WAAW,EACX,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,QAAQ,EAAE,OAAO,EACjB,GAAG,KAAK,EACT,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,GAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,OAAO,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,GAAG,UAAU,CAAC,2CAkFrE;AAED,wBAAgB,aAAa,CAAC,CAAC,EAAE,EAC/B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,IAAI,CAC1D,QAAQ,CAAC,kBAAkB,CAAC,KAAK,EAAE,CAAC,CAAC,EACrC,IAAI,GAAG,WAAW,CACnB,2CAgDA;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,2CAE3F;AAED,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,2CAY3G"}

package/output/catalyst/listbox.js

@@ -0,0 +1,99 @@
+'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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsxs(Headless.Listbox, Object.assign({}, props, { multiple: false, children: [_jsxs(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',
+                ]), children: [_jsx(Headless.ListboxSelectedOption, { as: "span", options: options, placeholder: placeholder && _jsx("span", { className: "block truncate text-zinc-500", children: placeholder }), 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',
+                        ]) }), _jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2", children: _jsxs("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", children: [_jsx("path", { d: "M5.75 10.75L8 13L10.25 10.75", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.25 5.25L8 3L5.75 5.25", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })] }) })] }), _jsx(Headless.ListboxOptions, { transition: true, 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'), children: options })] })));
+}
+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 (_jsx(Headless.ListboxOption, Object.assign({ as: Fragment }, props, { children: ({ selectedOption }) => {
+            if (selectedOption) {
+                return _jsx("div", { className: clsx(className, sharedClasses), children: children });
+            }
+            return (_jsxs("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'), children: [_jsx("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", children: _jsx("path", { d: "M4 8.5l3 3L12 4", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("span", { className: clsx(className, sharedClasses, 'col-start-2'), children: children })] }));
+        } })));
+}
+export function ListboxLabel(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return _jsx("span", Object.assign({}, 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 (_jsx("span", Object.assign({}, 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'), children: _jsx("span", { className: "flex-1 truncate", children: children }) })));
+}

package/output/catalyst/navbar.d.ts

@@ -1,9 +1,9 @@
 import * as Headless from '@headlessui/react';
 import React from 'react';
-export declare function Navbar({ className, ...props }: React.ComponentPropsWithoutRef<'nav'>): React.JSX.Element;
-export declare function NavbarDivider({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): React.JSX.Element;
-export declare function NavbarSection({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): React.JSX.Element;
-export declare function NavbarSpacer({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): React.JSX.Element;
+export declare function Navbar({ className, ...props }: React.ComponentPropsWithoutRef<'nav'>): import("react/jsx-runtime").JSX.Element;
+export declare function NavbarDivider({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function NavbarSection({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function NavbarSpacer({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
 export declare const NavbarItem: React.ForwardRefExoticComponent<({
     current?: boolean;
     className?: string;
@@ -11,5 +11,5 @@ export declare const NavbarItem: React.ForwardRefExoticComponent<({
 } & (Omit<Headless.ButtonProps<"button">, "className" | "as"> | Omit<Omit<{
     href: string;
 } & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>, "ref">, "className">)) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-export declare function NavbarLabel({ className, ...props }: React.ComponentPropsWithoutRef<'span'>): React.JSX.Element;
+export declare function NavbarLabel({ className, ...props }: React.ComponentPropsWithoutRef<'span'>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=navbar.d.ts.map

package/output/catalyst/navbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../source/catalyst/navbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAG7C,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAEpF;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAE3F;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAQ3F;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAE1F;AAED,eAAO,MAAM,UAAU;cAMN,OAAO;gBAAc,MAAM;cAAY,KAAK,CAAC,SAAS;;;yOAsDrE,CAAA;AAEF,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,qBAE1F"}
+{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../source/catalyst/navbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAG7C,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAEpF;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAE3F;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAQ3F;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAE1F;AAED,eAAO,MAAM,UAAU;cAMN,OAAO;gBAAc,MAAM;cAAY,KAAK,CAAC,SAAS;;;yOAsDrE,CAAA;AAEF,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,2CAE1F"}

package/output/catalyst/{navbar.jsx → navbar.js}

@@ -10,30 +10,29 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as Headless from '@headlessui/react';
 import clsx from 'clsx';
 import { LayoutGroup, motion } from 'framer-motion';
-import React, { forwardRef, useId } from 'react';
+import { 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')}/>;
+    return _jsx("nav", Object.assign({}, 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')}/>;
+    return _jsx("div", Object.assign({ "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>);
+    return (_jsx(LayoutGroup, { id: id, children: _jsx("div", Object.assign({}, props, { className: clsx(className, 'flex items-center gap-3') })) }));
 }
 export function NavbarSpacer(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return <div aria-hidden="true" {...props} className={clsx(className, '-ml-4 flex-1')}/>;
+    return _jsx("div", Object.assign({ "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"]);
@@ -52,16 +51,9 @@ export const NavbarItem = forwardRef(function NavbarItem(_a, ref) {
     '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>);
+    return (_jsxs("span", { className: clsx(className, 'relative'), children: [current && (_jsx(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 ? (_jsx(Link, Object.assign({}, props, { className: classes, "data-current": current ? 'true' : undefined, ref: ref, children: _jsx(TouchTarget, { children: children }) }))) : (_jsx(Headless.Button, Object.assign({}, props, { className: clsx('cursor-default', classes), "data-current": current ? 'true' : undefined, ref: ref, children: _jsx(TouchTarget, { children: children }) })))] }));
 });
 export function NavbarLabel(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return <span {...props} className={clsx(className, 'truncate')}/>;
+    return _jsx("span", Object.assign({}, props, { className: clsx(className, 'truncate') }));
 }

package/output/catalyst/pagination.d.ts

@@ -1,18 +1,18 @@
 import type React from 'react';
-export declare function Pagination({ 'aria-label': ariaLabel, className, ...props }: React.ComponentPropsWithoutRef<'nav'>): React.JSX.Element;
+export declare function Pagination({ 'aria-label': ariaLabel, className, ...props }: React.ComponentPropsWithoutRef<'nav'>): import("react/jsx-runtime").JSX.Element;
 export declare function PaginationPrevious({ href, className, children, }: React.PropsWithChildren<{
     href?: string | null;
     className?: string;
-}>): React.JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;
 export declare function PaginationNext({ href, className, children, }: React.PropsWithChildren<{
     href?: string | null;
     className?: string;
-}>): React.JSX.Element;
-export declare function PaginationList({ className, ...props }: React.ComponentPropsWithoutRef<'span'>): React.JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;
+export declare function PaginationList({ className, ...props }: React.ComponentPropsWithoutRef<'span'>): import("react/jsx-runtime").JSX.Element;
 export declare function PaginationPage({ href, className, current, children, }: React.PropsWithChildren<{
     href: string;
     className?: string;
     current?: boolean;
-}>): React.JSX.Element;
-export declare function PaginationGap({ className, children, ...props }: React.ComponentPropsWithoutRef<'span'>): React.JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;
+export declare function PaginationGap({ className, children, ...props }: React.ComponentPropsWithoutRef<'span'>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=pagination.d.ts.map

package/output/catalyst/pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../source/catalyst/pagination.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,wBAAgB,UAAU,CAAC,EACzB,YAAY,EAAE,SAA6B,EAC3C,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAEvC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAW,EACX,SAAS,EACT,QAAqB,GACtB,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,qBAgBvE;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAW,EACX,SAAS,EACT,QAAiB,GAClB,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,qBAgBvE;AAED,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,qBAE7F;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,SAAS,EACT,OAAe,EACf,QAAQ,GACT,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,qBAgBlF;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,QAAwB,EACxB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,qBAUxC"}
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../source/catalyst/pagination.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,wBAAgB,UAAU,CAAC,EACzB,YAAY,EAAE,SAA6B,EAC3C,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAEvC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAW,EACX,SAAS,EACT,QAAqB,GACtB,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,2CAgBvE;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAW,EACX,SAAS,EACT,QAAiB,GAClB,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,2CAgBvE;AAED,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,2CAE7F;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,SAAS,EACT,OAAe,EACf,QAAQ,GACT,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,2CAgBlF;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,QAAwB,EACxB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,2CAUxC"}

package/output/catalyst/pagination.js

@@ -0,0 +1,35 @@
+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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 _jsx("nav", Object.assign({ "aria-label": ariaLabel }, props, { className: clsx(className, 'flex gap-x-2') }));
+}
+export function PaginationPrevious({ href = null, className, children = 'Previous', }) {
+    return (_jsx("span", { className: clsx(className, 'grow basis-0'), children: _jsxs(Button, Object.assign({}, (href === null ? { disabled: true } : { href }), { plain: true, "aria-label": "Previous page", children: [_jsx("svg", { className: "stroke-current", "data-slot": "icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M2.75 8H13.25M2.75 8L5.25 5.5M2.75 8L5.25 10.5", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) }), children] })) }));
+}
+export function PaginationNext({ href = null, className, children = 'Next', }) {
+    return (_jsx("span", { className: clsx(className, 'flex grow basis-0 justify-end'), children: _jsxs(Button, Object.assign({}, (href === null ? { disabled: true } : { href }), { plain: true, "aria-label": "Next page", children: [children, _jsx("svg", { className: "stroke-current", "data-slot": "icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M13.25 8L2.75 8M13.25 8L10.75 10.5M13.25 8L10.75 5.5", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) })] })) }));
+}
+export function PaginationList(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return _jsx("span", Object.assign({}, props, { className: clsx(className, 'hidden items-baseline gap-x-2 sm:flex') }));
+}
+export function PaginationPage({ href, className, current = false, children, }) {
+    return (_jsx(Button, { href: href, plain: true, "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'), children: _jsx("span", { className: "-mx-0.5", children: children }) }));
+}
+export function PaginationGap(_a) {
+    var { className, children = _jsx(_Fragment, { children: "\u2026" }) } = _a, props = __rest(_a, ["className", "children"]);
+    return (_jsx("span", Object.assign({ "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: children })));
+}

package/output/catalyst/radio.d.ts

@@ -1,10 +1,10 @@
 import * as Headless from '@headlessui/react';
 export declare function RadioGroup({ className, ...props }: {
     className?: string;
-} & Omit<Headless.RadioGroupProps, 'as' | 'className'>): import("react").JSX.Element;
+} & Omit<Headless.RadioGroupProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
 export declare function RadioField({ className, ...props }: {
     className?: string;
-} & Omit<Headless.FieldProps, 'as' | 'className'>): import("react").JSX.Element;
+} & Omit<Headless.FieldProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
 declare const colors: {
     'dark/zinc': string[];
     'dark/white': string[];
@@ -33,6 +33,6 @@ type Color = keyof typeof colors;
 export declare function Radio({ color, className, ...props }: {
     color?: Color;
     className?: string;
-} & Omit<Headless.RadioProps, 'as' | 'className' | 'children'>): import("react").JSX.Element;
+} & Omit<Headless.RadioProps, 'as' | 'className' | 'children'>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=radio.d.ts.map

package/output/catalyst/radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../source/catalyst/radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAG7C,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,EAAE,IAAI,GAAG,WAAW,CAAC,+BAc7E;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,IAAI,GAAG,WAAW,CAAC,+BAoBxE;AA+BD,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;CAuCX,CAAA;AAED,KAAK,KAAK,GAAG,MAAM,OAAO,MAAM,CAAA;AAEhC,wBAAgB,KAAK,CAAC,EACpB,KAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,IAAI,GAAG,WAAW,GAAG,UAAU,CAAC,+BAkBpG"}
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../source/catalyst/radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAG7C,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,EAAE,IAAI,GAAG,WAAW,CAAC,2CAc7E;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,IAAI,GAAG,WAAW,CAAC,2CAoBxE;AA+BD,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;CAuCX,CAAA;AAED,KAAK,KAAK,GAAG,MAAM,OAAO,MAAM,CAAA;AAEhC,wBAAgB,KAAK,CAAC,EACpB,KAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,IAAI,GAAG,WAAW,GAAG,UAAU,CAAC,2CAkBpG"}

package/output/catalyst/{radio.jsx → radio.js}

@@ -9,19 +9,20 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx } from "react/jsx-runtime";
 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, 
+    return (_jsx(Headless.RadioGroup, Object.assign({ "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')}/>);
+        '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, 
+    return (_jsx(Headless.Field, Object.assign({ "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
@@ -31,7 +32,7 @@ export function RadioField(_a) {
         // 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')}/>);
+        'has-data-[slot=description]:**:data-[slot=label]:font-medium') })));
 }
 const base = [
     // Basic layout
@@ -93,11 +94,7 @@ const colors = {
 };
 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>);
+    return (_jsx(Headless.Radio, Object.assign({ "data-slot": "control" }, props, { className: clsx(className, 'group inline-flex focus:outline-hidden'), children: _jsx("span", { className: clsx([base, colors[color]]), children: _jsx("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]') }) }) })));
 }