@verbb/plugin-kit-react 1.0.0

package/dist/components/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nfunction Checkbox({\n    className,\n    ...props\n}: ComponentProps<typeof CheckboxPrimitive.Root>) {\n    return (\n        <CheckboxPrimitive.Root\n            data-slot=\"checkbox\"\n            className={cn(\n                // Reset\n                'peer group/checkbox flex items-center justify-center cursor-pointer shrink-0 rounded-sm outline-none border',\n\n                // Themes\n                'size-4 border-[#c0cbd9]',\n\n                // States\n                '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)]',\n                '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)]',\n\n                'disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50',\n\n                // Custom\n                className,\n            )}\n            {...props}\n        >\n            <CheckboxPrimitive.Indicator\n                data-slot=\"checkbox-indicator\"\n                className={cn(\n                    // Reset\n                    'flex items-center justify-center',\n\n                    // Themes\n                    'size-[14px] text-current',\n                )}\n            >\n                <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    role=\"img\"\n                    aria-hidden=\"true\"\n                    viewBox=\"0 0 640 640\"\n                    className=\"size-[14px] translate-y-[1px] scale-[1.2] group-data-[indeterminate]/checkbox:hidden\"\n                >\n                    <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\" />\n                </svg>\n                <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    role=\"img\"\n                    aria-hidden=\"true\"\n                    viewBox=\"0 0 640 640\"\n                    className=\"hidden size-[12px] group-data-[indeterminate]/checkbox:block\"\n                >\n                    <path fill=\"currentColor\" d=\"M96 352V288H544V352H96z\" />\n                </svg>\n            </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n    );\n};\n\nexport { Checkbox };\n"],"mappings":";;;;;AAKA,SAAS,SAAS,EACd,WACA,GAAG,SAC2C;AAC9C,QACI,oBAAC,WAAkB,MAAnB;EACI,aAAU;EACV,WAAW,GAEP,+GAGA,2BAGA,yIACA,yJAEA,6GAGA,UACH;EACD,GAAI;YAEJ,qBAAC,WAAkB,WAAnB;GACI,aAAU;GACV,WAAW,GAEP,oCAGA,2BACH;aARL,CAUI,oBAAC,OAAD;IACI,OAAM;IACN,MAAK;IACL,eAAY;IACZ,SAAQ;IACR,WAAU;cAEV,oBAAC,QAAD;KAAM,MAAK;KAAe,GAAE;KAA+K,CAAA;IACzM,CAAA,EACN,oBAAC,OAAD;IACI,OAAM;IACN,MAAK;IACL,eAAY;IACZ,SAAQ;IACR,WAAU;cAEV,oBAAC,QAAD;KAAM,MAAK;KAAe,GAAE;KAA4B,CAAA;IACtD,CAAA,CACoB;;EACT,CAAA"}

package/dist/components/CheckboxInput.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps, ReactNode } from 'react';
+import { Checkbox } from './Checkbox';
+type CheckboxInputProps = Omit<ComponentProps<typeof Checkbox>, 'className' | 'children'> & {
+    label: ReactNode;
+    description?: ReactNode;
+    className?: string;
+    checkboxClassName?: string;
+    labelClassName?: string;
+    descriptionClassName?: string;
+};
+declare function CheckboxInput({ label, description, className, checkboxClassName, labelClassName, descriptionClassName, disabled, ...props }: CheckboxInputProps): import("react/jsx-runtime").JSX.Element;
+export { CheckboxInput };
+export type { CheckboxInputProps };
+//# sourceMappingURL=CheckboxInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/components/CheckboxInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;AAGvE,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG;IACxF,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;CACjC,CAAC;AAEF,iBAAS,aAAa,CAAC,EACnB,KAAK,EACL,WAAW,EACX,SAAS,EACT,iBAAiB,EACjB,cAAc,EACd,oBAAoB,EACpB,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,kBAAkB,2CA6BpB;AAED,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,YAAY,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/CheckboxInput.js

@@ -0,0 +1,31 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { Checkbox } from "./Checkbox.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/CheckboxInput.tsx
+function CheckboxInput({ label, description, className, checkboxClassName, labelClassName, descriptionClassName, disabled, ...props }) {
+	return /* @__PURE__ */ jsxs("label", {
+		"data-slot": "checkbox-input",
+		className: cn("flex items-start gap-2 text-sm", disabled ? "cursor-not-allowed" : "cursor-pointer", className),
+		children: [/* @__PURE__ */ jsx(Checkbox, {
+			className: checkboxClassName,
+			disabled,
+			...props
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "min-w-0 peer-disabled:opacity-50 peer-data-disabled:opacity-50",
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-slot": "checkbox-input-label",
+				className: cn("block leading-4", labelClassName),
+				children: label
+			}), description && /* @__PURE__ */ jsx("span", {
+				"data-slot": "checkbox-input-description",
+				className: cn("mt-1 block text-gray-500", descriptionClassName),
+				children: description
+			})]
+		})]
+	});
+}
+//#endregion
+export { CheckboxInput };
+
+//# sourceMappingURL=CheckboxInput.js.map

package/dist/components/CheckboxInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxInput.js","names":[],"sources":["../../src/components/CheckboxInput.tsx"],"sourcesContent":["import { type ComponentProps, type ReactNode } from 'react';\n\nimport { Checkbox } from '@verbb/plugin-kit-react/components/Checkbox';\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\ntype CheckboxInputProps = Omit<ComponentProps<typeof Checkbox>, 'className' | 'children'> & {\n    label: ReactNode;\n    description?: ReactNode;\n    className?: string;\n    checkboxClassName?: string;\n    labelClassName?: string;\n    descriptionClassName?: string;\n};\n\nfunction CheckboxInput({\n    label,\n    description,\n    className,\n    checkboxClassName,\n    labelClassName,\n    descriptionClassName,\n    disabled,\n    ...props\n}: CheckboxInputProps) {\n    return (\n        <label\n            data-slot=\"checkbox-input\"\n            className={cn(\n                'flex items-start gap-2 text-sm',\n                disabled ? 'cursor-not-allowed' : 'cursor-pointer',\n                className,\n            )}\n        >\n            <Checkbox className={checkboxClassName} disabled={disabled} {...props} />\n            <span className=\"min-w-0 peer-disabled:opacity-50 peer-data-disabled:opacity-50\">\n                <span\n                    data-slot=\"checkbox-input-label\"\n                    className={cn('block leading-4', labelClassName)}\n                >\n                    {label}\n                </span>\n                {description && (\n                    <span\n                        data-slot=\"checkbox-input-description\"\n                        className={cn('mt-1 block text-gray-500', descriptionClassName)}\n                    >\n                        {description}\n                    </span>\n                )}\n            </span>\n        </label>\n    );\n}\n\nexport { CheckboxInput };\nexport type { CheckboxInputProps };\n"],"mappings":";;;;;AAcA,SAAS,cAAc,EACnB,OACA,aACA,WACA,mBACA,gBACA,sBACA,UACA,GAAG,SACgB;AACnB,QACI,qBAAC,SAAD;EACI,aAAU;EACV,WAAW,GACP,kCACA,WAAW,uBAAuB,kBAClC,UACH;YANL,CAQI,oBAAC,UAAD;GAAU,WAAW;GAA6B;GAAU,GAAI;GAAS,CAAA,EACzE,qBAAC,QAAD;GAAM,WAAU;aAAhB,CACI,oBAAC,QAAD;IACI,aAAU;IACV,WAAW,GAAG,mBAAmB,eAAe;cAE/C;IACE,CAAA,EACN,eACG,oBAAC,QAAD;IACI,aAAU;IACV,WAAW,GAAG,4BAA4B,qBAAqB;cAE9D;IACE,CAAA,CAER;KACH"}

package/dist/components/CheckboxSelect.d.ts

@@ -0,0 +1,19 @@
+export declare const ALL_VALUE = "*";
+export type CheckboxSelectOption = {
+    label: string;
+    value: string;
+};
+export type CheckboxSelectValue = typeof ALL_VALUE | string[];
+type CheckboxSelectProps = {
+    options: CheckboxSelectOption[];
+    value?: CheckboxSelectValue;
+    onChange?: (value: CheckboxSelectValue) => void;
+    showAllOption?: boolean;
+    allLabel?: string;
+    disabled?: boolean;
+    name?: string;
+    className?: string;
+};
+export declare function CheckboxSelect({ options, value, onChange, showAllOption, allLabel, disabled, className, }: CheckboxSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CheckboxSelect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxSelect.d.ts","sourceRoot":"","sources":["../../src/components/CheckboxSelect.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,MAAM,CAAC;AAE7B,MAAM,MAAM,oBAAoB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,GAAG,MAAM,EAAE,CAAC;AAE9D,KAAK,mBAAmB,GAAG;IACvB,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAChD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC3B,OAAO,EACP,KAAU,EACV,QAAQ,EACR,aAAqB,EACrB,QAAgB,EAChB,QAAgB,EAChB,SAAS,GACZ,EAAE,mBAAmB,2CAsErB"}

package/dist/components/CheckboxSelect.js

@@ -0,0 +1,63 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { CheckboxInput } from "./CheckboxInput.js";
+import { useCallback, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/CheckboxSelect.tsx
+var ALL_VALUE = "*";
+function CheckboxSelect({ options, value = [], onChange, showAllOption = false, allLabel = "All", disabled = false, className }) {
+	const isAllSelected = value === "*";
+	const selectedArray = useMemo(() => {
+		if (isAllSelected) return options.map((option) => {
+			return option.value;
+		});
+		if (Array.isArray(value)) return value;
+		return [];
+	}, [
+		isAllSelected,
+		options,
+		value
+	]);
+	const handleAllChange = useCallback((checked) => {
+		onChange?.(checked === true ? "*" : []);
+	}, [onChange]);
+	const handleItemChange = useCallback((optionValue, checked) => {
+		if (isAllSelected) return;
+		const next = checked ? [...selectedArray, optionValue] : selectedArray.filter((v) => {
+			return v !== optionValue;
+		});
+		onChange?.(next);
+	}, [
+		isAllSelected,
+		selectedArray,
+		onChange
+	]);
+	return /* @__PURE__ */ jsxs("fieldset", {
+		className: cn("space-y-1", className),
+		disabled,
+		children: [showAllOption && /* @__PURE__ */ jsx(CheckboxInput, {
+			label: allLabel,
+			labelClassName: "font-bold",
+			className: "items-start gap-1.5",
+			checked: isAllSelected,
+			onCheckedChange: handleAllChange,
+			disabled
+		}), options.map((option) => {
+			const isChecked = isAllSelected || selectedArray.includes(option.value);
+			const isItemDisabled = isAllSelected;
+			return /* @__PURE__ */ jsx(CheckboxInput, {
+				label: option.label,
+				className: "items-start gap-1.5",
+				checked: isChecked,
+				onCheckedChange: (checked) => {
+					return handleItemChange(option.value, checked === true);
+				},
+				disabled: disabled || isItemDisabled
+			}, option.value);
+		})]
+	});
+}
+//#endregion
+export { ALL_VALUE, CheckboxSelect };
+
+//# sourceMappingURL=CheckboxSelect.js.map

package/dist/components/CheckboxSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxSelect.js","names":[],"sources":["../../src/components/CheckboxSelect.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react';\nimport { CheckboxInput } from '@verbb/plugin-kit-react/components/CheckboxInput';\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nexport const ALL_VALUE = '*';\n\nexport type CheckboxSelectOption = {\n    label: string;\n    value: string;\n};\n\nexport type CheckboxSelectValue = typeof ALL_VALUE | string[];\n\ntype CheckboxSelectProps = {\n    options: CheckboxSelectOption[];\n    value?: CheckboxSelectValue;\n    onChange?: (value: CheckboxSelectValue) => void;\n    showAllOption?: boolean;\n    allLabel?: string;\n    disabled?: boolean;\n    name?: string;\n    className?: string;\n};\n\nexport function CheckboxSelect({\n    options,\n    value = [],\n    onChange,\n    showAllOption = false,\n    allLabel = 'All',\n    disabled = false,\n    className,\n}: CheckboxSelectProps) {\n    const isAllSelected = value === ALL_VALUE;\n    const selectedArray = useMemo(() => {\n        if (isAllSelected) {\n            return options.map((option) => {\n                return option.value;\n            });\n        }\n\n        if (Array.isArray(value)) {\n            return value;\n        }\n\n        return [];\n    }, [isAllSelected, options, value]);\n\n    const handleAllChange = useCallback(\n        (checked: boolean | 'indeterminate') => {\n            onChange?.(checked === true ? ALL_VALUE : []);\n        },\n        [onChange],\n    );\n\n    const handleItemChange = useCallback(\n        (optionValue: string, checked: boolean) => {\n            if (isAllSelected) {\n                return;\n            }\n            const next = checked\n                ? [...selectedArray, optionValue]\n                : selectedArray.filter((v) => { return v !== optionValue; });\n            onChange?.(next);\n        },\n        [isAllSelected, selectedArray, onChange],\n    );\n\n    return (\n        <fieldset\n            className={cn('space-y-1', className)}\n            disabled={disabled}\n        >\n            {showAllOption && (\n                <CheckboxInput\n                    label={allLabel}\n                    labelClassName=\"font-bold\"\n                    className=\"items-start gap-1.5\"\n                    checked={isAllSelected}\n                    onCheckedChange={handleAllChange}\n                    disabled={disabled}\n                />\n            )}\n            {options.map((option) => {\n                const isChecked = isAllSelected || selectedArray.includes(option.value);\n                const isItemDisabled = isAllSelected;\n\n                return (\n                    <CheckboxInput\n                        key={option.value}\n                        label={option.label}\n                        className=\"items-start gap-1.5\"\n                        checked={isChecked}\n                        onCheckedChange={(checked) => {\n                            return handleItemChange(option.value, checked === true);\n                        }}\n                        disabled={disabled || isItemDisabled}\n                    />\n                );\n            })}\n        </fieldset>\n    );\n}\n"],"mappings":";;;;;;AAIA,IAAa,YAAY;AAoBzB,SAAgB,eAAe,EAC3B,SACA,QAAQ,EAAE,EACV,UACA,gBAAgB,OAChB,WAAW,OACX,WAAW,OACX,aACoB;CACpB,MAAM,gBAAgB,UAAA;CACtB,MAAM,gBAAgB,cAAc;AAChC,MAAI,cACA,QAAO,QAAQ,KAAK,WAAW;AAC3B,UAAO,OAAO;IAChB;AAGN,MAAI,MAAM,QAAQ,MAAM,CACpB,QAAO;AAGX,SAAO,EAAE;IACV;EAAC;EAAe;EAAS;EAAM,CAAC;CAEnC,MAAM,kBAAkB,aACnB,YAAuC;AACpC,aAAW,YAAY,OAAA,MAAmB,EAAE,CAAC;IAEjD,CAAC,SAAS,CACb;CAED,MAAM,mBAAmB,aACpB,aAAqB,YAAqB;AACvC,MAAI,cACA;EAEJ,MAAM,OAAO,UACP,CAAC,GAAG,eAAe,YAAY,GAC/B,cAAc,QAAQ,MAAM;AAAE,UAAO,MAAM;IAAe;AAChE,aAAW,KAAK;IAEpB;EAAC;EAAe;EAAe;EAAS,CAC3C;AAED,QACI,qBAAC,YAAD;EACI,WAAW,GAAG,aAAa,UAAU;EAC3B;YAFd,CAIK,iBACG,oBAAC,eAAD;GACI,OAAO;GACP,gBAAe;GACf,WAAU;GACV,SAAS;GACT,iBAAiB;GACP;GACZ,CAAA,EAEL,QAAQ,KAAK,WAAW;GACrB,MAAM,YAAY,iBAAiB,cAAc,SAAS,OAAO,MAAM;GACvE,MAAM,iBAAiB;AAEvB,UACI,oBAAC,eAAD;IAEI,OAAO,OAAO;IACd,WAAU;IACV,SAAS;IACT,kBAAkB,YAAY;AAC1B,YAAO,iBAAiB,OAAO,OAAO,YAAY,KAAK;;IAE3D,UAAU,YAAY;IACxB,EARO,OAAO,MAQd;IAER,CACK"}

package/dist/components/ColorInput.d.ts

@@ -0,0 +1,14 @@
+type ColorInputSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';
+export declare function ColorInput({ value, onValueChange, onBlur, className, size, fitCell, disabled, isInvalid, ...props }: {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    onBlur?: () => void;
+    className?: string;
+    size?: ColorInputSize;
+    fitCell?: boolean;
+    disabled?: boolean;
+    isInvalid?: boolean;
+    [x: string]: unknown;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ColorInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.d.ts","sourceRoot":"","sources":["../../src/components/ColorInput.tsx"],"names":[],"mappings":"AAKA,KAAK,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAoE5D,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,aAAa,EACb,MAAM,EACN,SAAS,EACT,IAAgB,EAChB,OAAe,EACf,QAAgB,EAChB,SAAiB,EACjB,GAAG,KAAK,EACX,EAAE;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,2CAsHA"}

package/dist/components/ColorInput.js

@@ -0,0 +1,148 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { Input } from "./Input.js";
+import "./index.js";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ColorInput.tsx
+var DEFAULT_COLOR = "#000000";
+var SIZE_CLASSES = {
+	xs: {
+		wrapper: "min-w-[80px]",
+		swatch: "left-1.5 size-3.5",
+		hash: "left-6 text-[10px]",
+		input: "h-[24px]! pl-8! pr-2!"
+	},
+	sm: {
+		wrapper: "min-w-[88px]",
+		swatch: "left-1.5 size-4",
+		hash: "left-6.5 text-[11px]",
+		input: "h-[26px]! pl-9! pr-2.5!"
+	},
+	default: {
+		wrapper: "min-w-[98px]",
+		swatch: "left-1.5 size-5",
+		hash: "left-8 text-xs",
+		input: "h-[30px]! pl-11! pr-3!"
+	},
+	lg: {
+		wrapper: "min-w-[108px]",
+		swatch: "left-2 size-5",
+		hash: "left-8.5 text-[13px]",
+		input: "h-[34px]! pl-12! pr-3!"
+	},
+	xl: {
+		wrapper: "min-w-[118px]",
+		swatch: "left-2 size-6",
+		hash: "left-10 text-sm",
+		input: "h-[38px]! pl-[52px]! pr-3.5!"
+	}
+};
+var FIT_CELL_INPUT_WIDTH = {
+	xs: "w-[72px]",
+	sm: "w-[78px]",
+	default: "w-[86px]",
+	lg: "w-[94px]",
+	xl: "w-[104px]"
+};
+var sanitizeHex = (value) => {
+	return String(value || "").replace(/^#/, "").replace(/[^0-9a-fA-F]/g, "").slice(0, 6).toLowerCase();
+};
+var isCompleteHex = (value) => {
+	return value.length === 3 || value.length === 6;
+};
+var expandShortHex = (value) => {
+	if (value.length !== 3) return value;
+	return value.split("").map((char) => {
+		return `${char}${char}`;
+	}).join("");
+};
+function ColorInput({ value, onValueChange, onBlur, className, size = "default", fitCell = false, disabled = false, isInvalid = false, ...props }) {
+	const [hexValue, setHexValue] = useState(() => {
+		return sanitizeHex(String(value || ""));
+	});
+	useEffect(() => {
+		const normalized = sanitizeHex(String(value || ""));
+		if (normalized !== hexValue) setHexValue(normalized);
+	}, [hexValue, value]);
+	const pickerValue = useMemo(() => {
+		if (hexValue.length === 6) return `#${hexValue}`;
+		if (hexValue.length === 3) return `#${expandShortHex(hexValue)}`;
+		return DEFAULT_COLOR;
+	}, [hexValue]);
+	const isPreviewTransparent = !isCompleteHex(hexValue);
+	const handleTextChange = (event) => {
+		const nextHex = sanitizeHex(event.target.value);
+		setHexValue(nextHex);
+		if (nextHex.length === 0) {
+			onValueChange?.("");
+			return;
+		}
+		onValueChange?.(`#${nextHex}`);
+	};
+	const handleColorPickerChange = (event) => {
+		const normalized = sanitizeHex(event.target.value);
+		setHexValue(normalized);
+		onValueChange?.(`#${normalized}`);
+	};
+	const sizeClasses = SIZE_CLASSES[size] || SIZE_CLASSES.default;
+	const fitCellWidthClass = FIT_CELL_INPUT_WIDTH[size] || FIT_CELL_INPUT_WIDTH.default;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative inline-block", fitCell ? "w-auto min-w-0 max-w-full" : sizeClasses.wrapper, className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("absolute top-1/2 z-10 -translate-y-1/2 rounded-sm", fitCell ? "left-2 size-4" : sizeClasses.swatch, disabled && "opacity-50"),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "absolute inset-0 rounded-sm shadow-[inset_0_0_0_1px_rgba(0,0,0,.15)]",
+					style: isPreviewTransparent ? {
+						backgroundColor: "#fff",
+						backgroundImage: `
+                            linear-gradient(45deg, #d1d5db 25%, transparent 25%),
+                            linear-gradient(-45deg, #d1d5db 25%, transparent 25%),
+                            linear-gradient(45deg, transparent 75%, #d1d5db 75%),
+                            linear-gradient(-45deg, transparent 75%, #d1d5db 75%)
+                        `,
+						backgroundSize: "8px 8px",
+						backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0px"
+					} : { backgroundColor: pickerValue }
+				}), /* @__PURE__ */ jsx("input", {
+					type: "color",
+					className: "absolute inset-0 m-0 size-full cursor-pointer border-0 p-0 opacity-0 [appearance:none] [-webkit-appearance:none]",
+					value: pickerValue,
+					onChange: handleColorPickerChange,
+					disabled,
+					"aria-label": "Color picker",
+					style: {
+						width: "100%",
+						height: "100%",
+						minWidth: 0,
+						minHeight: 0,
+						background: "transparent"
+					}
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn("pointer-events-none absolute top-1/2 z-10 -translate-y-1/2 font-mono text-gray-300", fitCell ? "left-7 text-[11px]" : sizeClasses.hash),
+				"aria-hidden": "true",
+				children: "#"
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				type: "text",
+				size,
+				value: hexValue,
+				onChange: handleTextChange,
+				onBlur,
+				disabled,
+				"aria-invalid": isInvalid,
+				autoComplete: "off",
+				maxLength: 6,
+				className: cn("font-mono text-[12px]", fitCell ? ["max-w-full h-full rounded-none! border-none! bg-transparent! pl-9! pr-2! focus-visible:shadow-none focus-visible:inset-ring-1 focus-visible:inset-ring-gray-200", fitCellWidthClass] : ["rounded-sm!", sizeClasses.input]),
+				...props
+			})
+		]
+	});
+}
+//#endregion
+export { ColorInput };
+
+//# sourceMappingURL=ColorInput.js.map

package/dist/components/ColorInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.js","names":[],"sources":["../../src/components/ColorInput.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { Input } from '@verbb/plugin-kit-react/components';\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nconst DEFAULT_COLOR = '#000000';\ntype ColorInputSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';\n\nconst SIZE_CLASSES: Record<ColorInputSize, {\n    wrapper: string;\n    swatch: string;\n    hash: string;\n    input: string;\n}> = {\n    xs: {\n        wrapper: 'min-w-[80px]',\n        swatch: 'left-1.5 size-3.5',\n        hash: 'left-6 text-[10px]',\n        input: 'h-[24px]! pl-8! pr-2!',\n    },\n    sm: {\n        wrapper: 'min-w-[88px]',\n        swatch: 'left-1.5 size-4',\n        hash: 'left-6.5 text-[11px]',\n        input: 'h-[26px]! pl-9! pr-2.5!',\n    },\n    default: {\n        wrapper: 'min-w-[98px]',\n        swatch: 'left-1.5 size-5',\n        hash: 'left-8 text-xs',\n        input: 'h-[30px]! pl-11! pr-3!',\n    },\n    lg: {\n        wrapper: 'min-w-[108px]',\n        swatch: 'left-2 size-5',\n        hash: 'left-8.5 text-[13px]',\n        input: 'h-[34px]! pl-12! pr-3!',\n    },\n    xl: {\n        wrapper: 'min-w-[118px]',\n        swatch: 'left-2 size-6',\n        hash: 'left-10 text-sm',\n        input: 'h-[38px]! pl-[52px]! pr-3.5!',\n    },\n};\n\nconst FIT_CELL_INPUT_WIDTH: Record<ColorInputSize, string> = {\n    xs: 'w-[72px]',\n    sm: 'w-[78px]',\n    default: 'w-[86px]',\n    lg: 'w-[94px]',\n    xl: 'w-[104px]',\n};\n\nconst sanitizeHex = (value: string) => {\n    return String(value || '')\n        .replace(/^#/, '')\n        .replace(/[^0-9a-fA-F]/g, '')\n        .slice(0, 6)\n        .toLowerCase();\n};\n\nconst isCompleteHex = (value: string) => {\n    return value.length === 3 || value.length === 6;\n};\n\nconst expandShortHex = (value: string) => {\n    if (value.length !== 3) {\n        return value;\n    }\n\n    return value.split('').map((char) => { return `${char}${char}`; }).join('');\n};\n\nexport function ColorInput({\n    value,\n    onValueChange,\n    onBlur,\n    className,\n    size = 'default',\n    fitCell = false,\n    disabled = false,\n    isInvalid = false,\n    ...props\n}: {\n    value?: string;\n    onValueChange?: (value: string) => void;\n    onBlur?: () => void;\n    className?: string;\n    size?: ColorInputSize;\n    fitCell?: boolean;\n    disabled?: boolean;\n    isInvalid?: boolean;\n    [x: string]: unknown;\n}) {\n    const [hexValue, setHexValue] = useState(() => {\n        return sanitizeHex(String(value || ''));\n    });\n\n    useEffect(() => {\n        const normalized = sanitizeHex(String(value || ''));\n        if (normalized !== hexValue) {\n            setHexValue(normalized);\n        }\n    }, [hexValue, value]);\n\n    const pickerValue = useMemo(() => {\n        if (hexValue.length === 6) {\n            return `#${hexValue}`;\n        }\n\n        if (hexValue.length === 3) {\n            return `#${expandShortHex(hexValue)}`;\n        }\n\n        return DEFAULT_COLOR;\n    }, [hexValue]);\n    const isPreviewTransparent = !isCompleteHex(hexValue);\n\n    const handleTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const nextHex = sanitizeHex(event.target.value);\n        setHexValue(nextHex);\n\n        if (nextHex.length === 0) {\n            onValueChange?.('');\n            return;\n        }\n\n        onValueChange?.(`#${nextHex}`);\n    };\n\n    const handleColorPickerChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const normalized = sanitizeHex(event.target.value);\n        setHexValue(normalized);\n        onValueChange?.(`#${normalized}`);\n    };\n    const sizeClasses = SIZE_CLASSES[size] || SIZE_CLASSES.default;\n    const fitCellWidthClass = FIT_CELL_INPUT_WIDTH[size] || FIT_CELL_INPUT_WIDTH.default;\n\n    return (\n        <div className={cn(\n            'relative inline-block',\n            fitCell ? 'w-auto min-w-0 max-w-full' : sizeClasses.wrapper,\n            className,\n        )}>\n            <div className={cn(\n                'absolute top-1/2 z-10 -translate-y-1/2 rounded-sm',\n                fitCell ? 'left-2 size-4' : sizeClasses.swatch,\n                disabled && 'opacity-50',\n            )}>\n                <div\n                    className=\"absolute inset-0 rounded-sm shadow-[inset_0_0_0_1px_rgba(0,0,0,.15)]\"\n                    style={isPreviewTransparent ? {\n                        backgroundColor: '#fff',\n                        backgroundImage: `\n                            linear-gradient(45deg, #d1d5db 25%, transparent 25%),\n                            linear-gradient(-45deg, #d1d5db 25%, transparent 25%),\n                            linear-gradient(45deg, transparent 75%, #d1d5db 75%),\n                            linear-gradient(-45deg, transparent 75%, #d1d5db 75%)\n                        `,\n                        backgroundSize: '8px 8px',\n                        backgroundPosition: '0 0, 0 4px, 4px -4px, -4px 0px',\n                    } : { backgroundColor: pickerValue }}\n                />\n\n                <input\n                    type=\"color\"\n                    className=\"absolute inset-0 m-0 size-full cursor-pointer border-0 p-0 opacity-0 [appearance:none] [-webkit-appearance:none]\"\n                    value={pickerValue}\n                    onChange={handleColorPickerChange}\n                    disabled={disabled}\n                    aria-label=\"Color picker\"\n                    style={{\n                        width: '100%',\n                        height: '100%',\n                        minWidth: 0,\n                        minHeight: 0,\n                        background: 'transparent',\n                    }}\n                />\n            </div>\n\n            <div\n                className={cn(\n                    'pointer-events-none absolute top-1/2 z-10 -translate-y-1/2 font-mono text-gray-300',\n                    fitCell ? 'left-7 text-[11px]' : sizeClasses.hash,\n                )}\n                aria-hidden=\"true\"\n            >\n                #\n            </div>\n\n            <Input\n                type=\"text\"\n                size={size}\n                value={hexValue}\n                onChange={handleTextChange}\n                onBlur={onBlur}\n                disabled={disabled}\n                aria-invalid={isInvalid}\n                autoComplete=\"off\"\n                maxLength={6}\n                className={cn(\n                    'font-mono text-[12px]',\n                    fitCell\n                        ? ['max-w-full h-full rounded-none! border-none! bg-transparent! pl-9! pr-2! focus-visible:shadow-none focus-visible:inset-ring-1 focus-visible:inset-ring-gray-200', fitCellWidthClass]\n                        : ['rounded-sm!', sizeClasses.input],\n                )}\n                {...props}\n            />\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Combobox.d.ts

@@ -0,0 +1,40 @@
+import { ComponentProps, ComponentPropsWithRef } from 'react';
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+import { VariantProps } from 'class-variance-authority';
+declare const comboboxItemVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
+    variant?: "default" | "destructive" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type ComboboxSize = NonNullable<VariantProps<typeof comboboxItemVariants>['size']>;
+type ComboboxHighlightedTextProps = {
+    text?: string | number | null;
+    search?: string | number | null;
+    className?: string;
+    matchClassName?: string;
+};
+declare function Combobox({ size, children, ...props }: ComponentProps<typeof ComboboxPrimitive.Root> & {
+    size?: ComboboxSize;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxPrimitiveInput({ className, children, disabled, showTrigger, showClear, ...props }: ComboboxPrimitive.Input.Props & {
+    showTrigger?: boolean;
+    showClear?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, ...props }: ComboboxPrimitive.Popup.Props & Pick<ComboboxPrimitive.Positioner.Props, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'>): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxChips({ className, ...props }: ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxChip({ className, children, showRemove, ...props }: ComboboxPrimitive.Chip.Props & {
+    showRemove?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props): import("react/jsx-runtime").JSX.Element;
+declare function useComboboxAnchor(): import('react').RefObject<HTMLDivElement | null>;
+declare function ComboboxHighlightedText({ text, search, className, matchClassName, }: ComboboxHighlightedTextProps): string | import("react/jsx-runtime").JSX.Element;
+export { Combobox, ComboboxPrimitiveInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, ComboboxHighlightedText, useComboboxAnchor, };
+//# sourceMappingURL=Combobox.d.ts.map

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

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