routelit-client 0.4.2 → 0.5.2

package/README.md

@@ -18,12 +18,15 @@ This library contains core and basic components.
 - link
 - markdown
 - headings
-- checkbox
+- checkbox (with label)
+- single-checkbox
 - checkbox_group
 - radio (group)
 - select
-- textarea
-- text_input
+- textarea (with label)
+- single-textarea
+- text_input (with label)
+- single-text-input
 - button
 - expander
 - heading
@@ -31,3 +34,73 @@ This library contains core and basic components.
 - header
 - subheader
 
+### Public API (exports from `src/lib.ts`)
+
+- This section documents everything you can import from `src/lib.ts` (and what is exposed on `window`).
+
+#### Globals
+
+- **`React`**: Re-exported and also attached to `window.React` for non-bundled environments.
+- **`ReactDOM`**: Re-exported and also attached to `window.ReactDOM`.
+- **`jsxRuntime`**: Re-exported and attached to `window.jsxRuntime` with `jsx`, `jsxs`, and `Fragment` for JSX runtime needs.
+- **`RoutelitClient`**: Singleton attached to `window.RoutelitClient` that aggregates the most common API surface.
+  - Example:
+    ```ts
+    const { manager, componentStore, renderApp } = window.RoutelitClient!;
+    renderApp("root");
+    ```
+
+#### Singletons
+
+- **`manager`** (`RouteLitManager`): Central event/state manager. Handles `routelit:event` dispatch, navigation, throttled action batching, and subscriptions to loading and error state.
+- **`componentStore`** (`ComponentStore`): Registry used by the renderer and components. Pre-registered with the core components listed above; you can extend it with `componentStore.register(name, Component)` and then use that `name` from the server.
+
+#### Rendering
+
+- **`renderApp(rootId?: string)`**: Mounts the app (default element id is `root`).
+
+#### Hooks (context-aware)
+
+- **`useDispatcherWith(id, type)`**: Returns a `(data: Record<string, unknown>) => void` that dispatches a custom Routelit event `{ id, type, ...data }`.
+- **`useDispatcherWithAttr(id, type, attr)`**: Returns a `(value: unknown) => void` that dispatches `{ id, type, [attr]: value }`.
+- **`useFormDispatcher(id, type)`**: Like `useDispatcherWith`, but includes the current `formId` in the payload. Useful inside form controls.
+- **`useFormDispatcherWithAttr(id, type, attr)`**: Like `useDispatcherWithAttr`, but includes `formId`.
+- **`useIsLoading()`**: Returns a boolean reflecting combined loading state (fragment or app-level).
+- **`useError()`**: Returns the last `Error` (if any) bubbled from the manager chain.
+
+#### Hooks (UI utilities)
+
+- **`useLinkClickHandler({ id, href, replace, isExternal })`**: Returns an anchor `onClick` handler that dispatches a `navigate` event. Prevents default for internal links; lets external links proceed.
+- **`useRLInlineElement(props, elementKeys)`**: Converts inline element descriptors on `props` to rendered elements using the `ComponentStore` (e.g., slots like `leftIcon`, `rightIcon`).
+- **`useRLCallbackAttributes(props, rlCallbackAttrs)`**: Converts string function bodies found on `props` at the listed attribute names into real callbacks and returns them. Note: only use with trusted input.
+
+#### Higher-order components (HOCs)
+
+- **`withSimpleComponent(Component, props?)`**: Wraps any element/component, merging optional `props` and mapping any `rlInlineElementsAttrs` into real inline elements.
+  - Example:
+    ```ts
+    const Title = withSimpleComponent("h1", { className: "title" });
+    ```
+- **`withEventDispatcher(Component, options?)`**: Attaches an event handler that dispatches a Routelit event (defaults: `rlEventName="click"`, `rlEventAttr="onClick"`). Works well for buttons.
+  - Example:
+    ```ts
+    const Button = withEventDispatcher("button", { type: "button" });
+    // <Button id="save">Save</Button>
+    ```
+- **`withValueEventDispatcher(Component, options?)`**: Attaches a value-change handler that dispatches `{ [rlValueAttr]: value }` (defaults: `change`/`onChange`/`value`).
+  - Examples:
+    ```ts
+    const TextInput = withValueEventDispatcher("input", { type: "text" });
+    const Checkbox = withValueEventDispatcher("input", {
+      type: "checkbox",
+      rlValueAttr: "checked",
+      rlEventValueGetter: (e) => e.currentTarget.checked,
+    });
+    ```
+- **`withInputValueEventDispatcher(Component, options?)`**: For text inputs/textareas; dispatches a `change` with `value` on `onBlur` or when pressing Enter. Defaults wire up `onBlur`/`onKeyDown` and read from `defaultValue`.
+  - Example:
+    ```ts
+    const TextArea = withInputValueEventDispatcher("textarea");
+    ```
+- **`withCallbackAttributes(Component, { rlCallbackAttrs? })`**: Converts string callbacks on the listed attribute names into real functions and forwards them to the wrapped component.
+

package/dist/{checkbox-Dbbt0aUf.js → checkbox-9lrNZctG.js}

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { memo, useCallback } from "react";
-import { b as useFormDispatcherWithAttr } from "./client-typrmY-O.js";
+import { b as useFormDispatcherWithAttr } from "./client-D0Y6VDpm.js";
 const Checkbox = memo(function Checkbox2({
   label,
   id,
@@ -38,4 +38,4 @@ Checkbox.displayName = "Checkbox";
 export {
   Checkbox as default
 };
-//# sourceMappingURL=checkbox-Dbbt0aUf.js.map
+//# sourceMappingURL=checkbox-9lrNZctG.js.map

package/dist/{checkbox-Dbbt0aUf.js.map → checkbox-9lrNZctG.js.map}

@@ -1 +1 @@
-{"version":3,"file":"checkbox-Dbbt0aUf.js","sources":["../src/components/checkbox.tsx"],"sourcesContent":["import { memo, useCallback } from \"react\";\nimport { useFormDispatcherWithAttr } from \"../core/context\";\n\nconst Checkbox = memo(function Checkbox({\n  label,\n  id,\n  required,\n  defaultChecked,\n  ...props\n}: {\n  label: string;\n  caption?: string;\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"onChange\">) {\n  const dispatchChange = useFormDispatcherWithAttr(id!, \"change\", \"checked\");\n  const onChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      dispatchChange(e.target.checked);\n    },\n    [dispatchChange]\n  );\n  return (\n    <div className=\"rl-form-flex-control\">\n      <input\n        {...props}\n        type=\"checkbox\"\n        id={id}\n        defaultChecked={defaultChecked}\n        onChange={onChange}\n        required={required}\n      />\n      <label htmlFor={id}>\n        {label} {required && <span className=\"rl-required\">*</span>}\n      </label>\n    </div>\n  );\n});\n\nCheckbox.displayName = \"Checkbox\";\n\nexport default Checkbox;\n"],"names":["Checkbox"],"mappings":";;;AAGM,MAAA,WAAW,KAAK,SAASA,UAAS;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAGmE;AACjE,QAAM,iBAAiB,0BAA0B,IAAK,UAAU,SAAS;AACzE,QAAM,WAAW;AAAA,IACf,CAAC,MAA2C;AAC3B,qBAAA,EAAE,OAAO,OAAO;AAAA,IACjC;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEE,SAAA,qBAAC,OAAI,EAAA,WAAU,wBACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,IACA,qBAAC,SAAM,EAAA,SAAS,IACb,UAAA;AAAA,MAAA;AAAA,MAAM;AAAA,MAAE,YAAY,oBAAC,QAAK,EAAA,WAAU,eAAc,UAAC,IAAA,CAAA;AAAA,IAAA,EACtD,CAAA;AAAA,EAAA,GACF;AAEJ,CAAC;AAED,SAAS,cAAc;"}
+{"version":3,"file":"checkbox-9lrNZctG.js","sources":["../src/components/checkbox.tsx"],"sourcesContent":["import { memo, useCallback } from \"react\";\nimport { useFormDispatcherWithAttr } from \"../core/context\";\n\nconst Checkbox = memo(function Checkbox({\n  label,\n  id,\n  required,\n  defaultChecked,\n  ...props\n}: {\n  label: string;\n  caption?: string;\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"onChange\">) {\n  const dispatchChange = useFormDispatcherWithAttr(id!, \"change\", \"checked\");\n  const onChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      dispatchChange(e.target.checked);\n    },\n    [dispatchChange]\n  );\n  return (\n    <div className=\"rl-form-flex-control\">\n      <input\n        {...props}\n        type=\"checkbox\"\n        id={id}\n        defaultChecked={defaultChecked}\n        onChange={onChange}\n        required={required}\n      />\n      <label htmlFor={id}>\n        {label} {required && <span className=\"rl-required\">*</span>}\n      </label>\n    </div>\n  );\n});\n\nCheckbox.displayName = \"Checkbox\";\n\nexport default Checkbox;\n"],"names":["Checkbox"],"mappings":";;;AAGM,MAAA,WAAW,KAAK,SAASA,UAAS;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAGmE;AACjE,QAAM,iBAAiB,0BAA0B,IAAK,UAAU,SAAS;AACzE,QAAM,WAAW;AAAA,IACf,CAAC,MAA2C;AAC3B,qBAAA,EAAE,OAAO,OAAO;AAAA,IACjC;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEE,SAAA,qBAAC,OAAI,EAAA,WAAU,wBACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,IACA,qBAAC,SAAM,EAAA,SAAS,IACb,UAAA;AAAA,MAAA;AAAA,MAAM;AAAA,MAAE,YAAY,oBAAC,QAAK,EAAA,WAAU,eAAc,UAAC,IAAA,CAAA;AAAA,IAAA,EACtD,CAAA;AAAA,EAAA,GACF;AAEJ,CAAC;AAED,SAAS,cAAc;"}

package/dist/{checkbox-yue557sD.js → checkbox-DQPZffx5.js}

@@ -1,6 +1,6 @@
 import { jsxs as r, jsx as t } from "react/jsx-runtime";
 import { memo as m, useCallback as i } from "react";
-import { b as p } from "./client-DaSvON9F.js";
+import { b as p } from "./client-DShqkHLG.js";
 const x = m(function({
   label: a,
   id: e,

package/dist/{checkbox-group-B5bHbsyN.js → checkbox-group--P655Yzh.js}

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { memo, useCallback } from "react";
-import { b as useFormDispatcherWithAttr } from "./client-typrmY-O.js";
+import { b as useFormDispatcherWithAttr } from "./client-D0Y6VDpm.js";
 function CheckboxGroupOption(props) {
   const { id, value, onChange } = props;
-  const option = typeof props.option === "string" ? { label: props.option, value: props.option } : props.option;
+  const option = props.option;
   return /* @__PURE__ */ jsxs("div", { className: "rl-form-flex-control", children: [
     /* @__PURE__ */ jsx(
       "input",
@@ -60,4 +60,4 @@ CheckboxGroup.displayName = "CheckboxGroup";
 export {
   CheckboxGroup as default
 };
-//# sourceMappingURL=checkbox-group-B5bHbsyN.js.map
+//# sourceMappingURL=checkbox-group--P655Yzh.js.map

package/dist/checkbox-group--P655Yzh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group--P655Yzh.js","sources":["../src/components/checkbox-group.tsx"],"sourcesContent":["import { memo, useCallback } from \"react\";\nimport { useFormDispatcherWithAttr } from \"../core/context\";\n\ntype CheckboxGroupProps = {\n  id: string;\n  label: string;\n  value: string[];\n  required?: boolean;\n  flexDirection?: \"row\" | \"col\";\n  options: Array<{ label: string; value: string; caption?: string; disabled?: boolean }>;\n};\n\nfunction CheckboxGroupOption(props: {\n  option: CheckboxGroupProps[\"options\"][number];\n  id: string;\n  value: string[];\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n}) {\n  const { id, value, onChange } = props;\n\n  const option: CheckboxGroupProps[\"options\"][number] =\n    props.option;\n\n  return (\n    <div key={option.value} className=\"rl-form-flex-control\">\n      <input\n        disabled={option.disabled}\n        type=\"checkbox\"\n        value={option.value}\n        id={`${id}-${option.value}`}\n        checked={value.includes(option.value)}\n        onChange={onChange}\n      />\n      <div className=\"rl-form-inline-label\">\n        <label htmlFor={`${id}-${option.value}`}>{option.label}</label>\n        {option.caption && (\n          <small className=\"rl-form-control-caption\">{option.caption}</small>\n        )}\n      </div>\n    </div>\n  );\n}\n\nconst CheckboxGroup = memo(function CheckboxGroup({\n  id,\n  label,\n  value,\n  required,\n  options,\n  flexDirection = \"col\",\n}: CheckboxGroupProps) {\n  const dispatchChange = useFormDispatcherWithAttr(id, \"change\", \"value\");\n  const onChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.checked\n        ? [...value, e.target.value]\n        : value.filter((v) => v !== e.target.value);\n      dispatchChange(newValue);\n    },\n    [dispatchChange, value]\n  );\n  return (\n    <div className=\"rl-form-group\">\n      {label && (\n        <label>\n          {label} {required && <span className=\"rl-required\">*</span>}\n        </label>\n      )}\n      <div className={`rl-form-control-group rl-flex-${flexDirection}`}>\n        {options.map((option) => (\n          <CheckboxGroupOption\n            key={typeof option === \"string\" ? option : option.value}\n            id={id}\n            value={value}\n            onChange={onChange}\n            option={option}\n          />\n        ))}\n      </div>\n    </div>\n  );\n});\n\nCheckboxGroup.displayName = \"CheckboxGroup\";\n\nexport default CheckboxGroup;\n"],"names":["CheckboxGroup"],"mappings":";;;AAYA,SAAS,oBAAoB,OAK1B;AACD,QAAM,EAAE,IAAI,OAAO,SAAa,IAAA;AAEhC,QAAM,SACJ,MAAM;AAGN,SAAA,qBAAC,OAAuB,EAAA,WAAU,wBAChC,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAU,OAAO;AAAA,QACjB,MAAK;AAAA,QACL,OAAO,OAAO;AAAA,QACd,IAAI,GAAG,EAAE,IAAI,OAAO,KAAK;AAAA,QACzB,SAAS,MAAM,SAAS,OAAO,KAAK;AAAA,QACpC;AAAA,MAAA;AAAA,IACF;AAAA,IACA,qBAAC,OAAI,EAAA,WAAU,wBACb,UAAA;AAAA,MAAC,oBAAA,SAAA,EAAM,SAAS,GAAG,EAAE,IAAI,OAAO,KAAK,IAAK,UAAA,OAAO,MAAM,CAAA;AAAA,MACtD,OAAO,WACN,oBAAC,WAAM,WAAU,2BAA2B,iBAAO,QAAQ,CAAA;AAAA,IAAA,EAE/D,CAAA;AAAA,EAAA,EAAA,GAdQ,OAAO,KAejB;AAEJ;AAEM,MAAA,gBAAgB,KAAK,SAASA,eAAc;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAClB,GAAuB;AACrB,QAAM,iBAAiB,0BAA0B,IAAI,UAAU,OAAO;AACtE,QAAM,WAAW;AAAA,IACf,CAAC,MAA2C;AAC1C,YAAM,WAAW,EAAE,OAAO,UACtB,CAAC,GAAG,OAAO,EAAE,OAAO,KAAK,IACzB,MAAM,OAAO,CAAC,MAAM,MAAM,EAAE,OAAO,KAAK;AAC5C,qBAAe,QAAQ;AAAA,IACzB;AAAA,IACA,CAAC,gBAAgB,KAAK;AAAA,EACxB;AAEE,SAAA,qBAAC,OAAI,EAAA,WAAU,iBACZ,UAAA;AAAA,IAAA,8BACE,SACE,EAAA,UAAA;AAAA,MAAA;AAAA,MAAM;AAAA,MAAE,YAAY,oBAAC,QAAK,EAAA,WAAU,eAAc,UAAC,IAAA,CAAA;AAAA,IAAA,GACtD;AAAA,IAEF,oBAAC,SAAI,WAAW,iCAAiC,aAAa,IAC3D,UAAA,QAAQ,IAAI,CAAC,WACZ;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAJK,OAAO,WAAW,WAAW,SAAS,OAAO;AAAA,IAAA,CAMrD,EACH,CAAA;AAAA,EAAA,GACF;AAEJ,CAAC;AAED,cAAc,cAAc;"}

package/dist/checkbox-group-DZmiz6tM.js

@@ -0,0 +1,60 @@
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { memo as p, useCallback as f } from "react";
+import { b } from "./client-DShqkHLG.js";
+function v(t) {
+  const { id: o, value: c, onChange: r } = t, e = t.option;
+  return /* @__PURE__ */ n("div", { className: "rl-form-flex-control", children: [
+    /* @__PURE__ */ a(
+      "input",
+      {
+        disabled: e.disabled,
+        type: "checkbox",
+        value: e.value,
+        id: `${o}-${e.value}`,
+        checked: c.includes(e.value),
+        onChange: r
+      }
+    ),
+    /* @__PURE__ */ n("div", { className: "rl-form-inline-label", children: [
+      /* @__PURE__ */ a("label", { htmlFor: `${o}-${e.value}`, children: e.label }),
+      e.caption && /* @__PURE__ */ a("small", { className: "rl-form-control-caption", children: e.caption })
+    ] })
+  ] }, e.value);
+}
+const g = p(function({
+  id: o,
+  label: c,
+  value: r,
+  required: e,
+  options: s,
+  flexDirection: u = "col"
+}) {
+  const i = b(o, "change", "value"), d = f(
+    (l) => {
+      const m = l.target.checked ? [...r, l.target.value] : r.filter((h) => h !== l.target.value);
+      i(m);
+    },
+    [i, r]
+  );
+  return /* @__PURE__ */ n("div", { className: "rl-form-group", children: [
+    c && /* @__PURE__ */ n("label", { children: [
+      c,
+      " ",
+      e && /* @__PURE__ */ a("span", { className: "rl-required", children: "*" })
+    ] }),
+    /* @__PURE__ */ a("div", { className: `rl-form-control-group rl-flex-${u}`, children: s.map((l) => /* @__PURE__ */ a(
+      v,
+      {
+        id: o,
+        value: r,
+        onChange: d,
+        option: l
+      },
+      typeof l == "string" ? l : l.value
+    )) })
+  ] });
+});
+g.displayName = "CheckboxGroup";
+export {
+  g as default
+};