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

package/dist/assets/BooleanControl.css

@@ -1 +1 @@
-._checkboxLabel_1m9o5_1{display:inline-flex;align-items:center;cursor:pointer;position:relative}._checkbox_1m9o5_1{opacity:0;position:absolute;width:0;height:0}._checkboxCustom_1m9o5_15{width:18px;height:18px;border:2px solid #ddd;border-radius:3px;background-color:#fff;display:inline-block;position:relative;transition:all .2s ease}._checkboxCustom_1m9o5_15:after{content:"";position:absolute;display:none;left:4px;top:1px;width:6px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}._checkbox_1m9o5_1:checked+._checkboxCustom_1m9o5_15{background-color:#4caf50;border-color:#4caf50}._checkbox_1m9o5_1:checked+._checkboxCustom_1m9o5_15:after{display:block}._checkbox_1m9o5_1:disabled+._checkboxCustom_1m9o5_15{background-color:#f5f5f5;cursor:not-allowed}
+._switch_1i71a_1{--width: 42px;--height: 20px;--thumb-size: 12px;--thumb-offset: 3px;--thumb-checked-offset: calc(var(--width) - var(--thumb-size) - calc(var(--thumb-offset) * 2) - calc(var(--thumb-offset) / 2));--track-background: var(--dev-panel-input-background-color);--track-border: color-mix(in srgb, var(--dev-panel-border-color) 50%, transparent);--thumb-background: var(--dev-panel-text-color);--thumb-checked-background: white;--focus-ring-color: var(--dev-panel-accent-color);position:relative;display:inline-block;width:var(--width);height:var(--height)}._switch_1i71a_1 input{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}._switch_1i71a_1 input:checked+._slider_1i71a_25{background-color:var(--focus-ring-color)}._switch_1i71a_1 input:checked+._slider_1i71a_25:before{transform:translate(var(--thumb-checked-offset));background-color:var(--thumb-checked-background)}._switch_1i71a_1 input:focus+._slider_1i71a_25{box-shadow:none;outline:none}._switch_1i71a_1 input:disabled+._slider_1i71a_25{opacity:.5;cursor:not-allowed}._switch_1i71a_1 input:disabled+._slider_1i71a_25:before{opacity:.7}._switch_1i71a_1 ._slider_1i71a_25{position:absolute;inset:0;background-color:var(--dev-panel-input-background-color);border:1px solid color-mix(in srgb,var(--dev-panel-border-color) 20%,transparent);border-radius:var(--dev-panel-border-radius);cursor:pointer;transition:var(--dev-panel-transition)}._switch_1i71a_1 ._slider_1i71a_25:before{content:"";position:absolute;top:var(--thumb-offset);left:var(--thumb-offset);width:var(--thumb-size);height:var(--thumb-size);background-color:var(--thumb-background);border-radius:calc(var(--dev-panel-border-radius) - 2px);transition:var(--dev-panel-transition);transform:scale(.95)}._switch_1i71a_1 ._slider_1i71a_25:hover{border-color:var(--dev-panel-accent-color)}._switch_1i71a_1 ._slider_1i71a_25:hover:before{box-shadow:0 2px 6px #00000026}

package/dist/assets/ButtonControl.css

@@ -1 +1 @@
-._button_vlxsf_1{width:100%;padding:8px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;background-color:#4caf50;color:#fff;cursor:pointer;transition:background-color .2s ease}._button_vlxsf_1:hover:not(:disabled){background-color:#45a049}._button_vlxsf_1:active:not(:disabled){background-color:#3e8e41}._button_vlxsf_1:disabled{background-color:#ccc;cursor:not-allowed}
+._button_e2m3l_1{width:100%;padding:var(--dev-panel-spacing-xs) var(--dev-panel-spacing-sm);height:var(--dev-panel-inputs-height);border:none;border-radius:4px;font-size:11px;font-weight:500;background-color:var(--dev-panel-accent-color);color:var(--dev-panel-text-color-highlight);cursor:pointer;transition:var(--dev-panel-transition)}._button_e2m3l_1:hover:not(:disabled){background-color:color-mix(in srgb,var(--dev-panel-accent-color) 80%,transparent)}._button_e2m3l_1:disabled{background-color:color-mix(in srgb,var(--dev-panel-accent-color) 20%,var(--dev-panel-background-color));cursor:not-allowed}

package/dist/assets/ButtonGroupControl.css

@@ -0,0 +1 @@
+._buttonGroupContainer_99d3t_1{width:100%;display:grid;grid-auto-columns:1fr;grid-auto-flow:column;gap:1px}._buttonGroupContainer_99d3t_1 button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}._buttonGroupContainer_99d3t_1 button:not(:last-child):not(:first-child){border-radius:0}._buttonGroupContainer_99d3t_1 button:last-child{border-top-left-radius:0;border-bottom-left-radius:0}

package/dist/assets/ColorControl.css

@@ -1 +1 @@
-._colorInput_5ww2_1{width:100%;height:40px;border:1px solid #ddd;border-radius:4px;cursor:pointer;padding:0}._colorInput_5ww2_1:focus{outline:none;border-color:#4caf50;box-shadow:0 0 0 2px #4caf5033}._colorInput_5ww2_1:disabled{cursor:not-allowed;opacity:.6}
+._container_ds1no_1{display:grid;grid-template-columns:var(--dev-panel-inputs-height) 1fr;gap:8px}._container_ds1no_1 label{overflow:hidden;width:auto;height:var(--dev-panel-inputs-height);cursor:pointer;border-radius:var(--dev-panel-border-radius)}._container_ds1no_1 input[type=color]{background:none;border:0;width:150%;height:150%;margin:-25%}._container_ds1no_1 input[type=color]:focus{border-radius:0;outline:none}

package/dist/assets/DevPanel.css

@@ -1 +1 @@
-:root{--dev-panel-font-family: Helvetica, Arial, Sans-Serif;--dev-panel-primary-color: #0070f3;--dev-panel-secondary-color: #1c1c1c;--dev-panel-background-color: #f8f9fa;--dev-panel-border-color: #e9ecef;--dev-panel-text-color: #333;--dev-panel-shadow: 0 8px 24px rgba(0, 0, 0, .2);--dev-panel-max-width: 320px;--dev-panel-max-height: 80vh}@media (prefers-color-scheme: dark){:root{--dev-panel-background-color: #2a2a2a;--dev-panel-border-color: #555;--dev-panel-text-color: #e0e0e0;--dev-panel-shadow: 0 8px 24px rgba(0, 0, 0, .5)}}._devPanelContainer_k5g13_21{position:fixed;z-index:9998;border:1px solid #ccc;border-radius:8px;box-shadow:0 8px 24px #0003;width:var(--dev-panel-max-width);max-height:var(--dev-panel-max-height);overflow:hidden;-webkit-user-select:none;user-select:none;font-family:var(--dev-panel-font-family)}._header_k5g13_34{display:flex;align-items:center;justify-content:space-between;padding:4px;background:#1e2233;border-bottom:1px solid #e9ecef;cursor:move}._header_k5g13_34:hover{background:#e9ecef}._title_k5g13_47{font-size:12px;font-weight:600;color:#333;display:flex;align-items:center;gap:8px}._headerButton_k5g13_56{background:none;border:none;color:#666;font-size:12px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s ease}._headerButton_k5g13_56:hover{background:#dee2e6;color:#333}._headerButton_k5g13_56:active{transform:scale(.95)}._content_k5g13_74{max-height:calc(80vh - 48px);overflow-y:auto}._actions_k5g13_79{display:flex;justify-content:center;padding-top:12px;margin-top:12px;border-top:1px solid #e9ecef}._actions_k5g13_79:last-child{border:none}._resetButton_k5g13_90{background:#dc3545;color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;transition:background .2s ease}._resetButton_k5g13_90:hover{background:#c82333}._resetButton_k5g13_90:active{background:#bd2130}._content_k5g13_74::-webkit-scrollbar{width:6px}._content_k5g13_74::-webkit-scrollbar-track{background:#f1f1f1}._content_k5g13_74::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}._content_k5g13_74::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (prefers-color-scheme: dark){._devPanelContainer_k5g13_21{background:#2a2a2a;border-color:#555}._header_k5g13_34{background:#1e2233;border-color:#555}._header_k5g13_34:hover{background:#444}._title_k5g13_47{color:#e0e0e0}._headerButton_k5g13_56{color:#b0b0b0}._headerButton_k5g13_56:hover{background:#555;color:#e0e0e0}._actions_k5g13_79{border-color:#555}._resetButton_k5g13_90{background:#dc3545}._resetButton_k5g13_90:hover{background:#c82333}._content_k5g13_74::-webkit-scrollbar-track{background:#333}._content_k5g13_74::-webkit-scrollbar-thumb{background:#666}._content_k5g13_74::-webkit-scrollbar-thumb:hover{background:#777}}._dragging_k5g13_168{opacity:.9;cursor:grabbing!important;transition:opacity .2s ease}
+:root{--dev-panel-font-family: Helvetica, Arial, Sans-Serif;--dev-panel-font-size-xs: 12px;--dev-panel-font-size-sm: 14px;--dev-panel-font-size-md: 16px;--dev-panel-font-size-lg: 18px;--dev-panel-accent-color: #6663fd;--dev-panel-primary-color: #6663fd;--dev-panel-secondary-color: #1c1c1c;--dev-panel-background-color: #3e3d40;--dev-panel-highlight-color: #f0f0f0;--dev-panel-foreground-color: #313133;--dev-panel-border-color: #a1a1a1;--dev-panel-text-color: #e0e0e0;--dev-panel-text-color-muted: #b0b0b0;--dev-panel-input-background-color: #302f32;--dev-panel-text-color-highlight: #fbfffa;--dev-panel-spacing-xs: 4px;--dev-panel-spacing-sm: 8px;--dev-panel-spacing-md: 10px;--dev-panel-spacing-lg: 14px;--dev-panel-shadow: 0 8px 24px rgba(0, 0, 0, .2);--dev-panel-max-width: 320px;--dev-panel-max-height: 80vh;--dev-panel-inputs-height: 24px;--dev-panel-border-radius: 6px;--dev-panel-transition: all .2s cubic-bezier(.4, 0, .2, 1)}._devPanelContainer_12zm6_30{position:fixed;z-index:9998;border-radius:var(--dev-panel-border-radius);box-shadow:0 8px 24px #0003;width:var(--dev-panel-max-width);max-height:var(--dev-panel-max-height);overflow:hidden;-webkit-user-select:none;user-select:none;font-family:var(--dev-panel-font-family)}._devPanelContainer_12zm6_30 ._header_12zm6_41{display:flex;align-items:center;justify-content:space-between;padding:var(--dev-panel-spacing-xs);background:var(--dev-panel-foreground-color);cursor:move;color:var(--dev-panel-text-color)}._devPanelContainer_12zm6_30 ._title_12zm6_50{font-size:var(--dev-panel-font-size-xs);font-weight:600;display:flex;align-items:center;gap:var(--dev-panel-spacing-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._devPanelContainer_12zm6_30 ._button_12zm6_60{background:none;border:none;color:inherit;font-size:var(--dev-panel-font-size-sm);cursor:pointer;padding:var(--dev-panel-spacing-xs) var(--dev-panel-spacing-sm);border-radius:4px;transition:all .2s ease}._devPanelContainer_12zm6_30 ._button_12zm6_60:hover{background:#dee2e6;color:#333}._devPanelContainer_12zm6_30 ._button_12zm6_60:active{transform:scale(.95)}._content_12zm6_78{max-height:calc(var(--dev-panel-max-height) - 48px);overflow-y:auto;background-color:var(--dev-panel-background-color)}._content_12zm6_78::-webkit-scrollbar{width:6px}._content_12zm6_78::-webkit-scrollbar-track{background:#f1f1f1}._content_12zm6_78::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}._content_12zm6_78::-webkit-scrollbar-thumb:hover{background:#a8a8a8}

package/dist/assets/Input.css

@@ -0,0 +1 @@
+._input_w2bi0_1{width:100%;height:var(--dev-panel-inputs-height);border:0;border-radius:var(--dev-panel-border-radius);cursor:pointer;padding:0;background-color:transparent;color:var(--dev-panel-text-color-highlight)}._input_w2bi0_1:last-of-type{background-color:var(--dev-panel-input-background-color);padding-left:var(--dev-panel-spacing-xs)}._input_w2bi0_1:focus{outline:none}._input_w2bi0_1:disabled{cursor:not-allowed;opacity:.6}._input_w2bi0_1::placeholder{color:var(--dev-panel-text-color-muted)}

package/dist/assets/Section.css

@@ -1 +1 @@
-._section_1av28_1{padding-top:6px;padding-left:10px;padding-right:10px;overflow:hidden}._section_1av28_1:last-child{margin-bottom:0}._section_1av28_1:not(:first-of-type){border-top:1px solid #222;margin-top:8px}._section_1av28_1:last-of-type{padding-bottom:6px}._section_1av28_1 ._header_1av28_17{display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background .2s ease}._section_1av28_1 ._header_1av28_17 ._title_1av28_27{font-size:11px;font-weight:600;color:#333}._section_1av28_1 ._header_1av28_17 ._toggle_1av28_32{font-size:10px;color:#666;transition:transform .2s ease}._section_1av28_1 ._content_1av28_37{padding-left:10px;position:relative;display:grid;grid-template-columns:100%;row-gap:6px;transition:opacity .25s}._section_1av28_1 ._content_1av28_37:after{content:"";position:absolute;left:0;top:0;width:2px;height:100%;background-color:green;opacity:.4;transform:translate(-50%)}@media (prefers-color-scheme: dark){._section_1av28_1,._section_1av28_1 ._header_1av28_17{border-color:#555}._section_1av28_1 ._header_1av28_17 ._title_1av28_27{color:#e0e0e0}._section_1av28_1 ._toggle_1av28_32{color:#b0b0b0}}
+._section_1wq66_1{padding:var(--dev-panel-spacing-sm);overflow:hidden}._section_1wq66_1:last-child{margin-bottom:0}._section_1wq66_1 ._header_1wq66_8{display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background .2s ease}._section_1wq66_1 ._header_1wq66_8 ._title_1wq66_15{font-size:11px;font-weight:600;color:var(--dev-panel-text-color)}._section_1wq66_1 ._header_1wq66_8 ._toggle_1wq66_20{font-size:10px;color:var(--dev-panel-border-color);transition:transform .2s ease}._section_1wq66_1 ._content_1wq66_25{position:relative;padding:var(--dev-panel-spacing-sm) 0 0 var(--dev-panel-spacing-sm);display:grid;grid-template-columns:100%;row-gap:var(--dev-panel-spacing-sm);transition:opacity .25s}._section_1wq66_1 ._content_1wq66_25:after{content:"";position:absolute;left:0;bottom:0;width:2px;height:calc(100% - var(--dev-panel-spacing-sm));background-color:var(--dev-panel-border-color);transform:translate(-50%)}@media (prefers-color-scheme: dark){._section_1wq66_1,._section_1wq66_1 ._header_1wq66_8{border-color:#555}._section_1wq66_1 ._header_1wq66_8 ._title_1wq66_15{color:#e0e0e0}._section_1wq66_1 ._toggle_1wq66_20{color:#b0b0b0}}

package/dist/assets/Select.css

@@ -0,0 +1 @@
+._select_12f91_1{width:100%;height:var(--dev-panel-inputs-height);border:0;border-radius:var(--dev-panel-border-radius);cursor:pointer;padding:0;background-color:transparent;color:var(--dev-panel-text-color-highlight)}._select_12f91_1:last-of-type{background-color:var(--dev-panel-input-background-color);padding-left:var(--dev-panel-spacing-xs)}._select_12f91_1:focus{outline:none}._select_12f91_1:disabled{cursor:not-allowed;opacity:.6}._select_12f91_1::placeholder{color:var(--dev-panel-text-color-muted)}

package/dist/assets/index.css

@@ -1 +1 @@
-._controlContainer_xw58o_1{grid-template-columns:auto 160px;column-gap:7px;display:grid;align-items:center;height:100%;overflow:hidden}._label_xw58o_10{font-weight:500;font-size:12px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._description_xw58o_24{font-size:10px;font-weight:400;color:#666;opacity:.8}@media (prefers-color-scheme: dark){._label_xw58o_10{color:#e0e0e0}._description_xw58o_24{color:#b0b0b0}}
+._controlContainer_sxvbd_1{gap:var(--dev-panel-spacing-sm);display:grid;height:100%;align-items:center;overflow:hidden;color:var(--dev-panel-text-color)}._controlContainer_sxvbd_1:not(._fullWidth_sxvbd_9){grid-template-columns:100px 1fr}._controlContainer_sxvbd_1 ._controlWrapper_sxvbd_12{display:flex;justify-content:flex-end}._controlContainer_sxvbd_1 ._label_sxvbd_16{font-weight:500;font-size:var(--dev-panel-font-size-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._description_sxvbd_24,._loading_sxvbd_25{font-size:var(--dev-panel-font-size-xs);color:var(--dev-panel-text-color-muted)}._description_sxvbd_24{text-align:right}

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

@@ -1,24 +1,25 @@
-import { jsxs as b, jsx as o } from "react/jsx-runtime";
-import '../../../../assets/BooleanControl.css';const a = "_checkboxLabel_1m9o5_1", h = "_checkbox_1m9o5_1", t = "_checkboxCustom_1m9o5_15", e = {
-  checkboxLabel: a,
-  checkbox: h,
-  checkboxCustom: t
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { className as t } from "../../../../utils/className/className.js";
+import "../../../../utils/store/store.js";
+import '../../../../assets/BooleanControl.css';const l = "_slider_1i71a_25", e = {
+  switch: "_switch_1i71a_1",
+  slider: l
 };
-function k({ control: c }) {
-  return /* @__PURE__ */ b("label", { className: e.checkboxLabel, children: [
-    /* @__PURE__ */ o(
+function d({ control: s }) {
+  return /* @__PURE__ */ c("label", { className: e.switch, children: [
+    /* @__PURE__ */ a(
       "input",
       {
         type: "checkbox",
-        checked: c.value,
-        disabled: c.disabled,
-        onChange: (s) => c.onChange(s.target.checked),
+        checked: s.value,
+        disabled: s.disabled,
+        onChange: (i) => s.onChange(i.target.checked),
         className: e.checkbox
       }
     ),
-    /* @__PURE__ */ o("span", { className: e.checkboxCustom })
+    /* @__PURE__ */ a("span", { ...t(e.slider, e.round) })
   ] });
 }
 export {
-  k as BooleanControl
+  d as BooleanControl
 };

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

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

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

@@ -0,0 +1,2 @@
+import { ButtonGroupControlProps } from './types';
+export declare function ButtonGroupControl({ control }: ButtonGroupControlProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,22 @@
+import { jsx as t } from "react/jsx-runtime";
+import { ButtonControl as e } from "../ButtonControl/ButtonControl.js";
+import '../../../../assets/ButtonGroupControl.css';const l = "_buttonGroupContainer_99d3t_1", i = {
+  buttonGroupContainer: l
+};
+function p({ control: n }) {
+  return /* @__PURE__ */ t("div", { className: i.buttonGroupContainer, children: n.buttons.map((o, r) => /* @__PURE__ */ t(
+    e,
+    {
+      control: {
+        type: "button",
+        label: o.label,
+        onClick: o.onClick,
+        disabled: o.disabled
+      }
+    },
+    r
+  )) });
+}
+export {
+  p as ButtonGroupControl
+};

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

@@ -0,0 +1 @@
+export * from './ButtonGroupControl';

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

@@ -0,0 +1,4 @@
+import { ButtonGroupControl as t } from "./ButtonGroupControl.js";
+export {
+  t as ButtonGroupControl
+};

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

@@ -0,0 +1,14 @@
+import { ButtonControl } from '../ButtonControl/types';
+import { BaseControl } from '../types';
+export interface ButtonGroupControl extends BaseControl {
+	type: "buttonGroup";
+	buttons: {
+		label: ButtonControl["label"];
+		onClick: ButtonControl["onClick"];
+		disabled?: ButtonControl["disabled"];
+	}[];
+}
+
+export interface ButtonGroupControlProps {
+	control: ButtonGroupControl;
+}

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

@@ -1,19 +1,23 @@
-import { jsx as e } from "react/jsx-runtime";
-import '../../../../assets/ColorControl.css';const n = "_colorInput_5ww2_1", l = {
-  colorInput: n
+import { jsxs as t, jsx as n } from "react/jsx-runtime";
+import { Input as l } from "../../../Input/Input.js";
+import '../../../../assets/ColorControl.css';const o = "_container_ds1no_1", r = {
+  container: o
 };
-function a({ control: o }) {
-  return /* @__PURE__ */ e(
-    "input",
-    {
-      type: "color",
-      value: o.value,
-      disabled: o.disabled,
-      onChange: (t) => o.onChange(t.target.value),
-      className: l.colorInput
-    }
-  );
+function d({ control: e }) {
+  return /* @__PURE__ */ t("div", { className: r.container, children: [
+    /* @__PURE__ */ n("label", { children: /* @__PURE__ */ n(l, { type: "color", value: e.value, disabled: e.disabled, onChange: (a) => e.onChange(a.target.value) }) }),
+    /* @__PURE__ */ n(
+      l,
+      {
+        type: "text",
+        value: e.value,
+        disabled: e.disabled,
+        onChange: (a) => e.onChange(a.target.value),
+        placeholder: "Enter color value"
+      }
+    )
+  ] });
 }
 export {
-  a as ColorControl
+  d as ColorControl
 };

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

@@ -1,14 +1,28 @@
 import { NumberControlProps } from './types';
 /**
- * Component that renders a number control
+ * 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
  *
  * @example
  * ```typescript
+ * // Real-time updates
  * <NumberControl control={{
  *   type: 'number',
  *   value: 10,
+ *   min: 0,
+ *   max: 100,
+ *   step: 1,
+ *   event: 'onChange',
+ *   onChange: (value) => setValue(value)
+ * }} />
+ *
+ * // Updates only when losing focus (default behavior)
+ * <NumberControl control={{
+ *   type: 'number',
+ *   value: 10,
+ *   event: 'onBlur', // or omit for default
  *   onChange: (value) => setValue(value)
  * }} />
  * ```

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

@@ -1,22 +1,32 @@
-import { jsx as u } from "react/jsx-runtime";
-import '../../../../assets/NumberControl.css';const m = "_numberInput_pm0en_1", t = {
-  numberInput: m
-};
-function p({ control: e }) {
-  return /* @__PURE__ */ u(
-    "input",
+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";
+function h({ control: e }) {
+  const n = e.event || "onBlur", [l, t] = i(e.value);
+  p(() => {
+    t(e.value);
+  }, [e.value]);
+  const m = (u) => {
+    const a = Number(u.target.value);
+    t(a), n === "onChange" && e.onChange(a);
+  }, s = (u) => {
+    const a = Number(u.target.value);
+    n === "onBlur" && e.onChange(a);
+  };
+  return /* @__PURE__ */ r(
+    f,
     {
       type: "number",
-      value: e.value,
+      value: l,
       min: e.min,
       max: e.max,
       step: e.step,
       disabled: e.disabled,
-      onChange: (n) => e.onChange(Number(n.target.value)),
-      className: t.numberInput
+      onChange: m,
+      ...n === "onBlur" && { onBlur: s }
     }
   );
 }
 export {
-  p as NumberControl
+  h as NumberControl
 };

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

@@ -1,5 +1,5 @@
-import { BaseControl } from '../types';
-export interface NumberControl extends BaseControl {
+import { BaseInputControl } from '../types';
+export interface NumberControl extends BaseInputControl {
 	type: "number";
 	value: number;
 	min?: number;

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

@@ -1,13 +1,14 @@
-import { jsx as t } from "react/jsx-runtime";
-import '../../../../assets/SelectControl.css';const n = "_select_1w3k9_1", c = {
-  select: n
+import { jsx as s } from "react/jsx-runtime";
+import { Select as n } from "../../../Select/Select.js";
+import '../../../../assets/SelectControl.css';const r = "_select_1w3k9_1", c = {
+  select: r
 };
-function u({ control: l }) {
-  return /* @__PURE__ */ t("select", { value: l.value, disabled: l.disabled, onChange: (e) => l.onChange(e.target.value), className: c.select, children: l.options.map((e) => {
-    const s = typeof e == "string" ? e : e.value, a = typeof e == "string" ? e : e.label;
-    return /* @__PURE__ */ t("option", { value: s, children: a }, s);
+function o({ control: t }) {
+  return /* @__PURE__ */ s(n, { value: t.value, disabled: t.disabled, onChange: (e) => t.onChange(e.target.value), className: c.select, children: t.options.map((e) => {
+    const l = typeof e == "string" ? e : e.value, a = typeof e == "string" ? e : e.label;
+    return /* @__PURE__ */ s("option", { value: l, children: a }, l);
   }) });
 }
 export {
-  u as SelectControl
+  o as SelectControl
 };

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

@@ -1,15 +1,27 @@
 import { TextControlProps } from './types';
 /**
- * Component that renders a text control
+ * 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
  *
  * @example
  * ```typescript
+ * // Real-time updates
  * <TextControl control={{
  *   type: 'text',
  *   value: 'Hello',
  *   placeholder: 'Enter your name',
+ *   event: 'onChange',
+ *   onChange: (value) => setValue(value)
+ * }} />
+ *
+ * // Updates only when losing focus (default behavior)
+ * <TextControl control={{
+ *   type: 'text',
+ *   value: 'Hello',
+ *   placeholder: 'Enter your name',
+ *   event: 'onBlur', // or omit for default
  *   onChange: (value) => setValue(value)
  * }} />
  * ```

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

@@ -1,20 +1,30 @@
-import { jsx as a } from "react/jsx-runtime";
-import '../../../../assets/TextControl.css';const n = "_textInput_w4cvv_1", p = {
-  textInput: n
-};
-function l({ control: t }) {
-  return /* @__PURE__ */ a(
-    "input",
+import { jsx as s } from "react/jsx-runtime";
+import { useState as h, useEffect as p } from "react";
+import { Input as d } from "../../../Input/Input.js";
+function g({ control: e }) {
+  const n = e.event || "onBlur", [u, l] = h(e.value);
+  p(() => {
+    l(e.value);
+  }, [e.value]);
+  const o = (t) => {
+    const a = t.target.value;
+    l(a), n === "onChange" && e.onChange(a);
+  }, r = (t) => {
+    const a = t.target.value;
+    n === "onBlur" && e.onChange(a);
+  };
+  return /* @__PURE__ */ s(
+    d,
     {
       type: "text",
-      value: t.value,
-      placeholder: t.placeholder,
-      disabled: t.disabled,
-      onChange: (e) => t.onChange(e.target.value),
-      className: p.textInput
+      value: u,
+      placeholder: e.placeholder,
+      disabled: e.disabled,
+      onChange: o,
+      ...n === "onBlur" && { onBlur: r }
     }
   );
 }
 export {
-  l as TextControl
+  g as TextControl
 };

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

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

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

@@ -9,5 +9,6 @@ export declare const controls: Readonly<{
     number: import('react').LazyExoticComponent<typeof import('./NumberControl').NumberControl>;
     select: import('react').LazyExoticComponent<typeof import('./SelectControl').SelectControl>;
     text: import('react').LazyExoticComponent<typeof import('./TextControl').TextControl>;
+    buttonGroup: import('react').LazyExoticComponent<typeof import('./ButtonGroupControl').ButtonGroupControl>;
 }>;
 export { ControlRenderer } from '..';

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

@@ -1,37 +1,41 @@
-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 { Suspense as a, lazy as e } from "react";
+import { jsxs as i, Fragment as c, jsx as n } from "react/jsx-runtime";
+import { className as p } from "../../../utils/className/className.js";
 import "../../../utils/store/store.js";
-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)
+import '../../../assets/index.css';const u = "_controlContainer_sxvbd_1", m = "_fullWidth_sxvbd_9", b = "_controlWrapper_sxvbd_12", f = "_label_sxvbd_16", h = "_description_sxvbd_24", C = "_loading_sxvbd_25", r = {
+  controlContainer: u,
+  fullWidth: m,
+  controlWrapper: b,
+  label: f,
+  description: h,
+  loading: C
+}, _ = ["button", "buttonGroup"];
+function g({ name: t, control: o }) {
+  const s = o?.label || t;
+  function d() {
+    if (!o || !o.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" });
+    const l = v[o.type];
+    return l ? /* @__PURE__ */ n(a, { fallback: /* @__PURE__ */ n("div", { className: r.loading, children: "Loading control..." }), children: /* @__PURE__ */ n(l, { control: o }) }) : /* @__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__ */ n("span", { className: r.description, children: t.description })
+  return /* @__PURE__ */ i(c, { children: [
+    /* @__PURE__ */ i("div", { ...p(r.controlContainer, { [r.fullWidth]: _.includes(o.type) }), children: [
+      o?.type !== "button" && /* @__PURE__ */ n("label", { className: r.label, children: s }),
+      /* @__PURE__ */ n("div", { className: r.controlWrapper, children: d() })
     ] }),
-    a()
+    o?.description && /* @__PURE__ */ n("span", { className: r.description, children: o.description })
   ] });
 }
-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 })))
+const v = Object.freeze({
+  boolean: e(() => import("./BooleanControl/index.js").then((t) => ({ default: t.BooleanControl }))),
+  button: e(() => import("./ButtonControl/index.js").then((t) => ({ default: t.ButtonControl }))),
+  color: e(() => import("./ColorControl/index.js").then((t) => ({ default: t.ColorControl }))),
+  number: e(() => import("./NumberControl/index.js").then((t) => ({ default: t.NumberControl }))),
+  select: e(() => import("./SelectControl/index.js").then((t) => ({ default: t.SelectControl }))),
+  text: e(() => import("./TextControl/index.js").then((t) => ({ default: t.TextControl }))),
+  buttonGroup: e(() => import("./ButtonGroupControl/index.js").then((t) => ({ default: t.ButtonGroupControl })))
 });
 export {
-  x as ControlRenderer,
-  f as controls
+  g as ControlRenderer,
+  v as controls
 };

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

@@ -1,5 +1,6 @@
 import { BooleanControl } from './BooleanControl/types';
 import { ButtonControl } from './ButtonControl/types';
+import { ButtonGroupControl } from './ButtonGroupControl/types';
 import { ColorControl } from './ColorControl/types';
 import { NumberControl } from './NumberControl/types';
 import { SelectControl } from './SelectControl/types';
@@ -10,6 +11,11 @@ export interface BaseControl {
 	disabled?: boolean;
 }
 
+export interface BaseInputControl extends BaseControl {
+	event?: "onBlur" | "onChange";
+	onChange: (value: string) => void;
+}
+
 export type Controls = {
 	color: ColorControl;
 	boolean: BooleanControl;
@@ -17,6 +23,7 @@ export type Controls = {
 	text: TextControl;
 	button: ButtonControl;
 	number: NumberControl;
+	buttonGroup: ButtonGroupControl;
 };
 
 export type ControlsNames = keyof Controls;

package/dist/components/DevPanel/DevPanel.js

@@ -1,74 +1,65 @@
 import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { useCallback as v } from "react";
+import { useCallback as C } from "react";
 import { useDragAndDrop as _ } from "../../hooks/useDragAndDrop/useDragAndDrop.js";
-import { useHotkey as C } from "../../hooks/useHotkeys/useHotkey.js";
-import { className as D } from "../../utils/className/className.js";
-import { useDevPanelVisible as P, useDevPanelCollapsed as y, useDevPanelPosition as k, useDevPanelSections as b, useDevPanelActions as N } from "../../utils/store/store.js";
-import { EmptyContent as K } from "../EmptyContent/EmptyContent.js";
+import { useHotkey as D } from "../../hooks/useHotkeys/useHotkey.js";
+import { className as P } from "../../utils/className/className.js";
+import { useDevPanelVisible as b, useDevPanelCollapsed as g, useDevPanelPosition as y, useDevPanelSections as N, useDevPanelActions as K } from "../../utils/store/store.js";
+import { EmptyContent as k } from "../EmptyContent/EmptyContent.js";
 import { Section as x } from "../Section/Section.js";
-import '../../assets/DevPanel.css';const B = "_devPanelContainer_k5g13_21", E = "_header_k5g13_34", V = "_title_k5g13_47", j = "_headerButton_k5g13_56", w = "_content_k5g13_74", S = "_dragging_k5g13_168", e = {
-  devPanelContainer: B,
+import '../../assets/DevPanel.css';const z = "_devPanelContainer_12zm6_30", E = "_header_12zm6_41", V = "_title_12zm6_50", j = "_button_12zm6_60", w = "_content_12zm6_78", e = {
+  devPanelContainer: z,
   header: E,
   title: V,
-  headerButton: j,
-  content: w,
-  dragging: S
-}, A = {
+  button: j,
+  content: w
+}, S = {
   key: "f",
   shiftKey: !0,
   altKey: !0,
   ctrlKey: !1,
   metaKey: !1
 };
-function G({ panelTitle: c = "Dev panel", ...d }) {
-  const i = P(), n = y(), a = k(), g = b(), o = N(), u = v(
+function F({ panelTitle: c = "Dev panel", ...m }) {
+  const i = b(), n = g(), l = y(), d = N(), o = K(), u = C(
     (s) => {
       o.setPosition(s);
     },
     [o]
-  ), { isDragging: m, elementRef: h, handleMouseDown: p } = _({
+  ), { isDragging: p, elementRef: f, handleMouseDown: h } = _({
     onPositionChange: u
   });
-  if (C({
+  if (D({
     description: "Show Dev Panel",
     preventDefault: !0,
     action: () => o.setVisible(!i),
-    ...A,
-    ...d.hotKeyConfig
+    ...S,
+    ...m.hotKeyConfig
   }), process.env.NODE_ENV !== "development" || !i)
     return null;
-  const l = Object.entries(g);
+  const a = Object.entries(d);
   return /* @__PURE__ */ r(
     "div",
     {
-      ref: h,
-      ...D(e.devPanelContainer, {
-        [e.dragging]: m
+      ref: f,
+      ...P(e.devPanelContainer, {
+        [e.dragging]: p
       }),
       style: {
-        left: a.x,
-        top: a.y,
+        left: l.x,
+        top: l.y,
         height: n ? "auto" : void 0
       },
       children: [
-        /* @__PURE__ */ r("div", { className: e.header, onMouseDown: p, children: [
-          /* @__PURE__ */ t(
-            "button",
-            {
-              className: e.headerButton,
-              onClick: () => o.setCollapsed(!n),
-              title: n ? "Expand" : "Collapse",
-              children: n ? "▼" : "▲"
-            }
-          ),
+        /* @__PURE__ */ r("div", { className: e.header, onMouseDown: h, children: [
+          /* @__PURE__ */ t("button", { className: e.button, onClick: () => o.setCollapsed(!n), title: n ? "Expand" : "Collapse", children: n ? "▼" : "▲" }),
           /* @__PURE__ */ t("div", { className: e.title, children: c }),
-          /* @__PURE__ */ t("button", { className: e.headerButton, onClick: () => o.setVisible(!1), title: "Close", children: "✕" })
+          /* @__PURE__ */ t("button", { className: e.button, onClick: () => o.setVisible(!1), title: "Close", children: "✕" })
         ] }),
-        !n && /* @__PURE__ */ t("div", { className: e.content, children: l.length ? l.map(([s, f]) => /* @__PURE__ */ t(x, { sectionName: s, section: f }, `section-${s}`)) : /* @__PURE__ */ t(K, {}) })
+        !n && /* @__PURE__ */ t("div", { className: e.content, children: a.length ? a.map(([s, v]) => /* @__PURE__ */ t(x, { sectionName: s, section: v }, `section-${s}`)) : /* @__PURE__ */ t(k, {}) })
       ]
     }
   );
 }
 export {
-  G as DevPanel
+  F as DevPanel
 };

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

@@ -0,0 +1 @@
+export declare function Input(props: React.InputHTMLAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Input/Input.js

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

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

@@ -0,0 +1 @@
+export * from './Input';

package/dist/components/Input/index.js

@@ -0,0 +1,4 @@
+import { Input as r } from "./Input.js";
+export {
+  r as Input
+};

package/dist/components/Section/Section.js

@@ -1,23 +1,23 @@
 import { jsxs as s, jsx as n } from "react/jsx-runtime";
-import { ControlRenderer as i } from "../ControlRenderer/controls/index.js";
+import { ControlRenderer as a } from "../ControlRenderer/controls/index.js";
 import { useDevPanelActions as r } from "../../utils/store/store.js";
-import '../../assets/Section.css';const d = "_section_1av28_1", _ = "_header_1av28_17", m = "_title_1av28_27", g = "_toggle_1av28_32", p = "_content_1av28_37", e = {
+import '../../assets/Section.css';const d = "_section_1wq66_1", _ = "_header_1wq66_8", m = "_title_1wq66_15", g = "_toggle_1wq66_20", p = "_content_1wq66_25", e = {
   section: d,
   header: _,
   title: m,
   toggle: g,
   content: p
 };
-function f({ sectionName: c, section: t }) {
+function C({ sectionName: c, section: t }) {
   const l = r();
   return /* @__PURE__ */ s("div", { className: e.section, children: [
     /* @__PURE__ */ s("div", { className: e.header, onClick: () => l.toggleSectionCollapse(c), children: [
       /* @__PURE__ */ n("span", { className: e.title, children: t.name }),
       /* @__PURE__ */ n("span", { className: e.toggle, children: t.isCollapsed ? "▶" : "▼" })
     ] }),
-    !t.isCollapsed && /* @__PURE__ */ n("div", { className: e.content, children: Object.entries(t.controls).map(([o, a]) => /* @__PURE__ */ n(i, { name: o, control: a }, o)) })
+    !t.isCollapsed && /* @__PURE__ */ n("div", { className: e.content, children: Object.entries(t.controls).map(([o, i]) => /* @__PURE__ */ n(a, { name: o, control: i }, o)) })
   ] });
 }
 export {
-  f as Section
+  C as Section
 };

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

@@ -0,0 +1 @@
+export declare function Select(props: React.SelectHTMLAttributes<HTMLSelectElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Select/Select.js

@@ -0,0 +1,10 @@
+import { jsx as t } from "react/jsx-runtime";
+import '../../assets/Select.css';const s = "_select_12f91_1", c = {
+  select: s
+};
+function o(e) {
+  return /* @__PURE__ */ t("select", { ...e, className: c.select });
+}
+export {
+  o as Select
+};

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

@@ -0,0 +1 @@
+export * from './Select';

package/dist/components/Select/index.js

@@ -0,0 +1,4 @@
+import { Select as r } from "./Select.js";
+export {
+  r as Select
+};

package/package.json

@@ -15,7 +15,7 @@
 		"url": "git+https://github.com/Berenjenas/react-dev-panel.git"
 	},
 	"private": false,
-	"version": "0.0.1-beta.4",
+	"version": "0.0.1-beta.5",
 	"type": "module",
 	"files": [
 		"dist"
@@ -60,8 +60,8 @@
 		"test": "vitest"
 	},
 	"peerDependencies": {
-		"react": "^19.1.0",
-		"react-dom": "^19.1.0",
+		"react": ">=18.0.0",
+		"react-dom": ">=18.0.0",
 		"zustand": "^5.0.6"
 	},
 	"devDependencies": {

package/dist/assets/NumberControl.css

@@ -1 +0,0 @@
-._numberInput_pm0en_1{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;background-color:#fff}._numberInput_pm0en_1:focus{outline:none;border-color:#4caf50;box-shadow:0 0 0 2px #4caf5033}._numberInput_pm0en_1:disabled{background-color:#f5f5f5;cursor:not-allowed}

package/dist/assets/TextControl.css

@@ -1 +0,0 @@
-._textInput_w4cvv_1{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;background-color:#fff}._textInput_w4cvv_1:focus{outline:none;border-color:#4caf50;box-shadow:0 0 0 2px #4caf5033}._textInput_w4cvv_1:disabled{background-color:#f5f5f5;cursor:not-allowed}._textInput_w4cvv_1::placeholder{color:#999}

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

@@ -1,5 +0,0 @@
-/**
- * Ejemplo de uso del hook useHotkeys
- * Este componente demuestra diferentes formas de usar el hook
- */
-export declare function HotkeysExample(): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/useHotkeys/example.js

@@ -1,266 +0,0 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { useState as p, useCallback as o } from "react";
-import { createHotkey as y } from "../../utils/createHotkey/createHotkey.js";
-import { useHotkeys as m } from "./useHotkeys.js";
-function w() {
-  const [d, s] = p(""), [l, a] = p(!1), [r, f] = p([]), [n, u] = p(-1), g = o(() => {
-    if (d.trim()) {
-      const t = [...r, d];
-      f(t), u(t.length - 1), alert(`Guardado: "${d}"`);
-    }
-  }, [d, r]), h = o(() => {
-    s(""), a(!1);
-  }, []), x = o(() => {
-    if (n > 0) {
-      const t = n - 1;
-      s(r[t]), u(t);
-    }
-  }, [r, n]), k = o(() => {
-    if (n < r.length - 1) {
-      const t = n + 1;
-      s(r[t]), u(t);
-    }
-  }, [r, n]), b = o(() => {
-    l && a(!1);
-  }, [l]), E = o(() => {
-    a(!l);
-  }, [l]), K = o(() => {
-    const t = document.getElementById("example-input");
-    t && t.focus();
-  }, []);
-  m(
-    [
-      {
-        key: "s",
-        ctrlKey: !0,
-        action: g,
-        description: "Guardar",
-        preventDefault: !0
-      },
-      {
-        key: "z",
-        ctrlKey: !0,
-        action: x,
-        description: "Deshacer",
-        preventDefault: !0
-      },
-      {
-        key: "z",
-        ctrlKey: !0,
-        shiftKey: !0,
-        action: k,
-        description: "Rehacer",
-        preventDefault: !0
-      },
-      {
-        key: "Escape",
-        action: b,
-        description: "Cancelar edición"
-      },
-      {
-        key: "e",
-        ctrlKey: !0,
-        action: E,
-        description: "Alternar edición",
-        preventDefault: !0
-      },
-      {
-        key: "l",
-        ctrlKey: !0,
-        action: h,
-        description: "Limpiar",
-        preventDefault: !0
-      },
-      {
-        key: "f",
-        ctrlKey: !0,
-        action: K,
-        description: "Enfocar input",
-        preventDefault: !0
-      }
-    ],
-    {
-      enabled: !0,
-      target: window
-    }
-  );
-  const v = y(
-    "k",
-    () => {
-      alert("Función de búsqueda activada!");
-    },
-    { meta: !0 },
-    { description: "Buscar" }
-  ), C = y(
-    "Delete",
-    () => {
-      h();
-    },
-    {},
-    { description: "Eliminar todo", enabled: l }
-  );
-  m([v, C]);
-  const H = [
-    { key: "s", ctrlKey: !0, description: "Guardar" },
-    { key: "z", ctrlKey: !0, description: "Deshacer" },
-    { key: "z", ctrlKey: !0, shiftKey: !0, description: "Rehacer" },
-    { key: "e", ctrlKey: !0, description: "Alternar edición" },
-    { key: "l", ctrlKey: !0, description: "Limpiar" },
-    { key: "f", ctrlKey: !0, description: "Enfocar input" },
-    { key: "k", metaKey: !0, description: "Buscar" },
-    { key: "Delete", description: "Eliminar todo (solo en modo edición)" },
-    { key: "Escape", description: "Cancelar edición" }
-  ];
-  return /* @__PURE__ */ i("div", { style: { padding: "20px", maxWidth: "600px", margin: "0 auto" }, children: [
-    /* @__PURE__ */ e("h2", { children: "Ejemplo de useHotkeys Hook" }),
-    /* @__PURE__ */ i("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ e("label", { htmlFor: "example-input", children: "Texto:" }),
-      /* @__PURE__ */ e(
-        "input",
-        {
-          id: "example-input",
-          type: "text",
-          value: d,
-          onChange: (t) => s(t.target.value),
-          onFocus: () => a(!0),
-          onBlur: () => a(!1),
-          style: {
-            width: "100%",
-            padding: "10px",
-            margin: "5px 0",
-            border: l ? "2px solid blue" : "1px solid gray",
-            borderRadius: "4px"
-          },
-          placeholder: "Escribe algo aquí..."
-        }
-      )
-    ] }),
-    /* @__PURE__ */ i("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ i("p", { children: [
-        /* @__PURE__ */ e("strong", { children: "Estado:" }),
-        " ",
-        l ? "Editando" : "No editando"
-      ] }),
-      /* @__PURE__ */ i("p", { children: [
-        /* @__PURE__ */ e("strong", { children: "Historial:" }),
-        " ",
-        r.length,
-        " elementos"
-      ] }),
-      /* @__PURE__ */ i("p", { children: [
-        /* @__PURE__ */ e("strong", { children: "Posición en historial:" }),
-        " ",
-        n + 1,
-        " ",
-        "de ",
-        r.length
-      ] })
-    ] }),
-    /* @__PURE__ */ i("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ e("h3", { children: "Hotkeys disponibles:" }),
-      /* @__PURE__ */ e("ul", { style: { listStyle: "none", padding: 0 }, children: H.map((t, c) => /* @__PURE__ */ i(
-        "li",
-        {
-          style: {
-            padding: "5px 0",
-            borderBottom: "1px solid #eee",
-            display: "flex",
-            justifyContent: "space-between"
-          },
-          children: [
-            /* @__PURE__ */ e("span", { children: t.description }),
-            /* @__PURE__ */ e(
-              "code",
-              {
-                style: {
-                  backgroundColor: "#f5f5f5",
-                  padding: "2px 6px",
-                  borderRadius: "3px",
-                  fontSize: "12px"
-                },
-                children: [
-                  t.ctrlKey && "Ctrl",
-                  t.altKey && "Alt",
-                  t.shiftKey && "Shift",
-                  t.metaKey && "⌘",
-                  t.key.toUpperCase()
-                ].filter(Boolean).join("+")
-              }
-            )
-          ]
-        },
-        c
-      )) })
-    ] }),
-    /* @__PURE__ */ i("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ e("h3", { children: "Historial:" }),
-      /* @__PURE__ */ e("ul", { children: r.map((t, c) => /* @__PURE__ */ e(
-        "li",
-        {
-          style: {
-            padding: "5px 0",
-            opacity: c === n ? 1 : 0.6,
-            fontWeight: c === n ? "bold" : "normal"
-          },
-          children: t
-        },
-        c
-      )) })
-    ] }),
-    /* @__PURE__ */ i(
-      "div",
-      {
-        style: {
-          backgroundColor: "#f9f9f9",
-          padding: "15px",
-          borderRadius: "5px",
-          fontSize: "14px"
-        },
-        children: [
-          /* @__PURE__ */ e("p", { children: /* @__PURE__ */ e("strong", { children: "Instrucciones:" }) }),
-          /* @__PURE__ */ i("ul", { children: [
-            /* @__PURE__ */ e("li", { children: "Escribe algo en el input" }),
-            /* @__PURE__ */ i("li", { children: [
-              "Usa ",
-              /* @__PURE__ */ e("code", { children: "Ctrl+S" }),
-              " para guardar"
-            ] }),
-            /* @__PURE__ */ i("li", { children: [
-              "Usa ",
-              /* @__PURE__ */ e("code", { children: "Ctrl+Z" }),
-              " para deshacer"
-            ] }),
-            /* @__PURE__ */ i("li", { children: [
-              "Usa ",
-              /* @__PURE__ */ e("code", { children: "Ctrl+Shift+Z" }),
-              " para rehacer"
-            ] }),
-            /* @__PURE__ */ i("li", { children: [
-              "Usa ",
-              /* @__PURE__ */ e("code", { children: "Ctrl+E" }),
-              " para alternar modo edición"
-            ] }),
-            /* @__PURE__ */ i("li", { children: [
-              "Usa ",
-              /* @__PURE__ */ e("code", { children: "Ctrl+L" }),
-              " para limpiar"
-            ] }),
-            /* @__PURE__ */ i("li", { children: [
-              "Usa ",
-              /* @__PURE__ */ e("code", { children: "Escape" }),
-              " para cancelar edición"
-            ] }),
-            /* @__PURE__ */ i("li", { children: [
-              "Usa ",
-              /* @__PURE__ */ e("code", { children: "Delete" }),
-              " para eliminar todo (solo en modo edición)"
-            ] })
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-export {
-  w as HotkeysExample
-};