@cellarnode/ui 0.1.0

package/dist/components/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../src/components/badge.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAC7C,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,MAAM,GAAG;IACb,GAAG,EAAE,oIAAoI;IACzI,MAAM,EACJ,sJAAsJ;IACxJ,KAAK,EACH,gJAAgJ;IAClJ,MAAM,EACJ,sJAAsJ;IACxJ,IAAI,EAAE,0IAA0I;IAChJ,KAAK,EACH,gJAAgJ;IAClJ,OAAO,EACL,kJAAkJ;IACpJ,KAAK,EAAE,+IAA+I;IACtJ,IAAI,EAAE,+IAA+I;IACrJ,IAAI,EAAE,0IAA0I;IAChJ,GAAG,EAAE,oIAAoI;IACzI,IAAI,EAAE,sHAAsH;IAC5H,MAAM,EACJ,gIAAgI;IAClI,MAAM,EACJ,gIAAgI;IAClI,MAAM,EACJ,gIAAgI;IAClI,OAAO,EACL,4JAA4J;IAC9J,IAAI,EAAE,0IAA0I;IAChJ,IAAI,EAAE,0IAA0I;IAChJ,IAAI,EAAE,mIAAmI;CAC1I,CAAA;AAID,MAAM,UAAU,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAuD;IAChH,OAAO,CACL,kBACM,KAAK,EACT,SAAS,EAAE,IAAI,CACb,SAAS,EACT,sHAAsH,EACtH,MAAM,CAAC,KAAK,CAAC,CACd,GACD,CACH,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CAAC,SAAS,WAAW,CACxD,EACE,KAAK,GAAG,MAAM,EACd,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EAIP,EACH,GAAoC;IAEpC,MAAM,OAAO,GAAG,IAAI,CAClB,SAAS,EACT,oJAAoJ,CACrJ,CAAA;IAED,OAAO,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CACtC,KAAC,IAAI,OAAK,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,GAA4C,YACpF,KAAC,WAAW,cACV,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAS,GAC3B,GACT,CACR,CAAC,CAAC,CAAC,CACF,KAAC,QAAQ,CAAC,MAAM,OAAK,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,YACtD,KAAC,WAAW,cACV,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAS,GAC3B,GACE,CACnB,CAAA;AACH,CAAC,CAAC,CAAA"}

package/dist/components/button.d.ts

@@ -0,0 +1,64 @@
+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[];
+        brand: 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;
+} & (({
+    href?: never;
+} & Omit<Headless.ButtonProps, 'as' | 'className'>) | ({
+    href: string;
+} & 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;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=button.d.ts.map

package/dist/components/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6JX,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,CAAC;IAAE,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,IAAI,GAAG,WAAW,CAAC,CAAC,GACnE,CAAC;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,IAAI,CAAC,EAAE,WAAW,CAAC,CAAC,CACtF,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,2CAUtE"}

package/dist/components/button.js

@@ -0,0 +1,174 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Headless from '@headlessui/react';
+import clsx from 'clsx';
+import { 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-ring',
+        // 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',
+        ],
+        brand: [
+            'text-white [--btn-hover-overlay:var(--color-white)]/10 [--btn-bg:var(--color-brand-primary)] [--btn-border:var(--color-brand-primary)]',
+            '[--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-brand-primary)] [--btn-border:var(--color-brand-primary)]',
+            '[--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({ color, outline, plain, className, children, ...props }, ref) {
+    const classes = clsx(className, styles.base, outline ? styles.outline : plain ? styles.plain : clsx(styles.solid, styles.colors[color ?? 'dark/zinc']));
+    return typeof props.href === 'string' ? (_jsx(Link, { ...props, className: classes, ref: ref, children: _jsx(TouchTarget, { children: children }) })) : (_jsx(Headless.Button, { ...props, className: clsx(classes, 'cursor-default'), ref: ref, children: _jsx(TouchTarget, { children: children }) }));
+});
+/**
+ * Expand the hit area to at least 44×44px on touch devices
+ */
+export function TouchTarget({ children }) {
+    return (_jsxs(_Fragment, { children: [_jsx("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] }));
+}
+//# sourceMappingURL=button.js.map

package/dist/components/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"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"}

package/dist/components/button.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "./button";
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Default: Story;
+export declare const Brand: Story;
+export declare const Emerald: Story;
+export declare const Outline: Story;
+export declare const Plain: Story;
+export declare const Colors: Story;
+export declare const Disabled: Story;
+//# sourceMappingURL=button.stories.d.ts.map

package/dist/components/button.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.stories.d.ts","sourceRoot":"","sources":["../../src/components/button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAI7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAgBpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC"}

package/dist/components/button.stories.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "./button";
+const meta = {
+    title: "Components/Button",
+    component: Button,
+    tags: ["autodocs"],
+};
+export default meta;
+export const Default = {
+    args: {
+        children: "Click me",
+    },
+};
+export const Brand = {
+    args: {
+        color: "brand",
+        children: "Brand",
+    },
+};
+export const Emerald = {
+    args: {
+        color: "emerald",
+        children: "Emerald",
+    },
+};
+export const Outline = {
+    args: {
+        outline: true,
+        children: "Outline",
+    },
+};
+export const Plain = {
+    args: {
+        plain: true,
+        children: "Plain",
+    },
+};
+export const Colors = {
+    render: () => (_jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsx(Button, { color: "brand", children: "Brand" }), _jsx(Button, { color: "emerald", children: "Emerald" }), _jsx(Button, { color: "indigo", children: "Indigo" }), _jsx(Button, { color: "red", children: "Red" }), _jsx(Button, { color: "orange", children: "Orange" }), _jsx(Button, { color: "sky", children: "Sky" }), _jsx(Button, { color: "blue", children: "Blue" }), _jsx(Button, { color: "violet", children: "Violet" }), _jsx(Button, { color: "pink", children: "Pink" }), _jsx(Button, { outline: true, children: "Outline" }), _jsx(Button, { plain: true, children: "Plain" })] })),
+};
+export const Disabled = {
+    args: {
+        color: "brand",
+        disabled: true,
+        children: "Disabled",
+    },
+};
+//# sourceMappingURL=button.stories.js.map

package/dist/components/button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../src/components/button.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,OAAO;KAClB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,SAAS;KACpB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,SAAS;KACpB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,OAAO;KAClB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,eAAK,SAAS,EAAC,sBAAsB,aACnC,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,sBAAe,EACpC,KAAC,MAAM,IAAC,KAAK,EAAC,SAAS,wBAAiB,EACxC,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,uBAAgB,EACtC,KAAC,MAAM,IAAC,KAAK,EAAC,KAAK,oBAAa,EAChC,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,uBAAgB,EACtC,KAAC,MAAM,IAAC,KAAK,EAAC,KAAK,oBAAa,EAChC,KAAC,MAAM,IAAC,KAAK,EAAC,MAAM,qBAAc,EAClC,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,uBAAgB,EACtC,KAAC,MAAM,IAAC,KAAK,EAAC,MAAM,qBAAc,EAClC,KAAC,MAAM,IAAC,OAAO,8BAAiB,EAChC,KAAC,MAAM,IAAC,KAAK,4BAAe,IACxB,CACP;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,IAAI;QACd,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC"}

package/dist/components/card.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+//# sourceMappingURL=card.d.ts.map

package/dist/components/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,IAAI,6GAER,CAAC;AAGH,QAAA,MAAM,UAAU,6GAIf,CAAC;AAGF,QAAA,MAAM,SAAS,uHAId,CAAC;AAGF,QAAA,MAAM,eAAe,yHAIpB,CAAC;AAGF,QAAA,MAAM,WAAW,6GAEhB,CAAC;AAGF,QAAA,MAAM,UAAU,6GAIf,CAAC;AAGF,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/card.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils";
+const Card = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("rounded-lg border bg-card text-card-foreground shadow-apple-sm", className), ...props })));
+Card.displayName = "Card";
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex flex-col space-y-3 p-8", className), ...props })));
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("h3", { ref: ref, className: cn("text-xl font-medium leading-none tracking-tight", className), ...props })));
+CardTitle.displayName = "CardTitle";
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("p", { ref: ref, className: cn("text-sm text-muted-foreground leading-relaxed", className), ...props })));
+CardDescription.displayName = "CardDescription";
+const CardContent = React.forwardRef(({ className, ...props }, ref) => _jsx("div", { ref: ref, className: cn("p-8 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex items-center p-8 pt-0", className), ...props })));
+CardFooter.displayName = "CardFooter";
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+//# sourceMappingURL=card.js.map

package/dist/components/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAuD,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACpH,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,gEAAgE,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CACzH,CAAC,CAAC;AACH,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAE1B,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CACtF,CACF,CAAC;AACF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAChC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,aAAI,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,iDAAiD,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CACzG,CACF,CAAC;AACF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,YAAG,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,+CAA+C,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CACtG,CACF,CAAC;AACF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAEhD,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CACrG,CAAC;AACF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAExC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CACrF,CACF,CAAC;AACF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/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'>): import("react/jsx-runtime").JSX.Element;
+export declare function CheckboxField({ className, ...props }: {
+    className?: string;
+} & Omit<Headless.FieldProps, 'as' | 'className'>): import("react/jsx-runtime").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'>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/components/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,2CAc3F;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,2CAoBxE;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,2CAiCnD"}

package/dist/components/checkbox.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Headless from '@headlessui/react';
+import clsx from 'clsx';
+export function CheckboxGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "control", ...props, className: clsx(className, 
+        // Basic groups
+        'space-y-3', 
+        // With descriptions
+        'has-data-[slot=description]:space-y-6 has-data-[slot=description]:**:data-[slot=label]:font-medium') }));
+}
+export function CheckboxField({ className, ...props }) {
+    return (_jsx(Headless.Field, { "data-slot": "field", ...props, className: clsx(className, 
+        // Base layout
+        'grid grid-cols-[1.125rem_1fr] gap-x-4 gap-y-1 sm:grid-cols-[1rem_1fr]', 
+        // Control layout
+        '*:data-[slot=control]:col-start-1 *:data-[slot=control]:row-start-1 *:data-[slot=control]:mt-0.75 sm:*:data-[slot=control]:mt-1', 
+        // Label layout
+        '*:data-[slot=label]:col-start-2 *:data-[slot=label]:row-start-1', 
+        // Description layout
+        '*:data-[slot=description]:col-start-2 *:data-[slot=description]:row-start-2', 
+        // With description
+        'has-data-[slot=description]:**:data-[slot=label]:font-medium') }));
+}
+const base = [
+    // Basic layout
+    'relative isolate flex size-4.5 items-center justify-center rounded-[0.3125rem] sm:size-4',
+    // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
+    'before:absolute before:inset-0 before:-z-10 before:rounded-[calc(0.3125rem-1px)] before:bg-white before:shadow-sm',
+    // Background color when checked
+    'group-data-checked:before:bg-(--checkbox-checked-bg)',
+    // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
+    'dark:before:hidden',
+    // Background color applied to control in dark mode
+    'dark:bg-white/5 dark:group-data-checked:bg-(--checkbox-checked-bg)',
+    // Border
+    'border border-zinc-950/15 group-data-checked:border-transparent group-data-hover:group-data-checked:border-transparent group-data-hover:border-zinc-950/30 group-data-checked:bg-(--checkbox-checked-border)',
+    'dark:border-white/15 dark:group-data-checked:border-white/5 dark:group-data-hover:group-data-checked:border-white/5 dark:group-data-hover:border-white/30',
+    // Inner highlight shadow
+    'after:absolute after:inset-0 after:rounded-[calc(0.3125rem-1px)] after:shadow-[inset_0_1px_--theme(--color-white/15%)]',
+    'dark:after:-inset-px dark:after:hidden dark:after:rounded-[0.3125rem] dark:group-data-checked:after:block',
+    // Focus ring
+    'group-data-focus:outline-2 group-data-focus:outline-offset-2 group-data-focus:outline-blue-500',
+    // Disabled state
+    'group-data-disabled:opacity-50',
+    'group-data-disabled:border-zinc-950/25 group-data-disabled:bg-zinc-950/5 group-data-disabled:[--checkbox-check:var(--color-zinc-950)]/50 group-data-disabled:before:bg-transparent',
+    'dark:group-data-disabled:border-white/20 dark:group-data-disabled:bg-white/2.5 dark:group-data-disabled:[--checkbox-check:var(--color-white)]/50 dark:group-data-checked:group-data-disabled:after:hidden',
+    // Forced colors mode
+    'forced-colors:[--checkbox-check:HighlightText] forced-colors:[--checkbox-checked-bg:Highlight] forced-colors:group-data-disabled:[--checkbox-check:Highlight]',
+    'dark:forced-colors:[--checkbox-check:HighlightText] dark:forced-colors:[--checkbox-checked-bg:Highlight] dark:forced-colors:group-data-disabled:[--checkbox-check:Highlight]',
+];
+const colors = {
+    'dark/zinc': [
+        '[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-zinc-900)] [--checkbox-checked-border:var(--color-zinc-950)]/90',
+        'dark:[--checkbox-checked-bg:var(--color-zinc-600)]',
+    ],
+    'dark/white': [
+        '[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-zinc-900)] [--checkbox-checked-border:var(--color-zinc-950)]/90',
+        'dark:[--checkbox-check:var(--color-zinc-900)] dark:[--checkbox-checked-bg:var(--color-white)] dark:[--checkbox-checked-border:var(--color-zinc-950)]/15',
+    ],
+    white: '[--checkbox-check:var(--color-zinc-900)] [--checkbox-checked-bg:var(--color-white)] [--checkbox-checked-border:var(--color-zinc-950)]/15',
+    dark: '[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-zinc-900)] [--checkbox-checked-border:var(--color-zinc-950)]/90',
+    zinc: '[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-zinc-600)] [--checkbox-checked-border:var(--color-zinc-700)]/90',
+    red: '[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-red-600)] [--checkbox-checked-border:var(--color-red-700)]/90',
+    orange: '[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-orange-500)] [--checkbox-checked-border:var(--color-orange-600)]/90',
+    amber: '[--checkbox-check:var(--color-amber-950)] [--checkbox-checked-bg:var(--color-amber-400)] [--checkbox-checked-border:var(--color-amber-500)]/80',
+    yellow: '[--checkbox-check:var(--color-yellow-950)] [--checkbox-checked-bg:var(--color-yellow-300)] [--checkbox-checked-border:var(--color-yellow-400)]/80',
+    lime: '[--checkbox-check:var(--color-lime-950)] [--checkbox-checked-bg:var(--color-lime-300)] [--checkbox-checked-border:var(--color-lime-400)]/80',
+    green: '[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-green-600)] [--checkbox-checked-border:var(--color-green-700)]/90',
+    emerald: '[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-emerald-600)] [--checkbox-checked-border:var(--color-emerald-700)]/90',
+    teal: '[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-teal-600)] [--checkbox-checked-border:var(--color-teal-700)]/90',
+    cyan: '[--checkbox-check:var(--color-cyan-950)] [--checkbox-checked-bg:var(--color-cyan-300)] [--checkbox-checked-border:var(--color-cyan-400)]/80',
+    sky: '[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-sky-500)] [--checkbox-checked-border:var(--color-sky-600)]/80',
+    blue: '[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-blue-600)] [--checkbox-checked-border:var(--color-blue-700)]/90',
+    indigo: '[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-indigo-500)] [--checkbox-checked-border:var(--color-indigo-600)]/90',
+    violet: '[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-violet-500)] [--checkbox-checked-border:var(--color-violet-600)]/90',
+    purple: '[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-purple-500)] [--checkbox-checked-border:var(--color-purple-600)]/90',
+    fuchsia: '[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-fuchsia-500)] [--checkbox-checked-border:var(--color-fuchsia-600)]/90',
+    pink: '[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-pink-500)] [--checkbox-checked-border:var(--color-pink-600)]/90',
+    rose: '[--checkbox-check:var(--color-white)] [--checkbox-checked-bg:var(--color-rose-500)] [--checkbox-checked-border:var(--color-rose-600)]/90',
+};
+export function Checkbox({ color = 'dark/zinc', className, ...props }) {
+    return (_jsx(Headless.Checkbox, { "data-slot": "control", ...props, className: clsx(className, 'group inline-flex focus:outline-hidden'), children: _jsx("span", { className: clsx([base, colors[color]]), children: _jsxs("svg", { className: "size-4 stroke-(--checkbox-check) opacity-0 group-data-checked:opacity-100 sm:h-3.5 sm:w-3.5", viewBox: "0 0 14 14", fill: "none", children: [_jsx("path", { className: "opacity-100 group-data-indeterminate:opacity-0", d: "M3 8L6 11L11 3.5", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { className: "opacity-0 group-data-indeterminate:opacity-100", d: "M3 7H11", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }) }) }));
+}
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/components/checkbox.tsx"],"names":[],"mappings":"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"}

package/dist/components/combobox.d.ts

@@ -0,0 +1,20 @@
+import * as Headless from '@headlessui/react';
+export declare function Combobox<T>({ options, displayValue, filter, anchor, className, placeholder, autoFocus, 'aria-label': ariaLabel, children, ...props }: {
+    options: T[];
+    displayValue: (value: T | null) => string | undefined;
+    filter?: (value: T, query: string) => boolean;
+    className?: string;
+    placeholder?: string;
+    autoFocus?: boolean;
+    'aria-label'?: string;
+    children: (value: NonNullable<T>) => React.ReactElement;
+} & Omit<Headless.ComboboxProps<T, false>, 'as' | 'multiple' | 'children'> & {
+    anchor?: 'top' | 'bottom';
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ComboboxOption<T>({ children, className, ...props }: {
+    className?: string;
+    children?: React.ReactNode;
+} & Omit<Headless.ComboboxOptionProps<'div', T>, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
+export declare function ComboboxLabel({ className, ...props }: React.ComponentPropsWithoutRef<'span'>): import("react/jsx-runtime").JSX.Element;
+export declare function ComboboxDescription({ className, children, ...props }: React.ComponentPropsWithoutRef<'span'>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=combobox.d.ts.map

package/dist/components/combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/components/combobox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAI7C,wBAAgB,QAAQ,CAAC,CAAC,EAAE,EAC1B,OAAO,EACP,YAAY,EACZ,MAAM,EACN,MAAiB,EACjB,SAAS,EACT,WAAW,EACX,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE;IACD,OAAO,EAAE,CAAC,EAAE,CAAA;IACZ,YAAY,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,MAAM,GAAG,SAAS,CAAA;IACrD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAA;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YAAY,CAAA;CACxD,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,IAAI,GAAG,UAAU,GAAG,UAAU,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;CAAE,2CA+FzG;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,EAChC,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,mBAAmB,CAAC,KAAK,EAAE,CAAC,CAAC,EACtC,IAAI,GAAG,WAAW,CACnB,2CAuCA;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,2CAE5F;AAED,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,2CAY5G"}