@verbb/plugin-kit-react 1.0.0

package/dist/components/SelectInput.js

@@ -0,0 +1,85 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "./Select.js";
+import { Status } from "./Status.js";
+import "./index.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/SelectInput.tsx
+var SelectInput = forwardRef(({ options, placeholder, size, onChange, value, triggerClassName, contentClassName, isInvalid, id, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...selectProps }, ref) => {
+	const handleValueChange = (nextValue) => {
+		if (onChange) onChange(nextValue);
+	};
+	const hasGroup = (option) => {
+		return typeof option === "object" && option !== null && "group" in option;
+	};
+	const groupedOptions = options.map((option, index) => {
+		if (hasGroup(option)) return option;
+		return {
+			group: null,
+			options: [option],
+			_key: `ungrouped-${index}`
+		};
+	});
+	const flatOptions = options.flatMap((option) => {
+		if (hasGroup(option)) return option.options;
+		return [option];
+	});
+	const selectedOption = flatOptions.find((option) => {
+		return option.value === value;
+	});
+	const resolvedPlaceholder = placeholder || "";
+	const resolvedIsInvalid = Boolean(isInvalid || ariaInvalid === true || ariaInvalid === "true");
+	return /* @__PURE__ */ jsxs(Select, {
+		value,
+		onValueChange: handleValueChange,
+		size,
+		items: flatOptions,
+		...selectProps,
+		children: [/* @__PURE__ */ jsxs(SelectTrigger, {
+			ref,
+			id,
+			"aria-invalid": resolvedIsInvalid,
+			"aria-describedby": ariaDescribedBy,
+			"aria-errormessage": ariaErrorMessage,
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			className: cn(selectedOption?.status && "relative [&_[data-slot=select-value]]:pl-5", "[&_[data-slot=select-value]]:overflow-hidden [&_[data-slot=select-value]>span]:block [&_[data-slot=select-value]>span]:min-w-0 [&_[data-slot=select-value]>span]:max-w-full [&_[data-slot=select-value]>span]:truncate", triggerClassName),
+			children: [selectedOption?.status && /* @__PURE__ */ jsx(Status, {
+				status: selectedOption.status,
+				className: "absolute left-2.5 top-1/2 -translate-y-1/2"
+			}), /* @__PURE__ */ jsx(SelectValue, {
+				placeholder,
+				children: selectedOption ? /* @__PURE__ */ jsx("span", {
+					className: "block min-w-0 max-w-full truncate",
+					title: selectedOption.label,
+					children: selectedOption.label
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "block min-w-0 max-w-full truncate text-slate-500",
+					title: resolvedPlaceholder,
+					children: resolvedPlaceholder
+				})
+			})]
+		}), options?.length > 0 && /* @__PURE__ */ jsx(SelectContent, {
+			className: contentClassName,
+			children: groupedOptions.map((group) => {
+				return /* @__PURE__ */ jsxs(SelectGroup, { children: [group.group && /* @__PURE__ */ jsx(SelectLabel, { children: group.group }), group.options?.map((option) => {
+					return /* @__PURE__ */ jsxs(SelectItem, {
+						value: option.value,
+						disabled: option.disabled,
+						children: [option.status && /* @__PURE__ */ jsx(Status, { status: option.status }), /* @__PURE__ */ jsx("span", {
+							className: "block min-w-0 flex-1 truncate",
+							title: option.label,
+							children: option.label
+						})]
+					}, String(option.value));
+				})] }, group.group ?? group._key);
+			})
+		})]
+	});
+});
+var SelectInput_default = Select;
+//#endregion
+export { SelectInput, SelectInput_default as default };
+
+//# sourceMappingURL=SelectInput.js.map

package/dist/components/SelectInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInput.js","names":[],"sources":["../../src/components/SelectInput.tsx"],"sourcesContent":["import {\n    Select,\n    SelectContent,\n    SelectGroup,\n    SelectItem,\n    SelectTrigger,\n    SelectValue,\n    SelectLabel,\n} from '@verbb/plugin-kit-react/components';\n\nimport type React from 'react';\nimport { ComponentProps, forwardRef } from 'react';\nimport { Status } from '@verbb/plugin-kit-react/components/Status';\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\n\nexport interface Option<T = unknown> {\n    value: T;\n    label: string;\n    disabled?: boolean;\n    status?: string;\n}\n\ntype OptionGroup<T = unknown> = {\n    group: string;\n    options: Option<T>[];\n};\n\n// const valueToString = (val: Option['value']) => {\n//     if (val === null) { return '__null__'; }\n//     if (val === undefined) {\n//         console.error('option value cannot be undefined');\n//         return '__undefined__';\n//     }\n//     if (val === Infinity) { return '__Infinity__'; }\n//     if (val === -Infinity) { return '__-Infinity__'; }\n//     if (Number.isNaN(val)) { return '__NaN__'; }\n//     if (typeof val === 'symbol') { return `__symbol__${val.description}`; }\n//     // console.log(JSON.stringify(val));\n//     return JSON.stringify(val);\n// };\n\n// const stringToValue = (str: string) => {\n//     switch (str) {\n//         case '__null__':\n//             return null;\n//         case '__undefined__':\n//             return undefined;\n//         case '__Infinity__':\n//             return Infinity;\n//         case '__-Infinity__':\n//             return -Infinity;\n//         case '__NaN__':\n//             return NaN;\n//         default:\n//             if (str.startsWith('__symbol__')) {\n//                 return Symbol(str.slice(10));\n//             }\n//             return JSON.parse(str);\n//     }\n// };\n\ntype SelectBaseProps = ComponentProps<typeof Select>;\n\ninterface SelectProps<T = unknown>\n    extends Omit<SelectBaseProps, 'children' | 'value' | 'defaultValue' | 'onValueChange'> {\n    options: Array<Option<T> | OptionGroup<T>>;\n    placeholder?: string;\n    onChange?: (value: T) => void;\n    value?: T;\n    isInvalid?: boolean;\n    onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n    triggerClassName?: string;\n    contentClassName?: string;\n    id?: string;\n    'aria-invalid'?: boolean | 'true' | 'false';\n    'aria-describedby'?: string;\n    'aria-errormessage'?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n}\n\nexport const SelectInput = forwardRef<HTMLButtonElement, SelectProps>(({\n    options,\n    placeholder,\n    size,\n    onChange,\n    value,\n    triggerClassName,\n    contentClassName,\n    isInvalid,\n    id,\n    'aria-invalid': ariaInvalid,\n    'aria-describedby': ariaDescribedBy,\n    'aria-errormessage': ariaErrorMessage,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    ...selectProps\n}, ref) => {\n    const handleValueChange = (nextValue: SelectProps['value']) => {\n        if (onChange) {\n            onChange(nextValue);\n        }\n    };\n\n    // const hasEmptyOption = options?.find((option) => { return option.value === ''; });\n\n    // let defaultValue = undefined;\n\n    // // Only show placeholder when value is initially undefined,\n    // // or when the value is an empty string and there's an empty option\n    // if (value === undefined || value === '') {\n    //     if (hasEmptyOption) {\n    //         defaultValue = valueToString('');\n    //     } else {\n    //         defaultValue = undefined;\n    //     }\n    // } else {\n    //     defaultValue = valueToString(value);\n    // }\n\n    const hasGroup = (option: Option<unknown> | OptionGroup<unknown>): option is OptionGroup<unknown> => {\n        return typeof option === 'object' && option !== null && 'group' in option;\n    };\n\n    const groupedOptions = options.map((option, index) => {\n        if (hasGroup(option)) {\n            return option;\n        }\n\n        return {\n            group: null,\n            options: [option],\n            _key: `ungrouped-${index}`,\n        };\n    });\n\n    const flatOptions = options.flatMap((option) => {\n        if (hasGroup(option)) {\n            return option.options;\n        }\n\n        return [option];\n    });\n\n    const selectedOption = flatOptions.find((option) => {\n        return option.value === value;\n    });\n    const resolvedPlaceholder = placeholder || '';\n    const resolvedIsInvalid = Boolean(isInvalid || ariaInvalid === true || ariaInvalid === 'true');\n\n    return (\n        <Select\n            value={value}\n            onValueChange={handleValueChange}\n            size={size}\n            items={flatOptions as ComponentProps<typeof Select>['items']}\n            {...selectProps}\n        >\n            <SelectTrigger\n                ref={ref}\n                id={id}\n                aria-invalid={resolvedIsInvalid}\n                aria-describedby={ariaDescribedBy}\n                aria-errormessage={ariaErrorMessage}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n                className={cn(\n                    selectedOption?.status && 'relative [&_[data-slot=select-value]]:pl-5',\n                    '[&_[data-slot=select-value]]:overflow-hidden [&_[data-slot=select-value]>span]:block [&_[data-slot=select-value]>span]:min-w-0 [&_[data-slot=select-value]>span]:max-w-full [&_[data-slot=select-value]>span]:truncate',\n                    triggerClassName,\n                )}\n            >\n                {selectedOption?.status && (\n                    <Status\n                        status={selectedOption.status}\n                        className=\"absolute left-2.5 top-1/2 -translate-y-1/2\"\n                    />\n                )}\n                <SelectValue placeholder={placeholder}>\n                    {selectedOption ? (\n                        <span className=\"block min-w-0 max-w-full truncate\" title={selectedOption.label}>\n                            {selectedOption.label}\n                        </span>\n                    ) : (\n                        <span className=\"block min-w-0 max-w-full truncate text-slate-500\" title={resolvedPlaceholder}>\n                            {resolvedPlaceholder}\n                        </span>\n                    )}\n                </SelectValue>\n            </SelectTrigger>\n\n            {options?.length > 0 && (\n                <SelectContent className={contentClassName}>\n                    {groupedOptions.map((group) => {\n                        return (\n                            <SelectGroup key={group.group ?? group._key}>\n                                {group.group && <SelectLabel>{group.group}</SelectLabel>}\n\n                                {group.options?.map((option) => {\n                                    return (\n                                        <SelectItem\n                                            key={String(option.value)}\n                                            value={option.value}\n                                            disabled={option.disabled}\n                                        >\n                                            {option.status && (\n                                                <Status status={option.status} />\n                                            )}\n                                            <span className=\"block min-w-0 flex-1 truncate\" title={option.label}>\n                                                {option.label}\n                                            </span>\n                                        </SelectItem>\n                                    );\n                                })}\n                            </SelectGroup>\n                        );\n                    })}\n                </SelectContent>\n            )}\n        </Select>\n    );\n});\n\nexport default Select;\nexport type { SelectProps };\n"],"mappings":";;;;;;;;AAkFA,IAAa,cAAc,YAA4C,EACnE,SACA,aACA,MACA,UACA,OACA,kBACA,kBACA,WACA,IACA,gBAAgB,aAChB,oBAAoB,iBACpB,qBAAqB,kBACrB,cAAc,WACd,mBAAmB,gBACnB,GAAG,eACJ,QAAQ;CACP,MAAM,qBAAqB,cAAoC;AAC3D,MAAI,SACA,UAAS,UAAU;;CAoB3B,MAAM,YAAY,WAAmF;AACjG,SAAO,OAAO,WAAW,YAAY,WAAW,QAAQ,WAAW;;CAGvE,MAAM,iBAAiB,QAAQ,KAAK,QAAQ,UAAU;AAClD,MAAI,SAAS,OAAO,CAChB,QAAO;AAGX,SAAO;GACH,OAAO;GACP,SAAS,CAAC,OAAO;GACjB,MAAM,aAAa;GACtB;GACH;CAEF,MAAM,cAAc,QAAQ,SAAS,WAAW;AAC5C,MAAI,SAAS,OAAO,CAChB,QAAO,OAAO;AAGlB,SAAO,CAAC,OAAO;GACjB;CAEF,MAAM,iBAAiB,YAAY,MAAM,WAAW;AAChD,SAAO,OAAO,UAAU;GAC1B;CACF,MAAM,sBAAsB,eAAe;CAC3C,MAAM,oBAAoB,QAAQ,aAAa,gBAAgB,QAAQ,gBAAgB,OAAO;AAE9F,QACI,qBAAC,QAAD;EACW;EACP,eAAe;EACT;EACN,OAAO;EACP,GAAI;YALR,CAOI,qBAAC,eAAD;GACS;GACD;GACJ,gBAAc;GACd,oBAAkB;GAClB,qBAAmB;GACnB,cAAY;GACZ,mBAAiB;GACjB,WAAW,GACP,gBAAgB,UAAU,8CAC1B,0NACA,iBACH;aAZL,CAcK,gBAAgB,UACb,oBAAC,QAAD;IACI,QAAQ,eAAe;IACvB,WAAU;IACZ,CAAA,EAEN,oBAAC,aAAD;IAA0B;cACrB,iBACG,oBAAC,QAAD;KAAM,WAAU;KAAoC,OAAO,eAAe;eACrE,eAAe;KACb,CAAA,GAEP,oBAAC,QAAD;KAAM,WAAU;KAAmD,OAAO;eACrE;KACE,CAAA;IAED,CAAA,CACF;MAEf,SAAS,SAAS,KACf,oBAAC,eAAD;GAAe,WAAW;aACrB,eAAe,KAAK,UAAU;AAC3B,WACI,qBAAC,aAAD,EAAA,UAAA,CACK,MAAM,SAAS,oBAAC,aAAD,EAAA,UAAc,MAAM,OAAoB,CAAA,EAEvD,MAAM,SAAS,KAAK,WAAW;AAC5B,YACI,qBAAC,YAAD;MAEI,OAAO,OAAO;MACd,UAAU,OAAO;gBAHrB,CAKK,OAAO,UACJ,oBAAC,QAAD,EAAQ,QAAQ,OAAO,QAAU,CAAA,EAErC,oBAAC,QAAD;OAAM,WAAU;OAAgC,OAAO,OAAO;iBACzD,OAAO;OACL,CAAA,CACE;QAVJ,OAAO,OAAO,MAAM,CAUhB;MAEnB,CACQ,EAAA,EAnBI,MAAM,SAAS,MAAM,KAmBzB;KAEpB;GACU,CAAA,CAEf;;EAEf;AAEF,IAAA,sBAAe"}

package/dist/components/Separator.d.ts

@@ -0,0 +1,4 @@
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
+declare function Separator({ className, orientation, ...props }: SeparatorPrimitive.Props): import("react/jsx-runtime").JSX.Element;
+export { Separator };
+//# sourceMappingURL=Separator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../src/components/Separator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAI3E,iBAAS,SAAS,CAAC,EACf,SAAS,EACT,WAA0B,EAC1B,GAAG,KAAK,EACX,EAAE,kBAAkB,CAAC,KAAK,2CAgB1B;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Separator.js

@@ -0,0 +1,17 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { Separator as Separator$1 } from "@base-ui/react/separator";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Separator.tsx
+function Separator({ className, orientation = "horizontal", ...props }) {
+	return /* @__PURE__ */ jsx(Separator$1, {
+		"data-slot": "separator",
+		orientation,
+		className: cn("shrink-0 bg-slate-200", "data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full", "data-[orientation=vertical]:w-px data-[orientation=vertical]:h-full", className),
+		...props
+	});
+}
+//#endregion
+export { Separator };
+
+//# sourceMappingURL=Separator.js.map

package/dist/components/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","names":[],"sources":["../../src/components/Separator.tsx"],"sourcesContent":["import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nfunction Separator({\n    className,\n    orientation = 'horizontal',\n    ...props\n}: SeparatorPrimitive.Props) {\n    return (\n        <SeparatorPrimitive\n            data-slot=\"separator\"\n            orientation={orientation}\n            className={cn(\n                'shrink-0 bg-slate-200',\n\n                'data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full',\n                'data-[orientation=vertical]:w-px data-[orientation=vertical]:h-full',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nexport { Separator };\n"],"mappings":";;;;;AAIA,SAAS,UAAU,EACf,WACA,cAAc,cACd,GAAG,SACsB;AACzB,QACI,oBAAC,aAAD;EACI,aAAU;EACG;EACb,WAAW,GACP,yBAEA,2EACA,uEAEA,UACH;EACD,GAAI;EACN,CAAA"}

package/dist/components/SlideUp.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps, ReactNode } from 'react';
+import { motion, Easing } from 'framer-motion';
+export interface SlideUpProps extends Omit<ComponentProps<typeof motion.div>, 'children'> {
+    show?: boolean;
+    children?: ReactNode;
+    className?: string;
+    duration?: number;
+    delay?: number;
+    ease?: Easing;
+}
+export declare const SlideUp: ({ show, children, className, duration, delay, ease, ...props }: SlideUpProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SlideUp.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SlideUp.d.ts","sourceRoot":"","sources":["../../src/components/SlideUp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,MAAM,EAAmB,MAAM,EAAE,MAAM,eAAe,CAAC;AAGhE,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC;IACrF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,OAAO,GAAI,gEAQrB,YAAY,4CAiCd,CAAC"}

package/dist/components/SlideUp.js

@@ -0,0 +1,36 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { jsx } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "framer-motion";
+//#region src/components/SlideUp.tsx
+var SlideUp = ({ show = true, children, className, duration = .2, delay = 0, ease = "easeInOut", ...props }) => {
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		initial: false,
+		children: show && /* @__PURE__ */ jsx(motion.div, {
+			initial: {
+				height: 0,
+				opacity: 0
+			},
+			animate: {
+				height: "auto",
+				opacity: 1
+			},
+			exit: {
+				height: 0,
+				opacity: 0
+			},
+			transition: {
+				duration,
+				delay,
+				ease
+			},
+			className: cn("overflow-hidden", className),
+			...props,
+			children
+		})
+	});
+};
+//#endregion
+export { SlideUp };
+
+//# sourceMappingURL=SlideUp.js.map

package/dist/components/SlideUp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideUp.js","names":[],"sources":["../../src/components/SlideUp.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport { motion, AnimatePresence, Easing } from 'framer-motion';\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nexport interface SlideUpProps extends Omit<ComponentProps<typeof motion.div>, 'children'> {\n    show?: boolean;\n    children?: ReactNode;\n    className?: string;\n    duration?: number;\n    delay?: number;\n    ease?: Easing;\n}\n\nexport const SlideUp = ({\n    show = true,\n    children,\n    className,\n    duration = 0.2,\n    delay = 0,\n    ease = 'easeInOut',\n    ...props\n}: SlideUpProps) => {\n    return (\n        <AnimatePresence initial={false}>\n            {show && (\n                <motion.div\n                    initial={{\n                        height: 0,\n                        opacity: 0,\n                    }}\n                    animate={{\n                        height: 'auto',\n                        opacity: 1,\n                    }}\n                    exit={{\n                        height: 0,\n                        opacity: 0,\n                    }}\n                    transition={{\n                        duration,\n                        delay,\n                        ease,\n                    }}\n                    className={cn(\n                        'overflow-hidden',\n                        className,\n                    )}\n                    {...props}\n                >\n                    {children}\n                </motion.div>\n            )}\n        </AnimatePresence>\n    );\n};\n"],"mappings":";;;;;AAaA,IAAa,WAAW,EACpB,OAAO,MACP,UACA,WACA,WAAW,IACX,QAAQ,GACR,OAAO,aACP,GAAG,YACa;AAChB,QACI,oBAAC,iBAAD;EAAiB,SAAS;YACrB,QACG,oBAAC,OAAO,KAAR;GACI,SAAS;IACL,QAAQ;IACR,SAAS;IACZ;GACD,SAAS;IACL,QAAQ;IACR,SAAS;IACZ;GACD,MAAM;IACF,QAAQ;IACR,SAAS;IACZ;GACD,YAAY;IACR;IACA;IACA;IACH;GACD,WAAW,GACP,mBACA,UACH;GACD,GAAI;GAEH;GACQ,CAAA;EAEH,CAAA"}

package/dist/components/Slot.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from 'react';
+declare const Slot: import('react').ForwardRefExoticComponent<Omit<{
+    children?: ReactElement;
+} & Record<string, unknown>, "ref"> & import('react').RefAttributes<HTMLElement>>;
+export { Slot };
+//# sourceMappingURL=Slot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slot.d.ts","sourceRoot":"","sources":["../../src/components/Slot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIH,KAAK,YAAY,EACpB,MAAM,OAAO,CAAC;AA4Ef,QAAA,MAAM,IAAI;eAAwC,YAAY;iFAa7D,CAAC;AAIF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/Slot.js

@@ -0,0 +1,52 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { cloneElement, forwardRef, isValidElement } from "react";
+//#region src/components/Slot.tsx
+var mergeEventHandlers = (parentHandler, childHandler) => {
+	if (!parentHandler) return childHandler;
+	if (!childHandler) return parentHandler;
+	return ((...args) => {
+		childHandler(...args);
+		parentHandler(...args);
+	});
+};
+var mergeRefs = (...refs) => {
+	return (node) => {
+		refs.forEach((ref) => {
+			if (!ref) return;
+			if (typeof ref === "function") {
+				ref(node);
+				return;
+			}
+			if (typeof ref === "object" && "current" in ref) ref.current = node;
+		});
+	};
+};
+var mergeProps = (slotProps, childProps) => {
+	const mergedProps = {
+		...slotProps,
+		...childProps
+	};
+	mergedProps.className = cn(slotProps.className, childProps.className);
+	mergedProps.style = {
+		...slotProps.style,
+		...childProps.style
+	};
+	Object.keys(childProps).forEach((propName) => {
+		if (propName.startsWith("on") && typeof childProps[propName] === "function") mergedProps[propName] = mergeEventHandlers(slotProps[propName], childProps[propName]);
+	});
+	if (slotProps.ref || childProps.ref) mergedProps.ref = mergeRefs(slotProps.ref, childProps.ref);
+	return mergedProps;
+};
+var Slot = forwardRef(({ children, ...props }, ref) => {
+	if (!isValidElement(children)) return null;
+	return cloneElement(children, mergeProps({
+		...props,
+		ref
+	}, children.props));
+});
+Slot.displayName = "Slot";
+//#endregion
+export { Slot };
+
+//# sourceMappingURL=Slot.js.map

package/dist/components/Slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slot.js","names":[],"sources":["../../src/components/Slot.tsx"],"sourcesContent":["import {\n    cloneElement,\n    forwardRef,\n    isValidElement,\n    type ReactElement,\n} from 'react';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nconst mergeEventHandlers = <T extends (...args: unknown[]) => void>(\n    parentHandler?: T,\n    childHandler?: T,\n) => {\n    if (!parentHandler) {\n        return childHandler;\n    }\n\n    if (!childHandler) {\n        return parentHandler;\n    }\n\n    return ((...args: Parameters<T>) => {\n        childHandler(...args);\n        parentHandler(...args);\n    }) as T;\n};\n\nconst mergeRefs = (...refs: Array<unknown>) => {\n    return (node: HTMLElement | null) => {\n        refs.forEach((ref) => {\n            if (!ref) {\n                return;\n            }\n\n            if (typeof ref === 'function') {\n                ref(node);\n                return;\n            }\n\n            if (typeof ref === 'object' && 'current' in ref) {\n                (ref as { current?: HTMLElement | null }).current = node;\n            }\n        });\n    };\n};\n\nconst mergeProps = (\n    slotProps: Record<string, unknown>,\n    childProps: Record<string, unknown>,\n) => {\n    const mergedProps: Record<string, unknown> = {\n        ...slotProps,\n        ...childProps,\n    };\n\n    mergedProps.className = cn(\n        slotProps.className as string | undefined,\n        childProps.className as string | undefined,\n    );\n\n    mergedProps.style = {\n        ...(slotProps.style as Record<string, unknown> | undefined),\n        ...(childProps.style as Record<string, unknown> | undefined),\n    };\n\n    Object.keys(childProps).forEach((propName) => {\n        if (propName.startsWith('on') && typeof childProps[propName] === 'function') {\n            mergedProps[propName] = mergeEventHandlers(\n                slotProps[propName] as ((...args: unknown[]) => void) | undefined,\n                childProps[propName] as ((...args: unknown[]) => void) | undefined,\n            );\n        }\n    });\n\n    if (slotProps.ref || childProps.ref) {\n        mergedProps.ref = mergeRefs(slotProps.ref, childProps.ref);\n    }\n\n    return mergedProps;\n};\n\nconst Slot = forwardRef<HTMLElement, { children?: ReactElement } & Record<string, unknown>>(\n    ({ children, ...props }, ref) => {\n        if (!isValidElement(children)) {\n            return null;\n        }\n\n        const mergedProps = mergeProps(\n            { ...props, ref },\n            children.props as Record<string, unknown>,\n        );\n\n        return cloneElement(children, mergedProps);\n    },\n);\n\nSlot.displayName = 'Slot';\n\nexport { Slot };\n"],"mappings":";;;;AASA,IAAM,sBACF,eACA,iBACC;AACD,KAAI,CAAC,cACD,QAAO;AAGX,KAAI,CAAC,aACD,QAAO;AAGX,UAAS,GAAG,SAAwB;AAChC,eAAa,GAAG,KAAK;AACrB,gBAAc,GAAG,KAAK;;;AAI9B,IAAM,aAAa,GAAG,SAAyB;AAC3C,SAAQ,SAA6B;AACjC,OAAK,SAAS,QAAQ;AAClB,OAAI,CAAC,IACD;AAGJ,OAAI,OAAO,QAAQ,YAAY;AAC3B,QAAI,KAAK;AACT;;AAGJ,OAAI,OAAO,QAAQ,YAAY,aAAa,IACvC,KAAyC,UAAU;IAE1D;;;AAIV,IAAM,cACF,WACA,eACC;CACD,MAAM,cAAuC;EACzC,GAAG;EACH,GAAG;EACN;AAED,aAAY,YAAY,GACpB,UAAU,WACV,WAAW,UACd;AAED,aAAY,QAAQ;EAChB,GAAI,UAAU;EACd,GAAI,WAAW;EAClB;AAED,QAAO,KAAK,WAAW,CAAC,SAAS,aAAa;AAC1C,MAAI,SAAS,WAAW,KAAK,IAAI,OAAO,WAAW,cAAc,WAC7D,aAAY,YAAY,mBACpB,UAAU,WACV,WAAW,UACd;GAEP;AAEF,KAAI,UAAU,OAAO,WAAW,IAC5B,aAAY,MAAM,UAAU,UAAU,KAAK,WAAW,IAAI;AAG9D,QAAO;;AAGX,IAAM,OAAO,YACR,EAAE,UAAU,GAAG,SAAS,QAAQ;AAC7B,KAAI,CAAC,eAAe,SAAS,CACzB,QAAO;AAQX,QAAO,aAAa,UALA,WAChB;EAAE,GAAG;EAAO;EAAK,EACjB,SAAS,MAGiB,CAAY;EAEjD;AAED,KAAK,cAAc"}

package/dist/components/Spinner.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+import { ComponentProps } from 'react';
+declare const spinnerVariants: (props?: ({
+    variant?: "default" | "primary" | "secondary" | "dashed" | "outline" | "transparent" | null | undefined;
+    size?: "xxs" | "xs" | "sm" | "lg" | "xl" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Spinner({ className, variant, size, ...props }: ComponentProps<'div'> & VariantProps<typeof spinnerVariants>): import("react/jsx-runtime").JSX.Element;
+export { Spinner };
+//# sourceMappingURL=Spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/components/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,QAAA,MAAM,eAAe;;;8EAwCnB,CAAC;AAEH,iBAAS,OAAO,CAAC,EACb,SAAS,EACT,OAAO,EACP,IAAI,EACJ,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,2CAW9D;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/Spinner.js

@@ -0,0 +1,43 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Spinner.tsx
+var spinnerVariants = cva("", {
+	variants: {
+		variant: {
+			default: ["border-t-red-500 border-r-red-500"],
+			primary: ["border-t-white border-r-white"],
+			secondary: ["border-t-white border-r-white"],
+			dashed: ["border-t-gray-700 border-r-gray-700"],
+			outline: ["border-t-gray-700 border-r-gray-700"],
+			transparent: ["border-t-gray-700 border-r-gray-700"]
+		},
+		size: {
+			xxs: "size-3 border-1",
+			xs: "size-4 border-2",
+			sm: "size-6 border-2",
+			md: "size-8 border-2",
+			lg: "size-12 border-2",
+			xl: "size-16 border-2"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "sm"
+	}
+});
+function Spinner({ className, variant, size, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("mx-auto border-2 border-b-transparent border-l-transparent rounded-full animate-spin", spinnerVariants({
+			variant,
+			size,
+			className
+		})),
+		...props
+	});
+}
+//#endregion
+export { Spinner };
+
+//# sourceMappingURL=Spinner.js.map

package/dist/components/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","names":[],"sources":["../../src/components/Spinner.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nconst spinnerVariants = cva('', {\n    variants: {\n        variant: {\n            default: [\n                'border-t-red-500 border-r-red-500',\n            ],\n\n            primary: [\n                'border-t-white border-r-white',\n            ],\n\n            secondary: [\n                'border-t-white border-r-white',\n            ],\n\n            dashed: [\n                'border-t-gray-700 border-r-gray-700',\n            ],\n\n            outline: [\n                'border-t-gray-700 border-r-gray-700',\n            ],\n\n            transparent: [\n                'border-t-gray-700 border-r-gray-700',\n            ],\n        },\n        size: {\n            xxs: 'size-3 border-1',\n            xs: 'size-4 border-2',\n            sm: 'size-6 border-2',\n            md: 'size-8 border-2',\n            lg: 'size-12 border-2',\n            xl: 'size-16 border-2',\n        },\n    },\n    defaultVariants: {\n        variant: 'default',\n        size: 'sm',\n    },\n});\n\nfunction Spinner({\n    className,\n    variant,\n    size,\n    ...props\n}: ComponentProps<'div'> & VariantProps<typeof spinnerVariants>) {\n    return <div\n        className={cn(\n            'mx-auto border-2 border-b-transparent border-l-transparent rounded-full animate-spin',\n\n            spinnerVariants({\n                variant, size, className,\n            }),\n        )}\n        {...props}\n    />;\n};\n\nexport { Spinner };\n"],"mappings":";;;;;AAKA,IAAM,kBAAkB,IAAI,IAAI;CAC5B,UAAU;EACN,SAAS;GACL,SAAS,CACL,oCACH;GAED,SAAS,CACL,gCACH;GAED,WAAW,CACP,gCACH;GAED,QAAQ,CACJ,sCACH;GAED,SAAS,CACL,sCACH;GAED,aAAa,CACT,sCACH;GACJ;EACD,MAAM;GACF,KAAK;GACL,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACP;EACJ;CACD,iBAAiB;EACb,SAAS;EACT,MAAM;EACT;CACJ,CAAC;AAEF,SAAS,QAAQ,EACb,WACA,SACA,MACA,GAAG,SAC0D;AAC7D,QAAO,oBAAC,OAAD;EACH,WAAW,GACP,wFAEA,gBAAgB;GACZ;GAAS;GAAM;GAClB,CAAC,CACL;EACD,GAAI;EACN,CAAA"}

package/dist/components/Status.d.ts

@@ -0,0 +1,8 @@
+type StatusProps = {
+    status?: string;
+    label?: string;
+    className?: string;
+};
+declare const Status: ({ status, label, className }: StatusProps) => import("react/jsx-runtime").JSX.Element;
+export { Status };
+//# sourceMappingURL=Status.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../src/components/Status.tsx"],"names":[],"mappings":"AAEA,KAAK,WAAW,GAAG;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAwCF,QAAA,MAAM,MAAM,GAAI,8BAAqC,WAAW,4CAiB/D,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/Status.js

@@ -0,0 +1,55 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Status.tsx
+var STATUS_CLASSES = {
+	all: "bg-[linear-gradient(60deg,#184cef,#e5422b)]",
+	on: "bg-[var(--color-teal-550)]",
+	live: "bg-[var(--color-teal-550)]",
+	active: "bg-[var(--color-teal-550)]",
+	enabled: "bg-[var(--color-teal-550)]",
+	off: "bg-[var(--color-red-600)]",
+	suspended: "bg-[var(--color-red-600)]",
+	expired: "bg-[var(--color-red-600)]",
+	warning: "bg-[var(--color-amber-100)]",
+	pending: "bg-[var(--color-orange-400)]",
+	red: "bg-[var(--color-red-600)]",
+	orange: "bg-[var(--color-orange-400)]",
+	amber: "bg-[var(--color-amber-500)]",
+	yellow: "bg-[var(--color-yellow-500)]",
+	lime: "bg-[var(--color-lime-500)]",
+	green: "bg-[var(--color-green-600)]",
+	emerald: "bg-[var(--color-emerald-500)]",
+	teal: "bg-[var(--color-teal-550)]",
+	turquoise: "bg-[var(--color-teal-550)]",
+	cyan: "bg-[var(--color-cyan-500)]",
+	sky: "bg-[var(--color-sky-500)]",
+	blue: "bg-[var(--color-blue-600)]",
+	indigo: "bg-[var(--color-indigo-500)]",
+	violet: "bg-[var(--color-violet-500)]",
+	purple: "bg-[var(--color-purple-500)]",
+	fuchsia: "bg-[var(--color-fuchsia-500)]",
+	pink: "bg-[var(--color-pink-500)]",
+	rose: "bg-[var(--color-rose-500)]",
+	light: "bg-[var(--color-gray-100)]",
+	gray: "bg-[var(--color-gray-300)]",
+	grey: "bg-[var(--color-gray-300)]",
+	white: "bg-[var(--color-white)]",
+	black: "bg-[var(--color-gray-800)]",
+	disabled: "shadow-[inset_0_0_0_2px_var(--color-gray-500)]",
+	inactive: "shadow-[inset_0_0_0_2px_var(--color-gray-500)]"
+};
+var Status = ({ status = "on", label, className }) => {
+	const ariaLabel = label || status;
+	const statusClass = STATUS_CLASSES[status] || "bg-[var(--color-gray-300)]";
+	return /* @__PURE__ */ jsx("span", {
+		role: "status",
+		"aria-label": ariaLabel,
+		title: label || status,
+		className: cn("inline-block size-3 rounded-full", "shrink-0", statusClass, className)
+	});
+};
+//#endregion
+export { Status };
+
+//# sourceMappingURL=Status.js.map

package/dist/components/Status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Status.js","names":[],"sources":["../../src/components/Status.tsx"],"sourcesContent":["import { cn } from '@verbb/plugin-kit-react/utils';\n\ntype StatusProps = {\n    status?: string;\n    label?: string;\n    className?: string;\n};\n\nconst STATUS_CLASSES: Record<string, string> = {\n    all: 'bg-[linear-gradient(60deg,#184cef,#e5422b)]',\n    on: 'bg-[var(--color-teal-550)]',\n    live: 'bg-[var(--color-teal-550)]',\n    active: 'bg-[var(--color-teal-550)]',\n    enabled: 'bg-[var(--color-teal-550)]',\n    off: 'bg-[var(--color-red-600)]',\n    suspended: 'bg-[var(--color-red-600)]',\n    expired: 'bg-[var(--color-red-600)]',\n    warning: 'bg-[var(--color-amber-100)]',\n    pending: 'bg-[var(--color-orange-400)]',\n    red: 'bg-[var(--color-red-600)]',\n    orange: 'bg-[var(--color-orange-400)]',\n    amber: 'bg-[var(--color-amber-500)]',\n    yellow: 'bg-[var(--color-yellow-500)]',\n    lime: 'bg-[var(--color-lime-500)]',\n    green: 'bg-[var(--color-green-600)]',\n    emerald: 'bg-[var(--color-emerald-500)]',\n    teal: 'bg-[var(--color-teal-550)]',\n    turquoise: 'bg-[var(--color-teal-550)]',\n    cyan: 'bg-[var(--color-cyan-500)]',\n    sky: 'bg-[var(--color-sky-500)]',\n    blue: 'bg-[var(--color-blue-600)]',\n    indigo: 'bg-[var(--color-indigo-500)]',\n    violet: 'bg-[var(--color-violet-500)]',\n    purple: 'bg-[var(--color-purple-500)]',\n    fuchsia: 'bg-[var(--color-fuchsia-500)]',\n    pink: 'bg-[var(--color-pink-500)]',\n    rose: 'bg-[var(--color-rose-500)]',\n    light: 'bg-[var(--color-gray-100)]',\n    gray: 'bg-[var(--color-gray-300)]',\n    grey: 'bg-[var(--color-gray-300)]',\n    white: 'bg-[var(--color-white)]',\n    black: 'bg-[var(--color-gray-800)]',\n    disabled: 'shadow-[inset_0_0_0_2px_var(--color-gray-500)]',\n    inactive: 'shadow-[inset_0_0_0_2px_var(--color-gray-500)]',\n};\n\nconst Status = ({ status = 'on', label, className }: StatusProps) => {\n    const ariaLabel = label || status;\n    const statusClass = STATUS_CLASSES[status] || 'bg-[var(--color-gray-300)]';\n\n    return (\n        <span\n            role=\"status\"\n            aria-label={ariaLabel}\n            title={label || status}\n            className={cn(\n                'inline-block size-3 rounded-full',\n                'shrink-0',\n                statusClass,\n                className,\n            )}\n        />\n    );\n};\n\nexport { Status };\n"],"mappings":";;;;AAQA,IAAM,iBAAyC;CAC3C,KAAK;CACL,IAAI;CACJ,MAAM;CACN,QAAQ;CACR,SAAS;CACT,KAAK;CACL,WAAW;CACX,SAAS;CACT,SAAS;CACT,SAAS;CACT,KAAK;CACL,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,MAAM;CACN,OAAO;CACP,SAAS;CACT,MAAM;CACN,WAAW;CACX,MAAM;CACN,KAAK;CACL,MAAM;CACN,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,MAAM;CACN,MAAM;CACN,OAAO;CACP,MAAM;CACN,MAAM;CACN,OAAO;CACP,OAAO;CACP,UAAU;CACV,UAAU;CACb;AAED,IAAM,UAAU,EAAE,SAAS,MAAM,OAAO,gBAA6B;CACjE,MAAM,YAAY,SAAS;CAC3B,MAAM,cAAc,eAAe,WAAW;AAE9C,QACI,oBAAC,QAAD;EACI,MAAK;EACL,cAAY;EACZ,OAAO,SAAS;EAChB,WAAW,GACP,oCACA,YACA,aACA,UACH;EACH,CAAA"}

package/dist/components/Table.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps } from 'react';
+declare function Table({ className, ...props }: ComponentProps<'table'>): import("react/jsx-runtime").JSX.Element;
+declare function TableHeader({ className, ...props }: ComponentProps<'thead'>): import("react/jsx-runtime").JSX.Element;
+declare function TableBody({ className, ...props }: ComponentProps<'tbody'>): import("react/jsx-runtime").JSX.Element;
+declare function TableFooter({ className, ...props }: ComponentProps<'tfoot'>): import("react/jsx-runtime").JSX.Element;
+declare const TableRow: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & import('react').RefAttributes<HTMLTableRowElement>>;
+declare function TableHead({ className, ...props }: ComponentProps<'th'>): import("react/jsx-runtime").JSX.Element;
+declare function TableCell({ className, ...props }: ComponentProps<'td'>): import("react/jsx-runtime").JSX.Element;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, };
+//# sourceMappingURL=Table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAInD,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,OAAO,CAAC,2CAmB9D;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,OAAO,CAAC,2CAapE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,OAAO,CAAC,2CAelE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,OAAO,CAAC,2CAYpE;AAED,QAAA,MAAM,QAAQ,0NAYZ,CAAC;AAIH,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,2CAc/D;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,2CAe/D;AAED,OAAO,EACH,KAAK,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,GACZ,CAAC"}

package/dist/components/Table.js

@@ -0,0 +1,64 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Table.tsx
+function Table({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "table-container",
+		className: cn("border border-gray-200 rounded-md rounded-b-none overflow-x-auto"),
+		children: /* @__PURE__ */ jsx("table", {
+			"data-slot": "table",
+			className: cn("w-full", className),
+			...props
+		})
+	});
+}
+function TableHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("thead", {
+		"data-slot": "table-header",
+		className: cn("bg-gray-50", className),
+		...props
+	});
+}
+function TableBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tbody", {
+		"data-slot": "table-body",
+		className: cn("[&_tr:last-child]:border-0", "[&_tr]:bg-white", "relative", className),
+		...props
+	});
+}
+function TableFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tfoot", {
+		"data-slot": "table-footer",
+		className: cn(className),
+		...props
+	});
+}
+var TableRow = forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("tr", {
+		ref,
+		"data-slot": "table-row",
+		className: cn(className),
+		...props
+	});
+});
+TableRow.displayName = "TableRow";
+function TableHead({ className, ...props }) {
+	return /* @__PURE__ */ jsx("th", {
+		"data-slot": "table-head",
+		className: cn("whitespace-nowrap", "px-2 py-1.5! text-left text-xs font-medium text-gray-700", className),
+		...props
+	});
+}
+function TableCell({ className, ...props }) {
+	return /* @__PURE__ */ jsx("td", {
+		"data-slot": "table-cell",
+		className: cn("h-[34px]", "whitespace-nowrap", "p-0 border-t border-gray-100 border-l border-l-gray-100 first:border-l-0", className),
+		...props
+	});
+}
+//#endregion
+export { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+
+//# sourceMappingURL=Table.js.map

package/dist/components/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","names":[],"sources":["../../src/components/Table.tsx"],"sourcesContent":["import { ComponentProps, forwardRef } from 'react';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nfunction Table({ className, ...props }: ComponentProps<'table'>) {\n    return (\n        <div data-slot=\"table-container\" className={cn(\n            // 'relative w-full overflow-x-auto',\n\n            'border border-gray-200 rounded-md rounded-b-none overflow-x-auto',\n        )}>\n            <table\n                data-slot=\"table\"\n                className={cn(\n                    'w-full',\n                    // 'w-full caption-bottom text-sm',\n\n                    className,\n                )}\n                {...props}\n            />\n        </div>\n    );\n}\n\nfunction TableHeader({ className, ...props }: ComponentProps<'thead'>) {\n    return (\n        <thead\n            data-slot=\"table-header\"\n            className={cn(\n                // '[&_tr]:border-b',\n                'bg-gray-50',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction TableBody({ className, ...props }: ComponentProps<'tbody'>) {\n    return (\n        <tbody\n            data-slot=\"table-body\"\n            className={cn(\n                '[&_tr:last-child]:border-0',\n                '[&_tr]:bg-white',\n\n                'relative',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction TableFooter({ className, ...props }: ComponentProps<'tfoot'>) {\n    return (\n        <tfoot\n            data-slot=\"table-footer\"\n            className={cn(\n                // 'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nconst TableRow = forwardRef<HTMLTableRowElement, ComponentProps<'tr'>>(({ className, ...props }, ref) => {\n    return (\n        <tr\n            ref={ref}\n            data-slot=\"table-row\"\n            className={cn(\n                // 'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',\n                className,\n            )}\n            {...props}\n        />\n    );\n});\n\nTableRow.displayName = 'TableRow';\n\nfunction TableHead({ className, ...props }: ComponentProps<'th'>) {\n    return (\n        <th\n            data-slot=\"table-head\"\n            className={cn(\n                'whitespace-nowrap',\n                // 'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0',\n                'px-2 py-1.5! text-left text-xs font-medium text-gray-700',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction TableCell({ className, ...props }: ComponentProps<'td'>) {\n    return (\n        <td\n            data-slot=\"table-cell\"\n            className={cn(\n                'h-[34px]',\n                'whitespace-nowrap',\n                // 'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0',\n                'p-0 border-t border-gray-100 border-l border-l-gray-100 first:border-l-0',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nexport {\n    Table,\n    TableHeader,\n    TableBody,\n    TableFooter,\n    TableHead,\n    TableRow,\n    TableCell,\n};\n"],"mappings":";;;;;AAIA,SAAS,MAAM,EAAE,WAAW,GAAG,SAAkC;AAC7D,QACI,oBAAC,OAAD;EAAK,aAAU;EAAkB,WAAW,GAGxC,mEACH;YACG,oBAAC,SAAD;GACI,aAAU;GACV,WAAW,GACP,UAGA,UACH;GACD,GAAI;GACN,CAAA;EACA,CAAA;;AAId,SAAS,YAAY,EAAE,WAAW,GAAG,SAAkC;AACnE,QACI,oBAAC,SAAD;EACI,aAAU;EACV,WAAW,GAEP,cAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,UAAU,EAAE,WAAW,GAAG,SAAkC;AACjE,QACI,oBAAC,SAAD;EACI,aAAU;EACV,WAAW,GACP,8BACA,mBAEA,YAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,YAAY,EAAE,WAAW,GAAG,SAAkC;AACnE,QACI,oBAAC,SAAD;EACI,aAAU;EACV,WAAW,GAGP,UACH;EACD,GAAI;EACN,CAAA;;AAIV,IAAM,WAAW,YAAuD,EAAE,WAAW,GAAG,SAAS,QAAQ;AACrG,QACI,oBAAC,MAAD;EACS;EACL,aAAU;EACV,WAAW,GAEP,UACH;EACD,GAAI;EACN,CAAA;EAER;AAEF,SAAS,cAAc;AAEvB,SAAS,UAAU,EAAE,WAAW,GAAG,SAA+B;AAC9D,QACI,oBAAC,MAAD;EACI,aAAU;EACV,WAAW,GACP,qBAEA,4DAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,UAAU,EAAE,WAAW,GAAG,SAA+B;AAC9D,QACI,oBAAC,MAAD;EACI,aAAU;EACV,WAAW,GACP,YACA,qBAEA,4EAEA,UACH;EACD,GAAI;EACN,CAAA"}

package/dist/components/Tabs.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps } from 'react';
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
+declare function Tabs({ className, ...props }: ComponentProps<typeof TabsPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function TabsList({ className, ...props }: ComponentProps<typeof TabsPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+declare function TabsTrigger({ className, ...props }: ComponentProps<typeof TabsPrimitive.Tab>): import("react/jsx-runtime").JSX.Element;
+declare function TabsContent({ className, ...props }: ComponentProps<typeof TabsPrimitive.Panel>): import("react/jsx-runtime").JSX.Element;
+export { Tabs, TabsList, TabsTrigger, TabsContent, };
+//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/components/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAI5D,iBAAS,IAAI,CAAC,EACV,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,2CAQ3C;AAED,iBAAS,QAAQ,CAAC,EACd,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,2CAkB3C;AAED,iBAAS,WAAW,CAAC,EACjB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,GAAG,CAAC,2CA+B1C;AAED,iBAAS,WAAW,CAAC,EACjB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,2CAiB5C;AAED,OAAO,EACH,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,WAAW,GACd,CAAC"}

package/dist/components/Tabs.js

@@ -0,0 +1,37 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { jsx } from "react/jsx-runtime";
+import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
+//#region src/components/Tabs.tsx
+function Tabs({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs$1.Root, {
+		"data-slot": "tabs",
+		className: cn("flex flex-col gap-3", className),
+		...props
+	});
+}
+function TabsList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs$1.List, {
+		"data-slot": "tabs-list",
+		className: cn("inline-flex w-fit self-start items-center justify-center", "rounded-md p-0.5", "border border-gray-150 bg-gray-100/90 text-gray-500", "shadow-[0_1px_2px_rgba(31,41,51,0.06)]", className),
+		...props
+	});
+}
+function TabsTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs$1.Tab, {
+		"data-slot": "tabs-trigger",
+		className: cn("inline-flex items-center justify-center whitespace-nowrap cursor-pointer outline-none", "min-h-8 rounded-sm px-3 py-1.5 text-[13px] font-medium", "transition-[background-color,color,box-shadow]", "text-gray-500", "hover:bg-white/70 hover:text-gray-700", "focus-visible:shadow-[inset_0_0_0_2px_var(--color-sky-600)]", "disabled:pointer-events-none disabled:opacity-50", "data-[active]:bg-white data-[active]:text-gray-800", "data-[active]:shadow-[0_1px_2px_rgba(31,41,51,0.12)]", className),
+		...props
+	});
+}
+function TabsContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs$1.Panel, {
+		"data-slot": "tabs-content",
+		className: cn("outline-none", "mt-2", "focus-visible:shadow-[inset_0_0_0_2px_var(--color-sky-600)]", className),
+		...props
+	});
+}
+//#endregion
+export { Tabs, TabsContent, TabsList, TabsTrigger };
+
+//# sourceMappingURL=Tabs.js.map

package/dist/components/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","names":[],"sources":["../../src/components/Tabs.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { Tabs as TabsPrimitive } from '@base-ui/react/tabs';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nfunction Tabs({\n    className,\n    ...props\n}: ComponentProps<typeof TabsPrimitive.Root>) {\n    return (\n        <TabsPrimitive.Root\n            data-slot=\"tabs\"\n            className={cn('flex flex-col gap-3', className)}\n            {...props}\n        />\n    );\n}\n\nfunction TabsList({\n    className,\n    ...props\n}: ComponentProps<typeof TabsPrimitive.List>) {\n    return (\n        <TabsPrimitive.List\n            data-slot=\"tabs-list\"\n            className={cn(\n                // Reset and layout\n                'inline-flex w-fit self-start items-center justify-center',\n                'rounded-md p-0.5',\n\n                // Themes\n                'border border-gray-150 bg-gray-100/90 text-gray-500',\n                'shadow-[0_1px_2px_rgba(31,41,51,0.06)]',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction TabsTrigger({\n    className,\n    ...props\n}: ComponentProps<typeof TabsPrimitive.Tab>) {\n    return (\n        <TabsPrimitive.Tab\n            data-slot=\"tabs-trigger\"\n            className={cn(\n                // Reset and layout\n                'inline-flex items-center justify-center whitespace-nowrap cursor-pointer outline-none',\n                'min-h-8 rounded-sm px-3 py-1.5 text-[13px] font-medium',\n\n                // Transitions\n                'transition-[background-color,color,box-shadow]',\n\n                // Default state\n                'text-gray-500',\n                'hover:bg-white/70 hover:text-gray-700',\n\n                // Accessibility\n                'focus-visible:shadow-[inset_0_0_0_2px_var(--color-sky-600)]',\n\n                // Disabled state\n                'disabled:pointer-events-none disabled:opacity-50',\n\n                // Active state\n                'data-[active]:bg-white data-[active]:text-gray-800',\n                'data-[active]:shadow-[0_1px_2px_rgba(31,41,51,0.12)]',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction TabsContent({\n    className,\n    ...props\n}: ComponentProps<typeof TabsPrimitive.Panel>) {\n    return (\n        <TabsPrimitive.Panel\n            data-slot=\"tabs-content\"\n            className={cn(\n                // Reset and layout\n                'outline-none',\n                'mt-2',\n\n                // Accessibility\n                'focus-visible:shadow-[inset_0_0_0_2px_var(--color-sky-600)]',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n\nexport {\n    Tabs,\n    TabsList,\n    TabsTrigger,\n    TabsContent,\n};\n"],"mappings":";;;;;AAKA,SAAS,KAAK,EACV,WACA,GAAG,SACuC;AAC1C,QACI,oBAAC,OAAc,MAAf;EACI,aAAU;EACV,WAAW,GAAG,uBAAuB,UAAU;EAC/C,GAAI;EACN,CAAA;;AAIV,SAAS,SAAS,EACd,WACA,GAAG,SACuC;AAC1C,QACI,oBAAC,OAAc,MAAf;EACI,aAAU;EACV,WAAW,GAEP,4DACA,oBAGA,uDACA,0CAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,YAAY,EACjB,WACA,GAAG,SACsC;AACzC,QACI,oBAAC,OAAc,KAAf;EACI,aAAU;EACV,WAAW,GAEP,yFACA,0DAGA,kDAGA,iBACA,yCAGA,+DAGA,oDAGA,sDACA,wDAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,YAAY,EACjB,WACA,GAAG,SACwC;AAC3C,QACI,oBAAC,OAAc,OAAf;EACI,aAAU;EACV,WAAW,GAEP,gBACA,QAGA,+DAEA,UACH;EACD,GAAI;EACN,CAAA"}

package/dist/components/Textarea.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps } from 'react';
+import { VariantProps } from 'class-variance-authority';
+declare const textareaVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Textarea({ className, size, ...props }: ComponentProps<'textarea'> & VariantProps<typeof textareaVariants>): import("react/jsx-runtime").JSX.Element;
+export { Textarea };
+//# sourceMappingURL=Textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/components/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,gBAAgB;;8EAapB,CAAC;AAEH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,2CA0BlH;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Textarea.js

@@ -0,0 +1,26 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Textarea.tsx
+var textareaVariants = cva("", {
+	variants: { size: {
+		xs: "px-1.5 py-1 text-[11px]",
+		sm: "px-2 py-1 text-[12px]",
+		default: "px-2 py-1.5 text-sm",
+		lg: "px-3 py-2 text-sm",
+		xl: "px-4 py-2.5 text-base"
+	} },
+	defaultVariants: { size: "default" }
+});
+function Textarea({ className, size, ...props }) {
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-slot": "textarea",
+		className: cn("flex outline-none bg-clip-padding resize-y", "min-h-[80px] w-full", "rounded-sm", "border border-[rgba(96,125,159,0.4)]", "bg-[rgb(251,252,254)]", textareaVariants({ size }), "placeholder:text-[#7c8793]", "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)]", className),
+		...props
+	});
+}
+//#endregion
+export { Textarea };
+
+//# sourceMappingURL=Textarea.js.map