@dashnex/ui 0.5.2

package/dist/components/tailwind/badge.d.ts

@@ -0,0 +1,33 @@
+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'>): import("react/jsx-runtime").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 {};

package/dist/components/tailwind/badge.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as Headless from '@headlessui/react';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { TouchTarget } from './button.js';
+import { Link } from './link.js';
+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({ color = 'zinc', className, ...props }) {
+    return (_jsx("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({ color = 'zinc', className, children, ...props }, ref) {
+    const 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 ? (_jsx(Link, { ...props, className: classes, ref: ref, children: _jsx(TouchTarget, { children: _jsx(Badge, { color: color, children: children }) }) })) : (_jsx(Headless.Button, { ...props, className: classes, ref: ref, children: _jsx(TouchTarget, { children: _jsx(Badge, { color: color, children: children }) }) }));
+});

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

@@ -0,0 +1,58 @@
+import * as Headless from '@headlessui/react';
+import React from 'react';
+import { Link } from './link.js';
+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;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/tailwind/button.js

@@ -0,0 +1,169 @@
+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.js';
+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({ 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 'href' in props ? (_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] }));
+}

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

@@ -0,0 +1,36 @@
+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 {};

package/dist/components/tailwind/checkbox.js

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

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

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

package/dist/components/tailwind/combobox.js

@@ -0,0 +1,86 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Headless from '@headlessui/react';
+import clsx from 'clsx';
+import { useState } from 'react';
+export function Combobox({ options, displayValue, filter, anchor = 'bottom', className, placeholder, autoFocus, 'aria-label': ariaLabel, children, ...props }) {
+    const [query, setQuery] = useState('');
+    const filteredOptions = query === ''
+        ? options
+        : options.filter((option) => filter ? filter(option, query) : displayValue(option)?.toLowerCase().includes(query.toLowerCase()));
+    return (_jsxs(Headless.Combobox, { ...props, multiple: false, virtual: { options: filteredOptions }, onClose: () => setQuery(''), children: [_jsxs("span", { "data-slot": "control", className: clsx([
+                    className,
+                    // Basic layout
+                    'relative block w-full',
+                    // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
+                    'before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm',
+                    // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
+                    'dark:before:hidden',
+                    // Focus ring
+                    'after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500',
+                    // Disabled state
+                    'has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none',
+                    // Invalid state
+                    'has-data-invalid:before:shadow-red-500/10',
+                ]), children: [_jsx(Headless.ComboboxInput, { autoFocus: autoFocus, "data-slot": "control", "aria-label": ariaLabel, displayValue: (option) => displayValue(option) ?? '', onChange: (event) => setQuery(event.target.value), placeholder: placeholder, className: clsx([
+                            className,
+                            // 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
+                            'pr-[calc(--spacing(10)-1px)] pl-[calc(--spacing(3.5)-1px)] sm:pr-[calc(--spacing(9)-1px)] sm:pl-[calc(--spacing(3)-1px)]',
+                            // Typography
+                            'text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white',
+                            // Border
+                            'border border-zinc-950/10 data-hover:border-zinc-950/20 dark:border-white/10 dark:data-hover:border-white/20',
+                            // Background color
+                            'bg-transparent dark:bg-white/5',
+                            // Hide default focus styles
+                            'focus:outline-hidden',
+                            // Invalid state
+                            'data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:border-red-500 dark:data-invalid:data-hover:border-red-500',
+                            // Disabled state
+                            'data-disabled:border-zinc-950/20 dark:data-disabled:border-white/15 dark:data-disabled:bg-white/2.5 dark:data-hover:data-disabled:border-white/15',
+                            // System icons
+                            'dark:scheme-dark',
+                        ]) }), _jsx(Headless.ComboboxButton, { className: "group absolute inset-y-0 right-0 flex items-center px-2", children: _jsxs("svg", { className: "size-5 stroke-zinc-500 group-data-disabled:stroke-zinc-600 group-data-hover:stroke-zinc-700 sm:size-4 dark:stroke-zinc-400 dark:group-data-hover:stroke-zinc-300 forced-colors:stroke-[CanvasText]", viewBox: "0 0 16 16", "aria-hidden": "true", fill: "none", children: [_jsx("path", { d: "M5.75 10.75L8 13L10.25 10.75", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.25 5.25L8 3L5.75 5.25", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })] }) })] }), _jsx(Headless.ComboboxOptions, { transition: true, anchor: anchor, className: clsx(
+                // Anchor positioning
+                '[--anchor-gap:--spacing(2)] [--anchor-padding:--spacing(4)] sm:data-[anchor~=start]:[--anchor-offset:-4px]', 
+                // Base styles,
+                'isolate min-w-[calc(var(--input-width)+8px)] scroll-py-1 rounded-xl p-1 select-none empty:invisible', 
+                // Invisible border that is only visible in `forced-colors` mode for accessibility purposes
+                'outline outline-transparent focus:outline-hidden', 
+                // Handle scrolling when menu won't fit in viewport
+                'overflow-y-scroll overscroll-contain', 
+                // Popover background
+                'bg-white/75 backdrop-blur-xl dark:bg-zinc-800/75', 
+                // Shadows
+                'shadow-lg ring-1 ring-zinc-950/10 dark:ring-white/10 dark:ring-inset', 
+                // Transitions
+                'transition-opacity duration-100 ease-in data-closed:data-leave:opacity-0 data-transition:pointer-events-none'), children: ({ option }) => children(option) })] }));
+}
+export function ComboboxOption({ children, className, ...props }) {
+    const sharedClasses = clsx(
+    // Base
+    'flex min-w-0 items-center', 
+    // Icons
+    '*:data-[slot=icon]:size-5 *:data-[slot=icon]:shrink-0 sm:*:data-[slot=icon]:size-4', '*:data-[slot=icon]:text-zinc-500 group-data-focus/option:*:data-[slot=icon]:text-white dark:*:data-[slot=icon]:text-zinc-400', 'forced-colors:*:data-[slot=icon]:text-[CanvasText] forced-colors:group-data-focus/option:*:data-[slot=icon]:text-[Canvas]', 
+    // Avatars
+    '*:data-[slot=avatar]:-mx-0.5 *:data-[slot=avatar]:size-6 sm:*:data-[slot=avatar]:size-5');
+    return (_jsxs(Headless.ComboboxOption, { ...props, className: clsx(
+        // Basic layout
+        'group/option grid w-full cursor-default grid-cols-[1fr_--spacing(5)] items-baseline gap-x-2 rounded-lg py-2.5 pr-2 pl-3.5 sm:grid-cols-[1fr_--spacing(4)] sm:py-1.5 sm:pr-2 sm:pl-3', 
+        // Typography
+        'text-base/6 text-zinc-950 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]', 
+        // Focus
+        'outline-hidden data-focus:bg-blue-500 data-focus:text-white', 
+        // Forced colors mode
+        'forced-color-adjust-none forced-colors:data-focus:bg-[Highlight] forced-colors:data-focus:text-[HighlightText]', 
+        // Disabled
+        'data-disabled:opacity-50'), children: [_jsx("span", { className: clsx(className, sharedClasses), children: children }), _jsx("svg", { className: "relative col-start-2 hidden size-5 self-center stroke-current group-data-selected/option:inline sm:size-4", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 8.5l3 3L12 4", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) })] }));
+}
+export function ComboboxLabel({ className, ...props }) {
+    return _jsx("span", { ...props, className: clsx(className, 'ml-2.5 truncate first:ml-0 sm:ml-2 sm:first:ml-0') });
+}
+export function ComboboxDescription({ className, children, ...props }) {
+    return (_jsx("span", { ...props, className: clsx(className, 'flex flex-1 overflow-hidden text-zinc-500 group-data-focus/option:text-white before:w-2 before:min-w-0 before:shrink dark:text-zinc-400'), children: _jsx("span", { className: "flex-1 truncate", children: children }) }));
+}

package/dist/components/tailwind/description-list.d.ts

@@ -0,0 +1,3 @@
+export declare function DescriptionList({ className, ...props }: React.ComponentPropsWithoutRef<'dl'>): import("react/jsx-runtime").JSX.Element;
+export declare function DescriptionTerm({ className, ...props }: React.ComponentPropsWithoutRef<'dt'>): import("react/jsx-runtime").JSX.Element;
+export declare function DescriptionDetails({ className, ...props }: React.ComponentPropsWithoutRef<'dd'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/tailwind/description-list.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+export function DescriptionList({ className, ...props }) {
+    return (_jsx("dl", { ...props, className: clsx(className, 'grid grid-cols-1 text-base/6 sm:grid-cols-[min(50%,--spacing(80))_auto] sm:text-sm/6') }));
+}
+export function DescriptionTerm({ className, ...props }) {
+    return (_jsx("dt", { ...props, className: clsx(className, 'col-start-1 border-t border-zinc-950/5 pt-3 text-zinc-500 first:border-none sm:border-t sm:border-zinc-950/5 sm:py-3 dark:border-white/5 dark:text-zinc-400 sm:dark:border-white/5') }));
+}
+export function DescriptionDetails({ className, ...props }) {
+    return (_jsx("dd", { ...props, className: clsx(className, 'pt-1 pb-3 text-zinc-950 sm:border-t sm:border-zinc-950/5 sm:py-3 sm:nth-2:border-none dark:text-white dark:sm:border-white/5') }));
+}

package/dist/components/tailwind/dialog.d.ts

@@ -0,0 +1,28 @@
+import * as Headless from '@headlessui/react';
+import type React from 'react';
+import { Text } from './text.js';
+declare const sizes: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+};
+export declare function Dialog({ size, className, children, ...props }: {
+    size?: keyof typeof sizes;
+    className?: string;
+    children: React.ReactNode;
+} & Omit<Headless.DialogProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
+export declare function DialogTitle({ className, ...props }: {
+    className?: string;
+} & Omit<Headless.DialogTitleProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
+export declare function DialogDescription({ className, ...props }: {
+    className?: string;
+} & Omit<Headless.DescriptionProps<typeof Text>, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
+export declare function DialogBody({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function DialogActions({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/tailwind/dialog.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Headless from '@headlessui/react';
+import clsx from 'clsx';
+import { Text } from './text.js';
+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 Dialog({ size = 'lg', className, children, ...props }) {
+    return (_jsxs(Headless.Dialog, { ...props, children: [_jsx(Headless.DialogBackdrop, { transition: true, className: "fixed inset-0 flex w-screen justify-center overflow-y-auto bg-zinc-950/25 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" }), _jsx("div", { className: "fixed inset-0 w-screen overflow-y-auto pt-6 sm:pt-0", children: _jsx("div", { className: "grid min-h-full grid-rows-[1fr_auto] justify-items-center sm:grid-rows-[1fr_auto_3fr] sm:p-4", children: _jsx(Headless.DialogPanel, { transition: true, className: clsx(className, sizes[size], 'row-start-2 w-full min-w-0 rounded-t-3xl bg-white p-(--gutter) shadow-lg ring-1 ring-zinc-950/10 [--gutter:--spacing(8)] sm:mb-auto sm:rounded-2xl dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline', 'transition duration-100 will-change-transform data-closed:translate-y-12 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in sm:data-closed:translate-y-0 sm:data-closed:data-enter:scale-95'), children: children }) }) })] }));
+}
+export function DialogTitle({ className, ...props }) {
+    return (_jsx(Headless.DialogTitle, { ...props, className: clsx(className, 'text-lg/6 font-semibold text-balance text-zinc-950 sm:text-base/6 dark:text-white') }));
+}
+export function DialogDescription({ className, ...props }) {
+    return _jsx(Headless.Description, { as: Text, ...props, className: clsx(className, 'mt-2 text-pretty') });
+}
+export function DialogBody({ className, ...props }) {
+    return _jsx("div", { ...props, className: clsx(className, 'mt-6') });
+}
+export function DialogActions({ className, ...props }) {
+    return (_jsx("div", { ...props, className: clsx(className, 'mt-8 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:flex-row sm:*:w-auto') }));
+}

package/dist/components/tailwind/divider.d.ts

@@ -0,0 +1,3 @@
+export declare function Divider({ soft, className, ...props }: {
+    soft?: boolean;
+} & React.ComponentPropsWithoutRef<'hr'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/tailwind/divider.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+export function Divider({ soft = false, className, ...props }) {
+    return (_jsx("hr", { role: "presentation", ...props, className: clsx(className, 'w-full border-t', soft && 'border-zinc-950/5 dark:border-white/5', !soft && 'border-zinc-950/10 dark:border-white/10') }));
+}