@taicode/common-web 1.0.3 → 1.0.5

package/output/catalyst/alert.d.ts

@@ -0,0 +1,29 @@
+import * as Headless from '@headlessui/react';
+import type React from 'react';
+import { Text } from './text';
+declare const sizes: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+};
+export declare function Alert({ size, className, children, ...props }: {
+    size?: keyof typeof sizes;
+    className?: string;
+    children: React.ReactNode;
+} & Omit<Headless.DialogProps, 'as' | 'className'>): React.JSX.Element;
+export declare function AlertTitle({ className, ...props }: {
+    className?: string;
+} & Omit<Headless.DialogTitleProps, 'as' | 'className'>): React.JSX.Element;
+export declare function AlertDescription({ className, ...props }: {
+    className?: string;
+} & Omit<Headless.DescriptionProps<typeof Text>, 'as' | 'className'>): React.JSX.Element;
+export declare function AlertBody({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): React.JSX.Element;
+export declare function AlertActions({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): React.JSX.Element;
+export {};
+//# sourceMappingURL=alert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../source/catalyst/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,QAAA,MAAM,KAAK;;;;;;;;;;CAUV,CAAA;AAED,wBAAgB,KAAK,CAAC,EACpB,IAAW,EACX,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,IAAI,CACpF,QAAQ,CAAC,WAAW,EACpB,IAAI,GAAG,WAAW,CACnB,qBAyBA;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,EAAE,IAAI,GAAG,WAAW,CAAC,qBAU9E;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,OAAO,IAAI,CAAC,EAAE,IAAI,GAAG,WAAW,CAAC,qBAQ3F;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAEvF;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAU1F"}

package/output/catalyst/alert.jsx

@@ -0,0 +1,55 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as Headless from '@headlessui/react';
+import clsx from 'clsx';
+import { Text } from './text';
+const sizes = {
+    xs: 'sm:max-w-xs',
+    sm: 'sm:max-w-sm',
+    md: 'sm:max-w-md',
+    lg: 'sm:max-w-lg',
+    xl: 'sm:max-w-xl',
+    '2xl': 'sm:max-w-2xl',
+    '3xl': 'sm:max-w-3xl',
+    '4xl': 'sm:max-w-4xl',
+    '5xl': 'sm:max-w-5xl',
+};
+export function Alert(_a) {
+    var { size = 'md', className, children } = _a, props = __rest(_a, ["size", "className", "children"]);
+    return (<Headless.Dialog {...props}>
+      <Headless.DialogBackdrop transition className="fixed inset-0 flex w-screen justify-center overflow-y-auto bg-zinc-950/15 px-2 py-2 transition duration-100 focus:outline-0 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in sm:px-6 sm:py-8 lg:px-8 lg:py-16 dark:bg-zinc-950/50"/>
+
+      <div className="fixed inset-0 w-screen overflow-y-auto pt-6 sm:pt-0">
+        <div className="grid min-h-full grid-rows-[1fr_auto_1fr] justify-items-center p-8 sm:grid-rows-[1fr_auto_3fr] sm:p-4">
+          <Headless.DialogPanel transition className={clsx(className, sizes[size], 'row-start-2 w-full rounded-2xl bg-white p-8 shadow-lg ring-1 ring-zinc-950/10 sm:rounded-2xl sm:p-6 dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline', 'transition duration-100 will-change-transform data-closed:opacity-0 data-enter:ease-out data-closed:data-enter:scale-95 data-leave:ease-in')}>
+            {children}
+          </Headless.DialogPanel>
+        </div>
+      </div>
+    </Headless.Dialog>);
+}
+export function AlertTitle(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<Headless.DialogTitle {...props} className={clsx(className, 'text-center text-base/6 font-semibold text-balance text-zinc-950 sm:text-left sm:text-sm/6 sm:text-wrap dark:text-white')}/>);
+}
+export function AlertDescription(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<Headless.Description as={Text} {...props} className={clsx(className, 'mt-2 text-center text-pretty sm:text-left')}/>);
+}
+export function AlertBody(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return <div {...props} className={clsx(className, 'mt-4')}/>;
+}
+export function AlertActions(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (<div {...props} className={clsx(className, 'mt-6 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:mt-4 sm:flex-row sm:*:w-auto')}/>);
+}

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

@@ -0,0 +1,5 @@
+import type React from 'react';
+export declare function AuthLayout({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+//# sourceMappingURL=auth-layout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"auth-layout.d.ts","sourceRoot":"","sources":["../../source/catalyst/auth-layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAQrE"}

package/output/catalyst/auth-layout.jsx

@@ -0,0 +1,7 @@
+export function AuthLayout({ children }) {
+    return (<main className="flex min-h-dvh flex-col p-2">
+      <div className="flex grow items-center justify-center 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}
+      </div>
+    </main>);
+}

package/output/catalyst/avatar.d.ts

@@ -0,0 +1,15 @@
+import * as Headless from '@headlessui/react';
+import React from 'react';
+type AvatarProps = {
+    src?: string | null;
+    square?: boolean;
+    initials?: string;
+    alt?: string;
+    className?: string;
+};
+export declare function Avatar({ src, square, initials, alt, className, ...props }: AvatarProps & React.ComponentPropsWithoutRef<'span'>): React.JSX.Element;
+export declare const AvatarButton: React.ForwardRefExoticComponent<(AvatarProps & (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<HTMLElement>>;
+export {};
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../source/catalyst/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,KAAK,WAAW,GAAG;IACjB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,MAAM,CAAC,EACrB,GAAU,EACV,MAAc,EACd,QAAQ,EACR,GAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,qBA6BtD;AAED,eAAO,MAAM,YAAY;;+MA+BvB,CAAA"}

package/output/catalyst/avatar.jsx

@@ -0,0 +1,45 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as Headless from '@headlessui/react';
+import clsx from 'clsx';
+import React, { forwardRef } from 'react';
+import { TouchTarget } from './button';
+import { Link } from './link';
+export function Avatar(_a) {
+    var { src = null, square = false, initials, alt = '', className } = _a, props = __rest(_a, ["src", "square", "initials", "alt", "className"]);
+    return (<span data-slot="avatar" {...props} className={clsx(className, 
+        // Basic layout
+        'inline-grid shrink-0 align-middle [--avatar-radius:20%] *:col-start-1 *:row-start-1', 'outline -outline-offset-1 outline-black/10 dark:outline-white/10', 
+        // Border radius
+        square ? 'rounded-(--avatar-radius) *:rounded-(--avatar-radius)' : 'rounded-full *:rounded-full')}>
+      {initials && (<svg className="size-full fill-current p-[5%] text-[48px] font-medium uppercase select-none" viewBox="0 0 100 100" aria-hidden={alt ? undefined : 'true'}>
+          {alt && <title>{alt}</title>}
+          <text x="50%" y="50%" alignmentBaseline="middle" dominantBaseline="middle" textAnchor="middle" dy=".125em">
+            {initials}
+          </text>
+        </svg>)}
+      {src && <img className="size-full" src={src} alt={alt}/>}
+    </span>);
+}
+export const AvatarButton = forwardRef(function AvatarButton(_a, ref) {
+    var { src, square = false, initials, alt, className } = _a, props = __rest(_a, ["src", "square", "initials", "alt", "className"]);
+    let classes = clsx(className, square ? 'rounded-[20%]' : 'rounded-full', 'relative inline-grid focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500');
+    return 'href' in props ? (<Link {...props} className={classes} ref={ref}>
+      <TouchTarget>
+        <Avatar src={src} square={square} initials={initials} alt={alt}/>
+      </TouchTarget>
+    </Link>) : (<Headless.Button {...props} className={classes} ref={ref}>
+      <TouchTarget>
+        <Avatar src={src} square={square} initials={initials} alt={alt}/>
+      </TouchTarget>
+    </Headless.Button>);
+});

package/output/catalyst/badge.d.ts

@@ -0,0 +1,34 @@
+import * as Headless from '@headlessui/react';
+import React from 'react';
+declare const colors: {
+    red: string;
+    orange: string;
+    amber: string;
+    yellow: string;
+    lime: string;
+    green: string;
+    emerald: string;
+    teal: string;
+    cyan: string;
+    sky: string;
+    blue: string;
+    indigo: string;
+    violet: string;
+    purple: string;
+    fuchsia: string;
+    pink: string;
+    rose: string;
+    zinc: string;
+};
+type BadgeProps = {
+    color?: keyof typeof colors;
+};
+export declare function Badge({ color, className, ...props }: BadgeProps & React.ComponentPropsWithoutRef<'span'>): React.JSX.Element;
+export declare const BadgeButton: React.ForwardRefExoticComponent<(BadgeProps & ({
+    className?: string;
+    children: React.ReactNode;
+} & (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<HTMLElement>>;
+export {};
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../source/catalyst/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;CA4BX,CAAA;AAED,KAAK,UAAU,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAA;CAAE,CAAA;AAEjD,wBAAgB,KAAK,CAAC,EAAE,KAAc,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,qBAWjH;AAED,eAAO,MAAM,WAAW;gBAMQ,MAAM;cAAY,KAAK,CAAC,SAAS;;;gNAwB/D,CAAA"}

package/output/catalyst/badge.jsx

@@ -0,0 +1,53 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as Headless from '@headlessui/react';
+import clsx from 'clsx';
+import React, { forwardRef } from 'react';
+import { TouchTarget } from './button';
+import { Link } from './link';
+const colors = {
+    red: 'bg-red-500/15 text-red-700 group-data-hover:bg-red-500/25 dark:bg-red-500/10 dark:text-red-400 dark:group-data-hover:bg-red-500/20',
+    orange: 'bg-orange-500/15 text-orange-700 group-data-hover:bg-orange-500/25 dark:bg-orange-500/10 dark:text-orange-400 dark:group-data-hover:bg-orange-500/20',
+    amber: 'bg-amber-400/20 text-amber-700 group-data-hover:bg-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400 dark:group-data-hover:bg-amber-400/15',
+    yellow: 'bg-yellow-400/20 text-yellow-700 group-data-hover:bg-yellow-400/30 dark:bg-yellow-400/10 dark:text-yellow-300 dark:group-data-hover:bg-yellow-400/15',
+    lime: 'bg-lime-400/20 text-lime-700 group-data-hover:bg-lime-400/30 dark:bg-lime-400/10 dark:text-lime-300 dark:group-data-hover:bg-lime-400/15',
+    green: 'bg-green-500/15 text-green-700 group-data-hover:bg-green-500/25 dark:bg-green-500/10 dark:text-green-400 dark:group-data-hover:bg-green-500/20',
+    emerald: 'bg-emerald-500/15 text-emerald-700 group-data-hover:bg-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-data-hover:bg-emerald-500/20',
+    teal: 'bg-teal-500/15 text-teal-700 group-data-hover:bg-teal-500/25 dark:bg-teal-500/10 dark:text-teal-300 dark:group-data-hover:bg-teal-500/20',
+    cyan: 'bg-cyan-400/20 text-cyan-700 group-data-hover:bg-cyan-400/30 dark:bg-cyan-400/10 dark:text-cyan-300 dark:group-data-hover:bg-cyan-400/15',
+    sky: 'bg-sky-500/15 text-sky-700 group-data-hover:bg-sky-500/25 dark:bg-sky-500/10 dark:text-sky-300 dark:group-data-hover:bg-sky-500/20',
+    blue: 'bg-blue-500/15 text-blue-700 group-data-hover:bg-blue-500/25 dark:text-blue-400 dark:group-data-hover:bg-blue-500/25',
+    indigo: 'bg-indigo-500/15 text-indigo-700 group-data-hover:bg-indigo-500/25 dark:text-indigo-400 dark:group-data-hover:bg-indigo-500/20',
+    violet: 'bg-violet-500/15 text-violet-700 group-data-hover:bg-violet-500/25 dark:text-violet-400 dark:group-data-hover:bg-violet-500/20',
+    purple: 'bg-purple-500/15 text-purple-700 group-data-hover:bg-purple-500/25 dark:text-purple-400 dark:group-data-hover:bg-purple-500/20',
+    fuchsia: 'bg-fuchsia-400/15 text-fuchsia-700 group-data-hover:bg-fuchsia-400/25 dark:bg-fuchsia-400/10 dark:text-fuchsia-400 dark:group-data-hover:bg-fuchsia-400/20',
+    pink: 'bg-pink-400/15 text-pink-700 group-data-hover:bg-pink-400/25 dark:bg-pink-400/10 dark:text-pink-400 dark:group-data-hover:bg-pink-400/20',
+    rose: 'bg-rose-400/15 text-rose-700 group-data-hover:bg-rose-400/25 dark:bg-rose-400/10 dark:text-rose-400 dark:group-data-hover:bg-rose-400/20',
+    zinc: 'bg-zinc-600/10 text-zinc-700 group-data-hover:bg-zinc-600/20 dark:bg-white/5 dark:text-zinc-400 dark:group-data-hover:bg-white/10',
+};
+export function Badge(_a) {
+    var { color = 'zinc', className } = _a, props = __rest(_a, ["color", "className"]);
+    return (<span {...props} className={clsx(className, 'inline-flex items-center gap-x-1.5 rounded-md px-1.5 py-0.5 text-sm/5 font-medium sm:text-xs/5 forced-colors:outline', colors[color])}/>);
+}
+export const BadgeButton = forwardRef(function BadgeButton(_a, ref) {
+    var { color = 'zinc', className, children } = _a, props = __rest(_a, ["color", "className", "children"]);
+    let classes = clsx(className, 'group relative inline-flex rounded-md focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500');
+    return 'href' in props ? (<Link {...props} className={classes} ref={ref}>
+      <TouchTarget>
+        <Badge color={color}>{children}</Badge>
+      </TouchTarget>
+    </Link>) : (<Headless.Button {...props} className={classes} ref={ref}>
+      <TouchTarget>
+        <Badge color={color}>{children}</Badge>
+      </TouchTarget>
+    </Headless.Button>);
+});

package/output/catalyst/button.d.ts

@@ -0,0 +1,59 @@
+import * as Headless from '@headlessui/react';
+import React from 'react';
+import { Link } from './link';
+declare const styles: {
+    base: string[];
+    solid: string[];
+    outline: string[];
+    plain: string[];
+    colors: {
+        'dark/zinc': string[];
+        light: string[];
+        'dark/white': string[];
+        dark: string[];
+        white: string[];
+        zinc: string[];
+        indigo: string[];
+        cyan: string[];
+        red: string[];
+        orange: string[];
+        amber: string[];
+        yellow: string[];
+        lime: string[];
+        green: string[];
+        emerald: string[];
+        teal: string[];
+        sky: string[];
+        blue: string[];
+        violet: string[];
+        purple: string[];
+        fuchsia: string[];
+        pink: string[];
+        rose: string[];
+    };
+};
+type ButtonProps = ({
+    color?: keyof typeof styles.colors;
+    outline?: never;
+    plain?: never;
+} | {
+    color?: never;
+    outline: true;
+    plain?: never;
+} | {
+    color?: never;
+    outline?: never;
+    plain: true;
+}) & {
+    className?: string;
+    children: React.ReactNode;
+} & (Omit<Headless.ButtonProps, 'as' | 'className'> | Omit<React.ComponentPropsWithoutRef<typeof Link>, 'className'>);
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Expand the hit area to at least 44×44px on touch devices
+ */
+export declare function TouchTarget({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export {};
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../source/catalyst/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyJX,CAAA;AAED,KAAK,WAAW,GAAG,CACf;IAAE,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GACtE;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GAC/C;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,IAAI,CAAA;CAAE,CAClD,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,CAClD,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,IAAI,GAAG,WAAW,CAAC,GAC9C,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,IAAI,CAAC,EAAE,WAAW,CAAC,CACjE,CAAA;AAEH,eAAO,MAAM,MAAM,iFAmBjB,CAAA;AAEF;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAUtE"}

package/output/catalyst/button.jsx

@@ -0,0 +1,187 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as Headless from '@headlessui/react';
+import clsx from 'clsx';
+import React, { forwardRef } from 'react';
+import { Link } from './link';
+const styles = {
+    base: [
+        // Base
+        'relative isolate inline-flex items-baseline justify-center gap-x-2 rounded-lg border text-base/6 font-semibold',
+        // Sizing
+        '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)] sm:text-sm/6',
+        // Focus
+        'focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500',
+        // Disabled
+        'data-disabled:opacity-50',
+        // Icon
+        '*:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:my-0.5 *:data-[slot=icon]:size-5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center *:data-[slot=icon]:text-(--btn-icon) sm:*:data-[slot=icon]:my-1 sm:*:data-[slot=icon]:size-4 forced-colors:[--btn-icon:ButtonText] forced-colors:data-hover:[--btn-icon:ButtonText]',
+    ],
+    solid: [
+        // Optical border, implemented as the button background to avoid corner artifacts
+        'border-transparent bg-(--btn-border)',
+        // Dark mode: border is rendered on `after` so background is set to button background
+        'dark:bg-(--btn-bg)',
+        // Button background, implemented as foreground layer to stack on top of pseudo-border layer
+        'before:absolute before:inset-0 before:-z-10 before:rounded-[calc(var(--radius-lg)-1px)] before:bg-(--btn-bg)',
+        // Drop shadow, applied to the inset `before` layer so it blends with the border
+        'before:shadow-sm',
+        // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
+        'dark:before:hidden',
+        // Dark mode: Subtle white outline is applied using a border
+        'dark:border-white/5',
+        // Shim/overlay, inset to match button foreground and used for hover state + highlight shadow
+        'after:absolute after:inset-0 after:-z-10 after:rounded-[calc(var(--radius-lg)-1px)]',
+        // Inner highlight shadow
+        'after:shadow-[inset_0_1px_--theme(--color-white/15%)]',
+        // White overlay on hover
+        'data-active:after:bg-(--btn-hover-overlay) data-hover:after:bg-(--btn-hover-overlay)',
+        // Dark mode: `after` layer expands to cover entire button
+        'dark:after:-inset-px dark:after:rounded-lg',
+        // Disabled
+        'data-disabled:before:shadow-none data-disabled:after:shadow-none',
+    ],
+    outline: [
+        // Base
+        'border-zinc-950/10 text-zinc-950 data-active:bg-zinc-950/2.5 data-hover:bg-zinc-950/2.5',
+        // Dark mode
+        'dark:border-white/15 dark:text-white dark:[--btn-bg:transparent] dark:data-active:bg-white/5 dark:data-hover:bg-white/5',
+        // Icon
+        '[--btn-icon:var(--color-zinc-500)] data-active:[--btn-icon:var(--color-zinc-700)] data-hover:[--btn-icon:var(--color-zinc-700)] dark:data-active:[--btn-icon:var(--color-zinc-400)] dark:data-hover:[--btn-icon:var(--color-zinc-400)]',
+    ],
+    plain: [
+        // Base
+        'border-transparent text-zinc-950 data-active:bg-zinc-950/5 data-hover:bg-zinc-950/5',
+        // Dark mode
+        'dark:text-white dark:data-active:bg-white/10 dark:data-hover:bg-white/10',
+        // Icon
+        '[--btn-icon:var(--color-zinc-500)] data-active:[--btn-icon:var(--color-zinc-700)] data-hover:[--btn-icon:var(--color-zinc-700)] dark:[--btn-icon:var(--color-zinc-500)] dark:data-active:[--btn-icon:var(--color-zinc-400)] dark:data-hover:[--btn-icon:var(--color-zinc-400)]',
+    ],
+    colors: {
+        'dark/zinc': [
+            'text-white [--btn-bg:var(--color-zinc-900)] [--btn-border:var(--color-zinc-950)]/90 [--btn-hover-overlay:var(--color-white)]/10',
+            'dark:text-white dark:[--btn-bg:var(--color-zinc-600)] dark:[--btn-hover-overlay:var(--color-white)]/5',
+            '[--btn-icon:var(--color-zinc-400)] data-active:[--btn-icon:var(--color-zinc-300)] data-hover:[--btn-icon:var(--color-zinc-300)]',
+        ],
+        light: [
+            'text-zinc-950 [--btn-bg:white] [--btn-border:var(--color-zinc-950)]/10 [--btn-hover-overlay:var(--color-zinc-950)]/2.5 data-active:[--btn-border:var(--color-zinc-950)]/15 data-hover:[--btn-border:var(--color-zinc-950)]/15',
+            'dark:text-white dark:[--btn-hover-overlay:var(--color-white)]/5 dark:[--btn-bg:var(--color-zinc-800)]',
+            '[--btn-icon:var(--color-zinc-500)] data-active:[--btn-icon:var(--color-zinc-700)] data-hover:[--btn-icon:var(--color-zinc-700)] dark:[--btn-icon:var(--color-zinc-500)] dark:data-active:[--btn-icon:var(--color-zinc-400)] dark:data-hover:[--btn-icon:var(--color-zinc-400)]',
+        ],
+        'dark/white': [
+            'text-white [--btn-bg:var(--color-zinc-900)] [--btn-border:var(--color-zinc-950)]/90 [--btn-hover-overlay:var(--color-white)]/10',
+            'dark:text-zinc-950 dark:[--btn-bg:white] dark:[--btn-hover-overlay:var(--color-zinc-950)]/5',
+            '[--btn-icon:var(--color-zinc-400)] data-active:[--btn-icon:var(--color-zinc-300)] data-hover:[--btn-icon:var(--color-zinc-300)] dark:[--btn-icon:var(--color-zinc-500)] dark:data-active:[--btn-icon:var(--color-zinc-400)] dark:data-hover:[--btn-icon:var(--color-zinc-400)]',
+        ],
+        dark: [
+            'text-white [--btn-bg:var(--color-zinc-900)] [--btn-border:var(--color-zinc-950)]/90 [--btn-hover-overlay:var(--color-white)]/10',
+            'dark:[--btn-hover-overlay:var(--color-white)]/5 dark:[--btn-bg:var(--color-zinc-800)]',
+            '[--btn-icon:var(--color-zinc-400)] data-active:[--btn-icon:var(--color-zinc-300)] data-hover:[--btn-icon:var(--color-zinc-300)]',
+        ],
+        white: [
+            'text-zinc-950 [--btn-bg:white] [--btn-border:var(--color-zinc-950)]/10 [--btn-hover-overlay:var(--color-zinc-950)]/2.5 data-active:[--btn-border:var(--color-zinc-950)]/15 data-hover:[--btn-border:var(--color-zinc-950)]/15',
+            'dark:[--btn-hover-overlay:var(--color-zinc-950)]/5',
+            '[--btn-icon:var(--color-zinc-400)] data-active:[--btn-icon:var(--color-zinc-500)] data-hover:[--btn-icon:var(--color-zinc-500)]',
+        ],
+        zinc: [
+            'text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-zinc-600)] [--btn-border:var(--color-zinc-700)]/90',
+            'dark:[--btn-hover-overlay:var(--color-white)]/5',
+            '[--btn-icon:var(--color-zinc-400)] data-active:[--btn-icon:var(--color-zinc-300)] data-hover:[--btn-icon:var(--color-zinc-300)]',
+        ],
+        indigo: [
+            'text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-indigo-500)] [--btn-border:var(--color-indigo-600)]/90',
+            '[--btn-icon:var(--color-indigo-300)] data-active:[--btn-icon:var(--color-indigo-200)] data-hover:[--btn-icon:var(--color-indigo-200)]',
+        ],
+        cyan: [
+            'text-cyan-950 [--btn-bg:var(--color-cyan-300)] [--btn-border:var(--color-cyan-400)]/80 [--btn-hover-overlay:var(--color-white)]/25',
+            '[--btn-icon:var(--color-cyan-500)]',
+        ],
+        red: [
+            'text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-red-600)] [--btn-border:var(--color-red-700)]/90',
+            '[--btn-icon:var(--color-red-300)] data-active:[--btn-icon:var(--color-red-200)] data-hover:[--btn-icon:var(--color-red-200)]',
+        ],
+        orange: [
+            'text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-orange-500)] [--btn-border:var(--color-orange-600)]/90',
+            '[--btn-icon:var(--color-orange-300)] data-active:[--btn-icon:var(--color-orange-200)] data-hover:[--btn-icon:var(--color-orange-200)]',
+        ],
+        amber: [
+            'text-amber-950 [--btn-hover-overlay:var(--color-white)]/25 [--btn-bg:var(--color-amber-400)] [--btn-border:var(--color-amber-500)]/80',
+            '[--btn-icon:var(--color-amber-600)]',
+        ],
+        yellow: [
+            'text-yellow-950 [--btn-hover-overlay:var(--color-white)]/25 [--btn-bg:var(--color-yellow-300)] [--btn-border:var(--color-yellow-400)]/80',
+            '[--btn-icon:var(--color-yellow-600)] data-active:[--btn-icon:var(--color-yellow-700)] data-hover:[--btn-icon:var(--color-yellow-700)]',
+        ],
+        lime: [
+            'text-lime-950 [--btn-hover-overlay:var(--color-white)]/25 [--btn-bg:var(--color-lime-300)] [--btn-border:var(--color-lime-400)]/80',
+            '[--btn-icon:var(--color-lime-600)] data-active:[--btn-icon:var(--color-lime-700)] data-hover:[--btn-icon:var(--color-lime-700)]',
+        ],
+        green: [
+            'text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-green-600)] [--btn-border:var(--color-green-700)]/90',
+            '[--btn-icon:var(--color-white)]/60 data-active:[--btn-icon:var(--color-white)]/80 data-hover:[--btn-icon:var(--color-white)]/80',
+        ],
+        emerald: [
+            'text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-emerald-600)] [--btn-border:var(--color-emerald-700)]/90',
+            '[--btn-icon:var(--color-white)]/60 data-active:[--btn-icon:var(--color-white)]/80 data-hover:[--btn-icon:var(--color-white)]/80',
+        ],
+        teal: [
+            'text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-teal-600)] [--btn-border:var(--color-teal-700)]/90',
+            '[--btn-icon:var(--color-white)]/60 data-active:[--btn-icon:var(--color-white)]/80 data-hover:[--btn-icon:var(--color-white)]/80',
+        ],
+        sky: [
+            'text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-sky-500)] [--btn-border:var(--color-sky-600)]/80',
+            '[--btn-icon:var(--color-white)]/60 data-active:[--btn-icon:var(--color-white)]/80 data-hover:[--btn-icon:var(--color-white)]/80',
+        ],
+        blue: [
+            'text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-blue-600)] [--btn-border:var(--color-blue-700)]/90',
+            '[--btn-icon:var(--color-blue-400)] data-active:[--btn-icon:var(--color-blue-300)] data-hover:[--btn-icon:var(--color-blue-300)]',
+        ],
+        violet: [
+            'text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-violet-500)] [--btn-border:var(--color-violet-600)]/90',
+            '[--btn-icon:var(--color-violet-300)] data-active:[--btn-icon:var(--color-violet-200)] data-hover:[--btn-icon:var(--color-violet-200)]',
+        ],
+        purple: [
+            'text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-purple-500)] [--btn-border:var(--color-purple-600)]/90',
+            '[--btn-icon:var(--color-purple-300)] data-active:[--btn-icon:var(--color-purple-200)] data-hover:[--btn-icon:var(--color-purple-200)]',
+        ],
+        fuchsia: [
+            'text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-fuchsia-500)] [--btn-border:var(--color-fuchsia-600)]/90',
+            '[--btn-icon:var(--color-fuchsia-300)] data-active:[--btn-icon:var(--color-fuchsia-200)] data-hover:[--btn-icon:var(--color-fuchsia-200)]',
+        ],
+        pink: [
+            'text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-pink-500)] [--btn-border:var(--color-pink-600)]/90',
+            '[--btn-icon:var(--color-pink-300)] data-active:[--btn-icon:var(--color-pink-200)] data-hover:[--btn-icon:var(--color-pink-200)]',
+        ],
+        rose: [
+            'text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-rose-500)] [--btn-border:var(--color-rose-600)]/90',
+            '[--btn-icon:var(--color-rose-300)] data-active:[--btn-icon:var(--color-rose-200)] data-hover:[--btn-icon:var(--color-rose-200)]',
+        ],
+    },
+};
+export const Button = forwardRef(function Button(_a, ref) {
+    var { color, outline, plain, className, children } = _a, props = __rest(_a, ["color", "outline", "plain", "className", "children"]);
+    let classes = clsx(className, styles.base, outline ? styles.outline : plain ? styles.plain : clsx(styles.solid, styles.colors[color !== null && color !== void 0 ? color : 'dark/zinc']));
+    return 'href' in props ? (<Link {...props} className={classes} ref={ref}>
+      <TouchTarget>{children}</TouchTarget>
+    </Link>) : (<Headless.Button {...props} className={clsx(classes, 'cursor-default')} ref={ref}>
+      <TouchTarget>{children}</TouchTarget>
+    </Headless.Button>);
+});
+/**
+ * Expand the hit area to at least 44×44px on touch devices
+ */
+export function TouchTarget({ children }) {
+    return (<>
+      <span className="absolute top-1/2 left-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 pointer-fine:hidden" aria-hidden="true"/>
+      {children}
+    </>);
+}

package/output/catalyst/checkbox.d.ts

@@ -0,0 +1,37 @@
+import * as Headless from '@headlessui/react';
+import type React from 'react';
+export declare function CheckboxGroup({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): React.JSX.Element;
+export declare function CheckboxField({ className, ...props }: {
+    className?: string;
+} & Omit<Headless.FieldProps, 'as' | 'className'>): React.JSX.Element;
+declare const colors: {
+    'dark/zinc': string[];
+    'dark/white': string[];
+    white: string;
+    dark: string;
+    zinc: string;
+    red: string;
+    orange: string;
+    amber: string;
+    yellow: string;
+    lime: string;
+    green: string;
+    emerald: string;
+    teal: string;
+    cyan: string;
+    sky: string;
+    blue: string;
+    indigo: string;
+    violet: string;
+    purple: string;
+    fuchsia: string;
+    pink: string;
+    rose: string;
+};
+type Color = keyof typeof colors;
+export declare function Checkbox({ color, className, ...props }: {
+    color?: Color;
+    className?: string;
+} & Omit<Headless.CheckboxProps, 'as' | 'className'>): React.JSX.Element;
+export {};
+//# sourceMappingURL=checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../source/catalyst/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAc3F;AAED,wBAAgB,aAAa,CAAC,EAC5B,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;AA8BD,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;CAuCX,CAAA;AAED,KAAK,KAAK,GAAG,MAAM,OAAO,MAAM,CAAA;AAEhC,wBAAgB,QAAQ,CAAC,EACvB,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,aAAa,EAAE,IAAI,GAAG,WAAW,CAAC,qBAiCnD"}