@devtools-ui/input 0.0.2--canary.11.588

package/dist/cjs/index.cjs

@@ -0,0 +1,229 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Input: () => Input2,
+  InputComponent: () => InputComponent,
+  inputTransform: () => inputTransform
+});
+module.exports = __toCommonJS(src_exports);
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/components/InputComponent.tsx
+var import_react2 = __toESM(require("react"));
+var import_react3 = require("@chakra-ui/react");
+var import_react4 = require("@player-ui/react");
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/components/hooks.ts
+var import_react = __toESM(require("react"));
+var getConfig = (userConfig = {}) => {
+  return {
+    decimalSymbol: ".",
+    formatDelay: 200,
+    prefix: "",
+    suffix: "",
+    ...userConfig
+  };
+};
+var useInputAssetProps = (props, config) => {
+  const [localValue, setLocalValue] = import_react.default.useState(props.value ?? "");
+  const formatTimerRef = import_react.default.useRef(void 0);
+  const { formatDelay, decimalSymbol, prefix, suffix } = getConfig(config);
+  function clearPending() {
+    if (formatTimerRef.current) {
+      clearTimeout(formatTimerRef.current);
+      formatTimerRef.current = void 0;
+    }
+  }
+  function handleAffixOnFocus(target) {
+    let val = target.value;
+    if (suffix)
+      val = val.substring(0, val.indexOf(suffix));
+    if (prefix && !val.includes(prefix)) {
+      val = `${prefix}${val}`;
+    }
+    return val;
+  }
+  function handlePrefixEdgeCases(e) {
+    const target = e.target;
+    const start = target.selectionStart;
+    const end = target.selectionEnd;
+    const pl = prefix.length;
+    const atStart = start === pl;
+    const atEnd = end === pl;
+    if (start && end && start < pl) {
+      e.preventDefault();
+      target.setSelectionRange(pl, end - start + pl);
+    } else if (e.key === "ArrowLeft" && atStart || e.key === "Backspace" && atStart && atEnd || e.key === "Home") {
+      e.preventDefault();
+      target.setSelectionRange(prefix.length, prefix.length);
+    }
+  }
+  function formatValueWithAffix(value) {
+    if (!value)
+      return "";
+    return `${prefix}${value}${suffix}`;
+  }
+  const onKeyDownHandler = (currentValue) => {
+    const symbolPosition = currentValue.indexOf(decimalSymbol);
+    const newValue = props.format(currentValue) ?? "";
+    const newSymbolPosition = newValue.indexOf(decimalSymbol);
+    if ((symbolPosition === -1 || symbolPosition === 0) && newSymbolPosition > 0) {
+      return {
+        newValue: newValue.includes(prefix) ? `${newValue}` : `${prefix}${newValue}`,
+        newCursorPosition: newValue.includes(prefix) ? newSymbolPosition : newSymbolPosition + prefix.length
+      };
+    }
+    return {
+      newValue: newValue.includes(prefix) ? `${newValue}` : `${prefix}${newValue}`
+    };
+  };
+  const onBlur = (e) => {
+    clearPending();
+    const formatted = (prefix ? e.target.value.replace(prefix, "") : props.format(e.target.value)) ?? "";
+    if (formatted) {
+      props.set(formatted);
+      setLocalValue(formatValueWithAffix(formatted));
+    } else {
+      props.set("");
+      setLocalValue("");
+    }
+  };
+  const onChange = (e) => {
+    setLocalValue(e.target.value);
+  };
+  const onKeyDown = (e) => {
+    clearPending();
+    if (prefix)
+      handlePrefixEdgeCases(e);
+    const target = e.target;
+    formatTimerRef.current = setTimeout(() => {
+      const cursorPosition = target.selectionStart;
+      const currentValue = target.value;
+      if (cursorPosition !== currentValue.length) {
+        return;
+      }
+      const obj = onKeyDownHandler(currentValue);
+      setLocalValue(obj.newValue);
+      target.selectionStart = obj.newCursorPosition ?? target.selectionStart;
+      target.selectionEnd = obj.newCursorPosition ?? target.selectionEnd;
+    }, formatDelay);
+  };
+  const onFocus = (e) => {
+    const target = e.target;
+    const inputEmpty = target.value === "";
+    if (!inputEmpty && suffix || inputEmpty && prefix) {
+      setLocalValue(handleAffixOnFocus(target));
+    }
+  };
+  const propsValue = props.value;
+  import_react.default.useEffect(() => {
+    setLocalValue(formatValueWithAffix(propsValue));
+  }, [propsValue]);
+  import_react.default.useEffect(() => clearPending, []);
+  return {
+    onBlur,
+    onChange,
+    onKeyDown,
+    onFocus,
+    value: localValue
+  };
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/components/InputComponent.tsx
+var InputComponent = (props) => {
+  const { validation, label, id, note, size, maxLength, placeholder } = props;
+  const inputProps = useInputAssetProps(props);
+  return /* @__PURE__ */ import_react2.default.createElement(import_react3.FormControl, { isInvalid: Boolean(validation) }, label && /* @__PURE__ */ import_react2.default.createElement(import_react3.FormLabel, { htmlFor: id }, /* @__PURE__ */ import_react2.default.createElement(import_react4.ReactAsset, { ...label.asset })), /* @__PURE__ */ import_react2.default.createElement(
+    import_react3.Input,
+    {
+      id,
+      ...inputProps,
+      size,
+      maxLength,
+      placeholder
+    }
+  ), validation && /* @__PURE__ */ import_react2.default.createElement(import_react3.FormErrorMessage, null, validation.message), note && /* @__PURE__ */ import_react2.default.createElement(import_react3.FormHelperText, null, /* @__PURE__ */ import_react2.default.createElement(import_react4.ReactAsset, { ...note.asset })));
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/dsl/Input.tsx
+var import_react5 = __toESM(require("react"));
+var import_dsl = require("@player-tools/dsl");
+var import_text = require("@devtools-ui/text");
+var Input2 = (props) => {
+  const { children, binding, ...rest } = props;
+  return /* @__PURE__ */ import_react5.default.createElement(import_dsl.Asset, { type: "input", ...rest }, /* @__PURE__ */ import_react5.default.createElement("property", { name: "binding" }, binding.toValue()), children);
+};
+Input2.Label = (0, import_dsl.createSlot)({
+  name: "label",
+  TextComp: import_text.Text,
+  isArray: false,
+  wrapInAsset: true
+});
+Input2.Note = (0, import_dsl.createSlot)({
+  name: "note",
+  TextComp: import_text.Text,
+  isArray: false,
+  wrapInAsset: true
+});
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/transform/index.ts
+var inputTransform = (asset, options) => {
+  return {
+    ...asset,
+    format(val) {
+      if (asset.binding === void 0) {
+        return val;
+      }
+      return options.data.format(asset.binding, val);
+    },
+    set(val) {
+      if (asset.binding === void 0) {
+        return;
+      }
+      return options.data.model.set([[asset.binding, val]], {
+        formatted: true
+      });
+    },
+    value: asset.binding === void 0 ? "" : options.data.model.get(asset.binding, {
+      includeInvalid: true,
+      formatted: true
+    }),
+    validation: asset.binding === void 0 ? void 0 : options.validation?.get(asset.binding, { track: true }),
+    dataType: asset.binding === void 0 ? void 0 : options.validation?.type(asset.binding)
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Input,
+  InputComponent,
+  inputTransform
+});
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/components/InputComponent.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/components/hooks.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/dsl/Input.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/transform/index.ts"],"sourcesContent":["export * from \"./types\";\nexport * from \"./components\";\nexport * from \"./dsl\";\nexport * from \"./transform\";\n","import React from \"react\";\nimport {\n  Input,\n  FormControl,\n  FormLabel,\n  FormHelperText,\n  FormErrorMessage,\n} from \"@chakra-ui/react\";\nimport { TransformedInput } from \"../types\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport { useInputAssetProps } from \"./hooks\";\n\nexport const InputComponent = (props: TransformedInput) => {\n  const { validation, label, id, note, size, maxLength, placeholder } = props;\n  const inputProps = useInputAssetProps(props);\n\n  return (\n    <FormControl isInvalid={Boolean(validation)}>\n      {label && (\n        <FormLabel htmlFor={id}>\n          <ReactAsset {...label.asset} />\n        </FormLabel>\n      )}\n      <Input\n        id={id}\n        {...inputProps}\n        size={size}\n        maxLength={maxLength}\n        placeholder={placeholder}\n      />\n      {validation && <FormErrorMessage>{validation.message}</FormErrorMessage>}\n      {note && (\n        <FormHelperText>\n          <ReactAsset {...note.asset} />\n        </FormHelperText>\n      )}\n    </FormControl>\n  );\n};\n","import React from \"react\";\nimport type { TransformedInput } from \"../types\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype KeyDownHandler = (currentValue: string, props?: TransformedInput) => any;\n\nexport interface InputHookConfig {\n  /** Time in ms to wait before formatting the user input for normal keys */\n  formatDelay?: number;\n\n  /** Symbol to be used for decimal point */\n  decimalSymbol?: string;\n\n  /** Affix to append to value - does not save to model and is only for display on input */\n  prefix?: string;\n\n  /** Affix to prepend to value - does not save to model and is only for display on input */\n  suffix?: string;\n}\n\n/** Create a valid config mixing in defaults and user overrides */\nexport const getConfig = (\n  userConfig: InputHookConfig = {}\n): Required<InputHookConfig> => {\n  return {\n    decimalSymbol: \".\",\n    formatDelay: 200,\n    prefix: \"\",\n    suffix: \"\",\n    ...userConfig,\n  };\n};\n\n/**\n * A hook to manage an input html element as an asset.\n * The hook returns an object containing props that are expected to reside on any html input.\n * It will handle formatting, setting values, beaconing, aria-labels, etc.\n *\n * @param props - The output of the input transform\n * @param config - Local config to manage user interaction overrides\n */\nexport const useInputAssetProps = (\n  props: TransformedInput,\n  config?: InputHookConfig\n) => {\n  const [localValue, setLocalValue] = React.useState(props.value ?? \"\");\n  const formatTimerRef = React.useRef<NodeJS.Timeout | undefined>(undefined);\n\n  const { formatDelay, decimalSymbol, prefix, suffix } = getConfig(config);\n\n  /** Reset and pending format timers */\n  function clearPending() {\n    if (formatTimerRef.current) {\n      clearTimeout(formatTimerRef.current);\n      formatTimerRef.current = undefined;\n    }\n  }\n\n  /** Affix handling logic on focus */\n  function handleAffixOnFocus(target: HTMLInputElement) {\n    let val = target.value;\n\n    if (suffix) val = val.substring(0, val.indexOf(suffix));\n\n    if (prefix && !val.includes(prefix)) {\n      val = `${prefix}${val}`;\n    }\n\n    return val;\n  }\n\n  /** Edge cases handling for prefix */\n  function handlePrefixEdgeCases(e: React.KeyboardEvent<HTMLInputElement>) {\n    const target = e.target as HTMLInputElement;\n    const start = target.selectionStart;\n    const end = target.selectionEnd;\n    const pl = prefix.length;\n    const atStart = start === pl;\n    const atEnd = end === pl;\n\n    if (start && end && start < pl) {\n      e.preventDefault();\n      target.setSelectionRange(pl, end - start + pl);\n    } else if (\n      (e.key === \"ArrowLeft\" && atStart) ||\n      (e.key === \"Backspace\" && atStart && atEnd) ||\n      e.key === \"Home\"\n    ) {\n      e.preventDefault();\n      target.setSelectionRange(prefix.length, prefix.length);\n    }\n  }\n\n  /** Helper to add affixes to value where appropriate  */\n  function formatValueWithAffix(value: string | undefined) {\n    if (!value) return \"\";\n\n    return `${prefix}${value}${suffix}`;\n  }\n\n  /** Value handling logic on key down */\n  const onKeyDownHandler: KeyDownHandler = (currentValue: string) => {\n    const symbolPosition = currentValue.indexOf(decimalSymbol);\n    const newValue = props.format(currentValue) ?? \"\";\n    const newSymbolPosition = newValue.indexOf(decimalSymbol);\n\n    if (\n      (symbolPosition === -1 || symbolPosition === 0) &&\n      newSymbolPosition > 0\n    ) {\n      // formatting added dot, so set cursor before dot\n      return {\n        newValue: newValue.includes(prefix)\n          ? `${newValue}`\n          : `${prefix}${newValue}`,\n        newCursorPosition: newValue.includes(prefix)\n          ? newSymbolPosition\n          : newSymbolPosition + prefix.length,\n      };\n    }\n\n    return {\n      newValue: newValue.includes(prefix)\n        ? `${newValue}`\n        : `${prefix}${newValue}`,\n    };\n  };\n\n  /** On blur, commit the value to the model */\n  const onBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {\n    clearPending();\n\n    const formatted =\n      (prefix\n        ? e.target.value.replace(prefix, \"\")\n        : props.format(e.target.value)) ?? \"\";\n\n    if (formatted) {\n      props.set(formatted);\n      setLocalValue(formatValueWithAffix(formatted));\n    } else {\n      props.set(\"\");\n      setLocalValue(\"\");\n    }\n  };\n\n  /** Keep track of any user changes */\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n    setLocalValue(e.target.value);\n  };\n\n  /** Schedule a format of the current input in the future */\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {\n    clearPending();\n\n    if (prefix) handlePrefixEdgeCases(e);\n\n    const target = e.target as HTMLInputElement;\n\n    formatTimerRef.current = setTimeout(() => {\n      const cursorPosition = target.selectionStart;\n      const currentValue = target.value;\n\n      /** Skip formatting if we're in the middle of the input */\n      if (cursorPosition !== currentValue.length) {\n        return;\n      }\n\n      const obj = onKeyDownHandler(currentValue);\n\n      setLocalValue(obj.newValue);\n      target.selectionStart = obj.newCursorPosition ?? target.selectionStart;\n      target.selectionEnd = obj.newCursorPosition ?? target.selectionEnd;\n    }, formatDelay);\n  };\n\n  /** Format value onFocus if affixes exist */\n  const onFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {\n    const target = e.target as HTMLInputElement;\n    const inputEmpty = target.value === \"\";\n\n    if ((!inputEmpty && suffix) || (inputEmpty && prefix)) {\n      setLocalValue(handleAffixOnFocus(target));\n    }\n  };\n\n  // Update the stored value if data changes\n  const propsValue = props.value;\n  React.useEffect(() => {\n    setLocalValue(formatValueWithAffix(propsValue));\n  }, [propsValue]);\n\n  /** clear anything pending on unmount of input */\n  React.useEffect(() => clearPending, []);\n\n  return {\n    onBlur,\n    onChange,\n    onKeyDown,\n    onFocus,\n    value: localValue,\n  };\n};\n","import React from \"react\";\nimport {\n  AssetPropsWithChildren,\n  Asset,\n  createSlot,\n  BindingTemplateInstance,\n} from \"@player-tools/dsl\";\nimport { InputAsset } from \"../types\";\nimport { Text } from \"@devtools-ui/text\";\n\nexport const Input = (\n  props: Omit<AssetPropsWithChildren<InputAsset>, \"binding\"> & {\n    /** The binding */\n    binding: BindingTemplateInstance;\n  }\n) => {\n  const { children, binding, ...rest } = props;\n  return (\n    <Asset type=\"input\" {...rest}>\n      <property name=\"binding\">{binding.toValue()}</property>\n      {children}\n    </Asset>\n  );\n};\n\nInput.Label = createSlot({\n  name: \"label\",\n  TextComp: Text,\n  isArray: false,\n  wrapInAsset: true,\n});\n\nInput.Note = createSlot({\n  name: \"note\",\n  TextComp: Text,\n  isArray: false,\n  wrapInAsset: true,\n});\n","import type { TransformFunction } from \"@player-ui/player\";\nimport { InputAsset, TransformedInput } from \"../types\";\n\nexport const inputTransform: TransformFunction<InputAsset, TransformedInput> = (\n  asset,\n  options\n) => {\n  return {\n    ...asset,\n    format(val) {\n      if (asset.binding === undefined) {\n        return val;\n      }\n\n      return options.data.format(asset.binding, val);\n    },\n    set(val) {\n      if (asset.binding === undefined) {\n        return;\n      }\n\n      return options.data.model.set([[asset.binding, val]], {\n        formatted: true,\n      });\n    },\n    value:\n      asset.binding === undefined\n        ? \"\"\n        : options.data.model.get(asset.binding, {\n            includeInvalid: true,\n            formatted: true,\n          }),\n    validation:\n      asset.binding === undefined\n        ? undefined\n        : options.validation?.get(asset.binding, { track: true }),\n    dataType:\n      asset.binding === undefined\n        ? undefined\n        : options.validation?.type(asset.binding),\n  };\n};\n"],"mappings":"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","names":["Input","import_react","React","React","import_react","Input","React"]}

package/dist/index.legacy-esm.js

@@ -0,0 +1,199 @@
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/components/InputComponent.tsx
+import React2 from "react";
+import {
+  Input,
+  FormControl,
+  FormLabel,
+  FormHelperText,
+  FormErrorMessage
+} from "@chakra-ui/react";
+import { ReactAsset } from "@player-ui/react";
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/components/hooks.ts
+import React from "react";
+var getConfig = (userConfig = {}) => {
+  return {
+    decimalSymbol: ".",
+    formatDelay: 200,
+    prefix: "",
+    suffix: "",
+    ...userConfig
+  };
+};
+var useInputAssetProps = (props, config) => {
+  const [localValue, setLocalValue] = React.useState(props.value ?? "");
+  const formatTimerRef = React.useRef(void 0);
+  const { formatDelay, decimalSymbol, prefix, suffix } = getConfig(config);
+  function clearPending() {
+    if (formatTimerRef.current) {
+      clearTimeout(formatTimerRef.current);
+      formatTimerRef.current = void 0;
+    }
+  }
+  function handleAffixOnFocus(target) {
+    let val = target.value;
+    if (suffix)
+      val = val.substring(0, val.indexOf(suffix));
+    if (prefix && !val.includes(prefix)) {
+      val = `${prefix}${val}`;
+    }
+    return val;
+  }
+  function handlePrefixEdgeCases(e) {
+    const target = e.target;
+    const start = target.selectionStart;
+    const end = target.selectionEnd;
+    const pl = prefix.length;
+    const atStart = start === pl;
+    const atEnd = end === pl;
+    if (start && end && start < pl) {
+      e.preventDefault();
+      target.setSelectionRange(pl, end - start + pl);
+    } else if (e.key === "ArrowLeft" && atStart || e.key === "Backspace" && atStart && atEnd || e.key === "Home") {
+      e.preventDefault();
+      target.setSelectionRange(prefix.length, prefix.length);
+    }
+  }
+  function formatValueWithAffix(value) {
+    if (!value)
+      return "";
+    return `${prefix}${value}${suffix}`;
+  }
+  const onKeyDownHandler = (currentValue) => {
+    const symbolPosition = currentValue.indexOf(decimalSymbol);
+    const newValue = props.format(currentValue) ?? "";
+    const newSymbolPosition = newValue.indexOf(decimalSymbol);
+    if ((symbolPosition === -1 || symbolPosition === 0) && newSymbolPosition > 0) {
+      return {
+        newValue: newValue.includes(prefix) ? `${newValue}` : `${prefix}${newValue}`,
+        newCursorPosition: newValue.includes(prefix) ? newSymbolPosition : newSymbolPosition + prefix.length
+      };
+    }
+    return {
+      newValue: newValue.includes(prefix) ? `${newValue}` : `${prefix}${newValue}`
+    };
+  };
+  const onBlur = (e) => {
+    clearPending();
+    const formatted = (prefix ? e.target.value.replace(prefix, "") : props.format(e.target.value)) ?? "";
+    if (formatted) {
+      props.set(formatted);
+      setLocalValue(formatValueWithAffix(formatted));
+    } else {
+      props.set("");
+      setLocalValue("");
+    }
+  };
+  const onChange = (e) => {
+    setLocalValue(e.target.value);
+  };
+  const onKeyDown = (e) => {
+    clearPending();
+    if (prefix)
+      handlePrefixEdgeCases(e);
+    const target = e.target;
+    formatTimerRef.current = setTimeout(() => {
+      const cursorPosition = target.selectionStart;
+      const currentValue = target.value;
+      if (cursorPosition !== currentValue.length) {
+        return;
+      }
+      const obj = onKeyDownHandler(currentValue);
+      setLocalValue(obj.newValue);
+      target.selectionStart = obj.newCursorPosition ?? target.selectionStart;
+      target.selectionEnd = obj.newCursorPosition ?? target.selectionEnd;
+    }, formatDelay);
+  };
+  const onFocus = (e) => {
+    const target = e.target;
+    const inputEmpty = target.value === "";
+    if (!inputEmpty && suffix || inputEmpty && prefix) {
+      setLocalValue(handleAffixOnFocus(target));
+    }
+  };
+  const propsValue = props.value;
+  React.useEffect(() => {
+    setLocalValue(formatValueWithAffix(propsValue));
+  }, [propsValue]);
+  React.useEffect(() => clearPending, []);
+  return {
+    onBlur,
+    onChange,
+    onKeyDown,
+    onFocus,
+    value: localValue
+  };
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/components/InputComponent.tsx
+var InputComponent = (props) => {
+  const { validation, label, id, note, size, maxLength, placeholder } = props;
+  const inputProps = useInputAssetProps(props);
+  return /* @__PURE__ */ React2.createElement(FormControl, { isInvalid: Boolean(validation) }, label && /* @__PURE__ */ React2.createElement(FormLabel, { htmlFor: id }, /* @__PURE__ */ React2.createElement(ReactAsset, { ...label.asset })), /* @__PURE__ */ React2.createElement(
+    Input,
+    {
+      id,
+      ...inputProps,
+      size,
+      maxLength,
+      placeholder
+    }
+  ), validation && /* @__PURE__ */ React2.createElement(FormErrorMessage, null, validation.message), note && /* @__PURE__ */ React2.createElement(FormHelperText, null, /* @__PURE__ */ React2.createElement(ReactAsset, { ...note.asset })));
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/dsl/Input.tsx
+import React3 from "react";
+import {
+  Asset,
+  createSlot
+} from "@player-tools/dsl";
+import { Text } from "@devtools-ui/text";
+var Input2 = (props) => {
+  const { children, binding, ...rest } = props;
+  return /* @__PURE__ */ React3.createElement(Asset, { type: "input", ...rest }, /* @__PURE__ */ React3.createElement("property", { name: "binding" }, binding.toValue()), children);
+};
+Input2.Label = createSlot({
+  name: "label",
+  TextComp: Text,
+  isArray: false,
+  wrapInAsset: true
+});
+Input2.Note = createSlot({
+  name: "note",
+  TextComp: Text,
+  isArray: false,
+  wrapInAsset: true
+});
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/transform/index.ts
+var inputTransform = (asset, options) => {
+  return {
+    ...asset,
+    format(val) {
+      if (asset.binding === void 0) {
+        return val;
+      }
+      return options.data.format(asset.binding, val);
+    },
+    set(val) {
+      if (asset.binding === void 0) {
+        return;
+      }
+      return options.data.model.set([[asset.binding, val]], {
+        formatted: true
+      });
+    },
+    value: asset.binding === void 0 ? "" : options.data.model.get(asset.binding, {
+      includeInvalid: true,
+      formatted: true
+    }),
+    validation: asset.binding === void 0 ? void 0 : options.validation?.get(asset.binding, { track: true }),
+    dataType: asset.binding === void 0 ? void 0 : options.validation?.type(asset.binding)
+  };
+};
+export {
+  Input2 as Input,
+  InputComponent,
+  inputTransform
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs

@@ -0,0 +1,199 @@
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/components/InputComponent.tsx
+import React2 from "react";
+import {
+  Input,
+  FormControl,
+  FormLabel,
+  FormHelperText,
+  FormErrorMessage
+} from "@chakra-ui/react";
+import { ReactAsset } from "@player-ui/react";
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/components/hooks.ts
+import React from "react";
+var getConfig = (userConfig = {}) => {
+  return {
+    decimalSymbol: ".",
+    formatDelay: 200,
+    prefix: "",
+    suffix: "",
+    ...userConfig
+  };
+};
+var useInputAssetProps = (props, config) => {
+  const [localValue, setLocalValue] = React.useState(props.value ?? "");
+  const formatTimerRef = React.useRef(void 0);
+  const { formatDelay, decimalSymbol, prefix, suffix } = getConfig(config);
+  function clearPending() {
+    if (formatTimerRef.current) {
+      clearTimeout(formatTimerRef.current);
+      formatTimerRef.current = void 0;
+    }
+  }
+  function handleAffixOnFocus(target) {
+    let val = target.value;
+    if (suffix)
+      val = val.substring(0, val.indexOf(suffix));
+    if (prefix && !val.includes(prefix)) {
+      val = `${prefix}${val}`;
+    }
+    return val;
+  }
+  function handlePrefixEdgeCases(e) {
+    const target = e.target;
+    const start = target.selectionStart;
+    const end = target.selectionEnd;
+    const pl = prefix.length;
+    const atStart = start === pl;
+    const atEnd = end === pl;
+    if (start && end && start < pl) {
+      e.preventDefault();
+      target.setSelectionRange(pl, end - start + pl);
+    } else if (e.key === "ArrowLeft" && atStart || e.key === "Backspace" && atStart && atEnd || e.key === "Home") {
+      e.preventDefault();
+      target.setSelectionRange(prefix.length, prefix.length);
+    }
+  }
+  function formatValueWithAffix(value) {
+    if (!value)
+      return "";
+    return `${prefix}${value}${suffix}`;
+  }
+  const onKeyDownHandler = (currentValue) => {
+    const symbolPosition = currentValue.indexOf(decimalSymbol);
+    const newValue = props.format(currentValue) ?? "";
+    const newSymbolPosition = newValue.indexOf(decimalSymbol);
+    if ((symbolPosition === -1 || symbolPosition === 0) && newSymbolPosition > 0) {
+      return {
+        newValue: newValue.includes(prefix) ? `${newValue}` : `${prefix}${newValue}`,
+        newCursorPosition: newValue.includes(prefix) ? newSymbolPosition : newSymbolPosition + prefix.length
+      };
+    }
+    return {
+      newValue: newValue.includes(prefix) ? `${newValue}` : `${prefix}${newValue}`
+    };
+  };
+  const onBlur = (e) => {
+    clearPending();
+    const formatted = (prefix ? e.target.value.replace(prefix, "") : props.format(e.target.value)) ?? "";
+    if (formatted) {
+      props.set(formatted);
+      setLocalValue(formatValueWithAffix(formatted));
+    } else {
+      props.set("");
+      setLocalValue("");
+    }
+  };
+  const onChange = (e) => {
+    setLocalValue(e.target.value);
+  };
+  const onKeyDown = (e) => {
+    clearPending();
+    if (prefix)
+      handlePrefixEdgeCases(e);
+    const target = e.target;
+    formatTimerRef.current = setTimeout(() => {
+      const cursorPosition = target.selectionStart;
+      const currentValue = target.value;
+      if (cursorPosition !== currentValue.length) {
+        return;
+      }
+      const obj = onKeyDownHandler(currentValue);
+      setLocalValue(obj.newValue);
+      target.selectionStart = obj.newCursorPosition ?? target.selectionStart;
+      target.selectionEnd = obj.newCursorPosition ?? target.selectionEnd;
+    }, formatDelay);
+  };
+  const onFocus = (e) => {
+    const target = e.target;
+    const inputEmpty = target.value === "";
+    if (!inputEmpty && suffix || inputEmpty && prefix) {
+      setLocalValue(handleAffixOnFocus(target));
+    }
+  };
+  const propsValue = props.value;
+  React.useEffect(() => {
+    setLocalValue(formatValueWithAffix(propsValue));
+  }, [propsValue]);
+  React.useEffect(() => clearPending, []);
+  return {
+    onBlur,
+    onChange,
+    onKeyDown,
+    onFocus,
+    value: localValue
+  };
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/components/InputComponent.tsx
+var InputComponent = (props) => {
+  const { validation, label, id, note, size, maxLength, placeholder } = props;
+  const inputProps = useInputAssetProps(props);
+  return /* @__PURE__ */ React2.createElement(FormControl, { isInvalid: Boolean(validation) }, label && /* @__PURE__ */ React2.createElement(FormLabel, { htmlFor: id }, /* @__PURE__ */ React2.createElement(ReactAsset, { ...label.asset })), /* @__PURE__ */ React2.createElement(
+    Input,
+    {
+      id,
+      ...inputProps,
+      size,
+      maxLength,
+      placeholder
+    }
+  ), validation && /* @__PURE__ */ React2.createElement(FormErrorMessage, null, validation.message), note && /* @__PURE__ */ React2.createElement(FormHelperText, null, /* @__PURE__ */ React2.createElement(ReactAsset, { ...note.asset })));
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/dsl/Input.tsx
+import React3 from "react";
+import {
+  Asset,
+  createSlot
+} from "@player-tools/dsl";
+import { Text } from "@devtools-ui/text";
+var Input2 = (props) => {
+  const { children, binding, ...rest } = props;
+  return /* @__PURE__ */ React3.createElement(Asset, { type: "input", ...rest }, /* @__PURE__ */ React3.createElement("property", { name: "binding" }, binding.toValue()), children);
+};
+Input2.Label = createSlot({
+  name: "label",
+  TextComp: Text,
+  isArray: false,
+  wrapInAsset: true
+});
+Input2.Note = createSlot({
+  name: "note",
+  TextComp: Text,
+  isArray: false,
+  wrapInAsset: true
+});
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/transform/index.ts
+var inputTransform = (asset, options) => {
+  return {
+    ...asset,
+    format(val) {
+      if (asset.binding === void 0) {
+        return val;
+      }
+      return options.data.format(asset.binding, val);
+    },
+    set(val) {
+      if (asset.binding === void 0) {
+        return;
+      }
+      return options.data.model.set([[asset.binding, val]], {
+        formatted: true
+      });
+    },
+    value: asset.binding === void 0 ? "" : options.data.model.get(asset.binding, {
+      includeInvalid: true,
+      formatted: true
+    }),
+    validation: asset.binding === void 0 ? void 0 : options.validation?.get(asset.binding, { track: true }),
+    dataType: asset.binding === void 0 ? void 0 : options.validation?.type(asset.binding)
+  };
+};
+export {
+  Input2 as Input,
+  InputComponent,
+  inputTransform
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/components/InputComponent.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/components/hooks.ts","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/dsl/Input.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/transform/index.ts"],"sourcesContent":["import React from \"react\";\nimport {\n  Input,\n  FormControl,\n  FormLabel,\n  FormHelperText,\n  FormErrorMessage,\n} from \"@chakra-ui/react\";\nimport { TransformedInput } from \"../types\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport { useInputAssetProps } from \"./hooks\";\n\nexport const InputComponent = (props: TransformedInput) => {\n  const { validation, label, id, note, size, maxLength, placeholder } = props;\n  const inputProps = useInputAssetProps(props);\n\n  return (\n    <FormControl isInvalid={Boolean(validation)}>\n      {label && (\n        <FormLabel htmlFor={id}>\n          <ReactAsset {...label.asset} />\n        </FormLabel>\n      )}\n      <Input\n        id={id}\n        {...inputProps}\n        size={size}\n        maxLength={maxLength}\n        placeholder={placeholder}\n      />\n      {validation && <FormErrorMessage>{validation.message}</FormErrorMessage>}\n      {note && (\n        <FormHelperText>\n          <ReactAsset {...note.asset} />\n        </FormHelperText>\n      )}\n    </FormControl>\n  );\n};\n","import React from \"react\";\nimport type { TransformedInput } from \"../types\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype KeyDownHandler = (currentValue: string, props?: TransformedInput) => any;\n\nexport interface InputHookConfig {\n  /** Time in ms to wait before formatting the user input for normal keys */\n  formatDelay?: number;\n\n  /** Symbol to be used for decimal point */\n  decimalSymbol?: string;\n\n  /** Affix to append to value - does not save to model and is only for display on input */\n  prefix?: string;\n\n  /** Affix to prepend to value - does not save to model and is only for display on input */\n  suffix?: string;\n}\n\n/** Create a valid config mixing in defaults and user overrides */\nexport const getConfig = (\n  userConfig: InputHookConfig = {}\n): Required<InputHookConfig> => {\n  return {\n    decimalSymbol: \".\",\n    formatDelay: 200,\n    prefix: \"\",\n    suffix: \"\",\n    ...userConfig,\n  };\n};\n\n/**\n * A hook to manage an input html element as an asset.\n * The hook returns an object containing props that are expected to reside on any html input.\n * It will handle formatting, setting values, beaconing, aria-labels, etc.\n *\n * @param props - The output of the input transform\n * @param config - Local config to manage user interaction overrides\n */\nexport const useInputAssetProps = (\n  props: TransformedInput,\n  config?: InputHookConfig\n) => {\n  const [localValue, setLocalValue] = React.useState(props.value ?? \"\");\n  const formatTimerRef = React.useRef<NodeJS.Timeout | undefined>(undefined);\n\n  const { formatDelay, decimalSymbol, prefix, suffix } = getConfig(config);\n\n  /** Reset and pending format timers */\n  function clearPending() {\n    if (formatTimerRef.current) {\n      clearTimeout(formatTimerRef.current);\n      formatTimerRef.current = undefined;\n    }\n  }\n\n  /** Affix handling logic on focus */\n  function handleAffixOnFocus(target: HTMLInputElement) {\n    let val = target.value;\n\n    if (suffix) val = val.substring(0, val.indexOf(suffix));\n\n    if (prefix && !val.includes(prefix)) {\n      val = `${prefix}${val}`;\n    }\n\n    return val;\n  }\n\n  /** Edge cases handling for prefix */\n  function handlePrefixEdgeCases(e: React.KeyboardEvent<HTMLInputElement>) {\n    const target = e.target as HTMLInputElement;\n    const start = target.selectionStart;\n    const end = target.selectionEnd;\n    const pl = prefix.length;\n    const atStart = start === pl;\n    const atEnd = end === pl;\n\n    if (start && end && start < pl) {\n      e.preventDefault();\n      target.setSelectionRange(pl, end - start + pl);\n    } else if (\n      (e.key === \"ArrowLeft\" && atStart) ||\n      (e.key === \"Backspace\" && atStart && atEnd) ||\n      e.key === \"Home\"\n    ) {\n      e.preventDefault();\n      target.setSelectionRange(prefix.length, prefix.length);\n    }\n  }\n\n  /** Helper to add affixes to value where appropriate  */\n  function formatValueWithAffix(value: string | undefined) {\n    if (!value) return \"\";\n\n    return `${prefix}${value}${suffix}`;\n  }\n\n  /** Value handling logic on key down */\n  const onKeyDownHandler: KeyDownHandler = (currentValue: string) => {\n    const symbolPosition = currentValue.indexOf(decimalSymbol);\n    const newValue = props.format(currentValue) ?? \"\";\n    const newSymbolPosition = newValue.indexOf(decimalSymbol);\n\n    if (\n      (symbolPosition === -1 || symbolPosition === 0) &&\n      newSymbolPosition > 0\n    ) {\n      // formatting added dot, so set cursor before dot\n      return {\n        newValue: newValue.includes(prefix)\n          ? `${newValue}`\n          : `${prefix}${newValue}`,\n        newCursorPosition: newValue.includes(prefix)\n          ? newSymbolPosition\n          : newSymbolPosition + prefix.length,\n      };\n    }\n\n    return {\n      newValue: newValue.includes(prefix)\n        ? `${newValue}`\n        : `${prefix}${newValue}`,\n    };\n  };\n\n  /** On blur, commit the value to the model */\n  const onBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {\n    clearPending();\n\n    const formatted =\n      (prefix\n        ? e.target.value.replace(prefix, \"\")\n        : props.format(e.target.value)) ?? \"\";\n\n    if (formatted) {\n      props.set(formatted);\n      setLocalValue(formatValueWithAffix(formatted));\n    } else {\n      props.set(\"\");\n      setLocalValue(\"\");\n    }\n  };\n\n  /** Keep track of any user changes */\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n    setLocalValue(e.target.value);\n  };\n\n  /** Schedule a format of the current input in the future */\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {\n    clearPending();\n\n    if (prefix) handlePrefixEdgeCases(e);\n\n    const target = e.target as HTMLInputElement;\n\n    formatTimerRef.current = setTimeout(() => {\n      const cursorPosition = target.selectionStart;\n      const currentValue = target.value;\n\n      /** Skip formatting if we're in the middle of the input */\n      if (cursorPosition !== currentValue.length) {\n        return;\n      }\n\n      const obj = onKeyDownHandler(currentValue);\n\n      setLocalValue(obj.newValue);\n      target.selectionStart = obj.newCursorPosition ?? target.selectionStart;\n      target.selectionEnd = obj.newCursorPosition ?? target.selectionEnd;\n    }, formatDelay);\n  };\n\n  /** Format value onFocus if affixes exist */\n  const onFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {\n    const target = e.target as HTMLInputElement;\n    const inputEmpty = target.value === \"\";\n\n    if ((!inputEmpty && suffix) || (inputEmpty && prefix)) {\n      setLocalValue(handleAffixOnFocus(target));\n    }\n  };\n\n  // Update the stored value if data changes\n  const propsValue = props.value;\n  React.useEffect(() => {\n    setLocalValue(formatValueWithAffix(propsValue));\n  }, [propsValue]);\n\n  /** clear anything pending on unmount of input */\n  React.useEffect(() => clearPending, []);\n\n  return {\n    onBlur,\n    onChange,\n    onKeyDown,\n    onFocus,\n    value: localValue,\n  };\n};\n","import React from \"react\";\nimport {\n  AssetPropsWithChildren,\n  Asset,\n  createSlot,\n  BindingTemplateInstance,\n} from \"@player-tools/dsl\";\nimport { InputAsset } from \"../types\";\nimport { Text } from \"@devtools-ui/text\";\n\nexport const Input = (\n  props: Omit<AssetPropsWithChildren<InputAsset>, \"binding\"> & {\n    /** The binding */\n    binding: BindingTemplateInstance;\n  }\n) => {\n  const { children, binding, ...rest } = props;\n  return (\n    <Asset type=\"input\" {...rest}>\n      <property name=\"binding\">{binding.toValue()}</property>\n      {children}\n    </Asset>\n  );\n};\n\nInput.Label = createSlot({\n  name: \"label\",\n  TextComp: Text,\n  isArray: false,\n  wrapInAsset: true,\n});\n\nInput.Note = createSlot({\n  name: \"note\",\n  TextComp: Text,\n  isArray: false,\n  wrapInAsset: true,\n});\n","import type { TransformFunction } from \"@player-ui/player\";\nimport { InputAsset, TransformedInput } from \"../types\";\n\nexport const inputTransform: TransformFunction<InputAsset, TransformedInput> = (\n  asset,\n  options\n) => {\n  return {\n    ...asset,\n    format(val) {\n      if (asset.binding === undefined) {\n        return val;\n      }\n\n      return options.data.format(asset.binding, val);\n    },\n    set(val) {\n      if (asset.binding === undefined) {\n        return;\n      }\n\n      return options.data.model.set([[asset.binding, val]], {\n        formatted: true,\n      });\n    },\n    value:\n      asset.binding === undefined\n        ? \"\"\n        : options.data.model.get(asset.binding, {\n            includeInvalid: true,\n            formatted: true,\n          }),\n    validation:\n      asset.binding === undefined\n        ? undefined\n        : options.validation?.get(asset.binding, { track: true }),\n    dataType:\n      asset.binding === undefined\n        ? undefined\n        : options.validation?.type(asset.binding),\n  };\n};\n"],"mappings":"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","names":["React","React","React","Input"]}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@devtools-ui/input",
+  "version": "0.0.2--canary.11.588",
+  "main": "dist/cjs/index.cjs",
+  "dependencies": {
+    "@devtools-ui/text": "0.0.2--canary.11.588",
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
+    "@player-tools/dsl": "0.5.2--canary.87.2261",
+    "@player-ui/types": "0.7.1",
+    "@player-ui/player": "0.7.1",
+    "@player-ui/react": "^0.7.1",
+    "@player-ui/asset-transform-plugin": "^0.7.1",
+    "@types/react": "^18.2.51",
+    "framer-motion": "^11.0.8",
+    "react": "^18.2.0",
+    "dlv": "^1.1.3",
+    "eslint-plugin-storybook": "^0.8.0",
+    "tslib": "^2.6.2"
+  },
+  "module": "dist/index.legacy-esm.js",
+  "types": "types/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/cjs/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "types"
+  ],
+  "peerDependencies": {}
+}

package/src/components/InputComponent.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import {
+  Input,
+  FormControl,
+  FormLabel,
+  FormHelperText,
+  FormErrorMessage,
+} from "@chakra-ui/react";
+import { TransformedInput } from "../types";
+import { ReactAsset } from "@player-ui/react";
+import { useInputAssetProps } from "./hooks";
+
+export const InputComponent = (props: TransformedInput) => {
+  const { validation, label, id, note, size, maxLength, placeholder } = props;
+  const inputProps = useInputAssetProps(props);
+
+  return (
+    <FormControl isInvalid={Boolean(validation)}>
+      {label && (
+        <FormLabel htmlFor={id}>
+          <ReactAsset {...label.asset} />
+        </FormLabel>
+      )}
+      <Input
+        id={id}
+        {...inputProps}
+        size={size}
+        maxLength={maxLength}
+        placeholder={placeholder}
+      />
+      {validation && <FormErrorMessage>{validation.message}</FormErrorMessage>}
+      {note && (
+        <FormHelperText>
+          <ReactAsset {...note.asset} />
+        </FormHelperText>
+      )}
+    </FormControl>
+  );
+};

package/src/components/hooks.ts

@@ -0,0 +1,203 @@
+import React from "react";
+import type { TransformedInput } from "../types";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type KeyDownHandler = (currentValue: string, props?: TransformedInput) => any;
+
+export interface InputHookConfig {
+  /** Time in ms to wait before formatting the user input for normal keys */
+  formatDelay?: number;
+
+  /** Symbol to be used for decimal point */
+  decimalSymbol?: string;
+
+  /** Affix to append to value - does not save to model and is only for display on input */
+  prefix?: string;
+
+  /** Affix to prepend to value - does not save to model and is only for display on input */
+  suffix?: string;
+}
+
+/** Create a valid config mixing in defaults and user overrides */
+export const getConfig = (
+  userConfig: InputHookConfig = {}
+): Required<InputHookConfig> => {
+  return {
+    decimalSymbol: ".",
+    formatDelay: 200,
+    prefix: "",
+    suffix: "",
+    ...userConfig,
+  };
+};
+
+/**
+ * A hook to manage an input html element as an asset.
+ * The hook returns an object containing props that are expected to reside on any html input.
+ * It will handle formatting, setting values, beaconing, aria-labels, etc.
+ *
+ * @param props - The output of the input transform
+ * @param config - Local config to manage user interaction overrides
+ */
+export const useInputAssetProps = (
+  props: TransformedInput,
+  config?: InputHookConfig
+) => {
+  const [localValue, setLocalValue] = React.useState(props.value ?? "");
+  const formatTimerRef = React.useRef<NodeJS.Timeout | undefined>(undefined);
+
+  const { formatDelay, decimalSymbol, prefix, suffix } = getConfig(config);
+
+  /** Reset and pending format timers */
+  function clearPending() {
+    if (formatTimerRef.current) {
+      clearTimeout(formatTimerRef.current);
+      formatTimerRef.current = undefined;
+    }
+  }
+
+  /** Affix handling logic on focus */
+  function handleAffixOnFocus(target: HTMLInputElement) {
+    let val = target.value;
+
+    if (suffix) val = val.substring(0, val.indexOf(suffix));
+
+    if (prefix && !val.includes(prefix)) {
+      val = `${prefix}${val}`;
+    }
+
+    return val;
+  }
+
+  /** Edge cases handling for prefix */
+  function handlePrefixEdgeCases(e: React.KeyboardEvent<HTMLInputElement>) {
+    const target = e.target as HTMLInputElement;
+    const start = target.selectionStart;
+    const end = target.selectionEnd;
+    const pl = prefix.length;
+    const atStart = start === pl;
+    const atEnd = end === pl;
+
+    if (start && end && start < pl) {
+      e.preventDefault();
+      target.setSelectionRange(pl, end - start + pl);
+    } else if (
+      (e.key === "ArrowLeft" && atStart) ||
+      (e.key === "Backspace" && atStart && atEnd) ||
+      e.key === "Home"
+    ) {
+      e.preventDefault();
+      target.setSelectionRange(prefix.length, prefix.length);
+    }
+  }
+
+  /** Helper to add affixes to value where appropriate  */
+  function formatValueWithAffix(value: string | undefined) {
+    if (!value) return "";
+
+    return `${prefix}${value}${suffix}`;
+  }
+
+  /** Value handling logic on key down */
+  const onKeyDownHandler: KeyDownHandler = (currentValue: string) => {
+    const symbolPosition = currentValue.indexOf(decimalSymbol);
+    const newValue = props.format(currentValue) ?? "";
+    const newSymbolPosition = newValue.indexOf(decimalSymbol);
+
+    if (
+      (symbolPosition === -1 || symbolPosition === 0) &&
+      newSymbolPosition > 0
+    ) {
+      // formatting added dot, so set cursor before dot
+      return {
+        newValue: newValue.includes(prefix)
+          ? `${newValue}`
+          : `${prefix}${newValue}`,
+        newCursorPosition: newValue.includes(prefix)
+          ? newSymbolPosition
+          : newSymbolPosition + prefix.length,
+      };
+    }
+
+    return {
+      newValue: newValue.includes(prefix)
+        ? `${newValue}`
+        : `${prefix}${newValue}`,
+    };
+  };
+
+  /** On blur, commit the value to the model */
+  const onBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
+    clearPending();
+
+    const formatted =
+      (prefix
+        ? e.target.value.replace(prefix, "")
+        : props.format(e.target.value)) ?? "";
+
+    if (formatted) {
+      props.set(formatted);
+      setLocalValue(formatValueWithAffix(formatted));
+    } else {
+      props.set("");
+      setLocalValue("");
+    }
+  };
+
+  /** Keep track of any user changes */
+  const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    setLocalValue(e.target.value);
+  };
+
+  /** Schedule a format of the current input in the future */
+  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
+    clearPending();
+
+    if (prefix) handlePrefixEdgeCases(e);
+
+    const target = e.target as HTMLInputElement;
+
+    formatTimerRef.current = setTimeout(() => {
+      const cursorPosition = target.selectionStart;
+      const currentValue = target.value;
+
+      /** Skip formatting if we're in the middle of the input */
+      if (cursorPosition !== currentValue.length) {
+        return;
+      }
+
+      const obj = onKeyDownHandler(currentValue);
+
+      setLocalValue(obj.newValue);
+      target.selectionStart = obj.newCursorPosition ?? target.selectionStart;
+      target.selectionEnd = obj.newCursorPosition ?? target.selectionEnd;
+    }, formatDelay);
+  };
+
+  /** Format value onFocus if affixes exist */
+  const onFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
+    const target = e.target as HTMLInputElement;
+    const inputEmpty = target.value === "";
+
+    if ((!inputEmpty && suffix) || (inputEmpty && prefix)) {
+      setLocalValue(handleAffixOnFocus(target));
+    }
+  };
+
+  // Update the stored value if data changes
+  const propsValue = props.value;
+  React.useEffect(() => {
+    setLocalValue(formatValueWithAffix(propsValue));
+  }, [propsValue]);
+
+  /** clear anything pending on unmount of input */
+  React.useEffect(() => clearPending, []);
+
+  return {
+    onBlur,
+    onChange,
+    onKeyDown,
+    onFocus,
+    value: localValue,
+  };
+};

package/src/components/index.ts

@@ -0,0 +1 @@
+export { InputComponent } from "./InputComponent";

package/src/dsl/Input.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import {
+  AssetPropsWithChildren,
+  Asset,
+  createSlot,
+  BindingTemplateInstance,
+} from "@player-tools/dsl";
+import { InputAsset } from "../types";
+import { Text } from "@devtools-ui/text";
+
+export const Input = (
+  props: Omit<AssetPropsWithChildren<InputAsset>, "binding"> & {
+    /** The binding */
+    binding: BindingTemplateInstance;
+  }
+) => {
+  const { children, binding, ...rest } = props;
+  return (
+    <Asset type="input" {...rest}>
+      <property name="binding">{binding.toValue()}</property>
+      {children}
+    </Asset>
+  );
+};
+
+Input.Label = createSlot({
+  name: "label",
+  TextComp: Text,
+  isArray: false,
+  wrapInAsset: true,
+});
+
+Input.Note = createSlot({
+  name: "note",
+  TextComp: Text,
+  isArray: false,
+  wrapInAsset: true,
+});

package/src/dsl/__tests__/Input.test.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { describe, expect, test } from "vitest";
+import { render, binding as b } from "@player-tools/dsl";
+import { Input } from "../Input";
+
+describe("DSL: Input", () => {
+  test("Renders default input", async () => {
+    const rendered = await render(<Input binding={b`binding`} />);
+
+    expect(rendered.jsonValue).toStrictEqual({
+      id: "root",
+      type: "input",
+      binding: "binding",
+    });
+  });
+
+  test("Renders input with size, placeholder and maxLength", async () => {
+    const rendered = await render(
+      <Input
+        size={"md"}
+        placeholder={"User input"}
+        maxLength={10}
+        binding={b`binding`}
+      />
+    );
+
+    expect(rendered.jsonValue).toStrictEqual({
+      id: "root",
+      type: "input",
+      placeholder: "User input",
+      size: "md",
+      maxLength: 10,
+      binding: "binding",
+    });
+  });
+
+  test("Renders input with label, binding and note", async () => {
+    const rendered = await render(
+      <Input binding={b`binding`}>
+        <Input.Label>Label</Input.Label>
+        <Input.Note>Some note</Input.Note>
+      </Input>
+    );
+
+    expect(rendered.jsonValue).toStrictEqual({
+      id: "root",
+      type: "input",
+      label: {
+        asset: {
+          id: "label",
+          type: "text",
+          value: "Label",
+        },
+      },
+      note: {
+        asset: {
+          id: "note",
+          type: "text",
+          value: "Some note",
+        },
+      },
+      binding: "binding",
+    });
+  });
+});

package/src/dsl/index.ts

@@ -0,0 +1 @@
+export { Input } from "./Input";

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from "./types";
+export * from "./components";
+export * from "./dsl";
+export * from "./transform";

package/src/transform/index.ts

@@ -0,0 +1,42 @@
+import type { TransformFunction } from "@player-ui/player";
+import { InputAsset, TransformedInput } from "../types";
+
+export const inputTransform: TransformFunction<InputAsset, TransformedInput> = (
+  asset,
+  options
+) => {
+  return {
+    ...asset,
+    format(val) {
+      if (asset.binding === undefined) {
+        return val;
+      }
+
+      return options.data.format(asset.binding, val);
+    },
+    set(val) {
+      if (asset.binding === undefined) {
+        return;
+      }
+
+      return options.data.model.set([[asset.binding, val]], {
+        formatted: true,
+      });
+    },
+    value:
+      asset.binding === undefined
+        ? ""
+        : options.data.model.get(asset.binding, {
+            includeInvalid: true,
+            formatted: true,
+          }),
+    validation:
+      asset.binding === undefined
+        ? undefined
+        : options.validation?.get(asset.binding, { track: true }),
+    dataType:
+      asset.binding === undefined
+        ? undefined
+        : options.validation?.type(asset.binding),
+  };
+};

package/src/types/index.ts

@@ -0,0 +1,44 @@
+import type { TextAsset } from "@devtools-ui/text";
+import { Asset, Schema, AssetWrapper } from "@player-ui/types";
+import { ValidationResponse } from "@player-ui/player";
+
+export type InputSize = "xs" | "sm" | "md" | "lg";
+
+type ValueType = string | undefined;
+
+export interface InputAsset extends Asset<"input"> {
+  /** The location in the data-model to store the data */
+  binding: ValueType;
+
+  /** A text asset for the action's label */
+  label?: AssetWrapper<TextAsset>;
+
+  /** Asset container for a note. */
+  note?: AssetWrapper<TextAsset>;
+
+  /** Size of the Input height */
+  size?: InputSize;
+
+  /** Placeholder of the Input */
+  placeholder?: string;
+
+  /** Max character length in the Input */
+  maxLength?: number;
+}
+
+export interface TransformedInput extends InputAsset {
+  /** A function to commit the new value to the data-model */
+  set: (newValue: ValueType) => void;
+
+  /** A function to format a value */
+  format: (newValue: ValueType) => ValueType;
+
+  /** The current value of the input from the data-model */
+  value: ValueType;
+
+  /** Any validation associated with the current input's value */
+  validation?: ValidationResponse;
+
+  /** The dataType defined from the schema */
+  dataType?: Schema.DataType;
+}

package/types/components/InputComponent.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TransformedInput } from "../types";
+export declare const InputComponent: (props: TransformedInput) => React.JSX.Element;
+//# sourceMappingURL=InputComponent.d.ts.map

package/types/components/hooks.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import type { TransformedInput } from "../types";
+export interface InputHookConfig {
+    /** Time in ms to wait before formatting the user input for normal keys */
+    formatDelay?: number;
+    /** Symbol to be used for decimal point */
+    decimalSymbol?: string;
+    /** Affix to append to value - does not save to model and is only for display on input */
+    prefix?: string;
+    /** Affix to prepend to value - does not save to model and is only for display on input */
+    suffix?: string;
+}
+/** Create a valid config mixing in defaults and user overrides */
+export declare const getConfig: (userConfig?: InputHookConfig) => Required<InputHookConfig>;
+/**
+ * A hook to manage an input html element as an asset.
+ * The hook returns an object containing props that are expected to reside on any html input.
+ * It will handle formatting, setting values, beaconing, aria-labels, etc.
+ *
+ * @param props - The output of the input transform
+ * @param config - Local config to manage user interaction overrides
+ */
+export declare const useInputAssetProps: (props: TransformedInput, config?: InputHookConfig) => {
+    onBlur: React.FocusEventHandler<HTMLInputElement>;
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
+    onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
+    onFocus: React.FocusEventHandler<HTMLInputElement>;
+    value: string;
+};
+//# sourceMappingURL=hooks.d.ts.map

package/types/components/index.d.ts

@@ -0,0 +1,2 @@
+export { InputComponent } from "./InputComponent";
+//# sourceMappingURL=index.d.ts.map

package/types/dsl/Input.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { AssetPropsWithChildren, BindingTemplateInstance } from "@player-tools/dsl";
+import { InputAsset } from "../types";
+export declare const Input: {
+    (props: Omit<AssetPropsWithChildren<InputAsset>, "binding"> & {
+        /** The binding */
+        binding: BindingTemplateInstance;
+    }): React.JSX.Element;
+    Label: (props: {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+    Note: (props: {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+};
+//# sourceMappingURL=Input.d.ts.map

package/types/dsl/index.d.ts

@@ -0,0 +1,2 @@
+export { Input } from "./Input";
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./types";
+export * from "./components";
+export * from "./dsl";
+export * from "./transform";
+//# sourceMappingURL=index.d.ts.map

package/types/transform/index.d.ts

@@ -0,0 +1,4 @@
+import type { TransformFunction } from "@player-ui/player";
+import { InputAsset, TransformedInput } from "../types";
+export declare const inputTransform: TransformFunction<InputAsset, TransformedInput>;
+//# sourceMappingURL=index.d.ts.map

package/types/types/index.d.ts

@@ -0,0 +1,33 @@
+import type { TextAsset } from "@devtools-ui/text";
+import { Asset, Schema, AssetWrapper } from "@player-ui/types";
+import { ValidationResponse } from "@player-ui/player";
+export type InputSize = "xs" | "sm" | "md" | "lg";
+type ValueType = string | undefined;
+export interface InputAsset extends Asset<"input"> {
+    /** The location in the data-model to store the data */
+    binding: ValueType;
+    /** A text asset for the action's label */
+    label?: AssetWrapper<TextAsset>;
+    /** Asset container for a note. */
+    note?: AssetWrapper<TextAsset>;
+    /** Size of the Input height */
+    size?: InputSize;
+    /** Placeholder of the Input */
+    placeholder?: string;
+    /** Max character length in the Input */
+    maxLength?: number;
+}
+export interface TransformedInput extends InputAsset {
+    /** A function to commit the new value to the data-model */
+    set: (newValue: ValueType) => void;
+    /** A function to format a value */
+    format: (newValue: ValueType) => ValueType;
+    /** The current value of the input from the data-model */
+    value: ValueType;
+    /** Any validation associated with the current input's value */
+    validation?: ValidationResponse;
+    /** The dataType defined from the schema */
+    dataType?: Schema.DataType;
+}
+export {};
+//# sourceMappingURL=index.d.ts.map