@verbb/plugin-kit-react 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## 1.0.0
+
+- Initial public release.

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Verbb
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,31 @@
+# @verbb/plugin-kit-react
+
+React UI and form primitives for Craft CMS plugin development.
+
+## Install
+
+```bash
+npm install @verbb/plugin-kit-react @verbb/plugin-kit react react-dom
+```
+
+## Usage
+
+Import only from the published package entrypoints:
+
+```tsx
+import { useTranslation } from '@verbb/plugin-kit-react/hooks';
+import { Button } from '@verbb/plugin-kit-react/components';
+import { cn } from '@verbb/plugin-kit-react/utils';
+import '@verbb/plugin-kit-react/style.css';
+```
+
+## Public Surface
+
+- `@verbb/plugin-kit-react` (`useTranslation`)
+- `@verbb/plugin-kit-react/components`
+- `@verbb/plugin-kit-react/forms`
+- `@verbb/plugin-kit-react/hooks`
+- `@verbb/plugin-kit-react/utils`
+- `@verbb/plugin-kit-react/style.css`
+
+Avoid importing from internal source paths. Anything outside the exported subpaths is private and may change without notice.

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,34 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+export { __commonJSMin, __exportAll, __reExport, __toESM };

package/dist/components/Button.d.ts

@@ -0,0 +1,26 @@
+import { ButtonHTMLAttributes, ReactElement } from 'react';
+import { VariantProps } from 'class-variance-authority';
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "none" | "primary" | "secondary" | "dashed" | "outline" | "transparent" | "ghost" | null | undefined;
+    size?: "default" | "none" | "xxs" | "xs" | "sm" | "icon" | "lg" | "xl" | null | undefined;
+    loading?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type SpinnerVariant = 'default' | 'primary' | 'secondary' | 'dashed' | 'outline' | 'transparent';
+type SpinnerSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null;
+declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size"> & VariantProps<(props?: ({
+    variant?: "link" | "default" | "none" | "primary" | "secondary" | "dashed" | "outline" | "transparent" | "ghost" | null | undefined;
+    size?: "default" | "none" | "xxs" | "xs" | "sm" | "icon" | "lg" | "xl" | null | undefined;
+    loading?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
+    asChild?: boolean;
+    render?: ReactElement;
+    href?: string;
+    target?: string;
+    rel?: string;
+    download?: string | boolean;
+    spinnerSize?: SpinnerSize;
+    spinnerVariant?: SpinnerVariant;
+    spinnerClassName?: string;
+} & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { Button, buttonVariants };
+//# 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,EAGH,KAAK,oBAAoB,EAMzB,KAAK,YAAY,EACpB,MAAM,OAAO,CAAC;AACf,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAOlE,QAAA,MAAM,cAAc;;;;8EA6ElB,CAAC;AAEH,KAAK,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,aAAa,CAAC;AACjG,KAAK,WAAW,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAenE,QAAA,MAAM,MAAM;;;;;cAXM,OAAO;aACR,YAAY;WACd,MAAM;aACJ,MAAM;UACT,MAAM;eACD,MAAM,GAAG,OAAO;kBACb,WAAW;qBACR,cAAc;uBACZ,MAAM;yEAyH/B,CAAC;AAEH,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/Button.js

@@ -0,0 +1,148 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { Spinner } from "./Spinner.js";
+import "./index.js";
+import { Slot } from "./Slot.js";
+import { forwardRef } from "react";
+import { cva } from "class-variance-authority";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Button.tsx
+var buttonVariants = cva("", {
+	variants: {
+		variant: {
+			default: [
+				"bg-slate-250 text-gray-700",
+				"hover:not-disabled:bg-slate-300",
+				"active:not-disabled:bg-slate-400",
+				"focus-visible:shadow-[0_0_0_2px_var(--color-sky-600),0_0_5px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]",
+				"data-[popup-open]:bg-slate-300"
+			],
+			primary: [
+				"antialiased",
+				"bg-red-600 text-white border-primary-500",
+				"hover:not-disabled:bg-red-700",
+				"active:not-disabled:bg-red-800",
+				"focus-visible:shadow-[0_0_0_1px_#ffffff,0_0_0_3px_var(--color-sky-600),0_0_5px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]",
+				"data-[popup-open]:bg-red-700"
+			],
+			secondary: [
+				"antialiased",
+				"bg-gray-500 text-white",
+				"hover:not-disabled:bg-gray-550",
+				"active:not-disabled:bg-gray-600",
+				"focus-visible:shadow-[0_0_0_1px_#ffffff,0_0_0_3px_var(--color-sky-600),0_0_5px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]",
+				"data-[popup-open]:bg-gray-550"
+			],
+			dashed: [
+				"bg-transparent border-dashed border border-slate-500",
+				"hover:not-disabled:bg-slate-150",
+				"active:not-disabled:bg-slate-250",
+				"focus-visible:border-solid focus-visible:border-sky-600 focus-visible:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]",
+				"data-[popup-open]:bg-slate-250"
+			],
+			outline: [
+				"bg-transparent border border-slate-400",
+				"hover:not-disabled:bg-slate-150",
+				"active:not-disabled:bg-slate-250",
+				"focus-visible:border-solid focus-visible:border-sky-600 focus-visible:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]",
+				"data-[popup-open]:bg-slate-250"
+			],
+			transparent: [
+				"hover:not-disabled:bg-slate-150",
+				"active:not-disabled:bg-slate-250",
+				"focus-visible:shadow-[0_0_0_2px_var(--color-sky-600),0_0_5px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]",
+				"data-[popup-open]:bg-slate-250"
+			],
+			ghost: [
+				"hover:not-disabled:bg-slate-150",
+				"active:not-disabled:bg-slate-250",
+				"focus-visible:shadow-[0_0_0_2px_var(--color-sky-600),0_0_5px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]"
+			],
+			link: [
+				"rounded-none px-0 py-0 text-sky-700 underline-offset-2",
+				"hover:not-disabled:underline",
+				"focus-visible:shadow-none focus-visible:underline"
+			],
+			none: []
+		},
+		size: {
+			default: "px-[10px] py-[7px]",
+			none: "p-0",
+			xxs: "px-[5px] py-[1px] text-[11px] rounded-sm",
+			xs: "px-[8px] py-[3px] text-[12px] rounded-sm",
+			sm: "px-[9px] py-[5px] text-[13px] rounded-md",
+			icon: "size-8 p-0 justify-center",
+			lg: "px-[12px] py-[9px]",
+			xl: "px-[16px] py-[10px] text-base"
+		},
+		loading: { true: "cursor-default" }
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+		loading: false
+	}
+});
+var Button = forwardRef(({ className, variant, size, spinnerSize = null, spinnerVariant, spinnerClassName = "", loading = false, children, asChild = false, render, href, type, ...props }, ref) => {
+	if (spinnerSize === null) if (size === "xxs" || size === "xs") spinnerSize = "xxs";
+	else if (size === "lg" || size === "xl") spinnerSize = "sm";
+	else spinnerSize = "xs";
+	const resolvedVariant = variant === "ghost" ? "transparent" : variant;
+	const resolvedSpinnerVariant = spinnerVariant || (resolvedVariant === "primary" || resolvedVariant === "secondary" || resolvedVariant === "dashed" || resolvedVariant === "outline" || resolvedVariant === "transparent" ? resolvedVariant : "default");
+	const sharedProps = {
+		"data-slot": "button",
+		"data-size": size || "default",
+		className: cn("no-underline hover:no-underline", "inline-flex cursor-pointer outline-none gap-1 items-center justify-center whitespace-nowrap transition-colors", "rounded-lg", "disabled:opacity-50 disabled:cursor-[not-allowed]! disabled:select-none", loading && ["relative pointer-events-none text-transparent!", "select-none!"], "[&[data-size='xxs']_svg:not([class*='size-'])]:size-3", "[&[data-size='xs']_svg:not([class*='size-'])]:size-3.5", "[&[data-size='sm']_svg:not([class*='size-'])]:size-3.5", "[&:not([data-size='xxs']):not([data-size='xs']):not([data-size='sm'])_svg:not([class*='size-'])]:size-4", "[&_svg]:pointer-events-none [&_svg]:shrink-0", buttonVariants({
+			variant: resolvedVariant,
+			size,
+			loading,
+			className
+		}))
+	};
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [loading && /* @__PURE__ */ jsx(Spinner, {
+		variant: resolvedSpinnerVariant,
+		size: spinnerSize,
+		className: cn("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2", spinnerClassName)
+	}), children] });
+	if (render) return /* @__PURE__ */ jsx(Slot, {
+		...sharedProps,
+		children: render
+	});
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		...sharedProps,
+		children
+	});
+	if (href) {
+		const anchorProps = {
+			target: props.target,
+			rel: props.rel,
+			download: props.download,
+			onClick: props.onClick,
+			onFocus: props.onFocus,
+			onBlur: props.onBlur,
+			onMouseEnter: props.onMouseEnter,
+			onMouseLeave: props.onMouseLeave,
+			onKeyDown: props.onKeyDown,
+			onKeyUp: props.onKeyUp,
+			onCopy: props.onCopy
+		};
+		return /* @__PURE__ */ jsx("a", {
+			ref,
+			href,
+			...sharedProps,
+			...anchorProps,
+			children: content
+		});
+	}
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: type || "button",
+		...sharedProps,
+		...props,
+		children: content
+	});
+});
+//#endregion
+export { Button, buttonVariants };
+
+//# sourceMappingURL=Button.js.map

package/dist/components/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","names":[],"sources":["../../src/components/Button.tsx"],"sourcesContent":["import {\n    forwardRef,\n    type AnchorHTMLAttributes,\n    type ButtonHTMLAttributes,\n    type ClipboardEventHandler,\n    type FocusEventHandler,\n    type KeyboardEventHandler,\n    type MouseEventHandler,\n    type Ref,\n    type ReactElement,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nimport { Spinner } from '@verbb/plugin-kit-react/components';\nimport { Slot } from '@verbb/plugin-kit-react/components/Slot';\n\nconst buttonVariants = cva('', {\n    variants: {\n        variant: {\n            default: [\n                'bg-slate-250 text-gray-700',\n                'hover:not-disabled:bg-slate-300',\n                'active:not-disabled:bg-slate-400',\n                'focus-visible:shadow-[0_0_0_2px_var(--color-sky-600),0_0_5px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]',\n                'data-[popup-open]:bg-slate-300',\n            ],\n            primary: [\n                'antialiased',\n                'bg-red-600 text-white border-primary-500',\n                'hover:not-disabled:bg-red-700',\n                'active:not-disabled:bg-red-800',\n                'focus-visible:shadow-[0_0_0_1px_#ffffff,0_0_0_3px_var(--color-sky-600),0_0_5px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]',\n                'data-[popup-open]:bg-red-700',\n            ],\n            secondary: [\n                'antialiased',\n                'bg-gray-500 text-white',\n                'hover:not-disabled:bg-gray-550',\n                'active:not-disabled:bg-gray-600',\n                'focus-visible:shadow-[0_0_0_1px_#ffffff,0_0_0_3px_var(--color-sky-600),0_0_5px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]',\n                'data-[popup-open]:bg-gray-550',\n            ],\n            dashed: [\n                'bg-transparent border-dashed border border-slate-500',\n                'hover:not-disabled:bg-slate-150',\n                'active:not-disabled:bg-slate-250',\n                'focus-visible:border-solid focus-visible:border-sky-600 focus-visible:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]',\n                'data-[popup-open]:bg-slate-250',\n            ],\n            outline: [\n                'bg-transparent border border-slate-400',\n                'hover:not-disabled:bg-slate-150',\n                'active:not-disabled:bg-slate-250',\n                'focus-visible:border-solid focus-visible:border-sky-600 focus-visible:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]',\n                'data-[popup-open]:bg-slate-250',\n            ],\n            transparent: [\n                'hover:not-disabled:bg-slate-150',\n                'active:not-disabled:bg-slate-250',\n                'focus-visible:shadow-[0_0_0_2px_var(--color-sky-600),0_0_5px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]',\n                'data-[popup-open]:bg-slate-250',\n            ],\n            ghost: [\n                'hover:not-disabled:bg-slate-150',\n                'active:not-disabled:bg-slate-250',\n                'focus-visible:shadow-[0_0_0_2px_var(--color-sky-600),0_0_5px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]',\n            ],\n            link: [\n                'rounded-none px-0 py-0 text-sky-700 underline-offset-2',\n                'hover:not-disabled:underline',\n                'focus-visible:shadow-none focus-visible:underline',\n            ],\n            none: [],\n        },\n        size: {\n            default: 'px-[10px] py-[7px]',\n            none: 'p-0',\n            xxs: 'px-[5px] py-[1px] text-[11px] rounded-sm',\n            xs: 'px-[8px] py-[3px] text-[12px] rounded-sm',\n            sm: 'px-[9px] py-[5px] text-[13px] rounded-md',\n            icon: 'size-8 p-0 justify-center',\n            lg: 'px-[12px] py-[9px]',\n            xl: 'px-[16px] py-[10px] text-base',\n        },\n        loading: {\n            true: 'cursor-default',\n        },\n    },\n    defaultVariants: {\n        variant: 'default',\n        size: 'default',\n        loading: false,\n    },\n});\n\ntype SpinnerVariant = 'default' | 'primary' | 'secondary' | 'dashed' | 'outline' | 'transparent';\ntype SpinnerSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null;\n\ntype ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size'> &\n    VariantProps<typeof buttonVariants> & {\n        asChild?: boolean\n        render?: ReactElement\n        href?: string\n        target?: string\n        rel?: string\n        download?: string | boolean\n        spinnerSize?: SpinnerSize\n        spinnerVariant?: SpinnerVariant\n        spinnerClassName?: string\n    };\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(({\n    className,\n    variant,\n    size,\n    spinnerSize = null,\n    spinnerVariant,\n    spinnerClassName = '',\n    loading = false,\n    children,\n    asChild = false,\n    render,\n    href,\n    type,\n    ...props\n}, ref) => {\n    if (spinnerSize === null) {\n        if (size === 'xxs' || size === 'xs') {\n            spinnerSize = 'xxs';\n        } else if (size === 'lg' || size === 'xl') {\n            spinnerSize = 'sm';\n        } else {\n            spinnerSize = 'xs';\n        }\n    }\n\n    const resolvedVariant = variant === 'ghost' ? 'transparent' : variant;\n    const resolvedSpinnerVariant = spinnerVariant || (resolvedVariant === 'primary' || resolvedVariant === 'secondary' || resolvedVariant === 'dashed' || resolvedVariant === 'outline' || resolvedVariant === 'transparent'\n        ? resolvedVariant\n        : 'default');\n    const sharedProps = {\n        'data-slot': 'button',\n        'data-size': size || 'default',\n        className: cn(\n            'no-underline hover:no-underline',\n            'inline-flex cursor-pointer outline-none gap-1 items-center justify-center whitespace-nowrap transition-colors',\n            'rounded-lg',\n            'disabled:opacity-50 disabled:cursor-[not-allowed]! disabled:select-none',\n            loading && [\n                'relative pointer-events-none text-transparent!',\n                'select-none!',\n            ],\n            \"[&[data-size='xxs']_svg:not([class*='size-'])]:size-3\",\n            \"[&[data-size='xs']_svg:not([class*='size-'])]:size-3.5\",\n            \"[&[data-size='sm']_svg:not([class*='size-'])]:size-3.5\",\n            \"[&:not([data-size='xxs']):not([data-size='xs']):not([data-size='sm'])_svg:not([class*='size-'])]:size-4\",\n            '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n            buttonVariants({\n                variant: resolvedVariant,\n                size,\n                loading,\n                className,\n            }),\n        ),\n    } as const;\n\n    const content = (\n        <>\n            {loading && <Spinner variant={resolvedSpinnerVariant} size={spinnerSize} className={cn(\n                'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2',\n                spinnerClassName,\n            )} />}\n            {children}\n        </>\n    );\n\n    if (render) {\n        return (\n            <Slot {...sharedProps}>\n                {render}\n            </Slot>\n        );\n    }\n\n    if (asChild) {\n        return (\n            <Slot {...sharedProps}>\n                {children as ReactElement}\n            </Slot>\n        );\n    }\n\n    if (href) {\n        const anchorProps: AnchorHTMLAttributes<HTMLAnchorElement> = {\n            target: props.target,\n            rel: props.rel,\n            download: props.download,\n            onClick: props.onClick as MouseEventHandler<HTMLAnchorElement> | undefined,\n            onFocus: props.onFocus as FocusEventHandler<HTMLAnchorElement> | undefined,\n            onBlur: props.onBlur as FocusEventHandler<HTMLAnchorElement> | undefined,\n            onMouseEnter: props.onMouseEnter as MouseEventHandler<HTMLAnchorElement> | undefined,\n            onMouseLeave: props.onMouseLeave as MouseEventHandler<HTMLAnchorElement> | undefined,\n            onKeyDown: props.onKeyDown as KeyboardEventHandler<HTMLAnchorElement> | undefined,\n            onKeyUp: props.onKeyUp as KeyboardEventHandler<HTMLAnchorElement> | undefined,\n            onCopy: props.onCopy as ClipboardEventHandler<HTMLAnchorElement> | undefined,\n        };\n\n        return (\n            <a\n                ref={ref as Ref<HTMLAnchorElement>}\n                href={href}\n                {...sharedProps}\n                {...anchorProps}\n            >\n                {content}\n            </a>\n        );\n    }\n\n    return (\n        <button\n            ref={ref as Ref<HTMLButtonElement>}\n            type={type || 'button'}\n            {...sharedProps}\n            {...props}\n        >\n            {content}\n        </button>\n    );\n});\n\nexport { Button, buttonVariants };\n"],"mappings":";;;;;;;;;AAkBA,IAAM,iBAAiB,IAAI,IAAI;CAC3B,UAAU;EACN,SAAS;GACL,SAAS;IACL;IACA;IACA;IACA;IACA;IACH;GACD,SAAS;IACL;IACA;IACA;IACA;IACA;IACA;IACH;GACD,WAAW;IACP;IACA;IACA;IACA;IACA;IACA;IACH;GACD,QAAQ;IACJ;IACA;IACA;IACA;IACA;IACH;GACD,SAAS;IACL;IACA;IACA;IACA;IACA;IACH;GACD,aAAa;IACT;IACA;IACA;IACA;IACH;GACD,OAAO;IACH;IACA;IACA;IACH;GACD,MAAM;IACF;IACA;IACA;IACH;GACD,MAAM,EAAE;GACX;EACD,MAAM;GACF,SAAS;GACT,MAAM;GACN,KAAK;GACL,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,IAAI;GACJ,IAAI;GACP;EACD,SAAS,EACL,MAAM,kBACT;EACJ;CACD,iBAAiB;EACb,SAAS;EACT,MAAM;EACN,SAAS;EACZ;CACJ,CAAC;AAkBF,IAAM,SAAS,YAAgE,EAC3E,WACA,SACA,MACA,cAAc,MACd,gBACA,mBAAmB,IACnB,UAAU,OACV,UACA,UAAU,OACV,QACA,MACA,MACA,GAAG,SACJ,QAAQ;AACP,KAAI,gBAAgB,KAChB,KAAI,SAAS,SAAS,SAAS,KAC3B,eAAc;UACP,SAAS,QAAQ,SAAS,KACjC,eAAc;KAEd,eAAc;CAItB,MAAM,kBAAkB,YAAY,UAAU,gBAAgB;CAC9D,MAAM,yBAAyB,mBAAmB,oBAAoB,aAAa,oBAAoB,eAAe,oBAAoB,YAAY,oBAAoB,aAAa,oBAAoB,gBACrM,kBACA;CACN,MAAM,cAAc;EAChB,aAAa;EACb,aAAa,QAAQ;EACrB,WAAW,GACP,mCACA,iHACA,cACA,2EACA,WAAW,CACP,kDACA,eACH,EACD,yDACA,0DACA,0DACA,2GACA,gDACA,eAAe;GACX,SAAS;GACT;GACA;GACA;GACH,CAAC,CACL;EACJ;CAED,MAAM,UACF,qBAAA,YAAA,EAAA,UAAA,CACK,WAAW,oBAAC,SAAD;EAAS,SAAS;EAAwB,MAAM;EAAa,WAAW,GAChF,yEACA,iBACH;EAAI,CAAA,EACJ,SACF,EAAA,CAAA;AAGP,KAAI,OACA,QACI,oBAAC,MAAD;EAAM,GAAI;YACL;EACE,CAAA;AAIf,KAAI,QACA,QACI,oBAAC,MAAD;EAAM,GAAI;EACL;EACE,CAAA;AAIf,KAAI,MAAM;EACN,MAAM,cAAuD;GACzD,QAAQ,MAAM;GACd,KAAK,MAAM;GACX,UAAU,MAAM;GAChB,SAAS,MAAM;GACf,SAAS,MAAM;GACf,QAAQ,MAAM;GACd,cAAc,MAAM;GACpB,cAAc,MAAM;GACpB,WAAW,MAAM;GACjB,SAAS,MAAM;GACf,QAAQ,MAAM;GACjB;AAED,SACI,oBAAC,KAAD;GACS;GACC;GACN,GAAI;GACJ,GAAI;aAEH;GACD,CAAA;;AAIZ,QACI,oBAAC,UAAD;EACS;EACL,MAAM,QAAQ;EACd,GAAI;EACJ,GAAI;YAEH;EACI,CAAA;EAEf"}

package/dist/components/ButtonGroup.d.ts

@@ -0,0 +1,11 @@
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
+import { Separator } from './Separator';
+declare const buttonGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>): import("react/jsx-runtime").JSX.Element;
+declare function ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<'div'>): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, };
+//# sourceMappingURL=ButtonGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/components/ButtonGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,SAAS,EAAE,MAAM,8CAA8C,CAAC;AAEzE,QAAA,MAAM,mBAAmB;;8EA+CnB,CAAC;AAEP,iBAAS,WAAW,CAAC,EACjB,SAAS,EACT,WAAW,EACX,GAAG,KAAK,EACX,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,2CAUxE;AAED,iBAAS,eAAe,CAAC,EACrB,SAAS,EACT,MAAM,EACN,GAAG,KAAK,EACX,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,8FA0BjC;AAED,iBAAS,oBAAoB,CAAC,EAC1B,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACX,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CAqBxC;AAED,OAAO,EACH,WAAW,EACX,oBAAoB,EACpB,eAAe,EACf,mBAAmB,GACtB,CAAC"}

package/dist/components/ButtonGroup.js

@@ -0,0 +1,59 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { Separator } from "./Separator.js";
+import { cva } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ButtonGroup.tsx
+var buttonGroupVariants = cva([
+	"flex w-fit items-stretch",
+	"[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+	"*:focus-visible:z-10 *:focus-visible:relative",
+	"has-[>[data-slot=button-group]]:gap-2",
+	"has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg"
+], {
+	variants: { orientation: {
+		horizontal: [
+			"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg!",
+			"[&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+			"*:data-slot:rounded-r-none"
+		],
+		vertical: [
+			"flex-col",
+			"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg!",
+			"[&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+			"*:data-slot:rounded-b-none"
+		]
+	} },
+	defaultVariants: { orientation: "horizontal" }
+});
+function ButtonGroup({ className, orientation, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "button-group",
+		"data-orientation": orientation,
+		className: cn(buttonGroupVariants({ orientation }), className),
+		...props
+	});
+}
+function ButtonGroupText({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("flex items-center gap-2 rounded-lg border px-2.5", "text-sm font-medium", "border-slate-300 bg-slate-200 text-gray-700", "[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none", className) }, props),
+		render,
+		state: { slot: "button-group-text" }
+	});
+}
+function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx(Separator, {
+		"data-slot": "button-group-separator",
+		orientation,
+		className: cn("relative self-stretch", "bg-white", "data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto", "data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto", className),
+		...props
+	});
+}
+//#endregion
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
+
+//# sourceMappingURL=ButtonGroup.js.map

package/dist/components/ButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.js","names":[],"sources":["../../src/components/ButtonGroup.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { Separator } from '@verbb/plugin-kit-react/components/Separator';\n\nconst buttonGroupVariants = cva([\n    // Layout\n    'flex w-fit items-stretch',\n\n    // Child sizing\n    \"[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n\n    // Focus layering\n    '*:focus-visible:z-10 *:focus-visible:relative',\n\n    // Nested group spacing\n    'has-[>[data-slot=button-group]]:gap-2',\n\n    // Select edge-case rounding\n    'has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg',\n],\n    {\n        variants: {\n            orientation: {\n                horizontal: [\n                    // Last item keeps the right edge radius\n                    '[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg!',\n\n                    // Remove interior seams\n                    '[&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0',\n\n                    // Ensure non-last items are flush on the right\n                    '*:data-slot:rounded-r-none',\n                ],\n                vertical: [\n                    // Stack children vertically\n                    'flex-col',\n\n                    // Last item keeps the bottom edge radius\n                    '[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg!',\n\n                    // Remove interior seams\n                    '[&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0',\n\n                    // Ensure non-last items are flush on the bottom\n                    '*:data-slot:rounded-b-none',\n                ],\n            },\n        },\n        defaultVariants: {\n            orientation: 'horizontal',\n        },\n    });\n\nfunction ButtonGroup({\n    className,\n    orientation,\n    ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {\n    return (\n        <div\n            role=\"group\"\n            data-slot=\"button-group\"\n            data-orientation={orientation}\n            className={cn(buttonGroupVariants({ orientation }), className)}\n            {...props}\n        />\n    );\n}\n\nfunction ButtonGroupText({\n    className,\n    render,\n    ...props\n}: useRender.ComponentProps<'div'>) {\n    return useRender({\n        defaultTagName: 'div',\n        props: mergeProps<'div'>({\n            className: cn(\n                // Layout\n                'flex items-center gap-2 rounded-lg border px-2.5',\n\n                // Typography\n                'text-sm font-medium',\n\n                // Theme\n                'border-slate-300 bg-slate-200 text-gray-700',\n\n                // Icons\n                \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none\",\n\n                className,\n            ),\n        },\n            props),\n        render,\n        state: {\n            slot: 'button-group-text',\n        },\n    });\n}\n\nfunction ButtonGroupSeparator({\n    className,\n    orientation = 'vertical',\n    ...props\n}: React.ComponentProps<typeof Separator>) {\n    return (\n        <Separator\n            data-slot=\"button-group-separator\"\n            orientation={orientation}\n            className={cn(\n                // Layout\n                'relative self-stretch',\n\n                // Theme\n                'bg-white',\n\n                // Orientation tweaks\n                'data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto',\n                'data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nexport {\n    ButtonGroup,\n    ButtonGroupSeparator,\n    ButtonGroupText,\n    buttonGroupVariants,\n};\n"],"mappings":";;;;;;;;AAOA,IAAM,sBAAsB,IAAI;CAE5B;CAGA;CAGA;CAGA;CAGA;CACH,EACG;CACI,UAAU,EACN,aAAa;EACT,YAAY;GAER;GAGA;GAGA;GACH;EACD,UAAU;GAEN;GAGA;GAGA;GAGA;GACH;EACJ,EACJ;CACD,iBAAiB,EACb,aAAa,cAChB;CACJ,CAAC;AAEN,SAAS,YAAY,EACjB,WACA,aACA,GAAG,SACoE;AACvE,QACI,oBAAC,OAAD;EACI,MAAK;EACL,aAAU;EACV,oBAAkB;EAClB,WAAW,GAAG,oBAAoB,EAAE,aAAa,CAAC,EAAE,UAAU;EAC9D,GAAI;EACN,CAAA;;AAIV,SAAS,gBAAgB,EACrB,WACA,QACA,GAAG,SAC6B;AAChC,QAAO,UAAU;EACb,gBAAgB;EAChB,OAAO,WAAkB,EACrB,WAAW,GAEP,oDAGA,uBAGA,+CAGA,oEAEA,UACH,EACJ,EACG,MAAM;EACV;EACA,OAAO,EACH,MAAM,qBACT;EACJ,CAAC;;AAGN,SAAS,qBAAqB,EAC1B,WACA,cAAc,YACd,GAAG,SACoC;AACvC,QACI,oBAAC,WAAD;EACI,aAAU;EACG;EACb,WAAW,GAEP,yBAGA,YAGA,4EACA,wEAEA,UACH;EACD,GAAI;EACN,CAAA"}

package/dist/components/Calendar.d.ts

@@ -0,0 +1,11 @@
+import { ComponentProps } from 'react';
+import { DayPicker, DayButton, Locale } from 'react-day-picker';
+import { Button } from '.';
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: ComponentProps<typeof DayPicker> & {
+    buttonVariant?: ComponentProps<typeof Button>['variant'];
+}): import("react/jsx-runtime").JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, locale, ...props }: ComponentProps<typeof DayButton> & {
+    locale?: Partial<Locale>;
+}): import("react/jsx-runtime").JSX.Element;
+export { Calendar, CalendarDayButton };
+//# sourceMappingURL=Calendar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/components/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,cAAc,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,EACH,SAAS,EAET,KAAK,SAAS,EACd,KAAK,MAAM,EACd,MAAM,kBAAkB,CAAC;AAM1B,OAAO,EAAE,MAAM,EAAkB,MAAM,oCAAoC,CAAC;AAE5E,iBAAS,QAAQ,CAAC,EACd,SAAS,EACT,UAAU,EACV,eAAsB,EACtB,aAAuB,EACvB,aAAsB,EACtB,MAAM,EACN,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAClC,aAAa,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAA;CAC3D,2CAoLA;AAED,iBAAS,iBAAiB,CAAC,EACvB,SAAS,EACT,GAAG,EACH,SAAS,EACT,MAAM,EACN,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAA;CAAE,2CA0DjE;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/Calendar.js

@@ -0,0 +1,133 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import "./index.js";
+import { Button, buttonVariants } from "./Button.js";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronDown, faChevronLeft, faChevronRight } from "@fortawesome/pro-solid-svg-icons";
+//#region src/components/Calendar.tsx
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "none", locale, formatters, components, ...props }) {
+	const defaultClassNames = getDefaultClassNames();
+	return /* @__PURE__ */ jsx(DayPicker, {
+		showOutsideDays,
+		className: cn("bg-background group/calendar", "p-2", "[--cell-radius:100%] [--cell-size:--spacing(7)]", "[[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
+		captionLayout,
+		locale,
+		formatters: {
+			formatMonthDropdown: (date) => {
+				return date.toLocaleString(locale?.code, { month: "short" });
+			},
+			...formatters
+		},
+		classNames: {
+			root: cn("w-fit", defaultClassNames.root),
+			months: cn("flex gap-4 flex-col md:flex-row relative", defaultClassNames.months),
+			month: cn("flex flex-col w-full gap-2", defaultClassNames.month),
+			nav: cn("flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between", defaultClassNames.nav),
+			"button_previous": cn(buttonVariants({
+				variant: buttonVariant,
+				size: "none"
+			}), "cursor-pointer rounded-sm", "p-2!", "[&>svg]:size-3", defaultClassNames.button_previous),
+			"button_next": cn(buttonVariants({
+				variant: buttonVariant,
+				size: "none"
+			}), "cursor-pointer rounded-sm", "p-2!", "[&>svg]:size-3", defaultClassNames.button_next),
+			"month_caption": cn("flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)", defaultClassNames.month_caption),
+			dropdowns: cn("w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5", defaultClassNames.dropdowns),
+			"dropdown_root": cn("relative cn-calendar-dropdown-root rounded-(--cell-radius)", defaultClassNames.dropdown_root),
+			dropdown: cn("absolute bg-white inset-0 opacity-0", defaultClassNames.dropdown),
+			"caption_label": cn("select-none font-medium", captionLayout === "label" ? "text-[13px]" : [
+				"cn-calendar-caption-label",
+				"rounded-(--cell-radius)",
+				"flex items-center gap-1 text-[13px]",
+				"[&>svg]:text-slate-800",
+				"[&>svg]:size-2.5"
+			].join(" "), defaultClassNames.caption_label),
+			table: "w-full border-collapse",
+			weekdays: cn("flex", defaultClassNames.weekdays),
+			weekday: cn("text-gray-500 rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none", defaultClassNames.weekday),
+			week: cn("flex w-full mt-2", defaultClassNames.week),
+			"week_number_header": cn("select-none w-(--cell-size)", defaultClassNames.week_number_header),
+			"week_number": cn("text-[0.8rem]", "select-none", "text-gray-500", defaultClassNames.week_number),
+			day: cn("relative w-full h-full p-0 text-center group/day aspect-square select-none", defaultClassNames.day),
+			"range_start": cn(defaultClassNames.range_start),
+			"range_middle": cn(defaultClassNames.range_middle),
+			"range_end": cn(defaultClassNames.range_end),
+			today: cn(defaultClassNames.today),
+			outside: cn("opacity-60", defaultClassNames.outside),
+			disabled: cn("opacity-40", defaultClassNames.disabled),
+			hidden: cn("invisible", defaultClassNames.hidden),
+			...classNames
+		},
+		components: {
+			Root: ({ className, rootRef, ...props }) => {
+				return /* @__PURE__ */ jsx("div", {
+					"data-slot": "calendar",
+					ref: rootRef,
+					className: cn(className),
+					...props
+				});
+			},
+			Chevron: ({ className, orientation, ...props }) => {
+				if (orientation === "left") return /* @__PURE__ */ jsx(FontAwesomeIcon, {
+					icon: faChevronLeft,
+					className: cn("cn-rtl-flip size-4", className),
+					...props
+				});
+				if (orientation === "right") return /* @__PURE__ */ jsx(FontAwesomeIcon, {
+					icon: faChevronRight,
+					className: cn("cn-rtl-flip size-4", className),
+					...props
+				});
+				return /* @__PURE__ */ jsx(FontAwesomeIcon, {
+					icon: faChevronDown,
+					className: cn("size-4", className),
+					...props
+				});
+			},
+			DayButton: ({ ...props }) => {
+				return /* @__PURE__ */ jsx(CalendarDayButton, {
+					locale,
+					...props
+				});
+			},
+			WeekNumber: ({ children, ...props }) => {
+				return /* @__PURE__ */ jsx("td", {
+					...props,
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex size-(--cell-size) items-center justify-center text-center",
+						children
+					})
+				});
+			},
+			...components
+		},
+		...props
+	});
+}
+function CalendarDayButton({ className, day, modifiers, locale, ...props }) {
+	const defaultClassNames = getDefaultClassNames();
+	const ref = useRef(null);
+	useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		variant: "none",
+		size: "none",
+		"data-today": modifiers.today,
+		"data-day": day.date.toLocaleDateString(locale?.code),
+		"data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+		"data-range-start": modifiers.range_start,
+		"data-range-end": modifiers.range_end,
+		"data-range-middle": modifiers.range_middle,
+		className: cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal", "rounded-none transition-none", "data-[selected-single=true]:bg-gray-200", "data-[selected-single=true]:rounded-(--cell-radius)", "data-[range-middle=true]:bg-gray-200", "data-[range-start=true]:bg-gray-200", "data-[range-end=true]:bg-gray-200", "data-[today=true]:after:absolute", "data-[today=true]:after:w-full", "data-[today=true]:after:h-full", "data-[today=true]:after:m-2", "data-[today=true]:after:-z-0", "data-[today=true]:after:isolate", "data-[today=true]:after:border", "data-[today=true]:after:border-blue-500", "data-[today=true]:after:rounded-(--cell-radius)", "data-[range-start=true]:data-[range-end=true]:rounded-(--cell-radius)", "data-[range-start=true]:data-[range-end=false]:rounded-l-(--cell-radius)", "data-[range-middle=true]:rounded-none", "data-[range-start=false]:data-[range-end=true]:rounded-r-(--cell-radius)", "[&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
+		...props
+	});
+}
+//#endregion
+export { Calendar, CalendarDayButton };
+
+//# sourceMappingURL=Calendar.js.map

package/dist/components/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","names":[],"sources":["../../src/components/Calendar.tsx"],"sourcesContent":["import { useRef, useEffect, ComponentProps } from 'react';\n\nimport {\n    DayPicker,\n    getDefaultClassNames,\n    type DayButton,\n    type Locale,\n} from 'react-day-picker';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown, faChevronLeft, faChevronRight } from '@fortawesome/pro-solid-svg-icons';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { Button, buttonVariants } from '@verbb/plugin-kit-react/components';\n\nfunction Calendar({\n    className,\n    classNames,\n    showOutsideDays = true,\n    captionLayout = 'label',\n    buttonVariant = 'none',\n    locale,\n    formatters,\n    components,\n    ...props\n}: ComponentProps<typeof DayPicker> & {\n    buttonVariant?: ComponentProps<typeof Button>['variant']\n}) {\n    const defaultClassNames = getDefaultClassNames();\n    return (\n        <DayPicker\n            showOutsideDays={showOutsideDays}\n            className={cn(\n                'bg-background group/calendar',\n                'p-2',\n                '[--cell-radius:100%] [--cell-size:--spacing(7)]',\n                '[[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',\n\n                // RTL support styles\n                String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n                String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n\n                className,\n            )}\n            captionLayout={captionLayout}\n            locale={locale}\n            formatters={{\n                formatMonthDropdown: (date) => { return date.toLocaleString(locale?.code, { month: 'short' }); },\n                ...formatters,\n            }}\n            classNames={{\n                root: cn(\n                    'w-fit',\n                    defaultClassNames.root,\n                ),\n                months: cn(\n                    'flex gap-4 flex-col md:flex-row relative',\n                    defaultClassNames.months,\n                ),\n                month: cn(\n                    'flex flex-col w-full gap-2',\n                    defaultClassNames.month,\n                ),\n                nav: cn(\n                    'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',\n                    defaultClassNames.nav,\n                ),\n                'button_previous': cn(\n                    buttonVariants({ variant: buttonVariant, size: 'none' }),\n                    'cursor-pointer rounded-sm',\n                    'p-2!',\n                    '[&>svg]:size-3',\n                    defaultClassNames.button_previous,\n                ),\n                'button_next': cn(\n                    buttonVariants({ variant: buttonVariant, size: 'none' }),\n                    'cursor-pointer rounded-sm',\n                    'p-2!',\n                    '[&>svg]:size-3',\n                    defaultClassNames.button_next,\n                ),\n                'month_caption': cn(\n                    'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',\n                    defaultClassNames.month_caption,\n                ),\n                dropdowns: cn(\n                    'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',\n                    defaultClassNames.dropdowns,\n                ),\n                'dropdown_root': cn(\n                    'relative cn-calendar-dropdown-root rounded-(--cell-radius)',\n                    defaultClassNames.dropdown_root,\n                ),\n                dropdown: cn(\n                    'absolute bg-white inset-0 opacity-0',\n                    defaultClassNames.dropdown,\n                ),\n                'caption_label': cn(\n                    'select-none font-medium',\n                    captionLayout === 'label' ? 'text-[13px]' : [\n                        'cn-calendar-caption-label',\n                        'rounded-(--cell-radius)',\n                        'flex items-center gap-1 text-[13px]',\n                        '[&>svg]:text-slate-800',\n                        '[&>svg]:size-2.5',\n                    ].join(' '),\n                    defaultClassNames.caption_label,\n                ),\n                table: 'w-full border-collapse',\n                weekdays: cn(\n                    'flex',\n                    defaultClassNames.weekdays,\n                ),\n                weekday: cn(\n                    'text-gray-500 rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none',\n                    defaultClassNames.weekday,\n                ),\n                week: cn(\n                    'flex w-full mt-2',\n                    defaultClassNames.week,\n                ),\n                'week_number_header': cn(\n                    'select-none w-(--cell-size)',\n                    defaultClassNames.week_number_header,\n                ),\n                'week_number': cn(\n                    'text-[0.8rem]',\n                    'select-none',\n                    'text-gray-500',\n                    defaultClassNames.week_number,\n                ),\n                day: cn(\n                    'relative w-full h-full p-0 text-center group/day aspect-square select-none',\n                    defaultClassNames.day,\n                ),\n                'range_start': cn(\n                    defaultClassNames.range_start,\n                ),\n                'range_middle': cn(\n                    defaultClassNames.range_middle,\n                ),\n                'range_end': cn(\n                    defaultClassNames.range_end,\n                ),\n                today: cn(\n                    defaultClassNames.today,\n                ),\n                outside: cn(\n                    'opacity-60',\n                    defaultClassNames.outside,\n                ),\n                disabled: cn(\n                    'opacity-40',\n                    defaultClassNames.disabled,\n                ),\n                hidden: cn(\n                    'invisible',\n                    defaultClassNames.hidden,\n                ),\n                ...classNames,\n            }}\n            components={{\n                Root: ({ className, rootRef, ...props }) => {\n                    return (\n                        <div\n                            data-slot=\"calendar\"\n                            ref={rootRef}\n                            className={cn(className)}\n                            {...props}\n                        />\n                    );\n                },\n                Chevron: ({ className, orientation, ...props }) => {\n                    if (orientation === 'left') {\n                        return (\n                            <FontAwesomeIcon icon={faChevronLeft} className={cn('cn-rtl-flip size-4', className)} {...props} />\n                        );\n                    }\n                    if (orientation === 'right') {\n                        return (\n                            <FontAwesomeIcon icon={faChevronRight} className={cn('cn-rtl-flip size-4', className)} {...props} />\n                        );\n                    }\n                    return (\n                        <FontAwesomeIcon icon={faChevronDown} className={cn('size-4', className)} {...props} />\n                    );\n                },\n                DayButton: ({ ...props }) => {\n                    return (\n                        // eslint-disable-next-line no-use-before-define\n                        <CalendarDayButton locale={locale} {...props} />\n                    );\n                },\n                WeekNumber: ({ children, ...props }) => {\n                    return (\n                        <td {...props}>\n                            <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                                {children}\n                            </div>\n                        </td>\n                    );\n                },\n                ...components,\n            }}\n            {...props}\n        />\n    );\n}\n\nfunction CalendarDayButton({\n    className,\n    day,\n    modifiers,\n    locale,\n    ...props\n}: ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n    const defaultClassNames = getDefaultClassNames();\n    const ref = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n        if (modifiers.focused) { ref.current?.focus(); }\n    }, [modifiers.focused]);\n\n    return (\n        <Button\n            ref={ref}\n            variant=\"none\"\n            size=\"none\"\n            data-today={modifiers.today}\n            data-day={day.date.toLocaleDateString(locale?.code)}\n            data-selected-single={\n                modifiers.selected &&\n                !modifiers.range_start &&\n                !modifiers.range_end &&\n                !modifiers.range_middle\n            }\n            data-range-start={modifiers.range_start}\n            data-range-end={modifiers.range_end}\n            data-range-middle={modifiers.range_middle}\n            className={cn(\n                'relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal',\n                'rounded-none transition-none',\n\n                'data-[selected-single=true]:bg-gray-200',\n                'data-[selected-single=true]:rounded-(--cell-radius)',\n                'data-[range-middle=true]:bg-gray-200',\n                'data-[range-start=true]:bg-gray-200',\n                'data-[range-end=true]:bg-gray-200',\n\n                'data-[today=true]:after:absolute',\n                'data-[today=true]:after:w-full',\n                'data-[today=true]:after:h-full',\n                'data-[today=true]:after:m-2',\n                'data-[today=true]:after:-z-0',\n                'data-[today=true]:after:isolate',\n                'data-[today=true]:after:border',\n                'data-[today=true]:after:border-blue-500',\n                'data-[today=true]:after:rounded-(--cell-radius)',\n\n                'data-[range-start=true]:data-[range-end=true]:rounded-(--cell-radius)',\n                'data-[range-start=true]:data-[range-end=false]:rounded-l-(--cell-radius)',\n                'data-[range-middle=true]:rounded-none',\n                'data-[range-start=false]:data-[range-end=true]:rounded-r-(--cell-radius)',\n\n                '[&>span]:text-xs [&>span]:opacity-70',\n\n                defaultClassNames.day,\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nexport { Calendar, CalendarDayButton };\n"],"mappings":";;;;;;;;;;AAeA,SAAS,SAAS,EACd,WACA,YACA,kBAAkB,MAClB,gBAAgB,SAChB,gBAAgB,QAChB,QACA,YACA,YACA,GAAG,SAGJ;CACC,MAAM,oBAAoB,sBAAsB;AAChD,QACI,oBAAC,WAAD;EACqB;EACjB,WAAW,GACP,gCACA,OACA,mDACA,8FAGA,OAAO,GAAG,6CACV,OAAO,GAAG,iDAEV,UACH;EACc;EACP;EACR,YAAY;GACR,sBAAsB,SAAS;AAAE,WAAO,KAAK,eAAe,QAAQ,MAAM,EAAE,OAAO,SAAS,CAAC;;GAC7F,GAAG;GACN;EACD,YAAY;GACR,MAAM,GACF,SACA,kBAAkB,KACrB;GACD,QAAQ,GACJ,4CACA,kBAAkB,OACrB;GACD,OAAO,GACH,8BACA,kBAAkB,MACrB;GACD,KAAK,GACD,2EACA,kBAAkB,IACrB;GACD,mBAAmB,GACf,eAAe;IAAE,SAAS;IAAe,MAAM;IAAQ,CAAC,EACxD,6BACA,QACA,kBACA,kBAAkB,gBACrB;GACD,eAAe,GACX,eAAe;IAAE,SAAS;IAAe,MAAM;IAAQ,CAAC,EACxD,6BACA,QACA,kBACA,kBAAkB,YACrB;GACD,iBAAiB,GACb,4EACA,kBAAkB,cACrB;GACD,WAAW,GACP,uFACA,kBAAkB,UACrB;GACD,iBAAiB,GACb,8DACA,kBAAkB,cACrB;GACD,UAAU,GACN,uCACA,kBAAkB,SACrB;GACD,iBAAiB,GACb,2BACA,kBAAkB,UAAU,gBAAgB;IACxC;IACA;IACA;IACA;IACA;IACH,CAAC,KAAK,IAAI,EACX,kBAAkB,cACrB;GACD,OAAO;GACP,UAAU,GACN,QACA,kBAAkB,SACrB;GACD,SAAS,GACL,sFACA,kBAAkB,QACrB;GACD,MAAM,GACF,oBACA,kBAAkB,KACrB;GACD,sBAAsB,GAClB,+BACA,kBAAkB,mBACrB;GACD,eAAe,GACX,iBACA,eACA,iBACA,kBAAkB,YACrB;GACD,KAAK,GACD,8EACA,kBAAkB,IACrB;GACD,eAAe,GACX,kBAAkB,YACrB;GACD,gBAAgB,GACZ,kBAAkB,aACrB;GACD,aAAa,GACT,kBAAkB,UACrB;GACD,OAAO,GACH,kBAAkB,MACrB;GACD,SAAS,GACL,cACA,kBAAkB,QACrB;GACD,UAAU,GACN,cACA,kBAAkB,SACrB;GACD,QAAQ,GACJ,aACA,kBAAkB,OACrB;GACD,GAAG;GACN;EACD,YAAY;GACR,OAAO,EAAE,WAAW,SAAS,GAAG,YAAY;AACxC,WACI,oBAAC,OAAD;KACI,aAAU;KACV,KAAK;KACL,WAAW,GAAG,UAAU;KACxB,GAAI;KACN,CAAA;;GAGV,UAAU,EAAE,WAAW,aAAa,GAAG,YAAY;AAC/C,QAAI,gBAAgB,OAChB,QACI,oBAAC,iBAAD;KAAiB,MAAM;KAAe,WAAW,GAAG,sBAAsB,UAAU;KAAE,GAAI;KAAS,CAAA;AAG3G,QAAI,gBAAgB,QAChB,QACI,oBAAC,iBAAD;KAAiB,MAAM;KAAgB,WAAW,GAAG,sBAAsB,UAAU;KAAE,GAAI;KAAS,CAAA;AAG5G,WACI,oBAAC,iBAAD;KAAiB,MAAM;KAAe,WAAW,GAAG,UAAU,UAAU;KAAE,GAAI;KAAS,CAAA;;GAG/F,YAAY,EAAE,GAAG,YAAY;AACzB,WAEI,oBAAC,mBAAD;KAA2B;KAAQ,GAAI;KAAS,CAAA;;GAGxD,aAAa,EAAE,UAAU,GAAG,YAAY;AACpC,WACI,oBAAC,MAAD;KAAI,GAAI;eACJ,oBAAC,OAAD;MAAK,WAAU;MACV;MACC,CAAA;KACL,CAAA;;GAGb,GAAG;GACN;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,kBAAkB,EACvB,WACA,KACA,WACA,QACA,GAAG,SAC6D;CAChE,MAAM,oBAAoB,sBAAsB;CAChD,MAAM,MAAM,OAA0B,KAAK;AAE3C,iBAAgB;AACZ,MAAI,UAAU,QAAW,KAAI,SAAS,OAAO;IAC9C,CAAC,UAAU,QAAQ,CAAC;AAEvB,QACI,oBAAC,QAAD;EACS;EACL,SAAQ;EACR,MAAK;EACL,cAAY,UAAU;EACtB,YAAU,IAAI,KAAK,mBAAmB,QAAQ,KAAK;EACnD,wBACI,UAAU,YACV,CAAC,UAAU,eACX,CAAC,UAAU,aACX,CAAC,UAAU;EAEf,oBAAkB,UAAU;EAC5B,kBAAgB,UAAU;EAC1B,qBAAmB,UAAU;EAC7B,WAAW,GACP,kIACA,gCAEA,2CACA,uDACA,wCACA,uCACA,qCAEA,oCACA,kCACA,kCACA,+BACA,gCACA,mCACA,kCACA,2CACA,mDAEA,yEACA,4EACA,yCACA,4EAEA,wCAEA,kBAAkB,KAElB,UACH;EACD,GAAI;EACN,CAAA"}

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps } from 'react';
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
+declare function Checkbox({ className, ...props }: ComponentProps<typeof CheckboxPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Checkbox };
+//# 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,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAIxE,iBAAS,QAAQ,CAAC,EACd,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,2CAqD/C;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Checkbox.js

@@ -0,0 +1,41 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+//#region src/components/Checkbox.tsx
+function Checkbox({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
+		"data-slot": "checkbox",
+		className: cn("peer group/checkbox flex items-center justify-center cursor-pointer shrink-0 rounded-sm outline-none border", "size-4 border-[#c0cbd9]", "focus-visible:border-sky-600 focus-visible:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_0_hsl(from_var(--color-sky-600)_h_s_l/0.7)]", "aria-invalid:border-rose-600 aria-invalid:focus-visible:!shadow-[0_0_0_1px_var(--color-rose-600),0_0_4px_0_hsl(from_var(--color-rose-600)_h_s_l/0.7)]", "disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+		...props,
+		children: /* @__PURE__ */ jsxs(Checkbox$1.Indicator, {
+			"data-slot": "checkbox-indicator",
+			className: cn("flex items-center justify-center", "size-[14px] text-current"),
+			children: [/* @__PURE__ */ jsx("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				role: "img",
+				"aria-hidden": "true",
+				viewBox: "0 0 640 640",
+				className: "size-[14px] translate-y-[1px] scale-[1.2] group-data-[indeterminate]/checkbox:hidden",
+				children: /* @__PURE__ */ jsx("path", {
+					fill: "currentColor",
+					d: "M557.5 192L534.9 214.6L278.9 470.6C266.4 483.1 246.1 483.1 233.6 470.6L105.6 342.6L83 320L128.3 274.7C129.6 276 172.3 318.7 256.3 402.7L489.7 169.3L512.3 146.7L557.6 192z"
+				})
+			}), /* @__PURE__ */ jsx("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				role: "img",
+				"aria-hidden": "true",
+				viewBox: "0 0 640 640",
+				className: "hidden size-[12px] group-data-[indeterminate]/checkbox:block",
+				children: /* @__PURE__ */ jsx("path", {
+					fill: "currentColor",
+					d: "M96 352V288H544V352H96z"
+				})
+			})]
+		})
+	});
+}
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=Checkbox.js.map