@plitzi/plitzi-ui 1.6.2

package/dist/components/Provider/providers/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,28 @@
+import { cva } from 'class-variance-authority';
+import { ReactNode } from 'react';
+export type ColorMode = 'light' | 'dark';
+export type ColorModeDefaultValue = ColorMode | 'system';
+export type ThemeContextValue = {
+    theme: {
+        components: {
+            [componentName: string]: Record<string, ReturnType<typeof cva>>;
+        };
+    };
+    colorMode: ColorMode;
+    toggleColorMode: () => void;
+    setColorMode: (mode: ColorMode) => void;
+};
+declare const ThemeContext: import('react').Context<ThemeContextValue>;
+export type ThemeProviderProps = {
+    children: ReactNode;
+    components?: {
+        [componentName: string]: Record<string, ReturnType<typeof cva>>;
+    };
+    defaultColorMode?: ColorModeDefaultValue;
+    colorModeStorageKey?: string;
+    applyColorModeClass?: boolean;
+    colorModeRoot?: HTMLElement | null;
+};
+declare const ThemeProvider: ({ children, components, defaultColorMode, colorModeStorageKey, applyColorModeClass, colorModeRoot }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export { ThemeContext };
+export default ThemeProvider;

package/dist/components/Provider/providers/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,57 @@
+import e from "./helpers/resolveInitialColorMode.js";
+import { createContext as t, useCallback as n, useEffect as r, useMemo as i, useState as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+var s = t({
+	theme: { components: {} },
+	colorMode: "light",
+	toggleColorMode: () => {},
+	setColorMode: () => {}
+});
+s.displayName = "ThemeContext";
+var c = ({ children: t, components: c, defaultColorMode: l = "light", colorModeStorageKey: u, applyColorModeClass: d = !0, colorModeRoot: f }) => {
+	let p = l === "system", [m, h] = a(() => e(u, l));
+	r(() => {
+		if (!p || typeof window > "u") return;
+		let e = window.matchMedia("(prefers-color-scheme: dark)"), t = (e) => h(e.matches ? "dark" : "light");
+		return e.addEventListener("change", t), () => {
+			e.removeEventListener("change", t);
+		};
+	}, [p]), r(() => {
+		if (!d || typeof document > "u") return;
+		let e = f ?? document.documentElement;
+		m === "dark" ? e.classList.add("dark") : e.classList.remove("dark");
+	}, [
+		m,
+		d,
+		f
+	]);
+	let g = n(() => {
+		p || h((e) => {
+			let t = e === "dark" ? "light" : "dark";
+			if (u) try {
+				localStorage.setItem(u, t);
+			} catch {}
+			return t;
+		});
+	}, [p, u]), _ = n((e) => {
+		if (!p && (h(e), u)) try {
+			localStorage.setItem(u, e);
+		} catch {}
+	}, [p, u]);
+	return /* @__PURE__ */ o(s, {
+		value: i(() => ({
+			theme: { components: c && Object.keys(c).length > 0 ? c : {} },
+			colorMode: m,
+			toggleColorMode: g,
+			setColorMode: _
+		}), [
+			c,
+			m,
+			g,
+			_
+		]),
+		children: t
+	});
+};
+//#endregion
+export { s as ThemeContext, c as default };

package/dist/components/Provider/providers/ThemeProvider/helpers/getSystemColorMode.d.ts

@@ -0,0 +1,3 @@
+import { ColorMode } from '../ThemeProvider';
+declare const getSystemColorMode: () => ColorMode;
+export default getSystemColorMode;

package/dist/components/Provider/providers/ThemeProvider/helpers/getSystemColorMode.js

@@ -0,0 +1,11 @@
+//#region src/components/Provider/providers/ThemeProvider/helpers/getSystemColorMode.ts
+var e = () => {
+	if (typeof window > "u") return "light";
+	try {
+		return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+	} catch {
+		return "light";
+	}
+};
+//#endregion
+export { e as default };

package/dist/components/Provider/providers/ThemeProvider/helpers/resolveInitialColorMode.d.ts

@@ -0,0 +1,3 @@
+import { ColorMode, ColorModeDefaultValue } from '../ThemeProvider';
+declare const resolveInitialColorMode: (storageKey: string | undefined, defaultMode: ColorModeDefaultValue) => ColorMode;
+export default resolveInitialColorMode;

package/dist/components/Provider/providers/ThemeProvider/helpers/resolveInitialColorMode.js

@@ -0,0 +1,11 @@
+import e from "./getSystemColorMode.js";
+//#region src/components/Provider/providers/ThemeProvider/helpers/resolveInitialColorMode.ts
+var t = (t, n) => {
+	if (t && typeof localStorage < "u") try {
+		let e = localStorage.getItem(t);
+		if (e === "dark" || e === "light") return e;
+	} catch {}
+	return n === "system" ? e() : n;
+};
+//#endregion
+export { t as default };

package/dist/components/Provider/providers/ThemeProvider/index.d.ts

@@ -0,0 +1,3 @@
+import { default as ThemeProvider } from './ThemeProvider';
+export * from './ThemeProvider';
+export default ThemeProvider;

package/dist/components/Provider/providers/ThemeProvider/index.js

@@ -0,0 +1,5 @@
+import e, { ThemeContext as t } from "./ThemeProvider.js";
+//#region src/components/Provider/providers/ThemeProvider/index.ts
+var n = e;
+//#endregion
+export { t as ThemeContext, n as default };

package/dist/components/Provider/providers/index.d.ts

@@ -0,0 +1,3 @@
+import { default as ThemeProvider } from './ThemeProvider';
+export * from './ThemeProvider';
+export { ThemeProvider };

package/dist/components/Provider/providers/index.js

@@ -0,0 +1,10 @@
+import { __exportAll as e } from "../../../_virtual/_rolldown/runtime.js";
+import { ThemeContext as t } from "./ThemeProvider/ThemeProvider.js";
+import n from "./ThemeProvider/index.js";
+//#region src/components/Provider/providers/index.ts
+var r = /* @__PURE__ */ e({
+	ThemeContext: () => t,
+	ThemeProvider: () => n
+});
+//#endregion
+export { t as ThemeContext, n as ThemeProvider, r as providers_exports };

package/dist/components/QueryBuilder/GroupRules.d.ts

@@ -0,0 +1,14 @@
+import { Rule as TRule, RuleGroup } from './QueryBuilder';
+import { default as QueryBuilderStyles, variantKeys } from './QueryBuilder.styles';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+export type GroupRulesProps = {
+    className?: string;
+    id?: string;
+    rules?: (TRule | RuleGroup)[];
+    combinator?: 'and' | 'or';
+    enabled?: boolean;
+    showBranches?: boolean;
+    mainGroup?: boolean;
+} & useThemeSharedProps<typeof QueryBuilderStyles, typeof variantKeys>;
+declare const GroupRules: ({ className, id: groupId, rules, combinator, enabled, showBranches, mainGroup, direction, size, intent }: GroupRulesProps) => import("react/jsx-runtime").JSX.Element;
+export default GroupRules;

package/dist/components/QueryBuilder/GroupRules.js

@@ -0,0 +1,110 @@
+import e from "../../hooks/useTheme/index.js";
+import t from "../Flex/index.js";
+import n from "../Button/index.js";
+import r from "../Select/index.js";
+import i from "../Switch/index.js";
+import a from "./QueryBuilderContext.js";
+import o from "./Rule.js";
+import { use as s, useCallback as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/QueryBuilder/GroupRules.tsx
+var d = ({ className: f = "", id: p = "", rules: m, combinator: h = "and", enabled: g = !0, showBranches: _ = !1, mainGroup: v = !1, direction: y, size: b, intent: x }) => {
+	let S = e("QueryBuilder", {
+		className: f,
+		componentKey: [
+			"button",
+			"ruleGroup",
+			"ruleGroupHeader"
+		],
+		variants: {
+			size: b,
+			showBranches: _,
+			mainGroup: v,
+			direction: y,
+			intent: x
+		}
+	}), { addRule: C, addGroup: w, updateCombinator: T, updateEnabled: E, remove: D, allowDisableRules: O, allowSubGroups: k, combinators: A, error: j } = s(a), M = c(() => C(p), [C, p]), N = c(() => w(p), [w, p]), P = c((e) => T(p, e), [p, T]), F = c((e) => E(p, e.target.checked), [p, E]), I = c(() => D(p), [D, p]);
+	return /* @__PURE__ */ u("div", {
+		className: S.ruleGroup,
+		children: [/* @__PURE__ */ u(t, {
+			gap: 2,
+			items: "center",
+			className: S.ruleGroupHeader,
+			children: [
+				/* @__PURE__ */ l(r, {
+					value: h,
+					size: b,
+					onChange: P,
+					disabled: !m || m.length < 2 || A.length < 2,
+					error: j ? "Invalid Combinator" : void 0,
+					children: A.map((e) => /* @__PURE__ */ l("option", {
+						value: e.value,
+						children: e.label
+					}, e.value))
+				}),
+				/* @__PURE__ */ l(n, {
+					size: b,
+					className: S.button,
+					title: "+ Rule",
+					onClick: M,
+					children: "+ Rule"
+				}),
+				/* @__PURE__ */ l(n, {
+					size: b,
+					className: S.button,
+					title: "+ Group",
+					onClick: N,
+					disabled: !k,
+					children: "+ Group"
+				}),
+				!v && /* @__PURE__ */ l(n, {
+					size: b,
+					className: S.button,
+					intent: "danger",
+					onClick: I,
+					children: "X"
+				}),
+				O && /* @__PURE__ */ l("div", {
+					className: "flex items-center",
+					title: "Enable Group",
+					children: /* @__PURE__ */ l(i, {
+						size: b,
+						checked: g,
+						onChange: F
+					})
+				})
+			]
+		}), m && m.map((e, t) => {
+			let { id: n, enabled: r } = e;
+			if ("rules" in e) {
+				let { id: n, rules: r, combinator: i, enabled: a } = e;
+				return /* @__PURE__ */ l(d, {
+					id: n,
+					rules: r,
+					combinator: i,
+					enabled: a,
+					showBranches: _,
+					direction: y,
+					size: b,
+					intent: x
+				}, t);
+			}
+			let { field: i, operator: a, value: s, isBinding: c } = e;
+			return /* @__PURE__ */ l(o, {
+				id: n,
+				field: i,
+				operator: a,
+				value: s,
+				isBinding: c,
+				enabled: r,
+				size: b,
+				showBranches: _,
+				mainGroup: v,
+				direction: y,
+				intent: x
+			}, t);
+		})]
+	});
+};
+//#endregion
+export { d as default };

package/dist/components/QueryBuilder/QueryBuilder.d.ts

@@ -0,0 +1,57 @@
+import { default as QueryBuilderStyles, variantKeys } from './QueryBuilder.styles';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+export type RuleValue = Date | string | number | boolean | undefined | null | object;
+export type QueryBuilderParams = Record<string, RuleValue>;
+export type Combinator = 'and' | 'or';
+export type Operator = '' | '=' | '!=' | '<' | '>' | '<=' | '>=' | 'contains' | 'doesNotContain' | 'beginsWith' | 'doesNotBeginWith' | 'endsWith' | 'doesNotEndWith' | 'empty' | 'notEmpty' | 'in' | 'notIn' | 'between' | 'notBetween';
+export type RuleGroup = {
+    id?: string;
+    combinator: Combinator;
+    rules: (Rule | RuleGroup)[];
+    enabled?: boolean;
+};
+export type Rule = {
+    id?: string;
+    field: string;
+    operator: Operator;
+    enabled?: boolean;
+} & ({
+    isBinding: true;
+    value: string;
+} | {
+    isBinding?: false;
+    value: RuleValue;
+});
+export type Field = {
+    name: string;
+    label: string;
+    placeholder?: string;
+    defaultOperator?: Operator;
+    operators?: {
+        value: Operator;
+        label: string;
+    }[];
+    group?: string;
+    inputType?: 'checkbox' | 'radio' | 'multiselect' | 'select' | 'text' | 'number' | 'date' | 'time' | 'datetime' | 'textarea';
+    defaultValue?: RuleValue;
+    validator?: (value?: string | number | boolean) => boolean | string;
+    options?: {
+        value: RuleValue;
+        label: string;
+    }[];
+};
+export type QueryBuilderProps = {
+    query?: RuleGroup;
+    fields?: Record<string, Field>;
+    showBranches?: boolean;
+    allowDisableRules?: boolean;
+    allowSubGroups?: boolean;
+    combinators?: {
+        value: string;
+        label: string;
+    }[];
+    error?: boolean;
+    onChange?: (query: RuleGroup) => void;
+} & useThemeSharedProps<typeof QueryBuilderStyles, typeof variantKeys>;
+declare const QueryBuilder: ({ className, query, fields, showBranches, allowDisableRules, allowSubGroups, combinators, error, size, direction, intent, onChange }: QueryBuilderProps) => import("react/jsx-runtime").JSX.Element;
+export default QueryBuilder;

package/dist/components/QueryBuilder/QueryBuilder.js

@@ -0,0 +1,52 @@
+import { get as e } from "../../helpers/lodash/get.js";
+import t from "../../hooks/useTheme/index.js";
+import n from "../Flex/index.js";
+import { defaultCombinators as r } from "./helpers/QueryBuilderContants.js";
+import i from "./GroupRules.js";
+import a from "./QueryBuilderProvider.js";
+import { useMemo as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+import { v4 as c } from "uuid";
+//#region src/components/QueryBuilder/QueryBuilder.tsx
+var l = ({ className: l = "", query: u, fields: d, showBranches: f = !1, allowDisableRules: p = !0, allowSubGroups: m = !0, combinators: h = r, error: g = !1, size: _ = "xs", direction: v = "horizontal", intent: y = "primary", onChange: b }) => {
+	l = t("QueryBuilder", {
+		className: l,
+		componentKey: "root",
+		variants: {
+			size: _,
+			intent: y
+		}
+	});
+	let x = o(() => !u || !u.id ? {
+		id: c(),
+		combinator: e(h, "0.value", "and"),
+		rules: [],
+		enabled: !0
+	} : u, [u, h]), { id: S, combinator: C, enabled: w, rules: T } = x;
+	return /* @__PURE__ */ s(n, {
+		direction: "column",
+		className: l,
+		children: /* @__PURE__ */ s(a, {
+			query: x,
+			fields: d,
+			onChange: b,
+			allowDisableRules: p,
+			allowSubGroups: m,
+			combinators: h,
+			error: g,
+			children: /* @__PURE__ */ s(i, {
+				id: S,
+				combinator: C,
+				enabled: w,
+				rules: T,
+				showBranches: f,
+				mainGroup: !0,
+				direction: v,
+				size: _,
+				intent: y
+			})
+		})
+	});
+};
+//#endregion
+export { l as default };

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

@@ -0,0 +1,33 @@
+export declare const variantKeys: {
+    readonly intent: readonly ["primary", "gray"];
+    readonly size: readonly ["md", "sm", "xs", "custom"];
+    readonly disabled: readonly [true, false];
+    readonly error: readonly [true, false];
+    readonly mainGroup: readonly [true, false];
+    readonly showBranches: readonly [true, false];
+    readonly direction: readonly ["horizontal", "vertical"];
+};
+export declare const STYLES_COMPONENT_NAME = "QueryBuilder";
+declare const _default: {
+    root: (props?: ({
+        intent?: "primary" | null | undefined;
+        size?: "xs" | "md" | "sm" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    ruleGroup: (props?: ({
+        intent?: "primary" | "gray" | null | undefined;
+        mainGroup?: boolean | null | undefined;
+        showBranches?: boolean | null | undefined;
+        error?: boolean | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    ruleGroupHeader: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+    rule: (props?: ({
+        intent?: "primary" | "gray" | null | undefined;
+        direction?: "horizontal" | "vertical" | null | undefined;
+        showBranches?: boolean | null | undefined;
+        error?: boolean | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    ruleField: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+    ruleOperator: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+    button: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+};
+export default _default;

package/dist/components/QueryBuilder/QueryBuilder.styles.js

@@ -0,0 +1,117 @@
+import e from "../../helpers/cvaWrapper.js";
+var t = {
+	root: e("", {
+		variants: {
+			intent: { primary: "" },
+			size: {
+				md: "",
+				sm: "",
+				xs: ""
+			}
+		},
+		compoundVariants: [],
+		defaultVariants: {
+			intent: "primary",
+			size: "md"
+		}
+	}),
+	ruleGroup: e("flex flex-col p-2 border rounded-sm relative", {
+		variants: {
+			intent: {
+				primary: "bg-primary-500/20 border-gray-400 dark:border-zinc-700",
+				gray: "bg-grayviolet-200 dark:bg-zinc-700/50 border-gray-300 dark:border-zinc-700"
+			},
+			mainGroup: {
+				true: "",
+				false: "mt-2 ml-4"
+			},
+			showBranches: {
+				true: "before:top-[0px] before:h-[calc(50%_+_10px)]",
+				false: ""
+			},
+			error: {
+				true: "bg-red-500/20 border-red-400",
+				false: ""
+			}
+		},
+		compoundVariants: [
+			{
+				mainGroup: !1,
+				showBranches: !0,
+				className: ["before:absolute before:border-l before:border-b before:last:rounded-bl before:-translate-x-1/2 before:translate-y-[-10px] before:left-[-4px] before:w-2", "after:absolute after:border-l after:-translate-x-1/2 after:translate-y-[calc(100%_-_4px)] after:left-[-4px] after:w-2 last:after:border-none after:top-[0px] after:h-[calc(50%_+_4px)]"]
+			},
+			{
+				mainGroup: !1,
+				showBranches: !0,
+				intent: "primary",
+				className: ["before:border-gray-400 dark:before:border-zinc-700", "after:border-gray-400 dark:after:border-zinc-700"]
+			},
+			{
+				mainGroup: !1,
+				showBranches: !0,
+				intent: "gray",
+				className: ["before:border-gray-300 dark:before:border-zinc-700", "after:border-gray-300 dark:after:border-zinc-700"]
+			}
+		],
+		defaultVariants: {
+			intent: "primary",
+			mainGroup: !1,
+			showBranches: !1,
+			error: !1
+		}
+	}),
+	ruleGroupHeader: e(""),
+	rule: e("border p-1 rounded-sm ml-4 [&:not(:first-child)]:mt-3 relative", {
+		variants: {
+			intent: {
+				primary: "border-gray-400 dark:border-zinc-700",
+				gray: "border-gray-300 dark:border-zinc-700"
+			},
+			direction: {
+				horizontal: "items-center",
+				vertical: "flex-col"
+			},
+			showBranches: {
+				true: ["before:absolute before:border-l before:border-b before:last:rounded-sm-bl before:-translate-x-1/2 before:translate-y-[-0%] before:left-[-4px] before:w-2 before:top-[-13px] before:h-[calc(50%_+_13px)]", "after:absolute after:border-l after:-translate-x-1/2 after:translate-y-[calc(50%_+_3px)] after:left-[-4px] after:w-2 last:after:border-none"],
+				false: ""
+			},
+			error: {
+				true: "border-red-400",
+				false: ""
+			}
+		},
+		compoundVariants: [
+			{
+				showBranches: !0,
+				direction: "horizontal",
+				className: "after:top-[0px] after:h-[calc(50%_+_6px)]"
+			},
+			{
+				showBranches: !0,
+				direction: "vertical",
+				className: "after:top-[0px] after:h-[calc(50%_+_26px)]"
+			},
+			{
+				showBranches: !0,
+				intent: "primary",
+				className: ["before:border-gray-400 dark:before:border-zinc-700", "after:border-gray-400 dark:after:border-zinc-700"]
+			},
+			{
+				showBranches: !0,
+				intent: "gray",
+				className: ["before:border-gray-300 dark:before:border-zinc-700", "after:border-gray-300 dark:after:border-zinc-700"]
+			}
+		],
+		defaultVariants: {
+			intent: "primary",
+			direction: "horizontal",
+			showBranches: !1,
+			error: !1
+		}
+	}),
+	ruleField: e("min-w-0"),
+	ruleOperator: e("grow basis-0"),
+	button: e("truncate")
+};
+//#endregion
+export { t as default };

package/dist/components/QueryBuilder/QueryBuilderContext.d.ts

@@ -0,0 +1,21 @@
+import { Combinator, Field, Operator, Rule, RuleGroup, RuleValue } from './QueryBuilder';
+export type QueryBuilderContextValue = {
+    addGroup: (groupId: string) => void;
+    addRule: (groupId: string) => void;
+    update: (nodeId: string, rule: Partial<Rule | RuleGroup>) => void;
+    updateCombinator: (nodeId: string, combinator: Combinator) => void;
+    updateEnabled: (nodeId: string, isEnabled: boolean) => void;
+    updateRuleOperator: (nodeId: string, operator: Operator) => void;
+    updateRuleValue: (nodeId: string, value: RuleValue) => void;
+    remove: (nodeId: string) => void;
+    fields?: Record<string, Field>;
+    allowDisableRules?: boolean;
+    allowSubGroups?: boolean;
+    combinators: {
+        value: string;
+        label: string;
+    }[];
+    error?: boolean;
+};
+declare const QueryBuilderContext: import('react').Context<QueryBuilderContextValue>;
+export default QueryBuilderContext;

package/dist/components/QueryBuilder/QueryBuilderContext.js

@@ -0,0 +1,19 @@
+import { createContext as e } from "react";
+var t = e({
+	addGroup: () => {},
+	addRule: () => {},
+	update: () => {},
+	updateCombinator: () => {},
+	updateEnabled: () => {},
+	updateRuleOperator: () => {},
+	updateRuleValue: () => {},
+	remove: () => {},
+	fields: {},
+	allowDisableRules: !0,
+	allowSubGroups: !0,
+	combinators: [],
+	error: !1
+});
+t.displayName = "QueryBuilderContext";
+//#endregion
+export { t as default };

package/dist/components/QueryBuilder/QueryBuilderProvider.d.ts

@@ -0,0 +1,17 @@
+import { Field, QueryBuilderProps, RuleGroup } from './QueryBuilder';
+import { ReactNode } from 'react';
+export type QueryBuilderQueryProviderProps = {
+    children: ReactNode;
+    query: RuleGroup;
+    fields?: Record<string, Field>;
+    allowDisableRules: boolean;
+    allowSubGroups: boolean;
+    combinators: {
+        value: string;
+        label: string;
+    }[];
+    error?: boolean;
+    onChange?: QueryBuilderProps['onChange'];
+};
+declare const QueryBuilderProvider: ({ children, query, fields, allowDisableRules, allowSubGroups, combinators, error, onChange }: QueryBuilderQueryProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default QueryBuilderProvider;