@berenjena/react-dev-panel 1.0.3 → 2.0.0

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)
  * }} />
  * ```
  */

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

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

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

@@ -1,15 +1,39 @@
 import { SelectControlProps } from './types';
 /**
- * Component that renders a select control
- * @param control - The control to render
- * @returns The select control component
+ * 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: 'option1',
- *   options: ['option1', 'option2', 'option3'],
+ *   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): import("react/jsx-runtime").JSX.Element;

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

@@ -1,26 +1,35 @@
 import { SeparatorControlProps } from './types';
 /**
  * Component that renders a visual separator to organize control groups
- * @param control - The control to render
- * @param control.style - The style of separator: "line" (default), "space", or "label"
- * @param control.label - Optional label text (only shown when style is "label")
- * @returns The separator control component
+ *
+ * @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
+ * // Simple line separator (default)
  * <SeparatorControl control={{
  *   type: 'separator'
  * }} />
+ * ```
  *
- * // Separator with label
+ * @example
+ * ```typescript
+ * // Separator with label text
  * <SeparatorControl control={{
  *   type: 'separator',
  *   style: 'label',
  *   label: 'Advanced Settings'
  * }} />
+ * ```
  *
- * // Space separator
+ * @example
+ * ```typescript
+ * // Space separator for extra spacing
  * <SeparatorControl control={{
  *   type: 'separator',
  *   style: 'space'

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

@@ -1,14 +1,14 @@
 import { jsx as e } from "react/jsx-runtime";
-import '../../../../assets/SeparatorControl.css';const s = "_line_12cvo_1", c = "_space_12cvo_9", t = "_labelContainer_12cvo_14", i = "_label_12cvo_14", l = {
+import '../../../../assets/SeparatorControl.css';const s = "_line_174q4_1", t = "_space_174q4_9", i = "_labelContainer_174q4_14", c = "_label_174q4_14", l = {
   line: s,
-  space: c,
-  labelContainer: t,
-  label: i
+  space: t,
+  labelContainer: i,
+  label: c
 };
-function r({ control: a }) {
+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 {
-  r as SeparatorControl
+  o as SeparatorControl
 };

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

@@ -1,28 +1,39 @@
 import { TextControlProps } from './types';
 /**
- * Component that renders a text 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 text control component
+ * 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
+ * // Real-time updates (default behavior)
  * <TextControl control={{
  *   type: 'text',
- *   value: 'Hello',
- *   placeholder: 'Enter your name',
+ *   value: 'John Doe',
+ *   placeholder: 'Enter your full name',
  *   event: 'onChange',
- *   onChange: (value) => setValue(value)
+ *   onChange: (value) => setUserName(value),
+ *   disabled: false
  * }} />
+ * ```
  *
- * // Updates only when losing focus (default behavior)
+ * @example
+ * ```typescript
+ * // Updates only when losing focus
  * <TextControl control={{
  *   type: 'text',
- *   value: 'Hello',
- *   placeholder: 'Enter your name',
- *   event: 'onBlur', // or omit for default
- *   onChange: (value) => setValue(value)
+ *   value: 'search query',
+ *   placeholder: 'Type to search...',
+ *   event: 'onBlur',
+ *   onChange: (value) => console.log('Search term:', value)
  * }} />
  * ```
  */

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

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

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

@@ -1,5 +1,6 @@
 /**
  * Exports all control components as a frozen object.
+ *
  * **Note:** This allows components to be loaded lazily.
  */
 export declare const controls: Readonly<{
@@ -10,6 +11,7 @@ export declare const controls: Readonly<{
     number: import('react').LazyExoticComponent<typeof import('./NumberControl').NumberControl>;
     range: import('react').LazyExoticComponent<typeof import('./RangeControl').RangeControl>;
     select: import('react').LazyExoticComponent<typeof import('./SelectControl').SelectControl>;
+    multiselect: import('react').LazyExoticComponent<typeof import('./MultiSelectControl').MultiSelectControl>;
     separator: import('react').LazyExoticComponent<typeof import('./SeparatorControl').SeparatorControl>;
     text: import('react').LazyExoticComponent<typeof import('./TextControl').TextControl>;
     buttonGroup: import('react').LazyExoticComponent<typeof import('./ButtonGroupControl').ButtonGroupControl>;

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

@@ -7,6 +7,7 @@ const r = Object.freeze({
   number: o(() => import("./NumberControl/index.js").then((t) => ({ default: t.NumberControl }))),
   range: o(() => import("./RangeControl/index.js").then((t) => ({ default: t.RangeControl }))),
   select: o(() => import("./SelectControl/index.js").then((t) => ({ default: t.SelectControl }))),
+  multiselect: o(() => import("./MultiSelectControl/index.js").then((t) => ({ default: t.MultiSelectControl }))),
   separator: o(() => import("./SeparatorControl/index.js").then((t) => ({ default: t.SeparatorControl }))),
   text: o(() => import("./TextControl/index.js").then((t) => ({ default: t.TextControl }))),
   buttonGroup: o(() => import("./ButtonGroupControl/index.js").then((t) => ({ default: t.ButtonGroupControl })))

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

@@ -3,6 +3,7 @@ import { ButtonControl } from './ButtonControl/types';
 import { ButtonGroupControl } from './ButtonGroupControl/types';
 import { ColorControl } from './ColorControl/types';
 import { DateControl } from './DateControl/types';
+import { MultiSelectControl } from './MultiSelectControl/types';
 import { NumberControl } from './NumberControl/types';
 import { RangeControl } from './RangeControl/types';
 import { SelectControl } from './SelectControl/types';
@@ -23,6 +24,7 @@ export type Controls = {
 	color: ColorControl;
 	boolean: BooleanControl;
 	select: SelectControl;
+	multiselect: MultiSelectControl;
 	text: TextControl;
 	button: ButtonControl;
 	number: NumberControl;