@plitzi/plitzi-ui 1.6.2

package/dist/components/KVInput/KVInput.styles.js

@@ -0,0 +1,30 @@
+import e from "../../helpers/cvaWrapper.js";
+import { variantKeys as t } from "../Input/Input.styles.js";
+t.size;
+var n = {
+	item: e("w-full flex gap-1 border border-gray-300 dark:border-zinc-700 p-1 [&:not(:first-child)]:border-t-0", {
+		variants: { size: {
+			md: "first:rounded-t-lg last:rounded-b-lg",
+			sm: "first:rounded-t last:rounded-b",
+			xs: "first:rounded-t-sm last:rounded-b-sm",
+			custom: ""
+		} },
+		compoundVariants: [],
+		defaultVariants: { size: "md" }
+	}),
+	itemActions: e("flex gap-1 items-center justify-center", {
+		variants: { size: {
+			md: "w-18",
+			sm: "w-14",
+			xs: "w-12",
+			custom: ""
+		} },
+		compoundVariants: [],
+		defaultVariants: { size: "md" }
+	}),
+	inputContainer: e("p-0 border-none"),
+	rootInputContainer: e(""),
+	rootInput: e("w-full")
+};
+//#endregion
+export { n as default };

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

@@ -0,0 +1,3 @@
+export declare const arrayToNestedObject: (arr: string[][], mergeDuplicates?: boolean) => Record<string, any>;
+export declare const nestedObjectToArray: (obj: Record<string, any>, prefix?: string[], useDot?: boolean) => string[][];
+export declare const normalizeToFlatKV: (arr: string[][] | (string | string[])[][]) => [string, string][];

package/dist/components/KVInput/KVInputHelper.js

@@ -0,0 +1,35 @@
+//#region src/components/KVInput/KVInputHelper.ts
+var e = (e, t = !1) => {
+	let n = {};
+	for (let r of e) {
+		let e;
+		if (e = r.length === 2 && r[0].includes(".") ? [...r[0].split("."), r[1]] : r, e.length < 2) continue;
+		let i = n;
+		for (let t = 0; t < e.length - 2; t++) {
+			let n = e[t];
+			(!i[n] || typeof i[n] != "object") && (i[n] = {}), i = i[n];
+		}
+		let a = e[e.length - 2], o = e[e.length - 1];
+		t ? i[a] === void 0 ? i[a] = o : Array.isArray(i[a]) ? i[a].push(o) : i[a] = [i[a], o] : i[a] = o;
+	}
+	return n;
+}, t = (e, n, r) => {
+	let i = [], a = n ?? [], o = r ?? n !== void 0;
+	for (let [n, r] of Object.entries(e)) if (r && typeof r == "object" && !Array.isArray(r)) i.push(...t(r, [...a, n], o));
+	else {
+		let e = [...a, n];
+		Array.isArray(r) ? r.forEach((t) => {
+			o ? i.push([e.join("."), String(t)]) : i.push([...e, String(t)]);
+		}) : o ? i.push([e.join("."), String(r)]) : i.push([...e, String(r)]);
+	}
+	return i;
+}, n = (e) => {
+	let t = [];
+	return e.forEach((e) => {
+		if (e.length < 2) return;
+		let n = e.slice(0, -1).join("."), r = e[e.length - 1];
+		Array.isArray(r) ? r.forEach((e) => t.push([n, e])) : t.push([n, r]);
+	}), t;
+};
+//#endregion
+export { e as arrayToNestedObject, t as nestedObjectToArray, n as normalizeToFlatKV };

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,28 @@
+import { default as KVInputStyles, variantKeys } from './KVInput.styles';
+import { default as InputStyles } from '../Input/Input.styles';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+export type KVInputItemProps = {
+    id: number;
+    valueKey?: string;
+    value?: string;
+    disabled?: boolean;
+    required?: boolean;
+    clearable?: boolean;
+    isNewRecord?: boolean;
+    allowAppend?: boolean;
+    allowRemove?: boolean;
+    allowKeyEdit?: boolean;
+    keysAllowed?: {
+        label?: string;
+        value: string;
+    }[];
+    onChange?: (originalKey: string, partialKey: string, partialValue: string, id: number) => {
+        success: boolean;
+        errors?: {
+            [key: string]: string;
+        };
+    };
+    onRemove?: (id: number) => void;
+} & useThemeSharedProps<typeof KVInputStyles & typeof InputStyles, typeof variantKeys>;
+declare const _default: import('react').MemoExoticComponent<({ id, className, valueKey, value, disabled, clearable, isNewRecord, size, required, allowAppend, allowRemove, allowKeyEdit, keysAllowed, onChange, onRemove }: KVInputItemProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/KVInput/KVInputItem.js

@@ -0,0 +1,168 @@
+import { omit as e } from "../../helpers/lodash/omit.js";
+import t from "../../hooks/useTheme/index.js";
+import n from "../Button/index.js";
+import r from "../Input/index.js";
+import i from "../Select/index.js";
+import { memo as a, useCallback as o, useMemo as s, useState as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+var f = a(({ id: a, className: f, valueKey: p = "", value: m = "", disabled: h = !1, clearable: g = !1, isNewRecord: _ = !1, size: v = "md", required: y = !0, allowAppend: b = !0, allowRemove: x = !0, allowKeyEdit: S = !0, keysAllowed: C, onChange: w, onRemove: T }) => {
+	let E = t(["Input", "KVInput"], {
+		className: f,
+		componentKey: [
+			"item",
+			"itemActions",
+			"input",
+			"rootInputContainer",
+			"rootInput"
+		],
+		variants: { size: v }
+	}), [D, O] = c(p), [k, A] = c(m), [j, M] = c(), N = s(() => !_ && (m !== k || p !== D), [
+		_,
+		m,
+		k,
+		p,
+		D
+	]), P = o((t) => {
+		j?.valueKey ? M(e(j, "valueKey")) : t === "" && M((e) => ({
+			...e,
+			valueKey: "Key is required"
+		})), O(t);
+	}, [j]), F = o((t) => {
+		j?.value ? M(e(j, "value")) : t === "" && y && M((e) => ({
+			...e,
+			value: "Value is required"
+		})), A(t);
+	}, [j, y]), I = o(() => T?.(a), [T, a]), L = o(() => {
+		M(void 0), O(p), A(m);
+	}, [p, m]), R = o(() => {
+		let e = {};
+		if (D || (e.valueKey = "Key is required"), !k && y && (e.value = "Value is required"), Object.keys(e).length) {
+			M(e);
+			return;
+		}
+		let t = w?.(p, D, k, a);
+		if (!t?.success && t?.errors) {
+			M(t.errors);
+			return;
+		}
+		M({}), _ && (O(""), A(""));
+	}, [
+		D,
+		k,
+		y,
+		w,
+		p,
+		a,
+		_
+	]), z = o(() => {
+		let e = w?.(p, D, "", a);
+		if (!e?.success && e?.errors) {
+			M(e.errors);
+			return;
+		}
+		M({});
+	}, [
+		a,
+		w,
+		D,
+		p
+	]);
+	return /* @__PURE__ */ d("div", {
+		className: E.item,
+		children: [/* @__PURE__ */ d("div", {
+			className: "flex grow basis-0 gap-2",
+			children: [
+				(!C || !C.length) && /* @__PURE__ */ u(r, {
+					size: v,
+					className: {
+						...E,
+						root: E.rootInput,
+						inputContainer: E.rootInputContainer
+					},
+					value: D,
+					disabled: h || !S,
+					required: !0,
+					error: j?.valueKey,
+					placeholder: "Key",
+					onChange: P
+				}),
+				C && C.length > 0 && /* @__PURE__ */ u(i, {
+					size: v,
+					className: {
+						...E,
+						root: E.rootInput,
+						inputContainer: E.rootInputContainer
+					},
+					value: D,
+					disabled: h || !S,
+					required: y,
+					placeholder: "Value",
+					error: j?.valueKey,
+					onChange: P,
+					children: C.map((e) => /* @__PURE__ */ u(i.Option, {
+						value: e.value,
+						children: e.label || e.value
+					}, e.value))
+				}),
+				/* @__PURE__ */ u(r, {
+					size: v,
+					className: {
+						...E,
+						root: E.rootInput,
+						inputContainer: E.rootInputContainer
+					},
+					value: k,
+					disabled: h,
+					required: y,
+					placeholder: "Value",
+					error: j?.value,
+					onChange: F
+				})
+			]
+		}), !h && (x || b && _ || N || g && !y && k) && /* @__PURE__ */ d("div", {
+			className: E.itemActions,
+			children: [
+				N && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(n, {
+					className: "basis-0 min-w-0 grow bg-green-500 hover:bg-green-400 text-white",
+					intent: "custom",
+					size: v,
+					title: "Save",
+					onClick: R,
+					children: /* @__PURE__ */ u(n.Icon, { icon: "fa-solid fa-check" })
+				}), /* @__PURE__ */ u(n, {
+					className: "basis-0 min-w-0 grow",
+					intent: "danger",
+					title: "Cancel",
+					size: v,
+					onClick: L,
+					children: /* @__PURE__ */ u(n.Icon, { icon: "fa-solid fa-xmark" })
+				})] }),
+				!_ && /* @__PURE__ */ d(l, { children: [!N && g && !y && k && /* @__PURE__ */ u(n, {
+					className: "basis-0 min-w-0 grow",
+					intent: "secondary",
+					title: "Clear",
+					size: v,
+					onClick: z,
+					children: /* @__PURE__ */ u(n.Icon, { icon: "fa-solid fa-eraser" })
+				}), !N && x && /* @__PURE__ */ u(n, {
+					className: "basis-0 min-w-0 grow",
+					intent: "danger",
+					title: "Remove",
+					size: v,
+					onClick: I,
+					children: /* @__PURE__ */ u(n.Icon, { icon: "fa-solid fa-trash" })
+				})] }),
+				b && _ && /* @__PURE__ */ u(n, {
+					className: "basis-0 min-w-0 grow",
+					intent: "primary",
+					title: "Add",
+					size: v,
+					onClick: R,
+					children: /* @__PURE__ */ u(n.Icon, { icon: "fa-solid fa-plus" })
+				})
+			]
+		})]
+	});
+});
+//#endregion
+export { f as default };

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

@@ -0,0 +1,6 @@
+import { default as KVInput } from './KVInput';
+import { default as kvInputTheme } from './KVInput.styles';
+export * from './KVInput';
+export * from './KVInputHelper';
+export { kvInputTheme };
+export default KVInput;

package/dist/components/KVInput/index.js

@@ -0,0 +1,7 @@
+import { arrayToNestedObject as e, nestedObjectToArray as t, normalizeToFlatKV as n } from "./KVInputHelper.js";
+import r from "./KVInput.js";
+import i from "./KVInput.styles.js";
+//#region src/components/KVInput/index.ts
+var a = r;
+//#endregion
+export { e as arrayToNestedObject, a as default, i as kvInputTheme, t as nestedObjectToArray, n as normalizeToFlatKV };

package/dist/components/Label/Label.d.ts

@@ -0,0 +1,10 @@
+import { default as LabelStyles, variantKeys } from './Label.styles';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+import { LabelHTMLAttributes, ReactNode } from 'react';
+export type LabelProps = {
+    children?: ReactNode;
+    disabled?: boolean;
+    error?: boolean;
+} & LabelHTMLAttributes<HTMLLabelElement> & useThemeSharedProps<typeof LabelStyles, typeof variantKeys>;
+declare const Label: ({ className, children, disabled, error, intent, size, ...labelProps }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export default Label;

package/dist/components/Label/Label.js

@@ -0,0 +1,19 @@
+import e from "../../hooks/useTheme/index.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/Label/Label.tsx
+var n = ({ className: n, children: r, disabled: i = !1, error: a = !1, intent: o, size: s, ...c }) => (n = e("Label", {
+	className: n,
+	componentKey: "root",
+	variants: {
+		intent: o,
+		size: s,
+		error: a,
+		disabled: i
+	}
+}), /* @__PURE__ */ t("label", {
+	className: n,
+	...c,
+	children: r
+}));
+//#endregion
+export { n as default };

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

@@ -0,0 +1,16 @@
+export declare const variantKeys: {
+    readonly intent: readonly ["primary", "error", "disabled", "custom"];
+    readonly size: readonly ["md", "sm", "xs", "custom"];
+    readonly disabled: readonly [true, false];
+    readonly error: readonly [true, false];
+};
+export declare const STYLES_COMPONENT_NAME = "Label";
+declare const _default: {
+    root: (props?: ({
+        intent?: "custom" | "error" | "primary" | "disabled" | 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;
+};
+export default _default;

package/dist/components/Label/Label.styles.js

@@ -0,0 +1,34 @@
+import e from "../../helpers/cvaWrapper.js";
+var t = { root: e("font-medium text-zinc-700 dark:text-zinc-300", {
+	variants: {
+		intent: {
+			primary: "",
+			disabled: "text-zinc-400 dark:text-zinc-500",
+			error: "text-red-600 dark:text-red-400",
+			custom: ""
+		},
+		error: {
+			true: "text-red-600 dark:text-red-400",
+			false: ""
+		},
+		disabled: {
+			true: "cursor-not-allowed text-zinc-400 dark:text-zinc-500",
+			false: ""
+		},
+		size: {
+			md: "text-sm",
+			sm: "text-sm",
+			xs: "text-xs",
+			custom: ""
+		}
+	},
+	compoundVariants: [],
+	defaultVariants: {
+		intent: "primary",
+		size: "md",
+		error: !1,
+		disabled: !1
+	}
+}) };
+//#endregion
+export { t as default };

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

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

package/dist/components/Label/index.js

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