@berenjena/react-dev-panel 2.0.0 → 2.2.0

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/index10.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/index9.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;

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

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

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

@@ -3,6 +3,7 @@ export interface TextControl extends BaseInputControl {
 	type: "text";
 	value: string;
 	placeholder?: string;
+	disableAutoExpand?: boolean;
 }
 
 export interface TextControlProps {

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

@@ -15,4 +15,5 @@ export declare const controls: Readonly<{
     separator: import('react').LazyExoticComponent<typeof import('./SeparatorControl').SeparatorControl>;
     text: import('react').LazyExoticComponent<typeof import('./TextControl').TextControl>;
     buttonGroup: import('react').LazyExoticComponent<typeof import('./ButtonGroupControl').ButtonGroupControl>;
+    dragAndDrop: import('react').LazyExoticComponent<typeof import('./DragAndDropControl').DragAndDropControl>;
 }>;

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

@@ -10,7 +10,8 @@ const r = Object.freeze({
   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 })))
+  buttonGroup: o(() => import("./ButtonGroupControl/index.js").then((t) => ({ default: t.ButtonGroupControl }))),
+  dragAndDrop: o(() => import("./DragAndDropControl/index.js").then((t) => ({ default: t.DragAndDropControl })))
 });
 export {
   r as controls

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 { DragAndDropControl } from './DragAndDropControl/types';
 import { MultiSelectControl } from './MultiSelectControl/types';
 import { NumberControl } from './NumberControl/types';
 import { RangeControl } from './RangeControl/types';
@@ -32,6 +33,7 @@ export type Controls = {
 	date: DateControl;
 	separator: SeparatorControl;
 	buttonGroup: ButtonGroupControl;
+	dragAndDrop: DragAndDropControl;
 };
 
 export type ControlsNames = keyof Controls;

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

@@ -1 +1,6 @@
-export * from './ControlRenderer';
+import { ControlsNames } from './controls/types';
+import { ControlRendererProps } from './types';
+/**
+ * Component that renders different types of controls based on the control type
+ */
+export declare function ControlRenderer<Name extends ControlsNames>({ name, control }: ControlRendererProps<Name>): React.ReactNode;

package/dist/components/ControlRenderer/index.js

@@ -1,4 +1,52 @@
-import { ControlRenderer as o } from "./ControlRenderer.js";
+import { jsxs as t, jsx as n } from "react/jsx-runtime";
+import { Suspense as c } from "react";
+import { className as s } from "../../utils/className/className.js";
+import { controls as d } from "./controls/index.js";
+import '../../assets/index5.css';const p = "_controlRendererContainer_1s60v_1", _ = "_controlContainer_1s60v_4", u = "_hoverable_1s60v_13", v = "_fullWidth_1s60v_16", f = "_label_1s60v_19", h = "_controlWrapper_1s60v_22", b = "_justifyStart_1s60v_26", C = "_description_1s60v_42", m = "_loading_1s60v_51", y = "_error_1s60v_70", e = {
+  controlRendererContainer: p,
+  controlContainer: _,
+  hoverable: u,
+  fullWidth: v,
+  label: f,
+  controlWrapper: h,
+  justifyStart: b,
+  description: C,
+  loading: m,
+  error: y
+}, g = ["button", "buttonGroup", "separator", "dragAndDrop"], W = ["separator", "dragAndDrop"], j = ["button", "separator", "dragAndDrop"];
+function A({ name: l, control: r }) {
+  const i = r?.label || l;
+  function a() {
+    if (!r || !r.type)
+      return /* @__PURE__ */ n("div", { className: e.error, children: "Control type is not defined" });
+    const o = d[r.type];
+    return o ? /* @__PURE__ */ n(c, { fallback: /* @__PURE__ */ n("div", { className: e.loading, children: "Loading control..." }), children: /* @__PURE__ */ n(o, { control: r }) }) : /* @__PURE__ */ n("div", { children: "Unknown control type" });
+  }
+  return /* @__PURE__ */ t("div", { className: e.controlRendererContainer, children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        ...s(e.controlContainer, {
+          [e.fullWidth]: g.includes(r.type),
+          [e.hoverable]: !W.includes(r.type)
+        }),
+        children: [
+          !j.includes(r.type) && /* @__PURE__ */ n("label", { className: e.label, children: i }),
+          /* @__PURE__ */ n(
+            "div",
+            {
+              ...s(e.controlWrapper, {
+                [e.justifyStart]: r.type === "separator"
+              }),
+              children: a()
+            }
+          )
+        ]
+      }
+    ),
+    r?.description && /* @__PURE__ */ n("span", { className: e.description, children: r.description })
+  ] });
+}
 export {
-  o as ControlRenderer
+  A as ControlRenderer
 };

package/dist/components/DevPanel/index.d.ts

@@ -1 +1,11 @@
-export * from './DevPanel';
+import { DevPanelProps } from './types';
+/**
+ * Development panel component
+ * @returns The development panel component, if the environment is not development, it will return null
+ *
+ * @example
+ * ```typescript
+ * <DevPanel />
+ * ```
+ */
+export declare function DevPanel({ panelTitle, ...props }: DevPanelProps): React.ReactNode;

package/dist/components/DevPanel/index.js

@@ -1,4 +1,69 @@
-import { DevPanel as r } from "./DevPanel.js";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { useCallback as y, useEffect as D } from "react";
+import { useDragAndDrop as b } from "../../hooks/useDragAndDrop/index.js";
+import { useHotkey as g } from "../../hooks/useHotKey/index.js";
+import { useDevPanelSections as w } from "../../store/SectionsStore.js";
+import { useDevPanelUI as K, useDevPanelThemeActions as N } from "../../store/UIStore.js";
+import { className as k } from "../../utils/className/className.js";
+import { EmptyContent as x } from "../EmptyContent/index.js";
+import { Icon as f } from "../Icon/index.js";
+import { Section as E } from "../Section/index.js";
+import '../../assets/index2.css';const j = "_devPanelContainer_11dce_217", A = "_header_11dce_256", S = "_title_11dce_271", H = "_button_11dce_283", I = "_collapsed_11dce_319", T = "_content_11dce_326", t = {
+  devPanelContainer: j,
+  header: A,
+  title: S,
+  button: H,
+  collapsed: I,
+  content: T
+}, V = {
+  ctrlKey: !0,
+  shiftKey: !0,
+  key: "a",
+  altKey: !1,
+  metaKey: !1
+};
+function L({ panelTitle: h = "Dev panel", ...o }) {
+  const { isVisible: i, isCollapsed: n, position: l, setVisible: a, setCollapsed: u, setPosition: c } = K(), { setTheme: r } = N(), p = w(), _ = y(
+    (s) => {
+      c(s);
+    },
+    [c]
+  ), { elementRef: v, handlePointerDown: C } = b({
+    onPositionChange: _
+  });
+  if (g({
+    description: "Show Dev Panel",
+    preventDefault: !0,
+    action: () => a(!i),
+    ...V,
+    ...o.hotKeyConfig,
+    target: window
+  }), D(() => {
+    o.theme && r(o.theme);
+  }, [o.theme, r]), !i)
+    return null;
+  const d = Object.entries(p);
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      ref: v,
+      ...k(t.devPanelContainer),
+      style: {
+        left: l.x,
+        top: l.y,
+        height: n ? "auto" : void 0
+      },
+      children: [
+        /* @__PURE__ */ m("div", { className: t.header, onPointerDown: C, children: [
+          /* @__PURE__ */ e("button", { className: t.button, onClick: () => u(!n), title: n ? "Expand" : "Collapse", children: /* @__PURE__ */ e(f, { name: "ArrowDown", className: n ? t.collapsed : void 0 }) }),
+          /* @__PURE__ */ e("div", { className: t.title, children: h }),
+          /* @__PURE__ */ e("button", { className: t.button, onClick: () => a(!1), title: "Close", children: /* @__PURE__ */ e(f, { name: "Close" }) })
+        ] }),
+        !n && /* @__PURE__ */ e("div", { className: t.content, children: d.length ? d.map(([s, P]) => /* @__PURE__ */ e(E, { sectionName: s, section: P }, `section-${s}`)) : /* @__PURE__ */ e(x, {}) })
+      ]
+    }
+  );
+}
 export {
-  r as DevPanel
+  L as DevPanel
 };

package/dist/components/DevPanel/types.d.ts

@@ -24,22 +24,28 @@ export type BuiltInTheme =
 	| "volcano";
 
 export interface DevPanelProps {
+	/**
+	 * Title of the DevPanel, displayed at the top.
+	 */
 	panelTitle?: string;
 	/**
 	 * Hotkey configuration for toggling the DevPanel visibility.
 	 * If not provided, defaults to
 	 * ```json
 	 * {
-	 *   key: "f",
-	 *   shiftKey: true,
-	 *   altKey: true,
-	 *   ctrlKey: false,
-	 *   metaKey: false,
+	 *   "key": "f",
+	 *   "shiftKey": true,
+	 *   "altKey": true,
+	 *   "ctrlKey": false,
+	 *   "metaKey": false,
 	 * }
 	 * ```
 	 */
 	hotKeyConfig?: DevPanelHotkeyConfig;
-
+	/**
+	 * Theme for the DevPanel.
+	 * If not provided, defaults to "auto"
+	 */
 	theme?: BuiltInTheme;
 }
 
@@ -54,6 +60,7 @@ export interface DevPanelState {
 	isCollapsed: boolean;
 	sections: Record<string, DevPanelSection>;
 	position: Position;
+	currentTheme: string;
 }
 
 export type DevPanelUIState = Omit<DevPanelState, "sections">;

package/dist/components/DevPanelPortal/index.d.ts

@@ -1 +1,9 @@
-export { DevPanelPortal } from './DevPanelPortal';
+/**
+ * Portal component that renders DevPanel using React's createPortal.
+ * Automatically subscribes to DevPanelManager prop changes and renders
+ * the DevPanel with merged props into document.body.
+ * Dismounts the portal when no sections are active.
+ *
+ * @returns DevPanel rendered as a portal in document.body or null if no sections
+ */
+export declare function DevPanelPortal(): React.ReactNode;

package/dist/components/DevPanelPortal/index.js

@@ -1,4 +1,17 @@
-import { DevPanelPortal as r } from "./DevPanelPortal.js";
+import { jsx as i } from "react/jsx-runtime";
+import { useState as n, useEffect as d } from "react";
+import { createPortal as c } from "react-dom";
+import { DevPanelManager as m } from "../../managers/DevPanelManager.js";
+import { DevPanel as p } from "../DevPanel/index.js";
+function v() {
+  const [t, r] = n({}), [s, o] = n(!1);
+  return d(() => {
+    const e = m.getInstance(), l = e.getAllProps(), u = e.shouldRender();
+    return r(l), o(u), e.onPropsChange((a) => {
+      r(a), o(e.shouldRender());
+    });
+  }, []), s ? c(/* @__PURE__ */ i(p, { ...t }), document.body) : null;
+}
 export {
-  r as DevPanelPortal
+  v as DevPanelPortal
 };

package/dist/components/EmptyContent/index.d.ts

@@ -1 +1 @@
-export * from './EmptyContent';
+export declare function EmptyContent(): React.ReactNode;

package/dist/components/EmptyContent/index.js

@@ -1,4 +1,19 @@
-import { EmptyContent as e } from "./EmptyContent.js";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import '../../assets/index3.css';const n = "_empty_1bkns_1", s = {
+  empty: n
+};
+function o() {
+  return /* @__PURE__ */ t("div", { className: s.empty, children: [
+    /* @__PURE__ */ e("span", { children: "No controls registered yet." }),
+    /* @__PURE__ */ e("br", {}),
+    /* @__PURE__ */ e("br", {}),
+    /* @__PURE__ */ t("span", { children: [
+      "Use ",
+      /* @__PURE__ */ e("code", { children: "useDevPanel()" }),
+      " to add controls."
+    ] })
+  ] });
+}
 export {
-  e as EmptyContent
+  o as EmptyContent
 };

package/dist/components/Icon/index.d.ts

@@ -1,7 +1,7 @@
 declare const availableIcons: {
-    ArrowDown: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
-    Close: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
-    Check: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    ArrowDown: (props: React.SVGProps<SVGSVGElement>) => React.ReactNode;
+    Close: (props: React.SVGProps<SVGSVGElement>) => React.ReactNode;
+    Check: (props: React.SVGProps<SVGSVGElement>) => React.ReactNode;
 };
 interface IconProps extends React.SVGProps<SVGSVGElement> {
     /** The name of the icon to render */

package/dist/components/Input/index.d.ts

@@ -1 +1 @@
-export * from './Input';
+export declare function Input(props: React.InputHTMLAttributes<HTMLInputElement>): React.ReactNode;

package/dist/components/Input/index.js

@@ -1,4 +1,10 @@
-import { Input as r } from "./Input.js";
+import { jsx as n } from "react/jsx-runtime";
+import '../../assets/index8.css';const u = "_input_icuc6_217", i = {
+  input: u
+};
+function s(t) {
+  return /* @__PURE__ */ n("input", { ...t, className: i.input });
+}
 export {
-  r as Input
+  s as Input
 };

package/dist/components/Section/index.d.ts

@@ -1 +1,7 @@
-export * from './Section';
+import { DevPanelSection } from '../DevPanel/types';
+type SectionProps = {
+    sectionName: string;
+    section: DevPanelSection;
+};
+export declare function Section({ sectionName, section }: SectionProps): React.ReactNode;
+export {};

package/dist/components/Section/index.js

@@ -1,4 +1,25 @@
-import { Section as r } from "./Section.js";
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { ControlRenderer as i } from "../ControlRenderer/index.js";
+import { useDevPanelSectionActions as r } from "../../store/SectionsStore.js";
+import { Icon as p } from "../Icon/index.js";
+import '../../assets/index4.css';const d = "_section_plx7y_1", _ = "_header_plx7y_9", m = "_title_plx7y_28", g = "_toggle_plx7y_35", h = "_collapsed_plx7y_45", x = "_content_plx7y_54", e = {
+  section: d,
+  header: _,
+  title: m,
+  toggle: g,
+  collapsed: h,
+  content: x
+};
+function N({ sectionName: s, section: t }) {
+  const { toggleSectionCollapse: c } = r();
+  return /* @__PURE__ */ n("div", { className: e.section, children: [
+    /* @__PURE__ */ n("div", { className: e.header, onClick: () => c(s), children: [
+      /* @__PURE__ */ o("span", { className: e.title, children: t.name }),
+      /* @__PURE__ */ o("span", { className: e.toggle, children: /* @__PURE__ */ o(p, { name: "ArrowDown", className: t.isCollapsed ? e.collapsed : void 0 }) })
+    ] }),
+    !t.isCollapsed && /* @__PURE__ */ o("div", { className: e.content, children: Object.entries(t.controls).map(([l, a]) => /* @__PURE__ */ o(i, { name: l, control: a }, l)) })
+  ] });
+}
 export {
-  r as Section
+  N as Section
 };