@plitzi/plitzi-ui 1.6.2

package/dist/components/IconGroup/IconSeparator.d.ts

@@ -0,0 +1,5 @@
+import { default as IconGroupStyles, variantKeys } from './IconGroup.styles';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+export type IconSeparatorProps = useThemeSharedProps<typeof IconGroupStyles, typeof variantKeys>;
+declare const IconSeparator: ({ className, intent, size, direction }: IconSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+export default IconSeparator;

package/dist/components/IconGroup/IconSeparator.js

@@ -0,0 +1,14 @@
+import e from "../../hooks/useTheme/index.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/IconGroup/IconSeparator.tsx
+var n = ({ className: n, intent: r, size: i, direction: a }) => (n = e("IconGroup", {
+	className: n,
+	componentKey: "separator",
+	variants: {
+		intent: r,
+		size: i,
+		direction: a
+	}
+}), /* @__PURE__ */ t("div", { className: n }));
+//#endregion
+export { n as default };

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

@@ -0,0 +1,5 @@
+import { default as IconGroup } from './IconGroup';
+import { default as iconGroupTheme } from './IconGroup.styles';
+export * from './IconGroup';
+export { iconGroupTheme };
+export default IconGroup;

package/dist/components/IconGroup/index.js

@@ -0,0 +1,6 @@
+import e from "./IconGroup.js";
+import t from "./IconGroup.styles.js";
+//#region src/components/IconGroup/index.ts
+var n = e;
+//#endregion
+export { n as default, t as iconGroupTheme };

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,84 @@
+import { default as InputStyles, variantKeys } from './Input.styles';
+import { InputContainerProps } from './InputContainer';
+import { ErrorMessageProps } from '../ErrorMessage';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+import { InputHTMLAttributes, ReactNode, RefObject } from 'react';
+export type InputProps = {
+    ref?: RefObject<HTMLInputElement>;
+    children?: ReactNode;
+    placeholder?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    clearable?: boolean;
+    label?: ReactNode;
+    prefix?: string;
+    type?: 'text' | 'number' | 'email' | 'password';
+    value?: string | number;
+    error?: ErrorMessageProps['message'] | ErrorMessageProps['error'];
+    containerProps?: InputContainerProps;
+    onChange?: (value: string) => void;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'onChange' | 'size'> & Omit<useThemeSharedProps<typeof InputStyles, typeof variantKeys>, 'error'>;
+declare const Input: import('react').NamedExoticComponent<{
+    ref?: RefObject<HTMLInputElement>;
+    children?: ReactNode;
+    placeholder?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    clearable?: boolean;
+    label?: ReactNode;
+    prefix?: string;
+    type?: "text" | "number" | "email" | "password";
+    value?: string | number;
+    error?: ErrorMessageProps["message"] | ErrorMessageProps["error"];
+    containerProps?: InputContainerProps;
+    onChange?: (value: string) => void;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "className" | "onChange" | "size"> & Omit<useThemeSharedProps<{
+    root: (props?: ({
+        intent?: "custom" | "primary" | null | undefined;
+        disabled?: boolean | null | undefined;
+        size?: "xs" | "md" | "sm" | "custom" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    inputContainer: (props?: ({
+        intent?: "custom" | "primary" | null | undefined;
+        error?: boolean | null | undefined;
+        disabled?: boolean | null | undefined;
+        size?: "xs" | "md" | "sm" | "custom" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    input: (props?: ({
+        intent?: "primary" | null | undefined;
+        error?: boolean | null | undefined;
+        disabled?: boolean | null | undefined;
+        size?: "xs" | "md" | "sm" | "custom" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    label: (props?: ({
+        inline?: boolean | null | undefined;
+        disabled?: boolean | null | undefined;
+        size?: "xs" | "md" | "sm" | "custom" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    iconFloatingContainer: (props?: ({
+        intent?: "primary" | null | undefined;
+        size?: "xs" | "md" | "sm" | "custom" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    icon: (props?: ({
+        intent?: "primary" | null | undefined;
+        error?: boolean | null | undefined;
+        size?: "xs" | "md" | "sm" | "custom" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    iconError: (props?: ({
+        intent?: "primary" | null | undefined;
+        error?: boolean | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    iconClear: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+    iconLoading: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+}, {
+    readonly intent: readonly ["primary", "custom"];
+    readonly size: readonly ["md", "sm", "xs", "custom"];
+    readonly error: readonly [true, false];
+    readonly disabled: readonly [true, false];
+    readonly inline: readonly [true, false];
+}>, "error">> & {
+    readonly type: ({ ref, children, className, id, label, placeholder, loading, disabled, clearable, inline, prefix, type, size, intent, value, error, containerProps, onChange, ...inputProps }: InputProps) => import("react/jsx-runtime").JSX.Element;
+} & {
+    Icon: ({ className, children, icon, active, disabled, testId, intent, size, cursor, title, ...props }: import('../Icon').IconProps) => string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element;
+};
+export default Input;

package/dist/components/Input/Input.js

@@ -0,0 +1,46 @@
+import e from "../../hooks/useTheme/index.js";
+import t from "../Icon/index.js";
+import n from "./InputContainer.js";
+import { memo as r, useCallback as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+var s = Object.assign(r(({ ref: t, children: r, className: s = "", id: c, label: l = "", placeholder: u = "", loading: d = !1, disabled: f = !1, clearable: p = !1, inline: m = !1, prefix: h = "", type: g = "text", size: _, intent: v = "primary", value: y = "", error: b = !1, containerProps: x, onChange: S, ...C }) => {
+	let w = e("Input", {
+		className: s && typeof s == "object" ? s.input : "",
+		componentKey: "input",
+		variants: {
+			intent: v,
+			size: _,
+			disabled: f || d,
+			error: !!b,
+			inline: m
+		}
+	}), T = i((e) => S?.(e.target.value), [S]);
+	return /* @__PURE__ */ o(n, {
+		className: s,
+		id: c,
+		label: l,
+		loading: d,
+		clearable: p,
+		value: y,
+		prefix: h,
+		disabled: f,
+		error: b,
+		intent: v,
+		size: _,
+		onClear: i(() => S?.(""), [S]),
+		...x,
+		children: [r, /* @__PURE__ */ a("input", {
+			ref: t,
+			id: c,
+			type: g,
+			placeholder: u,
+			className: w,
+			disabled: f || d,
+			value: y,
+			onChange: T,
+			...C
+		})]
+	});
+}), { Icon: t });
+//#endregion
+export { s as default };

package/dist/components/Input/Input.styles.d.ts

@@ -0,0 +1,48 @@
+export declare const variantKeys: {
+    readonly intent: readonly ["primary", "custom"];
+    readonly size: readonly ["md", "sm", "xs", "custom"];
+    readonly error: readonly [true, false];
+    readonly disabled: readonly [true, false];
+    readonly inline: readonly [true, false];
+};
+export declare const STYLES_COMPONENT_NAME = "Input";
+declare const _default: {
+    root: (props?: ({
+        intent?: "custom" | "primary" | null | undefined;
+        disabled?: boolean | null | undefined;
+        size?: "xs" | "md" | "sm" | "custom" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    inputContainer: (props?: ({
+        intent?: "custom" | "primary" | null | undefined;
+        error?: boolean | null | undefined;
+        disabled?: boolean | null | undefined;
+        size?: "xs" | "md" | "sm" | "custom" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    input: (props?: ({
+        intent?: "primary" | null | undefined;
+        error?: boolean | null | undefined;
+        disabled?: boolean | null | undefined;
+        size?: "xs" | "md" | "sm" | "custom" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    label: (props?: ({
+        inline?: boolean | null | undefined;
+        disabled?: boolean | null | undefined;
+        size?: "xs" | "md" | "sm" | "custom" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    iconFloatingContainer: (props?: ({
+        intent?: "primary" | null | undefined;
+        size?: "xs" | "md" | "sm" | "custom" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    icon: (props?: ({
+        intent?: "primary" | null | undefined;
+        error?: boolean | null | undefined;
+        size?: "xs" | "md" | "sm" | "custom" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    iconError: (props?: ({
+        intent?: "primary" | null | undefined;
+        error?: boolean | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    iconClear: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+    iconLoading: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+};
+export default _default;

package/dist/components/Input/Input.styles.js

@@ -0,0 +1,194 @@
+import e from "../../helpers/cvaWrapper.js";
+//#region src/components/Input/Input.styles.ts
+var t = {
+	intent: ["primary", "custom"],
+	size: [
+		"md",
+		"sm",
+		"xs",
+		"custom"
+	],
+	error: [!0, !1],
+	disabled: [!0, !1],
+	inline: [!0, !1]
+}, n = {
+	root: e("flex flex-col", {
+		variants: {
+			intent: {
+				primary: "",
+				custom: ""
+			},
+			disabled: {
+				true: "opacity-60 pointer-events-none",
+				false: ""
+			},
+			size: {
+				md: "gap-1.5",
+				sm: "gap-1 text-sm",
+				xs: "gap-1 text-xs",
+				custom: ""
+			}
+		},
+		compoundVariants: [],
+		defaultVariants: {
+			intent: "primary",
+			size: "md"
+		}
+	}),
+	inputContainer: e("flex items-center border relative transition-colors duration-150 focus-within:ring-2 focus-within:ring-offset-0", {
+		variants: {
+			intent: {
+				primary: "bg-white text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300",
+				custom: ""
+			},
+			error: {
+				true: "border-red-500 focus-within:ring-red-500/30",
+				false: "border-gray-300 dark:border-zinc-700 focus-within:ring-primary-500/30 dark:focus-within:ring-primary-400/30 hover:border-gray-400 dark:hover:border-zinc-500"
+			},
+			disabled: {
+				true: "cursor-not-allowed opacity-60 pointer-events-none",
+				false: ""
+			},
+			size: {
+				md: "py-2 px-3 gap-2 rounded-lg",
+				sm: "py-1.5 px-2.5 gap-1.5 rounded",
+				xs: "py-1 px-2 gap-1 rounded-sm",
+				custom: ""
+			}
+		},
+		compoundVariants: [],
+		defaultVariants: {
+			intent: "primary",
+			error: !1,
+			disabled: !1,
+			size: "md"
+		}
+	}),
+	input: e("p-0 border-0 outline-none focus:ring-0 w-full bg-transparent", {
+		variants: {
+			intent: { primary: "text-zinc-900 placeholder:text-zinc-400 dark:text-zinc-200 dark:placeholder:text-zinc-500" },
+			error: {
+				true: "",
+				false: ""
+			},
+			disabled: {
+				true: "cursor-not-allowed",
+				false: ""
+			},
+			size: {
+				md: "text-sm",
+				sm: "text-sm",
+				xs: "text-xs",
+				custom: ""
+			}
+		},
+		compoundVariants: [],
+		defaultVariants: {
+			intent: "primary",
+			size: "md",
+			disabled: !1,
+			error: !1
+		}
+	}),
+	label: e("text-sm font-medium text-zinc-700 dark:text-zinc-300", {
+		variants: {
+			inline: {
+				true: "flex select-none items-center",
+				false: ""
+			},
+			disabled: {
+				true: "",
+				false: ""
+			},
+			size: {
+				md: "",
+				sm: "text-sm",
+				xs: "text-xs",
+				custom: ""
+			}
+		},
+		compoundVariants: [
+			{
+				inline: !0,
+				disabled: !0,
+				className: "cursor-not-allowed"
+			},
+			{
+				inline: !0,
+				disabled: !1,
+				className: "cursor-pointer"
+			},
+			{
+				inline: !0,
+				size: "md",
+				className: "gap-2"
+			},
+			{
+				inline: !0,
+				size: "sm",
+				className: "gap-1.5"
+			},
+			{
+				inline: !0,
+				size: "xs",
+				className: "gap-1"
+			}
+		],
+		defaultVariants: {
+			inline: !1,
+			disabled: !1,
+			size: "md"
+		}
+	}),
+	iconFloatingContainer: e("flex items-center justify-center", {
+		variants: {
+			intent: { primary: "" },
+			size: {
+				md: "gap-2",
+				sm: "gap-1.5",
+				xs: "gap-1",
+				custom: ""
+			}
+		},
+		compoundVariants: [],
+		defaultVariants: {
+			intent: "primary",
+			size: "md"
+		}
+	}),
+	icon: e("border-r border-gray-300 dark:border-zinc-700 text-zinc-400 dark:text-zinc-500 shrink-0", {
+		variants: {
+			intent: { primary: "" },
+			error: {
+				true: "text-red-500 dark:text-red-400",
+				false: ""
+			},
+			size: {
+				md: "pr-2.5 mr-0.5",
+				sm: "pr-2 mr-0.5",
+				xs: "pr-1.5 mr-0.5",
+				custom: ""
+			}
+		},
+		compoundVariants: [],
+		defaultVariants: {
+			intent: "primary",
+			size: "md"
+		}
+	}),
+	iconError: e("", {
+		variants: {
+			intent: { primary: "" },
+			error: {
+				true: "text-red-500 dark:text-red-400",
+				false: ""
+			}
+		},
+		compoundVariants: [],
+		defaultVariants: { intent: "primary" }
+	}),
+	iconClear: e("cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors duration-150"),
+	iconLoading: e("text-zinc-400 dark:text-zinc-500")
+};
+//#endregion
+export { n as default, t as variantKeys };

package/dist/components/Input/InputContainer.d.ts

@@ -0,0 +1,22 @@
+import { default as InputStyles, variantKeys } from './Input.styles';
+import { ErrorMessageProps } from '../ErrorMessage';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+import { HTMLAttributes, MouseEvent, ReactNode, RefObject } from 'react';
+export type InputContainerProps = {
+    ref?: RefObject<HTMLDivElement | null>;
+    id?: string;
+    label?: ReactNode;
+    error?: ErrorMessageProps['message'] | ErrorMessageProps['error'];
+    disabled?: boolean;
+    intent?: string;
+    size?: string;
+    prefix?: ReactNode;
+    children?: ReactNode;
+    loading?: boolean;
+    clearable?: boolean;
+    inline?: boolean;
+    value?: unknown;
+    onClear?: (e: MouseEvent) => void;
+} & Omit<useThemeSharedProps<typeof InputStyles, typeof variantKeys>, 'error'> & Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+declare const InputContainer: ({ ref, className, id, label, error, disabled, intent, size, prefix, children, loading, clearable, inline, value, onClear, ...otherProps }: InputContainerProps) => import("react/jsx-runtime").JSX.Element;
+export default InputContainer;

package/dist/components/Input/InputContainer.js

@@ -0,0 +1,109 @@
+import e from "../../hooks/useTheme/index.js";
+import t from "../Icon/index.js";
+import n from "../ErrorMessage/index.js";
+import r from "../Label/index.js";
+import { Children as i, cloneElement as a, isValidElement as o, useCallback as s, useMemo as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import d from "clsx";
+//#region src/components/Input/InputContainer.tsx
+var f = ({ ref: f, className: p, id: m, label: h, error: g, disabled: _, intent: v, size: y, prefix: b, children: x, loading: S, clearable: C, inline: w, value: T, onClear: E, ...D }) => {
+	let O = e("Input", {
+		className: p,
+		componentKey: [
+			"root",
+			"label",
+			"inputContainer",
+			"iconFloatingContainer",
+			"icon",
+			"iconError",
+			"iconClear"
+		],
+		variants: {
+			intent: v,
+			size: y,
+			disabled: _ || S,
+			error: !!g,
+			inline: w
+		}
+	}), k = s((e) => E?.(e), [E]), { iconChildren: A, inputChildren: j } = c(() => {
+		let e = {
+			iconChildren: void 0,
+			inputChildren: []
+		};
+		return i.forEach(x, (n) => {
+			if (o(n)) if (n.type === t) {
+				let t = n.props;
+				e.iconChildren = a(n, {
+					className: d(O.icon, t.className),
+					size: y,
+					...t,
+					intent: t.intent ?? "custom"
+				});
+			} else e.inputChildren.push(n);
+		}), e;
+	}, [
+		x,
+		O.icon,
+		y
+	]);
+	return /* @__PURE__ */ u("div", {
+		className: O.root,
+		ref: f,
+		...D,
+		children: [
+			h && !w && /* @__PURE__ */ l(r, {
+				error: !!g,
+				disabled: _,
+				intent: v,
+				size: y,
+				htmlFor: m,
+				className: O.label,
+				children: h
+			}),
+			/* @__PURE__ */ u("div", {
+				className: O.inputContainer,
+				children: [
+					A,
+					!!b && b,
+					!w && j,
+					w && /* @__PURE__ */ u(r, {
+						error: !!g,
+						disabled: _,
+						intent: v,
+						size: y,
+						htmlFor: m,
+						className: O.label,
+						children: [j, h]
+					}),
+					!_ && (!!g || S || C && !!T) && /* @__PURE__ */ u("div", {
+						className: O.iconFloatingContainer,
+						children: [
+							g && !S && /* @__PURE__ */ l(t, {
+								intent: "custom",
+								icon: "fa-solid fa-circle-exclamation",
+								className: O.iconError
+							}),
+							S && /* @__PURE__ */ l(t, {
+								icon: "fa-solid fa-sync fa-spin",
+								className: O.iconLoading
+							}),
+							!S && C && !!T && /* @__PURE__ */ l(t, {
+								className: O.iconClear,
+								icon: "fa-solid fa-xmark",
+								onClick: k
+							})
+						]
+					})
+				]
+			}),
+			g && /* @__PURE__ */ l(n, {
+				message: typeof g == "boolean" ? "" : g,
+				intent: v,
+				size: y,
+				error: !!g
+			})
+		]
+	});
+};
+//#endregion
+export { f as default };

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

@@ -0,0 +1,6 @@
+import { default as Input } from './Input';
+import { default as inputTheme } from './Input.styles';
+import { default as InputContainer } from './InputContainer';
+export * from './Input';
+export { inputTheme, InputContainer };
+export default Input;

package/dist/components/Input/index.js

@@ -0,0 +1,7 @@
+import e from "./InputContainer.js";
+import t from "./Input.js";
+import n from "./Input.styles.js";
+//#region src/components/Input/index.ts
+var r = t;
+//#endregion
+export { e as InputContainer, r as default, n as inputTheme };

package/dist/components/KVInput/KVInput.d.ts

@@ -0,0 +1,24 @@
+import { default as KVInputStyles, variantKeys } from './KVInput.styles';
+import { default as InputStyles } from '../Input/Input.styles';
+import { InputContainerProps } from '../Input/InputContainer';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+export type KVInputProps = {
+    id?: string;
+    value?: string[][] | [string, string][] | (string | string[])[][] | object;
+    disabled?: boolean;
+    required?: boolean;
+    clearable?: boolean;
+    allowAppend?: boolean;
+    allowRemove?: boolean;
+    allowKeyEdit?: boolean;
+    allowDuplicateKeys?: boolean;
+    keysAllowed?: {
+        label?: string;
+        value: string;
+    }[];
+    onChange?: (value: [string, string][], obj: {
+        [key: string]: string;
+    }) => void;
+} & Pick<InputContainerProps, 'label' | 'error'> & useThemeSharedProps<typeof KVInputStyles & typeof InputStyles, typeof variantKeys>;
+declare const KVInput: ({ className, id, size, value: valueProp, disabled, label, error, required, clearable, allowAppend, allowRemove, allowKeyEdit, allowDuplicateKeys, keysAllowed, onChange }: KVInputProps) => import("react/jsx-runtime").JSX.Element;
+export default KVInput;

package/dist/components/KVInput/KVInput.js

@@ -0,0 +1,77 @@
+import e from "../../hooks/useTheme/index.js";
+import t from "../Input/InputContainer.js";
+import { arrayToNestedObject as n, nestedObjectToArray as r, normalizeToFlatKV as i } from "./KVInputHelper.js";
+import a from "./KVInputItem.js";
+import { useCallback as o, useMemo as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/KVInput/KVInput.tsx
+var u = ({ className: u, id: d, size: f, value: p, disabled: m = !1, label: h, error: g, required: _ = !0, clearable: v = !1, allowAppend: y = !0, allowRemove: b = !0, allowKeyEdit: x = !0, allowDuplicateKeys: S = !1, keysAllowed: C, onChange: w }) => {
+	let T = e(["Input", "KVInput"], {
+		className: u,
+		variants: { size: f }
+	}), E = s(() => Array.isArray(p) ? i(p) : p && typeof p == "object" ? r(p, [], !0) : [], [p]), D = o((e, t, r, i) => {
+		if (!S) {
+			let n = E.some(([e], n) => e === t && n !== i);
+			if (t !== e && n) return {
+				success: !1,
+				errors: { valueKey: "Key already exists" }
+			};
+		}
+		let a;
+		a = e ? E.map((e, n) => n === i ? [t, r] : e) : [...E, [t, r]];
+		let o = n(a, S);
+		return w?.(a, o), { success: !0 };
+	}, [
+		E,
+		S,
+		w
+	]), O = o((e) => {
+		if (!b) return;
+		let t = E.filter((t, n) => n !== e), r = n(t.map(([e, t]) => [...e.split("."), t]));
+		w?.(t, r);
+	}, [
+		E,
+		b,
+		w
+	]);
+	return /* @__PURE__ */ c(t, {
+		className: T,
+		id: d,
+		label: h,
+		value: E,
+		disabled: m,
+		error: g,
+		size: f,
+		children: /* @__PURE__ */ l("div", {
+			className: "w-full flex flex-col",
+			children: [E.map(([e, t], n) => /* @__PURE__ */ c(a, {
+				className: u,
+				id: n,
+				valueKey: e,
+				value: t,
+				disabled: m,
+				size: f,
+				required: _,
+				clearable: v,
+				allowAppend: !1,
+				allowRemove: b,
+				allowKeyEdit: x,
+				keysAllowed: C,
+				onChange: D,
+				onRemove: O
+			}, `${n}-${e}-${t}`)), !m && y && /* @__PURE__ */ c(a, {
+				id: E.length,
+				className: u,
+				onChange: D,
+				size: f,
+				allowAppend: y,
+				allowRemove: !1,
+				allowKeyEdit: !0,
+				keysAllowed: C,
+				isNewRecord: !0
+			})]
+		})
+	});
+};
+//#endregion
+export { u as default };

package/dist/components/KVInput/KVInput.styles.d.ts

@@ -0,0 +1,16 @@
+export declare const variantKeys: {
+    readonly size: readonly ["md", "sm", "xs", "custom"];
+};
+export declare const STYLES_COMPONENT_NAME = "KVInput";
+declare const _default: {
+    item: (props?: ({
+        size?: "xs" | "md" | "sm" | "custom" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    itemActions: (props?: ({
+        size?: "xs" | "md" | "sm" | "custom" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    inputContainer: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+    rootInputContainer: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+    rootInput: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+};
+export default _default;