@berenjena/react-dev-panel 2.0.0 → 2.2.0

package/dist/assets/index8.css

@@ -0,0 +1 @@
+:root{--dev-panel-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;--dev-panel-font-weight-normal: 400;--dev-panel-font-weight-medium: 500;--dev-panel-font-weight-semibold: 600;--dev-panel-font-weight-bold: 700;--dev-panel-font-size-xs: 10px;--dev-panel-font-size-sm: 12px;--dev-panel-font-size-md: 14px;--dev-panel-font-size-lg: 16px;--dev-panel-font-size-xl: 18px;--dev-panel-line-height-tight: 1.25;--dev-panel-line-height-normal: 1.5;--dev-panel-line-height-relaxed: 1.75;--dev-panel-accent-color: #2563eb;--dev-panel-accent-color-hover: #1d4ed8;--dev-panel-accent-color-active: #1e40af;--dev-panel-accent-color-disabled: #2563eb30;--dev-panel-primary-color: #2563eb;--dev-panel-primary-color-hover: #1d4ed8;--dev-panel-primary-color-active: #1e40af;--dev-panel-primary-color-disabled: #2563eb30;--dev-panel-secondary-color: #64748b;--dev-panel-secondary-color-hover: #475569;--dev-panel-secondary-color-active: #334155;--dev-panel-success-color: #10b981;--dev-panel-success-color-hover: #059669;--dev-panel-success-color-active: #047857;--dev-panel-warning-color: #f59e0b;--dev-panel-warning-color-hover: #d97706;--dev-panel-warning-color-active: #b45309;--dev-panel-error-color: #ef4444;--dev-panel-error-color-hover: #dc2626;--dev-panel-error-color-active: #b91c1c;--dev-panel-info-color: #06b6d4;--dev-panel-info-color-hover: #0891b2;--dev-panel-info-color-active: #0e7490;--dev-panel-background-color: #1e293b;--dev-panel-background-color-secondary: #334155;--dev-panel-background-color-tertiary: #475569;--dev-panel-foreground-color: #0f172a;--dev-panel-surface-color: #334155;--dev-panel-surface-color-hover: #475569;--dev-panel-surface-color-active: #64748b;--dev-panel-text-color: #f1f5f9;--dev-panel-text-color-secondary: #cbd5e1;--dev-panel-text-color-muted: #94a3b8;--dev-panel-text-color-disabled: #64748b;--dev-panel-text-color-on-accent: #ffffff;--dev-panel-text-color-on-surface: #f1f5f9;--dev-panel-border-color: #475569;--dev-panel-border-color-light: #64748b;--dev-panel-border-color-strong: #334155;--dev-panel-border-color-accent: #2563eb;--dev-panel-input-background-color: #0f172a;--dev-panel-input-background-color-hover: #1e293b;--dev-panel-input-background-color-focus: #1e293b;--dev-panel-input-border-color: #475569;--dev-panel-input-border-color-hover: #64748b;--dev-panel-input-border-color-focus: #2563eb;--dev-panel-input-text-color: #f1f5f9;--dev-panel-input-placeholder-color: #64748b;--dev-panel-input-border-width: 1px;--dev-panel-spacing-base: 4px;--dev-panel-spacing-xs: calc(var(--dev-panel-spacing-base) * .5);--dev-panel-spacing-sm: var(--dev-panel-spacing-base);--dev-panel-spacing-md: calc(var(--dev-panel-spacing-base) * 2);--dev-panel-spacing-lg: calc(var(--dev-panel-spacing-base) * 3);--dev-panel-spacing-xl: calc(var(--dev-panel-spacing-base) * 4);--dev-panel-spacing-2xl: calc(var(--dev-panel-spacing-base) * 5);--dev-panel-spacing-3xl: calc(var(--dev-panel-spacing-base) * 6);--dev-panel-spacing-4xl: calc(var(--dev-panel-spacing-base) * 8);--dev-panel-spacing: var(--dev-panel-spacing-lg);--dev-panel-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);--dev-panel-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--dev-panel-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--dev-panel-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--dev-panel-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--dev-panel-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);--dev-panel-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05);--dev-panel-shadow: var(--dev-panel-shadow-xl);--dev-panel-border-radius-none: 0;--dev-panel-border-radius-sm: 2px;--dev-panel-border-radius-md: 4px;--dev-panel-border-radius-lg: 6px;--dev-panel-border-radius-xl: 8px;--dev-panel-border-radius-2xl: 12px;--dev-panel-border-radius-full: 9999px;--dev-panel-border-radius: var(--dev-panel-border-radius-lg);--dev-panel-max-width: 400px;--dev-panel-min-width: 280px;--dev-panel-max-height: 600px;--dev-panel-min-height: auto;--dev-panel-header-height: auto;--dev-panel-inputs-height: 32px;--dev-panel-inputs-height-sm: 28px;--dev-panel-inputs-height-lg: 36px;--dev-panel-button-height: 32px;--dev-panel-button-height-sm: 28px;--dev-panel-button-height-lg: 36px;--dev-panel-transition-fast: all .15s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition-normal: all .2s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition-slow: all .3s cubic-bezier(.4, 0, .2, 1);--dev-panel-transition: var(--dev-panel-transition-normal);--dev-panel-z-index-dropdown: 1000;--dev-panel-z-index-sticky: 1020;--dev-panel-z-index-fixed: 1030;--dev-panel-z-index-modal-backdrop: 1040;--dev-panel-z-index-modal: 1050;--dev-panel-z-index-popover: 1060;--dev-panel-z-index-tooltip: 1070;--dev-panel-z-index-toast: 1080;--dev-panel-z-index: var(--dev-panel-z-index-modal);--dev-panel-opacity-0: 0;--dev-panel-opacity-5: .05;--dev-panel-opacity-10: .1;--dev-panel-opacity-20: .2;--dev-panel-opacity-25: .25;--dev-panel-opacity-30: .3;--dev-panel-opacity-40: .4;--dev-panel-opacity-50: .5;--dev-panel-opacity-60: .6;--dev-panel-opacity-70: .7;--dev-panel-opacity-75: .75;--dev-panel-opacity-80: .8;--dev-panel-opacity-90: .9;--dev-panel-opacity-95: .95;--dev-panel-opacity-100: 1;--dev-panel-scrollbar-width: 6px;--dev-panel-scrollbar-track-color: var(--dev-panel-background-color-secondary);--dev-panel-scrollbar-thumb-color: var(--dev-panel-border-color);--dev-panel-scrollbar-thumb-hover-color: var(--dev-panel-border-color-light)}@media (prefers-color-scheme: light){:root{color-scheme:light;--dev-panel-background-color: #f8fafc;--dev-panel-background-color-secondary: #f1f5f9;--dev-panel-background-color-tertiary: #e2e8f0;--dev-panel-foreground-color: #ffffff;--dev-panel-surface-color: #ffffff;--dev-panel-surface-color-hover: #e2e8f0;--dev-panel-surface-color-active: #e2e8f0;--dev-panel-text-color: #0f172a;--dev-panel-text-color-secondary: #334155;--dev-panel-text-color-muted: #64748b;--dev-panel-text-color-disabled: #94a3b8;--dev-panel-text-color-on-accent: #ffffff;--dev-panel-text-color-on-surface: #0f172a;--dev-panel-border-color: #e2e8f0;--dev-panel-border-color-light: #cbd5e1;--dev-panel-border-color-strong: #94a3b8;--dev-panel-border-color-accent: #2563eb;--dev-panel-input-background-color: #ffffff;--dev-panel-input-background-color-hover: #ffcccc;--dev-panel-input-background-color-focus: #ffffff;--dev-panel-input-border-color: #e2e8f0;--dev-panel-input-border-color-hover: #cbd5e1;--dev-panel-input-border-color-focus: #2563eb;--dev-panel-input-text-color: #0f172a;--dev-panel-input-placeholder-color: #64748b;--dev-panel-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .03);--dev-panel-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .08);--dev-panel-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .08);--dev-panel-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .08);--dev-panel-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .08), 0 8px 10px -6px rgb(0 0 0 / .08);--dev-panel-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .15);--dev-panel-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .03);--dev-panel-shadow: var(--dev-panel-shadow-xl);--dev-panel-scrollbar-thumb-color: var(--dev-panel-border-color-light);--dev-panel-scrollbar-thumb-hover-color: var(--dev-panel-border-color-strong)}}:root[data-dev-panel-theme=dark]{color-scheme:dark}:root[data-dev-panel-theme=light]{--dev-panel-background-color: #f8fafc;--dev-panel-background-color-secondary: #f1f5f9;--dev-panel-background-color-tertiary: #e2e8f0;--dev-panel-foreground-color: #ffffff;--dev-panel-surface-color: #ffffff;--dev-panel-surface-color-hover: #e2e8f0;--dev-panel-surface-color-active: #e2e8f0;--dev-panel-text-color: #0f172a;--dev-panel-text-color-secondary: #334155;--dev-panel-text-color-muted: #64748b;--dev-panel-text-color-disabled: #94a3b8;--dev-panel-text-color-on-accent: #ffffff;--dev-panel-text-color-on-surface: #0f172a;--dev-panel-border-color: #e2e8f0;--dev-panel-border-color-light: #cbd5e1;--dev-panel-border-color-strong: #94a3b8;--dev-panel-border-color-accent: #2563eb;--dev-panel-input-background-color: #ffffff;--dev-panel-input-background-color-hover: #ffcccc;--dev-panel-input-background-color-focus: #ffffff;--dev-panel-input-border-color: #e2e8f0;--dev-panel-input-border-color-hover: #cbd5e1;--dev-panel-input-border-color-focus: #2563eb;--dev-panel-input-text-color: #0f172a;--dev-panel-input-placeholder-color: #64748b;--dev-panel-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .03);--dev-panel-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .08);--dev-panel-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .08);--dev-panel-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .08);--dev-panel-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .08), 0 8px 10px -6px rgb(0 0 0 / .08);--dev-panel-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .15);--dev-panel-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .03);--dev-panel-shadow: var(--dev-panel-shadow-xl);--dev-panel-scrollbar-thumb-color: var(--dev-panel-border-color-light);--dev-panel-scrollbar-thumb-hover-color: var(--dev-panel-border-color-strong);color-scheme:light}._input_icuc6_217{display:block;width:100%;height:var(--dev-panel-inputs-height-sm);padding:var(--dev-panel-spacing-sm) var(--dev-panel-spacing-md);font-family:var(--dev-panel-font-family);font-size:var(--dev-panel-font-size-sm);line-height:var(--dev-panel-line-height-normal);color:var(--dev-panel-input-text-color);background-color:var(--dev-panel-input-background-color);border:var(--dev-panel-input-border-width) solid var(--dev-panel-input-border-color);border-radius:var(--dev-panel-border-radius);transition:var(--dev-panel-transition);cursor:text}._input_icuc6_217::placeholder{color:var(--dev-panel-input-placeholder-color)}._input_icuc6_217:hover:not(:disabled){border-color:var(--dev-panel-input-border-color-hover)}._input_icuc6_217:focus{outline:none;border-color:var(--dev-panel-input-border-color-focus);box-shadow:0 0 0 3px #6366f133}._input_icuc6_217:disabled{opacity:var(--dev-panel-opacity-50);background-color:var(--dev-panel-surface-color);border-color:var(--dev-panel-border-color);cursor:not-allowed}._input_icuc6_217::placeholder{color:var(--dev-panel-input-placeholder-color);opacity:1}._input_icuc6_217[type=date]{cursor:pointer}._input_icuc6_217[type=date]::-webkit-calendar-picker-indicator{color:currentColor;filter:invert(1);cursor:pointer}._input_icuc6_217[type=date]::-moz-calendar-picker-indicator{color:currentColor;filter:invert(1);cursor:pointer}._input_icuc6_217[type=number]{-moz-appearance:textfield;appearance:textfield}._input_icuc6_217[type=number]::-webkit-outer-spin-button,._input_icuc6_217[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

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

@@ -1 +1,32 @@
-export * from './BooleanControl';
+import { BooleanControlProps } from './types';
+/**
+ * Component that renders a boolean toggle switch control
+ *
+ * @param props - The component props
+ * @param props.control - The boolean control configuration object
+ * @param props.control.type - The control type, must be 'boolean'
+ * @param props.control.value - The current boolean state (true/false)
+ * @param props.control.onChange - Callback function triggered when toggle state changes
+ * @param props.control.disabled - Optional flag to disable the control
+ * @returns JSX element representing a toggle switch control
+ *
+ * @example
+ * ```typescript
+ * <BooleanControl control={{
+ *   type: 'boolean',
+ *   value: true,
+ *   onChange: (value) => setIsEnabled(value),
+ *   disabled: false
+ * }} />
+ * ```
+ *
+ * @example
+ * ```typescript
+ * <BooleanControl control={{
+ *   type: 'boolean',
+ *   value: false,
+ *   onChange: (value) => console.log('Toggle changed:', value)
+ * }} />
+ * ```
+ */
+export declare function BooleanControl({ control }: BooleanControlProps): React.ReactNode;

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

@@ -1,4 +1,26 @@
-import { BooleanControl as e } from "./BooleanControl.js";
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { useRef as c } from "react";
+import '../../../../assets/index15.css';const l = "_slider_1rjjb_235", t = {
+  switch: "_switch_1rjjb_217",
+  slider: l
+};
+function d({ control: e }) {
+  const s = c(`boolean-control-${e.label || Math.ceil(Math.random() * 1e5)}`);
+  return /* @__PURE__ */ n("label", { className: t.switch, children: [
+    /* @__PURE__ */ r(
+      "input",
+      {
+        type: "checkbox",
+        id: s.current,
+        name: s.current,
+        checked: e.value,
+        disabled: e.disabled,
+        onChange: (a) => e.onChange(a.target.checked)
+      }
+    ),
+    /* @__PURE__ */ r("span", { className: t.slider })
+  ] });
+}
 export {
-  e as BooleanControl
+  d as BooleanControl
 };

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

@@ -1 +1,33 @@
-export * from './ButtonControl';
+import { ButtonControlProps } from './types';
+/**
+ * Component that renders a clickable button control
+ *
+ * @param props - The component props
+ * @param props.control - The button control configuration object
+ * @param props.control.type - The control type, must be 'button'
+ * @param props.control.label - The text displayed on the button
+ * @param props.control.onClick - Callback function triggered when button is clicked
+ * @param props.control.disabled - Optional flag to disable the button
+ * @returns JSX element representing a clickable button
+ *
+ * @example
+ * ```typescript
+ * <ButtonControl control={{
+ *   type: 'button',
+ *   label: 'Save Changes',
+ *   onClick: () => handleSave(),
+ *   disabled: false
+ * }} />
+ * ```
+ *
+ * @example
+ * ```typescript
+ * <ButtonControl control={{
+ *   type: 'button',
+ *   label: 'Reset',
+ *   onClick: () => console.log('Reset clicked'),
+ *   disabled: true
+ * }} />
+ * ```
+ */
+export declare function ButtonControl({ control }: ButtonControlProps): React.ReactNode;

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

@@ -1,4 +1,10 @@
-import { ButtonControl as r } from "./ButtonControl.js";
+import { jsx as n } from "react/jsx-runtime";
+import '../../../../assets/index14.css';const o = "_button_1h30c_217", s = {
+  button: o
+};
+function e({ control: t }) {
+  return /* @__PURE__ */ n("button", { onClick: t.onClick, disabled: t.disabled, className: s.button, children: t.label });
+}
 export {
-  r as ButtonControl
+  e as ButtonControl
 };

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/index13.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/index12.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/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/DragAndDropControl/index.d.ts

@@ -0,0 +1,2 @@
+import { DragAndDropControlProps } from './types';
+export declare function DragAndDropControl({ control }: DragAndDropControlProps): React.ReactNode;

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

@@ -0,0 +1,117 @@
+import { jsxs as u, Fragment as k, jsx as r } from "react/jsx-runtime";
+import { useState as n, useRef as R, useCallback as t } from "react";
+import { className as M } from "../../../../utils/className/className.js";
+import '../../../../assets/index11.css';const I = "_dropZone_p0d3i_9", Z = "_disabled_p0d3i_26", j = "_active_p0d3i_45", A = "_supportedFormats_p0d3i_60", P = "_dropText_p0d3i_66", N = "_droppedFile_p0d3i_71", E = "_droppedText_p0d3i_79", L = "_errorMessage_p0d3i_86", d = {
+  dropZone: I,
+  disabled: Z,
+  active: j,
+  supportedFormats: A,
+  dropText: P,
+  droppedFile: N,
+  droppedText: E,
+  errorMessage: L
+};
+function V({ control: s }) {
+  const [D, i] = n(!1), [o, f] = n(null), [v, b] = n(!0), [g, l] = n(""), c = R(null), _ = t(
+    (e) => {
+      if (!s.allowedFileTypes)
+        return !0;
+      const a = e.toLowerCase().substring(e.lastIndexOf("."));
+      return s.allowedFileTypes.some((m) => m.toLowerCase() === a);
+    },
+    [s.allowedFileTypes]
+  ), p = t(
+    (e) => {
+      if (s.allowedFileTypes && !_(e.name)) {
+        l(`File type not allowed. 
+ Supported formats: ${s.allowedFileTypes.join(", ")}`), i(!1);
+        return;
+      }
+      l("");
+      const a = new FileReader();
+      a.onload = () => {
+        i(!1);
+        const F = {
+          base64: a.result,
+          file: e,
+          name: e.name,
+          size: e.size,
+          type: e.type,
+          lastModified: e.lastModified,
+          webkitRelativePath: e.webkitRelativePath
+        };
+        f(F), b(!1), s.onDrop(F);
+      }, a.readAsDataURL(e);
+    },
+    [s, _, l, f, b, i]
+  ), h = t(() => {
+    !o && c.current && !s.disabled && c.current.click();
+  }, [o, s.disabled]), T = t(
+    (e) => {
+      const a = e.target.files;
+      a && a.length > 0 && p(a[0]), e.target.value = "";
+    },
+    [p]
+  ), w = t(
+    (e) => {
+      s.disabled || (e.preventDefault(), e.stopPropagation(), i(!0), l(""));
+    },
+    [s.disabled]
+  ), y = t(
+    (e) => {
+      if (s.disabled) return;
+      e.preventDefault(), e.stopPropagation();
+      const a = e.dataTransfer.files;
+      a.length > 0 && p(a[0]);
+    },
+    [p, s.disabled]
+  ), x = t(
+    (e) => {
+      s.disabled || (e.preventDefault(), e.stopPropagation(), i(!0), l(""));
+    },
+    [s.disabled]
+  ), C = t(
+    (e) => {
+      s.disabled || (e.preventDefault(), e.stopPropagation(), i(!1));
+    },
+    [s.disabled]
+  );
+  return /* @__PURE__ */ u(k, { children: [
+    /* @__PURE__ */ r(
+      "input",
+      {
+        ref: c,
+        type: "file",
+        style: { display: "none" },
+        accept: s.allowedFileTypes?.join(","),
+        onChange: T,
+        disabled: s.disabled
+      }
+    ),
+    /* @__PURE__ */ r(
+      "div",
+      {
+        ...M(d.dropZone, {
+          [d.active]: D,
+          [d.disabled]: !!s.disabled
+        }),
+        onDragEnter: w,
+        onDragOver: x,
+        onDragLeave: C,
+        onDrop: y,
+        onClick: h,
+        children: g ? /* @__PURE__ */ r("div", { className: d.errorMessage, children: /* @__PURE__ */ r("p", { children: g }) }) : o ? /* @__PURE__ */ r("div", { className: d.droppedFile, children: /* @__PURE__ */ u("p", { className: d.droppedText, children: [
+          "Dropped '",
+          o.name,
+          "'"
+        ] }) }) : v ? /* @__PURE__ */ u("div", { children: [
+          /* @__PURE__ */ r("p", { className: d.dropText, children: "Drag & Drop a file here or click to browse" }),
+          /* @__PURE__ */ r("p", { className: d.supportedFormats, children: s.allowedFileTypes ? `Supported formats: ${s.allowedFileTypes.join(", ")}` : "All file types are supported" })
+        ] }) : null
+      }
+    )
+  ] });
+}
+export {
+  V as DragAndDropControl
+};

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

@@ -0,0 +1,20 @@
+import { BaseControl } from '../types';
+export type FileInfo = {
+	name: string;
+	size: number;
+	type: string;
+	file: File;
+	base64: string;
+	lastModified: number;
+	webkitRelativePath: string;
+};
+
+export interface DragAndDropControl extends BaseControl {
+	type: "dragAndDrop";
+	onDrop: (value: FileInfo) => void;
+	allowedFileTypes?: string[];
+}
+
+export interface DragAndDropControlProps {
+	control: DragAndDropControl;
+}

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

@@ -1 +1,28 @@
-export * from './MultiSelectControl';
+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

@@ -1,4 +1,18 @@
-import { MultiSelectControl as e } from "./MultiSelectControl.js";
+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 {
-  e as MultiSelectControl
+  p as 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
 };