@berenjena/react-dev-panel 1.0.4 → 2.1.0

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

@@ -1 +1,37 @@
-export * from './ButtonGroupControl';
+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): React.ReactNode;

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

@@ -1,4 +1,22 @@
-import { ButtonGroupControl as t } from "./ButtonGroupControl.js";
+import { jsx as t } from "react/jsx-runtime";
+import { ButtonControl as e } from "../ButtonControl/index.js";
+import '../../../../assets/index11.css';const i = "_buttonGroupContainer_1irhu_217", l = {
+  buttonGroupContainer: i
+};
+function p({ control: n }) {
+  return /* @__PURE__ */ t("div", { className: l.buttonGroupContainer, children: n.buttons.map((o, r) => /* @__PURE__ */ t(
+    e,
+    {
+      control: {
+        type: "button",
+        label: o.label,
+        onClick: o.onClick,
+        disabled: o.disabled
+      }
+    },
+    r
+  )) });
+}
 export {
-  t as ButtonGroupControl
+  p as ButtonGroupControl
 };

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

@@ -1 +1,23 @@
-export * from './ColorControl';
+import { ColorControlProps } from './types';
+/**
+ * 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: '#ff0000',
+ *   onChange: (value) => setColor(value),
+ *   disabled: false
+ * }}/>
+ * ```
+ */
+export declare function ColorControl({ control }: ColorControlProps): React.ReactNode;

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

@@ -1,4 +1,69 @@
-import { ColorControl as l } from "./ColorControl.js";
+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/index.js";
+import { useDebouncedCallback as b } from "../../../../hooks/useDebounceCallback/index.js";
+import '../../../../assets/index10.css';const y = "_container_1oo6z_1", x = "_colorPreview_1oo6z_7", V = "_errorMessage_1oo6z_52", c = {
+  container: y,
+  colorPreview: x,
+  errorMessage: V
+};
+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: 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 {
-  l 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/index.d.ts

@@ -1 +1,41 @@
-export * from './DateControl';
+import { DateControlProps } from './types';
+/**
+ * Component that renders a date control with configurable event handling
+ *
+ * @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
+ * // Real-time updates
+ * <DateControl control={{
+ *   type: 'date',
+ *   value: '2025-07-26',
+ *   min: '2025-01-01',
+ *   max: '2025-12-31',
+ *   event: 'onChange',
+ *   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) => console.log('Date changed:', value)
+ * }} />
+ * ```
+ */
+export declare function DateControl({ control }: DateControlProps): React.ReactNode;

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

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

package/dist/components/ControlRenderer/controls/MultiSelectControl/index.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): React.ReactNode;

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

@@ -0,0 +1,18 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Select as i } from "../../../Select/index.js";
+function p({ control: e }) {
+  return /* @__PURE__ */ o(
+    i,
+    {
+      multiple: !0,
+      value: e.value,
+      options: e.options,
+      disabled: e.disabled,
+      placeholder: "Select options...",
+      onChange: (t) => e.onChange(t)
+    }
+  );
+}
+export {
+  p 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/index.d.ts

@@ -1 +1,45 @@
-export * from './NumberControl';
+import { NumberControlProps } from './types';
+/**
+ * Component that renders a number control with configurable event handling
+ *
+ * @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 with constraints
+ * <NumberControl control={{
+ *   type: 'number',
+ *   value: 50,
+ *   min: 0,
+ *   max: 100,
+ *   step: 5,
+ *   event: 'onChange',
+ *   onChange: (value) => setProgress(value),
+ *   disabled: false
+ * }} />
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Updates only when losing focus
+ * <NumberControl control={{
+ *   type: 'number',
+ *   value: 42,
+ *   min: 1,
+ *   step: 0.1,
+ *   event: 'onBlur',
+ *   onChange: (value) => console.log('Value changed:', value)
+ * }} />
+ * ```
+ */
+export declare function NumberControl({ control }: NumberControlProps): React.ReactNode;

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

@@ -1,4 +1,32 @@
-import { NumberControl as e } from "./NumberControl.js";
+import { jsx as s } from "react/jsx-runtime";
+import { useState as r, useEffect as f } from "react";
+import { Input as p } from "../../../Input/index.js";
+function v({ control: e }) {
+  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);
+  }
+  function i(u) {
+    const a = Number(u.target.value);
+    n === "onBlur" && e.onChange(a);
+  }
+  return f(() => {
+    t(e.value);
+  }, [e.value]), /* @__PURE__ */ s(
+    p,
+    {
+      type: "number",
+      value: m,
+      min: e.min,
+      max: e.max,
+      step: e.step,
+      disabled: e.disabled,
+      onChange: l,
+      ...n === "onBlur" && { onBlur: i }
+    }
+  );
+}
 export {
-  e as NumberControl
+  v as NumberControl
 };

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

@@ -1 +1,46 @@
-export * from './RangeControl';
+import { RangeControlProps } from './types';
+/**
+ * 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 with custom range (default behavior)
+ * <RangeControl control={{
+ *   type: 'range',
+ *   value: 75,
+ *   min: 0,
+ *   max: 100,
+ *   step: 5,
+ *   event: 'onChange',
+ *   onChange: (value) => setVolume(value),
+ *   disabled: false
+ * }} />
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Updates only when losing focus with decimal steps
+ * <RangeControl control={{
+ *   type: 'range',
+ *   value: 2.5,
+ *   min: 0,
+ *   max: 5,
+ *   step: 0.1,
+ *   event: 'onBlur',
+ *   onChange: (value) => console.log('Rating changed:', value)
+ * }} />
+ * ```
+ */
+export declare function RangeControl({ control }: RangeControlProps): React.ReactNode;

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

@@ -1,4 +1,40 @@
-import { RangeControl as e } from "./RangeControl.js";
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import { useState as o, useEffect as m } from "react";
+import '../../../../assets/index9.css';const v = "_container_1a1cs_1", h = "_range_1a1cs_9", d = "_value_1a1cs_115", u = {
+  container: v,
+  range: h,
+  value: d
+};
+function _({ control: e }) {
+  const n = e.event || "onChange", [t, l] = o(e.value);
+  function r(s) {
+    const a = Number(s.target.value);
+    l(a), n === "onChange" && e.onChange(a);
+  }
+  function c(s) {
+    const a = Number(s.target.value);
+    n === "onBlur" && e.onChange(a);
+  }
+  return m(() => {
+    l(e.value);
+  }, [e.value]), /* @__PURE__ */ g("div", { className: u.container, children: [
+    /* @__PURE__ */ i(
+      "input",
+      {
+        type: "range",
+        value: t,
+        min: e.min,
+        max: e.max,
+        step: e.step,
+        disabled: e.disabled,
+        onChange: r,
+        ...n === "onBlur" && { onBlur: c },
+        className: u.range
+      }
+    ),
+    /* @__PURE__ */ i("span", { className: u.value, children: t })
+  ] });
+}
 export {
-  e as RangeControl
+  _ as RangeControl
 };

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

@@ -1 +1,39 @@
-export * from './SelectControl';
+import { SelectControlProps } from './types';
+/**
+ * Component that renders a dropdown select control with single selection
+ *
+ * @param props - The component props
+ * @param props.control - The select control configuration object
+ * @param props.control.type - The control type, must be 'select'
+ * @param props.control.value - The currently selected option value
+ * @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 a dropdown select control
+ *
+ * @example
+ * ```typescript
+ * <SelectControl control={{
+ *   type: 'select',
+ *   value: 'medium',
+ *   options: ['small', 'medium', 'large'],
+ *   onChange: (value) => setSize(value),
+ *   disabled: false
+ * }} />
+ * ```
+ *
+ * @example
+ * ```typescript
+ * <SelectControl control={{
+ *   type: 'select',
+ *   value: 'red',
+ *   options: [
+ *     { label: 'Red Color', value: 'red' },
+ *     { label: 'Blue Color', value: 'blue' },
+ *     { label: 'Green Color', value: 'green' }
+ *   ],
+ *   onChange: (value) => console.log('Selected:', value)
+ * }} />
+ * ```
+ */
+export declare function SelectControl({ control }: SelectControlProps): React.ReactNode;

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

@@ -1,4 +1,8 @@
-import { SelectControl as r } from "./SelectControl.js";
+import { jsx as i } from "react/jsx-runtime";
+import { Select as n } from "../../../Select/index.js";
+function p({ control: e }) {
+  return /* @__PURE__ */ i(n, { value: e.value, options: e.options, disabled: e.disabled, onChange: (o) => e.onChange(o) });
+}
 export {
-  r as SelectControl
+  p as SelectControl
 };

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

@@ -1 +1,39 @@
-export * from './SeparatorControl';
+import { SeparatorControlProps } from './types';
+/**
+ * Component that renders a visual separator to organize control groups
+ *
+ * @param props - The component props
+ * @param props.control - The separator control configuration object
+ * @param props.control.type - The control type, must be 'separator'
+ * @param props.control.style - The style of separator: "line" (default), "space", or "label"
+ * @param props.control.label - Optional label text (only displayed when style is "label")
+ * @returns JSX element representing a visual separator
+ *
+ * @example
+ * ```typescript
+ * // Simple line separator (default)
+ * <SeparatorControl control={{
+ *   type: 'separator'
+ * }} />
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Separator with label text
+ * <SeparatorControl control={{
+ *   type: 'separator',
+ *   style: 'label',
+ *   label: 'Advanced Settings'
+ * }} />
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Space separator for extra spacing
+ * <SeparatorControl control={{
+ *   type: 'separator',
+ *   style: 'space'
+ * }} />
+ * ```
+ */
+export declare function SeparatorControl({ control }: SeparatorControlProps): React.ReactNode;

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

@@ -1,4 +1,14 @@
-import { SeparatorControl as t } from "./SeparatorControl.js";
+import { jsx as e } from "react/jsx-runtime";
+import '../../../../assets/index8.css';const s = "_line_174q4_1", t = "_space_174q4_9", i = "_labelContainer_174q4_14", c = "_label_174q4_14", l = {
+  line: s,
+  space: t,
+  labelContainer: i,
+  label: c
+};
+function o({ control: a }) {
+  const n = a.style || "line";
+  return n === "space" ? /* @__PURE__ */ e("div", { className: l.space }) : n === "label" && a.label ? /* @__PURE__ */ e("div", { className: l.labelContainer, children: /* @__PURE__ */ e("span", { className: l.label, children: a.label }) }) : /* @__PURE__ */ e("div", { className: l.line });
+}
 export {
-  t as SeparatorControl
+  o as SeparatorControl
 };

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

@@ -1 +1,40 @@
-export * from './TextControl';
+import { TextControlProps } from './types';
+/**
+ * Component that renders a text input control with configurable event handling
+ *
+ * @param props - The component props
+ * @param props.control - The text control configuration object
+ * @param props.control.type - The control type, must be 'text'
+ * @param props.control.value - The current string value of the text input
+ * @param props.control.placeholder - Optional placeholder text displayed when input is empty
+ * @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 text value changes
+ * @param props.control.disabled - Optional flag to disable the control
+ * @returns JSX element representing the text input control
+ *
+ * @example
+ * ```typescript
+ * // Real-time updates (default behavior)
+ * <TextControl control={{
+ *   type: 'text',
+ *   value: 'John Doe',
+ *   placeholder: 'Enter your full name',
+ *   event: 'onChange',
+ *   onChange: (value) => setUserName(value),
+ *   disabled: false
+ * }} />
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Updates only when losing focus
+ * <TextControl control={{
+ *   type: 'text',
+ *   value: 'search query',
+ *   placeholder: 'Type to search...',
+ *   event: 'onBlur',
+ *   onChange: (value) => console.log('Search term:', value)
+ * }} />
+ * ```
+ */
+export declare function TextControl({ control }: TextControlProps): React.ReactNode;