@berenjena/react-dev-panel 0.0.1-beta.2 → 0.0.1-beta.4

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

@@ -0,0 +1,10 @@
+import { BaseControl } from '../types';
+export interface BooleanControl extends BaseControl {
+	type: "boolean";
+	value: boolean;
+	onChange: (value: boolean) => void;
+}
+
+export interface BooleanControlProps {
+	control: BooleanControl;
+}

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

@@ -0,0 +1,10 @@
+import { BaseControl } from '../types';
+export interface ButtonControl extends BaseControl {
+	type: "button";
+	label: string;
+	onClick: () => void;
+}
+
+export interface ButtonControlProps {
+	control: ButtonControl;
+}

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

@@ -0,0 +1,10 @@
+import { BaseControl } from '../types';
+export interface ColorControl extends BaseControl {
+	type: "color";
+	value: string;
+	onChange: (value: string) => void;
+}
+
+export interface ColorControlProps {
+	control: ColorControl;
+}

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

@@ -0,0 +1,13 @@
+import { BaseControl } from '../types';
+export interface NumberControl extends BaseControl {
+	type: "number";
+	value: number;
+	min?: number;
+	max?: number;
+	step?: number;
+	onChange: (value: number) => void;
+}
+
+export interface NumberControlProps {
+	control: NumberControl;
+}

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

@@ -0,0 +1,11 @@
+import { BaseControl } from '../types';
+export interface SelectControl extends BaseControl {
+	type: "select";
+	value: string;
+	options: string[] | { label: string; value: string }[];
+	onChange: (value: string) => void;
+}
+
+export interface SelectControlProps {
+	control: SelectControl;
+}

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

@@ -0,0 +1,11 @@
+import { BaseControl } from '../types';
+export interface TextControl extends BaseControl {
+	type: "text";
+	value: string;
+	placeholder?: string;
+	onChange: (value: string) => void;
+}
+
+export interface TextControlProps {
+	control: TextControl;
+}

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

@@ -1,36 +1,37 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { lazy as n, Suspense as c } from "react";
+import { Suspense as c, lazy as o } from "react";
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
 import { className as d } from "../../../utils/className/className.js";
 import "../../../utils/store/store.js";
-import '../../../assets/index.css';const p = Object.freeze({
-  boolean: n(() => import("./BooleanControl/index.js").then((e) => ({ default: e.BooleanControl }))),
-  button: n(() => import("./ButtonControl/index.js").then((e) => ({ default: e.ButtonControl }))),
-  color: n(() => import("./ColorControl/index.js").then((e) => ({ default: e.ColorControl }))),
-  number: n(() => import("./NumberControl/index.js").then((e) => ({ default: e.NumberControl }))),
-  select: n(() => import("./SelectControl/index.js").then((e) => ({ default: e.SelectControl }))),
-  text: n(() => import("./TextControl/index.js").then((e) => ({ default: e.TextControl })))
-}), m = "_controlContainer_xw58o_1", u = "_label_xw58o_10", f = "_description_xw58o_24", r = {
-  controlContainer: m,
-  label: u,
-  description: f
+import '../../../assets/index.css';const p = "_controlContainer_xw58o_1", m = "_label_xw58o_10", u = "_description_xw58o_24", r = {
+  controlContainer: p,
+  label: m,
+  description: u
 };
 function x({ name: e, control: t }) {
   const s = t?.label || e;
   function a() {
     if (!t || !t.type)
-      return /* @__PURE__ */ o("div", { className: r.error, children: "Control type is not defined" });
-    const l = p[t.type];
-    return l ? /* @__PURE__ */ o(c, { fallback: /* @__PURE__ */ o("div", { children: "Loading control..." }), children: /* @__PURE__ */ o(l, { control: t }) }) : /* @__PURE__ */ o("div", { children: "Unknown control type" });
+      return /* @__PURE__ */ n("div", { className: r.error, children: "Control type is not defined" });
+    const l = f[t.type];
+    return l ? /* @__PURE__ */ n(c, { fallback: /* @__PURE__ */ n("div", { children: "Loading control..." }), children: /* @__PURE__ */ n(l, { control: t }) }) : /* @__PURE__ */ n("div", { children: "Unknown control type" });
   }
   return /* @__PURE__ */ i("div", { ...d(r.controlContainer), children: [
     t?.type !== "button" && /* @__PURE__ */ i("label", { className: r.label, children: [
       s,
-      t?.description && /* @__PURE__ */ o("span", { className: r.description, children: t.description })
+      t?.description && /* @__PURE__ */ n("span", { className: r.description, children: t.description })
     ] }),
     a()
   ] });
 }
+const f = Object.freeze({
+  boolean: o(() => import("./BooleanControl/index.js").then((e) => ({ default: e.BooleanControl }))),
+  button: o(() => import("./ButtonControl/index.js").then((e) => ({ default: e.ButtonControl }))),
+  color: o(() => import("./ColorControl/index.js").then((e) => ({ default: e.ColorControl }))),
+  number: o(() => import("./NumberControl/index.js").then((e) => ({ default: e.NumberControl }))),
+  select: o(() => import("./SelectControl/index.js").then((e) => ({ default: e.SelectControl }))),
+  text: o(() => import("./TextControl/index.js").then((e) => ({ default: e.TextControl })))
+});
 export {
   x as ControlRenderer,
-  p as controls
+  f as controls
 };

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

@@ -0,0 +1,26 @@
+import { BooleanControl } from './BooleanControl/types';
+import { ButtonControl } from './ButtonControl/types';
+import { ColorControl } from './ColorControl/types';
+import { NumberControl } from './NumberControl/types';
+import { SelectControl } from './SelectControl/types';
+import { TextControl } from './TextControl/types';
+export interface BaseControl {
+	label?: string;
+	description?: string;
+	disabled?: boolean;
+}
+
+export type Controls = {
+	color: ColorControl;
+	boolean: BooleanControl;
+	select: SelectControl;
+	text: TextControl;
+	button: ButtonControl;
+	number: NumberControl;
+};
+
+export type ControlsNames = keyof Controls;
+
+export type Control<Name extends ControlsNames> = Controls[Name];
+
+export type ControlsGroup = Record<string, Control<ControlsNames>>;

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

@@ -0,0 +1,5 @@
+import { Control, ControlsNames } from './controls/types';
+export interface ControlRendererProps<Name extends ControlsNames> {
+	name: string;
+	control: Control<Name>;
+}

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

@@ -0,0 +1,47 @@
+import { ControlsGroup } from '../ControlRenderer/controls/types';
+import { HotkeyConfig, Position } from '../../types';
+export type DevPanelHoyKeyConfig = Pick<HotkeyConfig, "key" | "shiftKey" | "altKey" | "ctrlKey" | "metaKey">;
+
+export interface DevPanelProps {
+	theme?: "light" | "dark";
+	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,
+	 * }
+	 * ```
+	 */
+	hotKeyConfig?: DevPanelHoyKeyConfig;
+}
+
+export interface DevPanelSection {
+	name: string;
+	controls: ControlsGroup;
+	isCollapsed?: boolean;
+}
+
+export interface DevPanelState {
+	isVisible: boolean;
+	isCollapsed: boolean;
+	sections: Record<string, DevPanelSection>;
+	position: Position;
+}
+
+export interface DevPanelActions {
+	setVisible: (visible: boolean) => void;
+	setCollapsed: (collapsed: boolean) => void;
+	setPosition: (position: Position) => void;
+	registerSection: (name: string, controls: ControlsGroup) => void;
+	unregisterSection: (name: string) => void;
+	toggleSectionCollapse: (name: string) => void;
+	reset: () => void;
+}
+
+export type DevPanelStore = DevPanelState & DevPanelActions;

package/dist/hooks/useHotkeys/types.d.ts

@@ -0,0 +1,6 @@
+export interface UseHotkeysOptions {
+	enabled?: boolean;
+	target?: HTMLElement | Window | Document;
+	preventDefault?: boolean;
+	stopPropagation?: boolean;
+}

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { DevPanel } from './components/DevPanel';
+export * from './components';
 export { useDevPanel } from './hooks/useDevPanel';

package/dist/index.js

@@ -1,6 +1,9 @@
-import { DevPanel as r } from "./components/DevPanel/DevPanel.js";
-import { useDevPanel as f } from "./hooks/useDevPanel/useDevPanel.js";
+import { ControlRenderer as r, controls as n } from "./components/ControlRenderer/controls/index.js";
+import { DevPanel as l } from "./components/DevPanel/DevPanel.js";
+import { useDevPanel as m } from "./hooks/useDevPanel/useDevPanel.js";
 export {
-  r as DevPanel,
-  f as useDevPanel
+  r as ControlRenderer,
+  l as DevPanel,
+  n as controls,
+  m as useDevPanel
 };

package/dist/types.d.ts

@@ -0,0 +1,18 @@
+export interface Position {
+	x: number;
+	y: number;
+}
+
+export interface HotkeyConfig {
+	key: string;
+	description?: string;
+	ctrlKey?: boolean;
+	shiftKey?: boolean;
+	altKey?: boolean;
+	metaKey?: boolean;
+	preventDefault?: boolean;
+	stopPropagation?: boolean;
+	enabled?: boolean;
+	target?: HTMLElement | Window | Document;
+	action: (event: KeyboardEvent) => void;
+}

package/dist/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/package.json

@@ -15,7 +15,7 @@
 		"url": "git+https://github.com/Berenjenas/react-dev-panel.git"
 	},
 	"private": false,
-	"version": "0.0.1-beta.2",
+	"version": "0.0.1-beta.4",
 	"type": "module",
 	"files": [
 		"dist"