@berenjena/react-dev-panel 1.0.4 → 2.1.0

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

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

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;

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", r = {
+  controlRendererContainer: p,
+  controlContainer: _,
+  hoverable: u,
+  fullWidth: v,
+  label: f,
+  controlWrapper: h,
+  justifyStart: b,
+  description: C,
+  loading: m,
+  error: y
+}, W = ["button", "buttonGroup", "separator"], j = ["separator"], N = ["button", "separator"];
+function L({ name: l, control: e }) {
+  const i = e?.label || l;
+  function a() {
+    if (!e || !e.type)
+      return /* @__PURE__ */ n("div", { className: r.error, children: "Control type is not defined" });
+    const o = d[e.type];
+    return o ? /* @__PURE__ */ n(c, { fallback: /* @__PURE__ */ n("div", { className: r.loading, children: "Loading control..." }), children: /* @__PURE__ */ n(o, { control: e }) }) : /* @__PURE__ */ n("div", { children: "Unknown control type" });
+  }
+  return /* @__PURE__ */ t("div", { className: r.controlRendererContainer, children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        ...s(r.controlContainer, {
+          [r.fullWidth]: W.includes(e.type),
+          [r.hoverable]: !j.includes(e.type)
+        }),
+        children: [
+          !N.includes(e.type) && /* @__PURE__ */ n("label", { className: r.label, children: i }),
+          /* @__PURE__ */ n(
+            "div",
+            {
+              ...s(r.controlWrapper, {
+                [r.justifyStart]: e.type === "separator"
+              }),
+              children: a()
+            }
+          )
+        ]
+      }
+    ),
+    e?.description && /* @__PURE__ */ n("span", { className: r.description, children: e.description })
+  ] });
+}
 export {
-  o as ControlRenderer
+  L 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,71 @@
-import { DevPanel as r } from "./DevPanel.js";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useCallback as D, useEffect as y } from "react";
+import { useDragAndDrop as b } from "../../hooks/useDragAndDrop/index.js";
+import { useHotkey as w } from "../../hooks/useHotKey/index.js";
+import { useDevPanelSections as K } from "../../store/SectionsStore.js";
+import { useDevPanelUI as N, useDevPanelThemeActions as k } from "../../store/UIStore.js";
+import { className as x } from "../../utils/className/className.js";
+import { EmptyContent as E } from "../EmptyContent/index.js";
+import { Icon as f } from "../Icon/index.js";
+import { Section as j } from "../Section/index.js";
+import '../../assets/index2.css';const A = "_devPanelContainer_1089m_217", S = "_header_1089m_256", H = "_title_1089m_271", I = "_button_1089m_282", T = "_collapsed_1089m_318", V = "_content_1089m_325", t = {
+  devPanelContainer: A,
+  header: S,
+  title: H,
+  button: I,
+  collapsed: T,
+  content: V
+}, O = {
+  ctrlKey: !0,
+  shiftKey: !0,
+  key: "a",
+  altKey: !1,
+  metaKey: !1
+};
+function M({ panelTitle: h = "Dev panel", ...o }) {
+  const { isVisible: i, isCollapsed: n, position: l, setVisible: a, setCollapsed: u, setPosition: r } = N(), { setTheme: c } = k(), p = K(), _ = D(
+    (s) => {
+      r(s);
+    },
+    [r]
+  ), { isDragging: v, elementRef: C, handlePointerDown: g } = b({
+    onPositionChange: _
+  });
+  if (w({
+    description: "Show Dev Panel",
+    preventDefault: !0,
+    action: () => a(!i),
+    ...O,
+    ...o.hotKeyConfig,
+    target: window
+  }), y(() => {
+    o.theme && c(o.theme);
+  }, [o.theme, c]), !i)
+    return null;
+  const m = Object.entries(p);
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      ref: C,
+      ...x(t.devPanelContainer, {
+        [t.dragging]: v
+      }),
+      style: {
+        left: l.x,
+        top: l.y,
+        height: n ? "auto" : void 0
+      },
+      children: [
+        /* @__PURE__ */ d("div", { className: t.header, onPointerDown: g, 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: m.length ? m.map(([s, P]) => /* @__PURE__ */ e(j, { sectionName: s, section: P }, `section-${s}`)) : /* @__PURE__ */ e(E, {}) })
+      ]
+    }
+  );
+}
 export {
-  r as DevPanel
+  M as DevPanel
 };

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

@@ -1,22 +1,52 @@
 import { ControlsGroup } from '../ControlRenderer/controls/types';
 export type DevPanelHotkeyConfig = Pick<HotkeyConfig, "key" | "shiftKey" | "altKey" | "ctrlKey" | "metaKey">;
+export type BuiltInTheme =
+	| "auto"
+	| "dark"
+	| "light"
+	| "orange"
+	| "purple"
+	| "green"
+	| "neon"
+	| "corporate"
+	| "highContrast"
+	| "sunset"
+	| "ocean"
+	| "forest"
+	| "midnight"
+	| "cherry"
+	| "gold"
+	| "retro"
+	| "pastel"
+	| "cyberpunk"
+	| "autumn"
+	| "arctic"
+	| "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;
 }
 
 export interface DevPanelSection {
@@ -30,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

@@ -0,0 +1,9 @@
+/**
+ * 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

@@ -0,0 +1,17 @@
+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 {
+  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

@@ -0,0 +1,16 @@
+declare const availableIcons: {
+    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 */
+    name: keyof typeof availableIcons;
+}
+/**
+ * Icon component for rendering SVG icons.
+ * @param props - The properties for the icon component.
+ * @returns The SVG element for the specified icon, or null if the icon is not found.
+ */
+export declare function Icon({ name, ...props }: IconProps): React.ReactNode;
+export {};

package/dist/components/Icon/index.js

@@ -0,0 +1,31 @@
+import { jsx as l } from "react/jsx-runtime";
+const t = {
+  ArrowDown: (o) => /* @__PURE__ */ l("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...o, children: /* @__PURE__ */ l("path", { d: "M16.843 10.211A.75.75 0 0 0 16.251 9H7.75a.75.75 0 0 0-.591 1.212l4.258 5.498a.746.746 0 0 0 1.183-.001l4.243-5.498z" }) }),
+  Close: (o) => /* @__PURE__ */ l("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...o, children: /* @__PURE__ */ l("path", { d: "m12 10.93 5.719-5.72a.749.749 0 1 1 1.062 1.062l-5.72 5.719 5.719 5.719a.75.75 0 1 1-1.061 1.062L12 13.053l-5.719 5.719A.75.75 0 0 1 5.22 17.71l5.719-5.719-5.72-5.719A.752.752 0 0 1 6.281 5.21z" }) }),
+  Check: (o) => /* @__PURE__ */ l(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      clipRule: "evenodd",
+      fillRule: "evenodd",
+      strokeLinejoin: "round",
+      strokeMiterlimit: "2",
+      ...o,
+      children: /* @__PURE__ */ l(
+        "path",
+        {
+          d: "m21 4.009c0-.478-.379-1-1-1h-16c-.62 0-1 .519-1 1v16c0 .621.52 1 1 1h16c.478 0 1-.379 1-1zm-14.051 8.382c-.165-.148-.249-.352-.249-.557 0-.411.333-.746.748-.746.178 0 .355.063.499.19l3.298 2.938 5.453-5.962c.149-.161.35-.243.554-.243.417 0 .748.337.748.747 0 .179-.065.359-.196.502l-5.953 6.509c-.147.161-.35.242-.552.242-.178 0-.357-.062-.499-.19z",
+          fillRule: "nonzero"
+        }
+      )
+    }
+  )
+};
+function r({ name: o, ...e }) {
+  const n = t[o];
+  return n ? /* @__PURE__ */ l(n, { ...e }) : null;
+}
+export {
+  r as Icon
+};

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/index7.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
 };

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

@@ -1 +1,15 @@
-export * from './Select';
+export interface SelectProps {
+    value?: string | string[];
+    options: string[] | {
+        label: string;
+        value: string;
+    }[];
+    disabled?: boolean;
+    multiple?: boolean;
+    placeholder?: string;
+    onChange: (value: string | string[]) => void;
+}
+/**
+ * Unified Select component that can handle both single and multiple selection
+ */
+export declare function Select({ value, options, onChange, disabled, multiple, placeholder }: SelectProps): React.ReactNode;

package/dist/components/Select/index.js

@@ -1,4 +1,178 @@
-import { Select as r } from "./Select.js";
+import { jsxs as y, Fragment as M, jsx as a } from "react/jsx-runtime";
+import { useRef as x, useState as H, useCallback as q, useEffect as P } from "react";
+import { createPortal as T } from "react-dom";
+import { Icon as j } from "../Icon/index.js";
+import { useDevPanelPosition as B } from "../../store/UIStore.js";
+import { className as F } from "../../utils/className/className.js";
+import '../../assets/index6.css';const W = "_select_1hbiz_217", U = "_trigger_1hbiz_222", G = "_open_1hbiz_271", J = "_value_1hbiz_275", K = "_placeholder_1hbiz_284", Q = "_arrow_1hbiz_288", X = "_dropdownPortal_1hbiz_303", Y = "_dropdown_1hbiz_303", Z = "_option_1hbiz_342", ee = "_selected_1hbiz_360", te = "_checkbox_1hbiz_369", ne = "_label_1hbiz_390", r = {
+  select: W,
+  trigger: U,
+  open: G,
+  value: J,
+  placeholder: K,
+  arrow: Q,
+  dropdownPortal: X,
+  dropdown: Y,
+  option: Z,
+  selected: ee,
+  checkbox: te,
+  label: ne
+};
+function ae({ value: p, options: _, onChange: z, disabled: f = !1, multiple: u = !1, placeholder: L = "Select..." }) {
+  const w = B(), g = x(null), h = x(null), k = x(null), [c, m] = H(!1), [b, E] = H({
+    top: 0,
+    left: 0,
+    width: 0,
+    maxHeight: 200
+  }), d = u ? Array.isArray(p) ? p : [] : typeof p == "string" ? p : "", C = S(), D = u ? d.length === 0 : !d, s = q(() => {
+    c && E(N());
+  }, [c]);
+  function N() {
+    if (!h.current)
+      return {
+        top: 0,
+        left: 0,
+        width: 0,
+        maxHeight: 200
+      };
+    const e = h.current.getBoundingClientRect(), t = window.innerHeight, n = window.innerWidth, o = 200, l = 4, i = t - e.bottom - l, v = e.top - l, R = i < o && v > i, V = R ? e.top - Math.min(o, v) : e.bottom + l, $ = Math.max(8, Math.min(e.left, n - e.width - 8)), I = R ? Math.min(o, v) : Math.min(o, i);
+    return {
+      top: V,
+      left: $,
+      width: e.width,
+      maxHeight: I
+    };
+  }
+  function O(e) {
+    if (u) {
+      const t = d, n = t.includes(e) ? t.filter((o) => o !== e) : [...t, e];
+      z(n);
+    } else
+      z(e), m(!1);
+  }
+  function S() {
+    if (u) {
+      const e = d;
+      if (e.length === 0)
+        return L;
+      if (e.length === 1) {
+        const t = _.find((o) => (typeof o == "string" ? o : o.value) === e[0]);
+        return (typeof t == "string" ? t : t?.label) || e[0];
+      }
+      return `${e.length} selected`;
+    } else {
+      const e = d;
+      if (!e)
+        return L;
+      const t = _.find((o) => (typeof o == "string" ? o : o.value) === e);
+      return (typeof t == "string" ? t : t?.label) || e;
+    }
+  }
+  function A() {
+    f || (c ? m(!1) : (E(N()), m(!0)));
+  }
+  return P(() => {
+    if (!c) return;
+    s(), window.addEventListener("resize", s), window.addEventListener("scroll", s, !0);
+    const e = g.current?.closest("[data-dev-panel]") || document.querySelector("[data-dev-panel]");
+    e && e.addEventListener("scroll", s, !0);
+    let t = null;
+    if (h.current && "IntersectionObserver" in window) {
+      const n = {
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0
+      };
+      t = new IntersectionObserver(
+        (o) => {
+          const l = o[0];
+          if (l && l.target === h.current) {
+            const i = l.boundingClientRect;
+            (i.top !== n.top || i.left !== n.left || i.width !== n.width || i.height !== n.height) && (n.top = i.top, n.left = i.left, n.width = i.width, n.height = i.height, s());
+          }
+        },
+        {
+          threshold: [0, 0.1, 0.5, 1]
+        }
+      ), t.observe(h.current);
+    }
+    return () => {
+      window.removeEventListener("resize", s), window.removeEventListener("scroll", s, !0), e && e.removeEventListener("scroll", s, !0), t && t.disconnect();
+    };
+  }, [c, s]), P(() => {
+    const e = k.current;
+    (!e || e.x !== w.x || e.y !== w.y) && (k.current = w, c && requestAnimationFrame(s));
+  }, [c, w, s]), P(() => {
+    function e(t) {
+      if (g.current && !g.current.contains(t.target)) {
+        const n = document.querySelector(`.${r.dropdownPortal}`);
+        if (n && n.contains(t.target))
+          return;
+        m(!1);
+      }
+    }
+    return document.addEventListener("mousedown", e), () => {
+      document.removeEventListener("mousedown", e);
+    };
+  }, []), /* @__PURE__ */ y(M, { children: [
+    /* @__PURE__ */ a(
+      "div",
+      {
+        ref: g,
+        ...F(r.select, {
+          [r.disabled]: f,
+          [r.open]: c
+        }),
+        children: /* @__PURE__ */ y("button", { ref: h, type: "button", className: r.trigger, onClick: A, disabled: f, children: [
+          /* @__PURE__ */ a("span", { className: `${r.value} ${D ? r.placeholder : ""}`, children: C }),
+          /* @__PURE__ */ a(j, { name: "ArrowDown", className: r.arrow })
+        ] })
+      }
+    ),
+    typeof window < "u" && T(
+      c && !f && /* @__PURE__ */ a(
+        "div",
+        {
+          className: r.dropdownPortal,
+          style: {
+            position: "fixed",
+            top: b.top,
+            left: b.left,
+            width: b.width,
+            maxHeight: b.maxHeight,
+            zIndex: 9999
+          },
+          children: /* @__PURE__ */ a("div", { className: r.dropdown, children: _.map((e) => {
+            const t = typeof e == "string" ? e : e.value, n = typeof e == "string" ? e : e.label, o = u ? d.includes(t) : d === t;
+            return u ? /* @__PURE__ */ y("label", { className: r.option, children: [
+              /* @__PURE__ */ a(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: o,
+                  onChange: () => O(t),
+                  className: r.checkbox
+                }
+              ),
+              /* @__PURE__ */ a("span", { className: r.label, children: n })
+            ] }, t) : /* @__PURE__ */ a(
+              "button",
+              {
+                type: "button",
+                className: `${r.option} ${o ? r.selected : ""}`,
+                onClick: () => O(t),
+                children: n
+              },
+              t
+            );
+          }) })
+        }
+      ),
+      document.body
+    )
+  ] });
+}
 export {
-  r as Select
+  ae as Select
 };

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
-export * from './ControlRenderer/controls';
-export * from './DevPanel';
+export { DevPanel } from './DevPanel';
+export { DevPanelPortal } from './DevPanelPortal';
 export { ControlRenderer } from './ControlRenderer';
+export { controls } from './ControlRenderer/controls';