@dashnex/ui 0.5.2

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

@@ -0,0 +1,32 @@
+import * as Headless from '@headlessui/react';
+import type React from 'react';
+import { Button } from './button.js';
+import { Link } from './link.js';
+export declare function Dropdown(props: Headless.MenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownButton<T extends React.ElementType = typeof Button>({ as, ...props }: {
+    className?: string;
+} & Omit<Headless.MenuButtonProps<T>, 'className'>): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenu({ anchor, className, ...props }: {
+    className?: string;
+} & Omit<Headless.MenuItemsProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownItem({ className, ...props }: {
+    className?: string;
+} & (Omit<Headless.MenuItemProps<'button'>, 'as' | 'className'> | Omit<Headless.MenuItemProps<typeof Link>, 'as' | 'className'>)): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownHeader({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownSection({ className, ...props }: {
+    className?: string;
+} & Omit<Headless.MenuSectionProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownHeading({ className, ...props }: {
+    className?: string;
+} & Omit<Headless.MenuHeadingProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownDivider({ className, ...props }: {
+    className?: string;
+} & Omit<Headless.MenuSeparatorProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownLabel({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownDescription({ className, ...props }: {
+    className?: string;
+} & Omit<Headless.DescriptionProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownShortcut({ keys, className, ...props }: {
+    keys: string | string[];
+    className?: string;
+} & Omit<Headless.DescriptionProps<'kbd'>, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/tailwind/dropdown.js

@@ -0,0 +1,78 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as Headless from '@headlessui/react';
+import clsx from 'clsx';
+import { Button } from './button.js';
+import { Link } from './link.js';
+export function Dropdown(props) {
+    return _jsx(Headless.Menu, { ...props });
+}
+export function DropdownButton({ as = Button, ...props }) {
+    return _jsx(Headless.MenuButton, { as: as, ...props });
+}
+export function DropdownMenu({ anchor = 'bottom', className, ...props }) {
+    return (_jsx(Headless.MenuItems, { ...props, transition: true, anchor: anchor, className: clsx(className, 
+        // Anchor positioning
+        '[--anchor-gap:--spacing(2)] [--anchor-padding:--spacing(1)] data-[anchor~=end]:[--anchor-offset:6px] data-[anchor~=start]:[--anchor-offset:-6px] sm:data-[anchor~=end]:[--anchor-offset:4px] sm:data-[anchor~=start]:[--anchor-offset:-4px]', 
+        // Base styles
+        'isolate w-max rounded-xl p-1', 
+        // 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-auto', 
+        // 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', 
+        // Define grid at the menu level if subgrid is supported
+        'supports-[grid-template-columns:subgrid]:grid supports-[grid-template-columns:subgrid]:grid-cols-[auto_1fr_1.5rem_0.5rem_auto]', 
+        // Transitions
+        'transition data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0') }));
+}
+export function DropdownItem({ className, ...props }) {
+    const classes = clsx(className, 
+    // Base styles
+    'group cursor-default rounded-lg px-3.5 py-2.5 focus:outline-hidden sm:px-3 sm:py-1.5', 
+    // Text styles
+    'text-left text-base/6 text-zinc-950 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]', 
+    // Focus
+    'data-focus:bg-blue-500 data-focus:text-white', 
+    // Disabled state
+    'data-disabled:opacity-50', 
+    // Forced colors mode
+    'forced-color-adjust-none forced-colors:data-focus:bg-[Highlight] forced-colors:data-focus:text-[HighlightText] forced-colors:data-focus:*:data-[slot=icon]:text-[HighlightText]', 
+    // Use subgrid when available but fallback to an explicit grid layout if not
+    'col-span-full grid grid-cols-[auto_1fr_1.5rem_0.5rem_auto] items-center supports-[grid-template-columns:subgrid]:grid-cols-subgrid', 
+    // Icons
+    '*:data-[slot=icon]:col-start-1 *:data-[slot=icon]:row-start-1 *:data-[slot=icon]:mr-2.5 *:data-[slot=icon]:-ml-0.5 *:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:mr-2 sm:*:data-[slot=icon]:size-4', '*:data-[slot=icon]:text-zinc-500 data-focus:*:data-[slot=icon]:text-white dark:*:data-[slot=icon]:text-zinc-400 dark:data-focus:*:data-[slot=icon]:text-white', 
+    // Avatar
+    '*:data-[slot=avatar]:mr-2.5 *:data-[slot=avatar]:-ml-1 *:data-[slot=avatar]:size-6 sm:*:data-[slot=avatar]:mr-2 sm:*:data-[slot=avatar]:size-5');
+    return 'href' in props ? (_jsx(Headless.MenuItem, { as: Link, ...props, className: classes })) : (_jsx(Headless.MenuItem, { as: "button", type: "button", ...props, className: classes }));
+}
+export function DropdownHeader({ className, ...props }) {
+    return _jsx("div", { ...props, className: clsx(className, 'col-span-5 px-3.5 pt-2.5 pb-1 sm:px-3') });
+}
+export function DropdownSection({ className, ...props }) {
+    return (_jsx(Headless.MenuSection, { ...props, className: clsx(className, 
+        // Define grid at the section level instead of the item level if subgrid is supported
+        'col-span-full supports-[grid-template-columns:subgrid]:grid supports-[grid-template-columns:subgrid]:grid-cols-[auto_1fr_1.5rem_0.5rem_auto]') }));
+}
+export function DropdownHeading({ className, ...props }) {
+    return (_jsx(Headless.MenuHeading, { ...props, className: clsx(className, 'col-span-full grid grid-cols-[1fr_auto] gap-x-12 px-3.5 pt-2 pb-1 text-sm/5 font-medium text-zinc-500 sm:px-3 sm:text-xs/5 dark:text-zinc-400') }));
+}
+export function DropdownDivider({ className, ...props }) {
+    return (_jsx(Headless.MenuSeparator, { ...props, className: clsx(className, 'col-span-full mx-3.5 my-1 h-px border-0 bg-zinc-950/5 sm:mx-3 dark:bg-white/10 forced-colors:bg-[CanvasText]') }));
+}
+export function DropdownLabel({ className, ...props }) {
+    return _jsx("div", { ...props, "data-slot": "label", className: clsx(className, 'col-start-2 row-start-1'), ...props });
+}
+export function DropdownDescription({ className, ...props }) {
+    return (_jsx(Headless.Description, { "data-slot": "description", ...props, className: clsx(className, 'col-span-2 col-start-2 row-start-2 text-sm/5 text-zinc-500 group-data-focus:text-white sm:text-xs/5 dark:text-zinc-400 forced-colors:group-data-focus:text-[HighlightText]') }));
+}
+export function DropdownShortcut({ keys, className, ...props }) {
+    return (_jsx(Headless.Description, { as: "kbd", ...props, className: clsx(className, 'col-start-5 row-start-1 flex justify-self-end'), children: (Array.isArray(keys) ? keys : keys.split('')).map((char, index) => (_jsx("kbd", { className: clsx([
+                'min-w-[2ch] text-center font-sans text-zinc-400 capitalize group-data-focus:text-white forced-colors:group-data-focus:text-[HighlightText]',
+                // Make sure key names that are longer than one character (like "Tab") have extra space
+                index > 0 && char.length > 1 && 'pl-1',
+            ]), children: char }, index))) }));
+}

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

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

package/dist/components/tailwind/fieldset.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as Headless from '@headlessui/react';
+import clsx from 'clsx';
+export function Fieldset({ className, ...props }) {
+    return (_jsx(Headless.Fieldset, { ...props, className: clsx(className, '*:data-[slot=text]:mt-1 [&>*+[data-slot=control]]:mt-6') }));
+}
+export function Legend({ className, ...props }) {
+    return (_jsx(Headless.Legend, { "data-slot": "legend", ...props, className: clsx(className, 'text-base/6 font-semibold text-zinc-950 data-disabled:opacity-50 sm:text-sm/6 dark:text-white') }));
+}
+export function FieldGroup({ className, ...props }) {
+    return _jsx("div", { "data-slot": "control", ...props, className: clsx(className, 'space-y-8') });
+}
+export function Field({ className, ...props }) {
+    return (_jsx(Headless.Field, { ...props, className: clsx(className, '[&>[data-slot=label]+[data-slot=control]]:mt-3', '[&>[data-slot=label]+[data-slot=description]]:mt-1', '[&>[data-slot=description]+[data-slot=control]]:mt-3', '[&>[data-slot=control]+[data-slot=description]]:mt-3', '[&>[data-slot=control]+[data-slot=error]]:mt-3', '*:data-[slot=label]:font-medium') }));
+}
+export function Label({ className, ...props }) {
+    return (_jsx(Headless.Label, { "data-slot": "label", ...props, className: clsx(className, 'text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6 dark:text-white') }));
+}
+export function Description({ className, ...props }) {
+    return (_jsx(Headless.Description, { "data-slot": "description", ...props, className: clsx(className, 'text-base/6 text-zinc-500 data-disabled:opacity-50 sm:text-sm/6 dark:text-zinc-400') }));
+}
+export function ErrorMessage({ className, ...props }) {
+    return (_jsx(Headless.Description, { "data-slot": "error", ...props, className: clsx(className, 'text-base/6 text-red-600 data-disabled:opacity-50 sm:text-sm/6 dark:text-red-500') }));
+}

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

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

package/dist/components/tailwind/heading.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+export function Heading({ className, level = 1, ...props }) {
+    const Element = `h${level}`;
+    return (_jsx(Element, { ...props, className: clsx(className, 'text-2xl/8 font-semibold text-zinc-950 sm:text-xl/8 dark:text-white') }));
+}
+export function Subheading({ className, level = 2, ...props }) {
+    const Element = `h${level}`;
+    return (_jsx(Element, { ...props, className: clsx(className, 'text-base/7 font-semibold text-zinc-950 sm:text-sm/6 dark:text-white') }));
+}

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

@@ -0,0 +1,27 @@
+export * from './alert.js';
+export * from './auth-layout.js';
+export * from './avatar.js';
+export * from './badge.js';
+export * from './button.js';
+export * from './checkbox.js';
+export * from './combobox.js';
+export * from './description-list.js';
+export * from './dialog.js';
+export * from './divider.js';
+export * from './dropdown.js';
+export * from './fieldset.js';
+export * from './heading.js';
+export * from './input.js';
+export * from './link.js';
+export * from './listbox.js';
+export * from './navbar.js';
+export * from './pagination.js';
+export * from './radio.js';
+export * from './select.js';
+export * from './sidebar-layout.js';
+export * from './sidebar.js';
+export * from './stacked-layout.js';
+export * from './switch.js';
+export * from './table.js';
+export * from './text.js';
+export * from './textarea.js';

package/dist/components/tailwind/index.js

@@ -0,0 +1,28 @@
+// Export all Tailwind components
+export * from './alert.js';
+export * from './auth-layout.js';
+export * from './avatar.js';
+export * from './badge.js';
+export * from './button.js';
+export * from './checkbox.js';
+export * from './combobox.js';
+export * from './description-list.js';
+export * from './dialog.js';
+export * from './divider.js';
+export * from './dropdown.js';
+export * from './fieldset.js';
+export * from './heading.js';
+export * from './input.js';
+export * from './link.js';
+export * from './listbox.js';
+export * from './navbar.js';
+export * from './pagination.js';
+export * from './radio.js';
+export * from './select.js';
+export * from './sidebar-layout.js';
+export * from './sidebar.js';
+export * from './stacked-layout.js';
+export * from './switch.js';
+export * from './table.js';
+export * from './text.js';
+export * from './textarea.js';

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

@@ -0,0 +1,10 @@
+import * as Headless from '@headlessui/react';
+import React from 'react';
+export declare function InputGroup({ children }: React.ComponentPropsWithoutRef<'span'>): import("react/jsx-runtime").JSX.Element;
+declare const dateTypes: string[];
+type DateType = (typeof dateTypes)[number];
+export declare const Input: React.ForwardRefExoticComponent<{
+    className?: string;
+    type?: "email" | "number" | "password" | "search" | "tel" | "text" | "url" | DateType;
+} & Omit<Headless.InputProps<"input">, "className" | "as"> & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/tailwind/input.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as Headless from '@headlessui/react';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export function InputGroup({ children }) {
+    return (_jsx("span", { "data-slot": "control", className: clsx('relative isolate block', 'has-[[data-slot=icon]:first-child]:[&_input]:pl-10 has-[[data-slot=icon]:last-child]:[&_input]:pr-10 sm:has-[[data-slot=icon]:first-child]:[&_input]:pl-8 sm:has-[[data-slot=icon]:last-child]:[&_input]:pr-8', '*:data-[slot=icon]:pointer-events-none *:data-[slot=icon]:absolute *:data-[slot=icon]:top-3 *:data-[slot=icon]:z-10 *:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:top-2.5 sm:*:data-[slot=icon]:size-4', '[&>[data-slot=icon]:first-child]:left-3 sm:[&>[data-slot=icon]:first-child]:left-2.5 [&>[data-slot=icon]:last-child]:right-3 sm:[&>[data-slot=icon]:last-child]:right-2.5', '*:data-[slot=icon]:text-zinc-500 dark:*:data-[slot=icon]:text-zinc-400'), children: children }));
+}
+const dateTypes = ['date', 'datetime-local', 'month', 'time', 'week'];
+export const Input = forwardRef(function Input({ className, ...props }, ref) {
+    return (_jsx("span", { "data-slot": "control", className: clsx([
+            className,
+            // Basic layout
+            'relative block w-full',
+            // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
+            'before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm',
+            // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
+            'dark:before:hidden',
+            // Focus ring
+            'after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500',
+            // Disabled state
+            'has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none',
+            // Invalid state
+            'has-data-invalid:before:shadow-red-500/10',
+        ]), children: _jsx(Headless.Input, { ref: ref, ...props, className: clsx([
+                // Date classes
+                props.type &&
+                    dateTypes.includes(props.type) && [
+                    '[&::-webkit-datetime-edit-fields-wrapper]:p-0',
+                    '[&::-webkit-date-and-time-value]:min-h-[1.5em]',
+                    '[&::-webkit-datetime-edit]:inline-flex',
+                    '[&::-webkit-datetime-edit]:p-0',
+                    '[&::-webkit-datetime-edit-year-field]:p-0',
+                    '[&::-webkit-datetime-edit-month-field]:p-0',
+                    '[&::-webkit-datetime-edit-day-field]:p-0',
+                    '[&::-webkit-datetime-edit-hour-field]:p-0',
+                    '[&::-webkit-datetime-edit-minute-field]:p-0',
+                    '[&::-webkit-datetime-edit-second-field]:p-0',
+                    '[&::-webkit-datetime-edit-millisecond-field]:p-0',
+                    '[&::-webkit-datetime-edit-meridiem-field]:p-0',
+                ],
+                // Basic layout
+                'relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)]',
+                // Typography
+                'text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white',
+                // Border
+                'border border-zinc-950/10 data-hover:border-zinc-950/20 dark:border-white/10 dark:data-hover:border-white/20',
+                // Background color
+                'bg-transparent dark:bg-white/5',
+                // Hide default focus styles
+                'focus:outline-hidden',
+                // Invalid state
+                'data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:border-red-500 dark:data-invalid:data-hover:border-red-500',
+                // Disabled state
+                'data-disabled:border-zinc-950/20 dark:data-disabled:border-white/15 dark:data-disabled:bg-white/2.5 dark:data-hover:data-disabled:border-white/15',
+                // System icons
+                'dark:scheme-dark',
+            ]) }) }));
+});

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

@@ -0,0 +1,11 @@
+/**
+ * TODO: Update this component to use your client-side framework's link
+ * component. We've provided examples of how to do this for Next.js, Remix, and
+ * Inertia.js in the Catalyst documentation:
+ *
+ * https://catalyst.tailwindui.com/docs#client-side-router-integration
+ */
+import React from 'react';
+export declare const Link: React.ForwardRefExoticComponent<{
+    href: string;
+} & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;

package/dist/components/tailwind/link.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * TODO: Update this component to use your client-side framework's link
+ * component. We've provided examples of how to do this for Next.js, Remix, and
+ * Inertia.js in the Catalyst documentation:
+ *
+ * https://catalyst.tailwindui.com/docs#client-side-router-integration
+ */
+import * as Headless from '@headlessui/react';
+import { forwardRef } from 'react';
+export const Link = forwardRef(function Link(props, ref) {
+    return (_jsx(Headless.DataInteractive, { children: _jsx("a", { ...props, ref: ref }) }));
+});

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

@@ -0,0 +1,15 @@
+import * as Headless from '@headlessui/react';
+import { Fragment } from 'react';
+export declare function Listbox<T>({ className, placeholder, autoFocus, 'aria-label': ariaLabel, children: options, ...props }: {
+    className?: string;
+    placeholder?: React.ReactNode;
+    autoFocus?: boolean;
+    'aria-label'?: string;
+    children?: React.ReactNode;
+} & Omit<Headless.ListboxProps<typeof Fragment, T>, 'as' | 'multiple'>): import("react/jsx-runtime").JSX.Element;
+export declare function ListboxOption<T>({ children, className, ...props }: {
+    className?: string;
+    children?: React.ReactNode;
+} & Omit<Headless.ListboxOptionProps<'div', T>, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
+export declare function ListboxLabel({ className, ...props }: React.ComponentPropsWithoutRef<'span'>): import("react/jsx-runtime").JSX.Element;
+export declare function ListboxDescription({ className, children, ...props }: React.ComponentPropsWithoutRef<'span'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/tailwind/listbox.js

@@ -0,0 +1,84 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Headless from '@headlessui/react';
+import clsx from 'clsx';
+import { Fragment } from 'react';
+export function Listbox({ className, placeholder, autoFocus, 'aria-label': ariaLabel, children: options, ...props }) {
+    return (_jsxs(Headless.Listbox, { ...props, multiple: false, children: [_jsxs(Headless.ListboxButton, { autoFocus: autoFocus, "data-slot": "control", "aria-label": ariaLabel, className: clsx([
+                    className,
+                    // Basic layout
+                    'group relative block w-full',
+                    // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
+                    'before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm',
+                    // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
+                    'dark:before:hidden',
+                    // Hide default focus styles
+                    'focus:outline-hidden',
+                    // Focus ring
+                    'after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset data-focus:after:ring-2 data-focus:after:ring-blue-500',
+                    // Disabled state
+                    'data-disabled:opacity-50 data-disabled:before:bg-zinc-950/5 data-disabled:before:shadow-none',
+                ]), children: [_jsx(Headless.ListboxSelectedOption, { as: "span", options: options, placeholder: placeholder && _jsx("span", { className: "block truncate text-zinc-500", children: placeholder }), className: clsx([
+                            // Basic layout
+                            'relative block w-full appearance-none rounded-lg py-[calc(--spacing(2.5)-1px)] sm:py-[calc(--spacing(1.5)-1px)]',
+                            // Set minimum height for when no value is selected
+                            'min-h-11 sm:min-h-9',
+                            // Horizontal padding
+                            'pr-[calc(--spacing(7)-1px)] pl-[calc(--spacing(3.5)-1px)] sm:pl-[calc(--spacing(3)-1px)]',
+                            // Typography
+                            'text-left text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]',
+                            // Border
+                            'border border-zinc-950/10 group-data-active:border-zinc-950/20 group-data-hover:border-zinc-950/20 dark:border-white/10 dark:group-data-active:border-white/20 dark:group-data-hover:border-white/20',
+                            // Background color
+                            'bg-transparent dark:bg-white/5',
+                            // Invalid state
+                            'group-data-invalid:border-red-500 group-data-hover:group-data-invalid:border-red-500 dark:group-data-invalid:border-red-600 dark:data-hover:group-data-invalid:border-red-600',
+                            // Disabled state
+                            'group-data-disabled:border-zinc-950/20 group-data-disabled:opacity-100 dark:group-data-disabled:border-white/15 dark:group-data-disabled:bg-white/2.5 dark:group-data-disabled:data-hover:border-white/15',
+                        ]) }), _jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2", children: _jsxs("svg", { className: "size-5 stroke-zinc-500 group-data-disabled:stroke-zinc-600 sm:size-4 dark:stroke-zinc-400 forced-colors:stroke-[CanvasText]", viewBox: "0 0 16 16", "aria-hidden": "true", fill: "none", children: [_jsx("path", { d: "M5.75 10.75L8 13L10.25 10.75", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.25 5.25L8 3L5.75 5.25", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })] }) })] }), _jsx(Headless.ListboxOptions, { transition: true, anchor: "selection start", className: clsx(
+                // Anchor positioning
+                '[--anchor-offset:-1.625rem] [--anchor-padding:--spacing(4)] sm:[--anchor-offset:-1.375rem]', 
+                // Base styles
+                'isolate w-max min-w-[calc(var(--button-width)+1.75rem)] scroll-py-1 rounded-xl p-1 select-none', 
+                // Invisible border that is only visible in `forced-colors` mode for accessibility purposes
+                'outline outline-transparent focus:outline-hidden', 
+                // Handle scrolling when menu won't fit in viewport
+                'overflow-y-scroll overscroll-contain', 
+                // Popover background
+                'bg-white/75 backdrop-blur-xl dark:bg-zinc-800/75', 
+                // Shadows
+                'shadow-lg ring-1 ring-zinc-950/10 dark:ring-white/10 dark:ring-inset', 
+                // Transitions
+                'transition-opacity duration-100 ease-in data-closed:data-leave:opacity-0 data-transition:pointer-events-none'), children: options })] }));
+}
+export function ListboxOption({ 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 (_jsx(Headless.ListboxOption, { as: Fragment, ...props, children: ({ selectedOption }) => {
+            if (selectedOption) {
+                return _jsx("div", { className: clsx(className, sharedClasses), children: children });
+            }
+            return (_jsxs("div", { className: clsx(
+                // Basic layout
+                'group/option grid cursor-default grid-cols-[--spacing(5)_1fr] items-baseline gap-x-2 rounded-lg py-2.5 pr-3.5 pl-2 sm:grid-cols-[--spacing(4)_1fr] sm:py-1.5 sm:pr-3 sm:pl-1.5', 
+                // Typography
+                'text-base/6 text-zinc-950 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]', 
+                // Focus
+                'outline-hidden data-focus:bg-blue-500 data-focus:text-white', 
+                // Forced colors mode
+                'forced-color-adjust-none forced-colors:data-focus:bg-[Highlight] forced-colors:data-focus:text-[HighlightText]', 
+                // Disabled
+                'data-disabled:opacity-50'), children: [_jsx("svg", { className: "relative hidden size-5 self-center stroke-current group-data-selected/option:inline sm:size-4", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 8.5l3 3L12 4", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("span", { className: clsx(className, sharedClasses, 'col-start-2'), children: children })] }));
+        } }));
+}
+export function ListboxLabel({ 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 ListboxDescription({ 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/navbar.d.ts

@@ -0,0 +1,14 @@
+import * as Headless from '@headlessui/react';
+import React from 'react';
+export declare function Navbar({ className, ...props }: React.ComponentPropsWithoutRef<'nav'>): import("react/jsx-runtime").JSX.Element;
+export declare function NavbarDivider({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function NavbarSection({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function NavbarSpacer({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare const NavbarItem: React.ForwardRefExoticComponent<({
+    current?: boolean;
+    className?: string;
+    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<HTMLAnchorElement | HTMLButtonElement>>;
+export declare function NavbarLabel({ className, ...props }: React.ComponentPropsWithoutRef<'span'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/tailwind/navbar.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Headless from '@headlessui/react';
+import clsx from 'clsx';
+import { LayoutGroup, motion } from 'framer-motion';
+import { forwardRef, useId } from 'react';
+import { TouchTarget } from './button.js';
+import { Link } from './link.js';
+export function Navbar({ className, ...props }) {
+    return _jsx("nav", { ...props, className: clsx(className, 'flex flex-1 items-center gap-4 py-2.5') });
+}
+export function NavbarDivider({ className, ...props }) {
+    return _jsx("div", { "aria-hidden": "true", ...props, className: clsx(className, 'h-6 w-px bg-zinc-950/10 dark:bg-white/10') });
+}
+export function NavbarSection({ className, ...props }) {
+    const id = useId();
+    return (_jsx(LayoutGroup, { id: id, children: _jsx("div", { ...props, className: clsx(className, 'flex items-center gap-3') }) }));
+}
+export function NavbarSpacer({ className, ...props }) {
+    return _jsx("div", { "aria-hidden": "true", ...props, className: clsx(className, '-ml-4 flex-1') });
+}
+export const NavbarItem = forwardRef(function NavbarItem({ current, className, children, ...props }, ref) {
+    const classes = clsx(
+    // Base
+    'relative flex min-w-0 items-center gap-3 rounded-lg p-2 text-left text-base/6 font-medium text-zinc-950 sm:text-sm/5', 
+    // Leading icon/icon-only
+    '*:data-[slot=icon]:size-6 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:fill-zinc-500 sm:*:data-[slot=icon]:size-5', 
+    // Trailing icon (down chevron or similar)
+    '*:not-nth-2:last:data-[slot=icon]:ml-auto *:not-nth-2:last:data-[slot=icon]:size-5 sm:*:not-nth-2:last:data-[slot=icon]:size-4', 
+    // Avatar
+    '*:data-[slot=avatar]:-m-0.5 *:data-[slot=avatar]:size-7 *:data-[slot=avatar]:[--avatar-radius:var(--radius-md)] sm:*:data-[slot=avatar]:size-6', 
+    // Hover
+    'data-hover:bg-zinc-950/5 data-hover:*:data-[slot=icon]:fill-zinc-950', 
+    // Active
+    'data-active:bg-zinc-950/5 data-active:*:data-[slot=icon]:fill-zinc-950', 
+    // Dark mode
+    'dark:text-white dark:*:data-[slot=icon]:fill-zinc-400', 'dark:data-hover:bg-white/5 dark:data-hover:*:data-[slot=icon]:fill-white', 'dark:data-active:bg-white/5 dark:data-active:*:data-[slot=icon]:fill-white');
+    return (_jsxs("span", { className: clsx(className, 'relative'), children: [current && (_jsx(motion.span, { layoutId: "current-indicator", className: "absolute inset-x-2 -bottom-2.5 h-0.5 rounded-full bg-zinc-950 dark:bg-white" })), 'href' in props ? (_jsx(Link, { ...props, className: classes, "data-current": current ? 'true' : undefined, ref: ref, children: _jsx(TouchTarget, { children: children }) })) : (_jsx(Headless.Button, { ...props, className: clsx('cursor-default', classes), "data-current": current ? 'true' : undefined, ref: ref, children: _jsx(TouchTarget, { children: children }) }))] }));
+});
+export function NavbarLabel({ className, ...props }) {
+    return _jsx("span", { ...props, className: clsx(className, 'truncate') });
+}

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

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

package/dist/components/tailwind/pagination.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Button } from './button.js';
+export function Pagination({ 'aria-label': ariaLabel = 'Page navigation', className, ...props }) {
+    return _jsx("nav", { "aria-label": ariaLabel, ...props, className: clsx(className, 'flex gap-x-2') });
+}
+export function PaginationPrevious({ href = null, className, children = 'Previous', }) {
+    return (_jsx("span", { className: clsx(className, 'grow basis-0'), children: _jsxs(Button, { ...(href === null ? { disabled: true } : { href }), plain: true, "aria-label": "Previous page", children: [_jsx("svg", { className: "stroke-current", "data-slot": "icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M2.75 8H13.25M2.75 8L5.25 5.5M2.75 8L5.25 10.5", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) }), children] }) }));
+}
+export function PaginationNext({ href = null, className, children = 'Next', }) {
+    return (_jsx("span", { className: clsx(className, 'flex grow basis-0 justify-end'), children: _jsxs(Button, { ...(href === null ? { disabled: true } : { href }), plain: true, "aria-label": "Next page", children: [children, _jsx("svg", { className: "stroke-current", "data-slot": "icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M13.25 8L2.75 8M13.25 8L10.75 10.5M13.25 8L10.75 5.5", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) })] }) }));
+}
+export function PaginationList({ className, ...props }) {
+    return _jsx("span", { ...props, className: clsx(className, 'hidden items-baseline gap-x-2 sm:flex') });
+}
+export function PaginationPage({ href, className, current = false, children, }) {
+    return (_jsx(Button, { href: href, plain: true, "aria-label": `Page ${children}`, "aria-current": current ? 'page' : undefined, className: clsx(className, 'min-w-9 before:absolute before:-inset-px before:rounded-lg', current && 'before:bg-zinc-950/5 dark:before:bg-white/10'), children: _jsx("span", { className: "-mx-0.5", children: children }) }));
+}
+export function PaginationGap({ className, children = _jsx(_Fragment, { children: "\u2026" }), ...props }) {
+    return (_jsx("span", { "aria-hidden": "true", ...props, className: clsx(className, 'w-9 text-center text-sm/6 font-semibold text-zinc-950 select-none dark:text-white'), children: children }));
+}

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

@@ -0,0 +1,37 @@
+import * as Headless from '@headlessui/react';
+export declare function RadioGroup({ className, ...props }: {
+    className?: string;
+} & Omit<Headless.RadioGroupProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
+export declare function RadioField({ className, ...props }: {
+    className?: string;
+} & Omit<Headless.FieldProps, 'as' | 'className'>): import("react/jsx-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 Radio({ color, className, ...props }: {
+    color?: Color;
+    className?: string;
+} & Omit<Headless.RadioProps, 'as' | 'className' | 'children'>): import("react/jsx-runtime").JSX.Element;
+export {};