@berenjena/react-dev-panel 1.0.4 → 2.0.0

package/dist/components/ControlRenderer/controls/ButtonGroupControl/ButtonGroupControl.d.ts

@@ -1,2 +1,37 @@
 import { ButtonGroupControlProps } from './types';
+/**
+ * Component that renders a group of related buttons in a horizontal layout
+ *
+ * @param props - The component props
+ * @param props.control - The button group control configuration object
+ * @param props.control.type - The control type, must be 'buttonGroup'
+ * @param props.control.buttons - Array of button configurations to render
+ * @param props.control.buttons[].label - The text label displayed on the button
+ * @param props.control.buttons[].onClick - Callback function triggered when button is clicked
+ * @param props.control.buttons[].disabled - Optional flag to disable individual buttons
+ * @returns JSX element representing a group of buttons
+ *
+ * @example
+ * ```typescript
+ * <ButtonGroupControl control={{
+ *   type: 'buttonGroup',
+ *   buttons: [
+ *     { label: 'Save', onClick: () => save() },
+ *     { label: 'Cancel', onClick: () => cancel() },
+ *     { label: 'Delete', onClick: () => delete(), disabled: true }
+ *   ]
+ * }} />
+ * ```
+ *
+ * @example
+ * ```typescript
+ * <ButtonGroupControl control={{
+ *   type: 'buttonGroup',
+ *   buttons: [
+ *     { label: 'Previous', onClick: () => goToPrevious() },
+ *     { label: 'Next', onClick: () => goToNext() }
+ *   ]
+ * }} />
+ * ```
+ */
 export declare function ButtonGroupControl({ control }: ButtonGroupControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ControlRenderer/controls/ButtonGroupControl/ButtonGroupControl.js

@@ -1,10 +1,10 @@
 import { jsx as t } from "react/jsx-runtime";
 import { ButtonControl as e } from "../ButtonControl/ButtonControl.js";
-import '../../../../assets/ButtonGroupControl.css';const l = "_buttonGroupContainer_99d3t_1", i = {
+import '../../../../assets/ButtonGroupControl.css';const l = "_buttonGroupContainer_1642u_132", u = {
   buttonGroupContainer: l
 };
 function p({ control: n }) {
-  return /* @__PURE__ */ t("div", { className: i.buttonGroupContainer, children: n.buttons.map((o, r) => /* @__PURE__ */ t(
+  return /* @__PURE__ */ t("div", { className: u.buttonGroupContainer, children: n.buttons.map((o, r) => /* @__PURE__ */ t(
     e,
     {
       control: {

package/dist/components/ControlRenderer/controls/ColorControl/ColorControl.d.ts

@@ -1,16 +1,23 @@
 import { ColorControlProps } from './types';
 /**
- * Component that renders a color control
- * @param control - The control to render
- * @returns The color control component
+ * Component that renders a color control with both visual color picker and text input
+ *
+ * @param props - The component props
+ * @param props.control - The color control configuration object
+ * @param props.control.type - The control type, must be 'color'
+ * @param props.control.value - The current color value (hex, rgb, hsl, or named color)
+ * @param props.control.onChange - Callback function triggered when color value changes
+ * @param props.control.disabled - Optional flag to disable the control
+ * @returns JSX element representing the color control with picker and text input
  *
  * @example
  * ```typescript
  * <ColorControl control={{
  *   type: 'color',
- *   value: '#000000',
- *   onChange: (value) => setValue(value)
- * }} />
+ *   value: '#ff0000',
+ *   onChange: (value) => setColor(value),
+ *   disabled: false
+ * }}/>
  * ```
  */
 export declare function ColorControl({ control }: ColorControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ControlRenderer/controls/ColorControl/ColorControl.js

@@ -1,27 +1,69 @@
-import { jsxs as r, jsx as n } from "react/jsx-runtime";
-import { Input as o } from "../../../Input/Input.js";
-import { useDebouncedCallback as d } from "../../../../hooks/useDebounceCallback/useDebounceCallback.js";
-import '../../../../assets/ColorControl.css';const s = "_container_ds1no_1", i = {
-  container: s
+import { jsxs as m, jsx as l } from "react/jsx-runtime";
+import { useState as v, useEffect as C } from "react";
+import { Input as p } from "../../../Input/Input.js";
+import { useDebouncedCallback as b } from "../../../../hooks/useDebounceCallback/useDebounceCallback.js";
+import '../../../../assets/ColorControl.css';const y = "_container_1oo6z_1", x = "_colorPreview_1oo6z_7", V = "_errorMessage_1oo6z_52", c = {
+  container: y,
+  colorPreview: x,
+  errorMessage: V
 };
-function C({ control: e }) {
-  const l = d(e.onChange, 100), t = (a) => {
-    l(a.target.value);
-  };
-  return /* @__PURE__ */ r("div", { className: i.container, children: [
-    /* @__PURE__ */ n("label", { children: /* @__PURE__ */ n(o, { type: "color", value: e.value, disabled: e.disabled, onChange: t }) }),
-    /* @__PURE__ */ n(
-      o,
+function P({ control: n }) {
+  const [r, o] = v(n.value), [s, i] = v(!0), u = b(n.onChange, 300);
+  function d(e) {
+    if (!e) return !1;
+    const t = document.createElement("div");
+    return t.style.color = e, t.style.color !== "";
+  }
+  function f(e) {
+    if (!e) return "#000000";
+    if (e.startsWith("#") && (e.length === 4 || e.length === 7))
+      return e.length === 4 ? `#${e[1]}${e[1]}${e[2]}${e[2]}${e[3]}${e[3]}` : e;
+    try {
+      const a = document.createElement("canvas").getContext("2d");
+      return a ? (a.fillStyle = e, a.fillStyle) : "#000000";
+    } catch {
+      return "#000000";
+    }
+  }
+  function g(e) {
+    const t = e.target.value;
+    o(t), i(!0), u(t);
+  }
+  function h(e) {
+    const t = e.target.value;
+    o(t);
+    const a = d(t);
+    i(a), (a || t === "") && u(t);
+  }
+  return C(() => {
+    o(n.value), i(d(n.value));
+  }, [n.value]), /* @__PURE__ */ m("div", { className: c.container, children: [
+    /* @__PURE__ */ l("div", { className: c.colorPreview, style: { backgroundColor: s ? r : "transparent" }, children: /* @__PURE__ */ l(
+      "input",
+      {
+        type: "color",
+        value: f(r),
+        disabled: n.disabled,
+        onChange: g,
+        title: "Open color picker"
+      }
+    ) }),
+    /* @__PURE__ */ l(
+      p,
       {
         type: "text",
-        value: e.value,
-        disabled: e.disabled,
-        onChange: (a) => e.onChange(a.target.value),
-        placeholder: "Enter color value"
+        value: r || "",
+        disabled: n.disabled,
+        onChange: h,
+        placeholder: "Enter color value (hex, rgb, hsl, named)",
+        style: {
+          borderColor: !s && r ? "var(--dev-panel-danger-color)" : void 0
+        }
       }
-    )
+    ),
+    !s && r && /* @__PURE__ */ l("div", { className: c.errorMessage, children: "Invalid color format" })
   ] });
 }
 export {
-  C as ColorControl
+  P as ColorControl
 };

package/dist/components/ControlRenderer/controls/ColorControl/types.d.ts

@@ -3,6 +3,20 @@ export interface ColorControl extends BaseControl {
 	type: "color";
 	value: string;
 	onChange: (value: string) => void;
+	/**
+	 * Format to display/parse colors
+	 * @default "any" - Accepts any valid CSS color format
+	 */
+	format?: "hex" | "rgb" | "hsl" | "any";
+	/**
+	 * Predefined color palette for quick selection
+	 */
+	presets?: string[];
+	/**
+	 * Allow transparency/alpha values
+	 * @default false
+	 */
+	allowAlpha?: boolean;
 }
 
 export interface ColorControlProps {

package/dist/components/ControlRenderer/controls/DateControl/DateControl.d.ts

@@ -1,9 +1,17 @@
 import { DateControlProps } from './types';
 /**
  * Component that renders a date control with configurable event handling
- * @param control - The control to render
- * @param control.event - When to trigger onChange: "onChange" (real-time) or "onBlur" (on focus loss). Defaults to "onBlur"
- * @returns The date control component
+ *
+ * @param props - The component props
+ * @param props.control - The date control configuration object
+ * @param props.control.type - The control type, must be 'date'
+ * @param props.control.value - The current date value in ISO format (YYYY-MM-DD)
+ * @param props.control.min - Optional minimum allowed date in ISO format
+ * @param props.control.max - Optional maximum allowed date in ISO format
+ * @param props.control.event - When to trigger onChange: "onChange" (real-time) or "onBlur" (on focus loss). Defaults to "onBlur"
+ * @param props.control.onChange - Callback function triggered when date value changes
+ * @param props.control.disabled - Optional flag to disable the control
+ * @returns JSX element representing the date input control
  *
  * @example
  * ```typescript
@@ -14,15 +22,19 @@ import { DateControlProps } from './types';
  *   min: '2025-01-01',
  *   max: '2025-12-31',
  *   event: 'onChange',
- *   onChange: (value) => setValue(value)
+ *   onChange: (value) => setSelectedDate(value),
+ *   disabled: false
  * }} />
+ * ```
  *
+ * @example
+ * ```typescript
  * // Updates only when losing focus (default)
  * <DateControl control={{
  *   type: 'date',
  *   value: '2025-07-26',
  *   event: 'onBlur',
- *   onChange: (value) => setValue(value)
+ *   onChange: (value) => console.log('Date changed:', value)
  * }} />
  * ```
  */

package/dist/components/ControlRenderer/controls/DateControl/DateControl.js

@@ -1,28 +1,28 @@
 import { jsx as m } from "react/jsx-runtime";
-import { useState as o, useEffect as r } from "react";
-import { Input as f } from "../../../Input/Input.js";
+import { useState as o, useEffect as s } from "react";
+import { Input as r } from "../../../Input/Input.js";
 function h({ control: e }) {
   const n = e.event || "onBlur", [l, t] = o(e.value);
-  r(() => {
-    t(e.value);
-  }, [e.value]);
-  const s = (u) => {
+  function i(u) {
     const a = u.target.value;
     t(a), n === "onChange" && e.onChange(a);
-  }, i = (u) => {
+  }
+  function f(u) {
     const a = u.target.value;
     n === "onBlur" && e.onChange(a);
-  };
-  return /* @__PURE__ */ m(
-    f,
+  }
+  return s(() => {
+    t(e.value);
+  }, [e.value]), /* @__PURE__ */ m(
+    r,
     {
       type: "date",
       value: l,
       min: e.min,
       max: e.max,
       disabled: e.disabled,
-      onChange: s,
-      ...n === "onBlur" && { onBlur: i }
+      onChange: i,
+      ...n === "onBlur" && { onBlur: f }
     }
   );
 }

package/dist/components/ControlRenderer/controls/MultiSelectControl/MultiSelectControl.d.ts

@@ -0,0 +1,28 @@
+import { MultiSelectControlProps } from './types';
+/**
+ * Component that renders a multi-select control with checkbox options
+ *
+ * @param props - The component props
+ * @param props.control - The multi-select control configuration object
+ * @param props.control.type - The control type, must be 'multiselect'
+ * @param props.control.value - Array of currently selected option values
+ * @param props.control.options - Array of available options (strings or objects with label/value)
+ * @param props.control.onChange - Callback function triggered when selection changes
+ * @param props.control.disabled - Optional flag to disable the control
+ * @returns JSX element representing the multi-select control
+ *
+ * @example
+ * ```typescript
+ * <MultiSelectControl control={{
+ *   type: 'multiselect',
+ *   value: ['red', 'blue'],
+ *   options: [
+ *     { label: 'Red Color', value: 'red' },
+ *     { label: 'Blue Color', value: 'blue' },
+ *     { label: 'Green Color', value: 'green' }
+ *   ],
+ *   onChange: (values) => setSelectedColors(values)
+ * }} />
+ * ```
+ */
+export declare function MultiSelectControl({ control }: MultiSelectControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ControlRenderer/controls/MultiSelectControl/MultiSelectControl.js

@@ -0,0 +1,131 @@
+import { jsxs as f, Fragment as O, jsx as r } from "react/jsx-runtime";
+import { useState as y, useRef as _, useCallback as R, useEffect as v } from "react";
+import { createPortal as S } from "react-dom";
+import { Icon as N } from "../../../Icon/index.js";
+import "../../../../store/SectionsStore.js";
+import "../../../../store/ThemeStore.js";
+import { useDevPanelPosition as z } from "../../../../store/UIStore.js";
+import { className as B } from "../../../../utils/className/className.js";
+import '../../../../assets/MultiSelectControl.css';const I = "_multiselect_1agkw_1", $ = "_trigger_1agkw_6", j = "_open_1agkw_36", A = "_value_1agkw_40", T = "_arrow_1agkw_53", V = "_dropdownPortal_1agkw_68", W = "_dropdown_1agkw_68", q = "_option_1agkw_115", F = "_disabled_1agkw_127", U = "_checkbox_1agkw_134", G = "_checkmark_1agkw_139", J = "_label_1agkw_170", n = {
+  multiselect: I,
+  trigger: $,
+  open: j,
+  value: A,
+  arrow: T,
+  dropdownPortal: V,
+  dropdown: W,
+  option: q,
+  disabled: F,
+  checkbox: U,
+  checkmark: G,
+  label: J
+};
+function oe({ control: t }) {
+  const c = z(), [a, u] = y(!1), [d, b] = y({
+    top: 0,
+    left: 0,
+    width: 0,
+    maxHeight: 200
+  }), p = _(null), w = _(null), k = _(null), s = R(() => {
+    a && b(x());
+  }, [a]);
+  function x() {
+    if (!w.current)
+      return { top: 0, left: 0, width: 0, maxHeight: 200 };
+    const e = w.current.getBoundingClientRect(), i = window.innerHeight, o = window.innerWidth, l = 200, m = 4, g = i - e.bottom - m, h = e.top - m, P = g < l && h > g, H = P ? e.top - Math.min(l, h) : e.bottom + m, D = Math.max(8, Math.min(e.left, o - e.width - 8)), M = P ? Math.min(l, h) : Math.min(l, g);
+    return {
+      top: H,
+      left: D,
+      width: e.width,
+      maxHeight: M
+    };
+  }
+  function L(e) {
+    const i = t.value.includes(e) ? t.value.filter((o) => o !== e) : [...t.value, e];
+    t.onChange(i);
+  }
+  function C() {
+    if (t.value.length === 0)
+      return "Select options...";
+    if (t.value.length === 1) {
+      const e = t.options.find((o) => (typeof o == "string" ? o : o.value) === t.value[0]);
+      return (typeof e == "string" ? e : e?.label) || t.value[0];
+    }
+    return `${t.value.length} selected`;
+  }
+  function E() {
+    t.disabled || (a ? u(!1) : (b(x()), u(!0)));
+  }
+  return v(() => {
+    if (a)
+      return s(), window.addEventListener("resize", s), window.addEventListener("scroll", s, !0), () => {
+        window.removeEventListener("resize", s), window.removeEventListener("scroll", s, !0);
+      };
+  }, [a, s]), v(() => {
+    const e = k.current;
+    (!e || e.x !== c.x || e.y !== c.y) && (k.current = c, s());
+  }, [c, s]), v(() => {
+    function e(i) {
+      if (p.current && !p.current.contains(i.target)) {
+        const o = document.querySelector(`.${n.dropdownPortal}`);
+        if (o && o.contains(i.target))
+          return;
+        u(!1);
+      }
+    }
+    return document.addEventListener("mousedown", e), () => {
+      document.removeEventListener("mousedown", e);
+    };
+  }, []), /* @__PURE__ */ f(O, { children: [
+    /* @__PURE__ */ r(
+      "div",
+      {
+        ref: p,
+        ...B(n.multiselect, {
+          [n.disabled]: !!t.disabled,
+          [n.open]: a
+        }),
+        children: /* @__PURE__ */ f("button", { ref: w, type: "button", className: n.trigger, onClick: E, disabled: t.disabled, children: [
+          /* @__PURE__ */ r("span", { className: n.value, children: C() }),
+          /* @__PURE__ */ r(N, { name: "ArrowDown", className: n.arrow })
+        ] })
+      }
+    ),
+    typeof window < "u" && S(
+      a && !t.disabled && /* @__PURE__ */ r(
+        "div",
+        {
+          className: `${n.dropdownPortal}`,
+          style: {
+            position: "fixed",
+            top: d.top,
+            left: d.left,
+            width: d.width,
+            maxHeight: d.maxHeight,
+            zIndex: 9999
+          },
+          children: /* @__PURE__ */ r("div", { className: n.dropdown, children: t.options.map((e) => {
+            const i = typeof e == "string" ? e : e.value, o = typeof e == "string" ? e : e.label, l = t.value.includes(i);
+            return /* @__PURE__ */ f("label", { className: n.option, children: [
+              /* @__PURE__ */ r(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: l,
+                  onChange: () => L(i),
+                  className: n.checkbox
+                }
+              ),
+              /* @__PURE__ */ r(N, { name: "Check", className: n.checkmark }),
+              /* @__PURE__ */ r("span", { className: n.label, children: o })
+            ] }, i);
+          }) })
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+export {
+  oe as MultiSelectControl
+};

package/dist/components/ControlRenderer/controls/MultiSelectControl/index.d.ts

@@ -0,0 +1 @@
+export * from './MultiSelectControl';

package/dist/components/ControlRenderer/controls/MultiSelectControl/index.js

@@ -0,0 +1,4 @@
+import { MultiSelectControl as e } from "./MultiSelectControl.js";
+export {
+  e as MultiSelectControl
+};

package/dist/components/ControlRenderer/controls/MultiSelectControl/types.d.ts

@@ -0,0 +1,11 @@
+import { BaseControl } from '../types';
+export interface MultiSelectControl extends BaseControl {
+	type: "multiselect";
+	value: string[];
+	options: string[] | { label: string; value: string }[];
+	onChange: (value: string[]) => void;
+}
+
+export interface MultiSelectControlProps {
+	control: MultiSelectControl;
+}

package/dist/components/ControlRenderer/controls/NumberControl/NumberControl.d.ts

@@ -1,29 +1,44 @@
 import { NumberControlProps } from './types';
 /**
  * Component that renders a number control with configurable event handling
- * @param control - The control to render
- * @param control.event - When to trigger onChange: "onChange" (real-time) or "onBlur" (on focus loss). Defaults to "onBlur"
- * @returns The number control component
+ *
+ * @param props - The component props
+ * @param props.control - The number control configuration object
+ * @param props.control.type - The control type, must be 'number'
+ * @param props.control.value - The current numeric value
+ * @param props.control.min - Optional minimum allowed value
+ * @param props.control.max - Optional maximum allowed value
+ * @param props.control.step - Optional step increment for the number input (defaults to 1)
+ * @param props.control.event - When to trigger onChange: "onChange" (real-time) or "onBlur" (on focus loss). Defaults to "onChange"
+ * @param props.control.onChange - Callback function triggered when numeric value changes
+ * @param props.control.disabled - Optional flag to disable the control
+ * @returns JSX element representing the number input control
  *
  * @example
  * ```typescript
- * // Real-time updates
+ * // Real-time updates with constraints
  * <NumberControl control={{
  *   type: 'number',
- *   value: 10,
+ *   value: 50,
  *   min: 0,
  *   max: 100,
- *   step: 1,
+ *   step: 5,
  *   event: 'onChange',
- *   onChange: (value) => setValue(value)
+ *   onChange: (value) => setProgress(value),
+ *   disabled: false
  * }} />
+ * ```
  *
- * // Updates only when losing focus (default behavior)
+ * @example
+ * ```typescript
+ * // Updates only when losing focus
  * <NumberControl control={{
  *   type: 'number',
- *   value: 10,
- *   event: 'onBlur', // or omit for default
- *   onChange: (value) => setValue(value)
+ *   value: 42,
+ *   min: 1,
+ *   step: 0.1,
+ *   event: 'onBlur',
+ *   onChange: (value) => console.log('Value changed:', value)
  * }} />
  * ```
  */

package/dist/components/ControlRenderer/controls/NumberControl/NumberControl.js

@@ -1,20 +1,20 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useState as i, useEffect as p } from "react";
-import { Input as f } from "../../../Input/Input.js";
+import { jsx as s } from "react/jsx-runtime";
+import { useState as r, useEffect as f } from "react";
+import { Input as p } from "../../../Input/Input.js";
 function v({ control: e }) {
-  const n = e.event || "onChange", [m, t] = i(e.value);
-  p(() => {
-    t(e.value);
-  }, [e.value]);
-  const s = (u) => {
+  const n = e.event || "onChange", [m, t] = r(e.value);
+  function l(u) {
     const a = Number(u.target.value);
     t(a), n === "onChange" && e.onChange(a);
-  }, l = (u) => {
+  }
+  function i(u) {
     const a = Number(u.target.value);
     n === "onBlur" && e.onChange(a);
-  };
-  return /* @__PURE__ */ r(
-    f,
+  }
+  return f(() => {
+    t(e.value);
+  }, [e.value]), /* @__PURE__ */ s(
+    p,
     {
       type: "number",
       value: m,
@@ -22,8 +22,8 @@ function v({ control: e }) {
       max: e.max,
       step: e.step,
       disabled: e.disabled,
-      onChange: s,
-      ...n === "onBlur" && { onBlur: l }
+      onChange: l,
+      ...n === "onBlur" && { onBlur: i }
     }
   );
 }

package/dist/components/ControlRenderer/controls/RangeControl/RangeControl.d.ts

@@ -1,29 +1,45 @@
 import { RangeControlProps } from './types';
 /**
- * Component that renders a range/slider control with configurable event handling
- * @param control - The control to render
- * @param control.event - When to trigger onChange: "onChange" (real-time) or "onBlur" (on focus loss). Defaults to "onChange"
- * @returns The range control component
+ * Component that renders a range/slider control with configurable event handling and visual value display
+ *
+ * @param props - The component props
+ * @param props.control - The range control configuration object
+ * @param props.control.type - The control type, must be 'range'
+ * @param props.control.value - The current numeric value of the slider
+ * @param props.control.min - Optional minimum allowed value (defaults to 0)
+ * @param props.control.max - Optional maximum allowed value (defaults to 100)
+ * @param props.control.step - Optional step increment for the slider (defaults to 1)
+ * @param props.control.event - When to trigger onChange: "onChange" (real-time) or "onBlur" (on focus loss). Defaults to "onChange"
+ * @param props.control.onChange - Callback function triggered when slider value changes
+ * @param props.control.disabled - Optional flag to disable the control
+ * @returns JSX element representing the range slider control with value display
  *
  * @example
  * ```typescript
- * // Real-time updates (default)
+ * // Real-time updates with custom range (default behavior)
  * <RangeControl control={{
  *   type: 'range',
- *   value: 50,
+ *   value: 75,
  *   min: 0,
  *   max: 100,
- *   step: 1,
+ *   step: 5,
  *   event: 'onChange',
- *   onChange: (value) => setValue(value)
+ *   onChange: (value) => setVolume(value),
+ *   disabled: false
  * }} />
+ * ```
  *
- * // Updates only when losing focus
+ * @example
+ * ```typescript
+ * // Updates only when losing focus with decimal steps
  * <RangeControl control={{
  *   type: 'range',
- *   value: 50,
+ *   value: 2.5,
+ *   min: 0,
+ *   max: 5,
+ *   step: 0.1,
  *   event: 'onBlur',
- *   onChange: (value) => setValue(value)
+ *   onChange: (value) => console.log('Rating changed:', value)
  * }} />
  * ```
  */