@taicode/common-web 1.1.2 → 1.1.4

package/output/catalyst/select.js

@@ -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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Headless from '@headlessui/react';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export const Select = forwardRef(function Select(_a, ref) {
+    var { className, multiple } = _a, props = __rest(_a, ["className", "multiple"]);
+    return (_jsxs("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',
+        ]), children: [_jsx(Headless.Select, Object.assign({ 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 && (_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-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", 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" })] }) }))] }));
+});

package/output/catalyst/sidebar-layout.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 export declare function SidebarLayout({ navbar, sidebar, children, }: React.PropsWithChildren<{
     navbar: React.ReactNode;
     sidebar: React.ReactNode;
-}>): React.JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=sidebar-layout.d.ts.map

package/output/catalyst/sidebar-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-layout.d.ts","sourceRoot":"","sources":["../../source/catalyst/sidebar-layout.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmB,MAAM,OAAO,CAAA;AA2CvC,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAAE,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC,qBA+BhF"}
+{"version":3,"file":"sidebar-layout.d.ts","sourceRoot":"","sources":["../../source/catalyst/sidebar-layout.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmB,MAAM,OAAO,CAAA;AA2CvC,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAAE,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC,2CA+BhF"}

package/output/catalyst/sidebar-layout.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Headless from '@headlessui/react';
+import { useState } from 'react';
+import { NavbarItem } from './navbar';
+function OpenMenuIcon() {
+    return (_jsx("svg", { "data-slot": "icon", viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("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" }) }));
+}
+function CloseMenuIcon() {
+    return (_jsx("svg", { "data-slot": "icon", viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("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" }) }));
+}
+function MobileSidebar({ open, close, children }) {
+    return (_jsxs(Headless.Dialog, { open: open, onClose: close, className: "lg:hidden", children: [_jsx(Headless.DialogBackdrop, { transition: true, 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" }), _jsx(Headless.DialogPanel, { transition: true, className: "fixed inset-y-0 w-full max-w-80 p-2 transition duration-300 ease-in-out data-closed:-translate-x-full", children: _jsxs("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", children: [_jsx("div", { className: "-mb-3 px-4 pt-3", children: _jsx(Headless.CloseButton, { as: NavbarItem, "aria-label": "Close navigation", children: _jsx(CloseMenuIcon, {}) }) }), children] }) })] }));
+}
+export function SidebarLayout({ navbar, sidebar, children, }) {
+    let [showSidebar, setShowSidebar] = useState(false);
+    return (_jsxs("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", children: [_jsx("div", { className: "fixed inset-y-0 left-0 w-64 max-lg:hidden", children: sidebar }), _jsx(MobileSidebar, { open: showSidebar, close: () => setShowSidebar(false), children: sidebar }), _jsxs("header", { className: "flex items-center px-4 lg:hidden", children: [_jsx("div", { className: "py-2.5", children: _jsx(NavbarItem, { onClick: () => setShowSidebar(true), "aria-label": "Open navigation", children: _jsx(OpenMenuIcon, {}) }) }), _jsx("div", { className: "min-w-0 flex-1", children: navbar })] }), _jsx("main", { className: "flex flex-1 flex-col pb-2 lg:min-w-0 lg:pt-2 lg:pr-2 lg:pl-64", children: _jsx("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", children: _jsx("div", { className: "mx-auto max-w-6xl", children: children }) }) })] }));
+}

package/output/catalyst/sidebar.d.ts

@@ -1,13 +1,13 @@
 import * as Headless from '@headlessui/react';
 import React from 'react';
-export declare function Sidebar({ className, ...props }: React.ComponentPropsWithoutRef<'nav'>): React.JSX.Element;
-export declare function SidebarHeader({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): React.JSX.Element;
-export declare function SidebarBody({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): React.JSX.Element;
-export declare function SidebarFooter({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): React.JSX.Element;
-export declare function SidebarSection({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): React.JSX.Element;
-export declare function SidebarDivider({ className, ...props }: React.ComponentPropsWithoutRef<'hr'>): React.JSX.Element;
-export declare function SidebarSpacer({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): React.JSX.Element;
-export declare function SidebarHeading({ className, ...props }: React.ComponentPropsWithoutRef<'h3'>): React.JSX.Element;
+export declare function Sidebar({ className, ...props }: React.ComponentPropsWithoutRef<'nav'>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarHeader({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarBody({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarFooter({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarSection({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarDivider({ className, ...props }: React.ComponentPropsWithoutRef<'hr'>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarSpacer({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarHeading({ className, ...props }: React.ComponentPropsWithoutRef<'h3'>): import("react/jsx-runtime").JSX.Element;
 export declare const SidebarItem: React.ForwardRefExoticComponent<({
     current?: boolean;
     className?: string;
@@ -15,5 +15,5 @@ export declare const SidebarItem: React.ForwardRefExoticComponent<({
 } & (Omit<Headless.ButtonProps<"button">, "className" | "as"> | Omit<Headless.ButtonProps<React.ForwardRefExoticComponent<{
     href: string;
 } & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>>, "className" | "as">)) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-export declare function SidebarLabel({ className, ...props }: React.ComponentPropsWithoutRef<'span'>): React.JSX.Element;
+export declare function SidebarLabel({ className, ...props }: React.ComponentPropsWithoutRef<'span'>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=sidebar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../source/catalyst/sidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAG7C,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAErF;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAU3F;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAUzF;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAU3F;AAED,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAQ5F;AAED,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,qBAE3F;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAE3F;AAED,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,qBAI3F;AAED,eAAO,MAAM,WAAW;cAMP,OAAO;gBAAc,MAAM;cAAY,KAAK,CAAC,SAAS;;;0OA0DrE,CAAA;AAEF,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,qBAE3F"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../source/catalyst/sidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAG7C,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAErF;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAU3F;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAUzF;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAU3F;AAED,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAQ5F;AAED,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,2CAE3F;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAE3F;AAED,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,2CAI3F;AAED,eAAO,MAAM,WAAW;cAMP,OAAO;gBAAc,MAAM;cAAY,KAAK,CAAC,SAAS;;;0OA0DrE,CAAA;AAEF,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,2CAE3F"}

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

@@ -10,46 +10,45 @@ 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 Sidebar(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return <nav {...props} className={clsx(className, 'flex h-full min-h-0 flex-col')}/>;
+    return _jsx("nav", Object.assign({}, props, { className: clsx(className, 'flex h-full min-h-0 flex-col') }));
 }
 export function SidebarHeader(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (<div {...props} className={clsx(className, 'flex flex-col border-b border-zinc-950/5 p-4 dark:border-white/5 [&>[data-slot=section]+[data-slot=section]]:mt-2.5')}/>);
+    return (_jsx("div", Object.assign({}, props, { className: clsx(className, 'flex flex-col border-b border-zinc-950/5 p-4 dark:border-white/5 [&>[data-slot=section]+[data-slot=section]]:mt-2.5') })));
 }
 export function SidebarBody(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (<div {...props} className={clsx(className, 'flex flex-1 flex-col overflow-y-auto p-4 [&>[data-slot=section]+[data-slot=section]]:mt-8')}/>);
+    return (_jsx("div", Object.assign({}, props, { className: clsx(className, 'flex flex-1 flex-col overflow-y-auto p-4 [&>[data-slot=section]+[data-slot=section]]:mt-8') })));
 }
 export function SidebarFooter(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (<div {...props} className={clsx(className, 'flex flex-col border-t border-zinc-950/5 p-4 dark:border-white/5 [&>[data-slot=section]+[data-slot=section]]:mt-2.5')}/>);
+    return (_jsx("div", Object.assign({}, props, { className: clsx(className, 'flex flex-col border-t border-zinc-950/5 p-4 dark:border-white/5 [&>[data-slot=section]+[data-slot=section]]:mt-2.5') })));
 }
 export function SidebarSection(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
     let id = useId();
-    return (<LayoutGroup id={id}>
-      <div {...props} data-slot="section" className={clsx(className, 'flex flex-col gap-0.5')}/>
-    </LayoutGroup>);
+    return (_jsx(LayoutGroup, { id: id, children: _jsx("div", Object.assign({}, props, { "data-slot": "section", className: clsx(className, 'flex flex-col gap-0.5') })) }));
 }
 export function SidebarDivider(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return <hr {...props} className={clsx(className, 'my-4 border-t border-zinc-950/5 lg:-mx-4 dark:border-white/5')}/>;
+    return _jsx("hr", Object.assign({}, props, { className: clsx(className, 'my-4 border-t border-zinc-950/5 lg:-mx-4 dark:border-white/5') }));
 }
 export function SidebarSpacer(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return <div aria-hidden="true" {...props} className={clsx(className, 'mt-8 flex-1')}/>;
+    return _jsx("div", Object.assign({ "aria-hidden": "true" }, props, { className: clsx(className, 'mt-8 flex-1') }));
 }
 export function SidebarHeading(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (<h3 {...props} className={clsx(className, 'mb-1 px-2 text-xs/6 font-medium text-zinc-500 dark:text-zinc-400')}/>);
+    return (_jsx("h3", Object.assign({}, props, { className: clsx(className, 'mb-1 px-2 text-xs/6 font-medium text-zinc-500 dark:text-zinc-400') })));
 }
 export const SidebarItem = forwardRef(function SidebarItem(_a, ref) {
     var { current, className, children } = _a, props = __rest(_a, ["current", "className", "children"]);
@@ -70,16 +69,9 @@ export const SidebarItem = forwardRef(function SidebarItem(_a, ref) {
     'data-current:*:data-[slot=icon]:fill-zinc-950', 
     // Dark mode
     'dark:text-white dark:*:data-[slot=icon]:fill-zinc-400', 'dark:data-hover:bg-white/5 dark:data-hover:*:data-[slot=icon]:fill-white', 'dark:data-active:bg-white/5 dark:data-active:*:data-[slot=icon]:fill-white', 'dark:data-current:*:data-[slot=icon]:fill-white');
-    return (<span className={clsx(className, 'relative')}>
-      {current && (<motion.span layoutId="current-indicator" className="absolute inset-y-2 -left-4 w-0.5 rounded-full bg-zinc-950 dark:bg-white"/>)}
-      {'href' in props ? (<Headless.CloseButton as={Link} {...props} className={classes} data-current={current ? 'true' : undefined} ref={ref}>
-          <TouchTarget>{children}</TouchTarget>
-        </Headless.CloseButton>) : (<Headless.Button {...props} className={clsx('cursor-default', classes)} data-current={current ? 'true' : undefined} ref={ref}>
-          <TouchTarget>{children}</TouchTarget>
-        </Headless.Button>)}
-    </span>);
+    return (_jsxs("span", { className: clsx(className, 'relative'), children: [current && (_jsx(motion.span, { layoutId: "current-indicator", className: "absolute inset-y-2 -left-4 w-0.5 rounded-full bg-zinc-950 dark:bg-white" })), 'href' in props ? (_jsx(Headless.CloseButton, Object.assign({ as: Link }, 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 SidebarLabel(_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/stacked-layout.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 export declare function StackedLayout({ navbar, sidebar, children, }: React.PropsWithChildren<{
     navbar: React.ReactNode;
     sidebar: React.ReactNode;
-}>): React.JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=stacked-layout.d.ts.map

package/output/catalyst/stacked-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stacked-layout.d.ts","sourceRoot":"","sources":["../../source/catalyst/stacked-layout.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmB,MAAM,OAAO,CAAA;AA2CvC,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAAE,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC,qBA4BhF"}
+{"version":3,"file":"stacked-layout.d.ts","sourceRoot":"","sources":["../../source/catalyst/stacked-layout.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmB,MAAM,OAAO,CAAA;AA2CvC,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAAE,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC,2CA4BhF"}

package/output/catalyst/stacked-layout.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Headless from '@headlessui/react';
+import { useState } from 'react';
+import { NavbarItem } from './navbar';
+function OpenMenuIcon() {
+    return (_jsx("svg", { "data-slot": "icon", viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("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" }) }));
+}
+function CloseMenuIcon() {
+    return (_jsx("svg", { "data-slot": "icon", viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("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" }) }));
+}
+function MobileSidebar({ open, close, children }) {
+    return (_jsxs(Headless.Dialog, { open: open, onClose: close, className: "lg:hidden", children: [_jsx(Headless.DialogBackdrop, { transition: true, 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" }), _jsx(Headless.DialogPanel, { transition: true, className: "fixed inset-y-0 w-full max-w-80 p-2 transition duration-300 ease-in-out data-closed:-translate-x-full", children: _jsxs("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", children: [_jsx("div", { className: "-mb-3 px-4 pt-3", children: _jsx(Headless.CloseButton, { as: NavbarItem, "aria-label": "Close navigation", children: _jsx(CloseMenuIcon, {}) }) }), children] }) })] }));
+}
+export function StackedLayout({ navbar, sidebar, children, }) {
+    let [showSidebar, setShowSidebar] = useState(false);
+    return (_jsxs("div", { className: "relative isolate flex min-h-svh w-full flex-col bg-white lg:bg-zinc-100 dark:bg-zinc-900 dark:lg:bg-zinc-950", children: [_jsx(MobileSidebar, { open: showSidebar, close: () => setShowSidebar(false), children: sidebar }), _jsxs("header", { className: "flex items-center px-4", children: [_jsx("div", { className: "py-2.5 lg:hidden", children: _jsx(NavbarItem, { onClick: () => setShowSidebar(true), "aria-label": "Open navigation", children: _jsx(OpenMenuIcon, {}) }) }), _jsx("div", { className: "min-w-0 flex-1", children: navbar })] }), _jsx("main", { className: "flex flex-1 flex-col pb-2 lg:px-2", children: _jsx("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", children: _jsx("div", { className: "mx-auto max-w-6xl", children: children }) }) })] }));
+}

package/output/catalyst/switch.d.ts

@@ -1,9 +1,9 @@
 import * as Headless from '@headlessui/react';
 import type React from 'react';
-export declare function SwitchGroup({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): React.JSX.Element;
+export declare function SwitchGroup({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
 export declare function SwitchField({ className, ...props }: {
     className?: string;
-} & Omit<Headless.FieldProps, 'as' | 'className'>): React.JSX.Element;
+} & Omit<Headless.FieldProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
 declare const colors: {
     'dark/zinc': string[];
     'dark/white': string[];
@@ -32,6 +32,6 @@ type Color = keyof typeof colors;
 export declare function Switch({ color, className, ...props }: {
     color?: Color;
     className?: string;
-} & Omit<Headless.SwitchProps, 'as' | 'className' | 'children'>): React.JSX.Element;
+} & Omit<Headless.SwitchProps, 'as' | 'className' | 'children'>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=switch.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../source/catalyst/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAczF;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,IAAI,GAAG,WAAW,CAAC,qBAoBxE;AAED,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;CAyFX,CAAA;AAED,KAAK,KAAK,GAAG,MAAM,OAAO,MAAM,CAAA;AAEhC,wBAAgB,MAAM,CAAC,EACrB,KAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IACD,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,IAAI,GAAG,WAAW,GAAG,UAAU,CAAC,qBAiD9D"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../source/catalyst/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAczF;AAED,wBAAgB,WAAW,CAAC,EAC1B,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;AAED,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;CAyFX,CAAA;AAED,KAAK,KAAK,GAAG,MAAM,OAAO,MAAM,CAAA;AAEhC,wBAAgB,MAAM,CAAC,EACrB,KAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IACD,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,IAAI,GAAG,WAAW,GAAG,UAAU,CAAC,2CAiD9D"}

package/output/catalyst/{switch.jsx → switch.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 SwitchGroup(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (<div data-slot="control" {...props} className={clsx(className, 
+    return (_jsx("div", 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 SwitchField(_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-[1fr_auto] gap-x-8 gap-y-1 sm:grid-cols-[1fr_auto]', 
         // Control layout
@@ -31,7 +32,7 @@ export function SwitchField(_a) {
         // Description layout
         '*:data-[slot=description]:col-start-1 *:data-[slot=description]:row-start-2', 
         // With description
-        'has-data-[slot=description]:**:data-[slot=label]:font-medium')}/>);
+        'has-data-[slot=description]:**:data-[slot=label]:font-medium') })));
 }
 const colors = {
     'dark/zinc': [
@@ -125,7 +126,7 @@ const colors = {
 };
 export function Switch(_a) {
     var { color = 'dark/zinc', className } = _a, props = __rest(_a, ["color", "className"]);
-    return (<Headless.Switch data-slot="control" {...props} className={clsx(className, 
+    return (_jsx(Headless.Switch, Object.assign({ "data-slot": "control" }, props, { className: clsx(className, 
         // Base styles
         'group relative isolate inline-flex h-6 w-10 cursor-default rounded-full p-[3px] sm:h-5 sm:w-8', 
         // Transitions
@@ -143,19 +144,17 @@ export function Switch(_a) {
         // Disabled
         'data-disabled:bg-zinc-200 data-disabled:opacity-50 data-disabled:data-checked:bg-zinc-200 data-disabled:data-checked:ring-black/5', 'dark:data-disabled:bg-white/15 dark:data-disabled:data-checked:bg-white/15 dark:data-disabled:data-checked:ring-white/15', 
         // Color specific styles
-        colors[color])}>
-      <span aria-hidden="true" className={clsx(
-        // Basic layout
-        'pointer-events-none relative inline-block size-4.5 rounded-full sm:size-3.5', 
-        // Transition
-        'translate-x-0 transition duration-200 ease-in-out', 
-        // Invisible border so the switch is still visible in forced-colors mode
-        'border border-transparent', 
-        // Unchecked
-        'bg-white shadow-sm ring-1 ring-black/5', 
-        // Checked
-        'group-data-checked:bg-(--switch) group-data-checked:shadow-(--switch-shadow) group-data-checked:ring-(--switch-ring)', 'group-data-checked:translate-x-4 sm:group-data-checked:translate-x-3', 
-        // Disabled
-        'group-data-checked:group-data-disabled:bg-white group-data-checked:group-data-disabled:shadow-sm group-data-checked:group-data-disabled:ring-black/5')}/>
-    </Headless.Switch>);
+        colors[color]), children: _jsx("span", { "aria-hidden": "true", className: clsx(
+            // Basic layout
+            'pointer-events-none relative inline-block size-4.5 rounded-full sm:size-3.5', 
+            // Transition
+            'translate-x-0 transition duration-200 ease-in-out', 
+            // Invisible border so the switch is still visible in forced-colors mode
+            'border border-transparent', 
+            // Unchecked
+            'bg-white shadow-sm ring-1 ring-black/5', 
+            // Checked
+            'group-data-checked:bg-(--switch) group-data-checked:shadow-(--switch-shadow) group-data-checked:ring-(--switch-ring)', 'group-data-checked:translate-x-4 sm:group-data-checked:translate-x-3', 
+            // Disabled
+            'group-data-checked:group-data-disabled:bg-white group-data-checked:group-data-disabled:shadow-sm group-data-checked:group-data-disabled:ring-black/5') }) })));
 }

package/output/catalyst/table.d.ts

@@ -4,14 +4,14 @@ export declare function Table({ bleed, dense, grid, striped, className, children
     dense?: boolean;
     grid?: boolean;
     striped?: boolean;
-} & React.ComponentPropsWithoutRef<'div'>): React.JSX.Element;
-export declare function TableHead({ className, ...props }: React.ComponentPropsWithoutRef<'thead'>): React.JSX.Element;
-export declare function TableBody(props: React.ComponentPropsWithoutRef<'tbody'>): React.JSX.Element;
+} & React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function TableHead({ className, ...props }: React.ComponentPropsWithoutRef<'thead'>): import("react/jsx-runtime").JSX.Element;
+export declare function TableBody(props: React.ComponentPropsWithoutRef<'tbody'>): import("react/jsx-runtime").JSX.Element;
 export declare function TableRow({ href, target, title, className, ...props }: {
     href?: string;
     target?: string;
     title?: string;
-} & React.ComponentPropsWithoutRef<'tr'>): React.JSX.Element;
-export declare function TableHeader({ className, ...props }: React.ComponentPropsWithoutRef<'th'>): React.JSX.Element;
-export declare function TableCell({ className, children, ...props }: React.ComponentPropsWithoutRef<'td'>): React.JSX.Element;
+} & React.ComponentPropsWithoutRef<'tr'>): import("react/jsx-runtime").JSX.Element;
+export declare function TableHeader({ className, ...props }: React.ComponentPropsWithoutRef<'th'>): import("react/jsx-runtime").JSX.Element;
+export declare function TableCell({ className, children, ...props }: React.ComponentPropsWithoutRef<'td'>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=table.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../source/catalyst/table.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,wBAAgB,KAAK,CAAC,EACpB,KAAa,EACb,KAAa,EACb,IAAY,EACZ,OAAe,EACf,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAYjH;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,qBAEzF;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,qBAEvE;AAQD,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,MAAM,EACN,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,qBAkB3F;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,qBAcxF;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,qBA+BhG"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../source/catalyst/table.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,wBAAgB,KAAK,CAAC,EACpB,KAAa,EACb,KAAa,EACb,IAAY,EACZ,OAAe,EACf,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAYjH;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,2CAEzF;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,2CAEvE;AAQD,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,MAAM,EACN,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,2CAkB3F;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,2CAcxF;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,2CA+BhG"}

package/output/catalyst/table.js

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

package/output/catalyst/text.d.ts

@@ -1,6 +1,6 @@
 import { Link } from './link';
-export declare function Text({ className, ...props }: React.ComponentPropsWithoutRef<'p'>): import("react").JSX.Element;
-export declare function TextLink({ className, ...props }: React.ComponentPropsWithoutRef<typeof Link>): import("react").JSX.Element;
-export declare function Strong({ className, ...props }: React.ComponentPropsWithoutRef<'strong'>): import("react").JSX.Element;
-export declare function Code({ className, ...props }: React.ComponentPropsWithoutRef<'code'>): import("react").JSX.Element;
+export declare function Text({ className, ...props }: React.ComponentPropsWithoutRef<'p'>): import("react/jsx-runtime").JSX.Element;
+export declare function TextLink({ className, ...props }: React.ComponentPropsWithoutRef<typeof Link>): import("react/jsx-runtime").JSX.Element;
+export declare function Strong({ className, ...props }: React.ComponentPropsWithoutRef<'strong'>): import("react/jsx-runtime").JSX.Element;
+export declare function Code({ className, ...props }: React.ComponentPropsWithoutRef<'code'>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=text.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../source/catalyst/text.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,wBAAgB,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,+BAQhF;AAED,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,IAAI,CAAC,+BAU5F;AAED,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,+BAEvF;AAED,wBAAgB,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,+BAUnF"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../source/catalyst/text.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,wBAAgB,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,2CAQhF;AAED,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,IAAI,CAAC,2CAU5F;AAED,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,2CAEvF;AAED,wBAAgB,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,2CAUnF"}

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

@@ -9,21 +9,22 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { Link } from './link';
 export function Text(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (<p data-slot="text" {...props} className={clsx(className, 'text-base/6 text-zinc-500 sm:text-sm/6 dark:text-zinc-400')}/>);
+    return (_jsx("p", Object.assign({ "data-slot": "text" }, props, { className: clsx(className, 'text-base/6 text-zinc-500 sm:text-sm/6 dark:text-zinc-400') })));
 }
 export function TextLink(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (<Link {...props} className={clsx(className, 'text-zinc-950 underline decoration-zinc-950/50 data-hover:decoration-zinc-950 dark:text-white dark:decoration-white/50 dark:data-hover:decoration-white')}/>);
+    return (_jsx(Link, Object.assign({}, props, { className: clsx(className, 'text-zinc-950 underline decoration-zinc-950/50 data-hover:decoration-zinc-950 dark:text-white dark:decoration-white/50 dark:data-hover:decoration-white') })));
 }
 export function Strong(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return <strong {...props} className={clsx(className, 'font-medium text-zinc-950 dark:text-white')}/>;
+    return _jsx("strong", Object.assign({}, props, { className: clsx(className, 'font-medium text-zinc-950 dark:text-white') }));
 }
 export function Code(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (<code {...props} className={clsx(className, 'rounded-sm border border-zinc-950/10 bg-zinc-950/2.5 px-0.5 text-sm font-medium text-zinc-950 sm:text-[0.8125rem] dark:border-white/20 dark:bg-white/5 dark:text-white')}/>);
+    return (_jsx("code", Object.assign({}, props, { className: clsx(className, 'rounded-sm border border-zinc-950/10 bg-zinc-950/2.5 px-0.5 text-sm font-medium text-zinc-950 sm:text-[0.8125rem] dark:border-white/20 dark:bg-white/5 dark:text-white') })));
 }

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

@@ -9,12 +9,13 @@ 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';
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 export const Textarea = forwardRef(function Textarea(_a, ref) {
     var { className, resizable = true } = _a, props = __rest(_a, ["className", "resizable"]);
-    return (<span data-slot="control" className={clsx([
+    return (_jsx("span", { "data-slot": "control", className: clsx([
             className,
             // Basic layout
             'relative block w-full',
@@ -26,24 +27,22 @@ export const Textarea = forwardRef(function Textarea(_a, ref) {
             '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',
-        ])}>
-      <Headless.Textarea ref={ref} {...props} className={clsx([
-            // Basic layout
-            'relative block h-full 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-600 dark:data-invalid:data-hover:border-red-600',
-            // Disabled state
-            'disabled:border-zinc-950/20 dark:disabled:border-white/15 dark:disabled:bg-white/2.5 dark:data-hover:disabled:border-white/15',
-            // Resizable
-            resizable ? 'resize-y' : 'resize-none',
-        ])}/>
-    </span>);
+        ]), children: _jsx(Headless.Textarea, Object.assign({ ref: ref }, props, { className: clsx([
+                // Basic layout
+                'relative block h-full 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-600 dark:data-invalid:data-hover:border-red-600',
+                // Disabled state
+                'disabled:border-zinc-950/20 dark:disabled:border-white/15 dark:disabled:bg-white/2.5 dark:data-hover:disabled:border-white/15',
+                // Resizable
+                resizable ? 'resize-y' : 'resize-none',
+            ]) })) }));
 });