@player-ui/reference-assets-plugin-react 0.0.1-next.1

package/dist/index.esm.js

@@ -0,0 +1,457 @@
+import React, { useContext } from 'react';
+import { AssetProviderPlugin } from '@player-ui/asset-provider-plugin-react';
+import { FormControl, FormLabel, Input as Input$1, FormErrorMessage, FormHelperText, Link, Flex, Button, Text as Text$1, Box, Stack, Heading, Divider, HStack, ButtonGroup, useTheme, ChakraProvider } from '@chakra-ui/react';
+import { isBackAction, ReferenceAssetsPlugin as ReferenceAssetsPlugin$1 } from '@player-ui/reference-assets-plugin';
+import { Asset } from '@player-ui/react-asset';
+import { useBeacon } from '@player-ui/beacon-plugin-react';
+import makeClass from 'clsx';
+import { useAssetProps } from '@player-ui/react-utils';
+import { ChevronLeftIcon } from '@chakra-ui/icons';
+
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
+    }
+  return a;
+};
+const defaultKeyStrings = [
+  "Delete",
+  "Backspace",
+  "Tab",
+  "Home",
+  "End",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "ArrowDown",
+  "Escape"
+];
+const getConfig = (userConfig = {}) => {
+  return __spreadValues$7({
+    liveFormat: true,
+    suppressBeacons: false,
+    quickFormatDelay: 200,
+    slowFormatDelay: 1e3,
+    slowFormatKeys: defaultKeyStrings,
+    decimalSymbol: ".",
+    prefix: "",
+    suffix: ""
+  }, userConfig);
+};
+const useInputBeacon = (props) => {
+  const beaconHandler = useBeacon({ element: "text_input", asset: props });
+  return (newValue) => {
+    let action = "modified";
+    if (newValue === props.value) {
+      return;
+    }
+    if (newValue && !props.value) {
+      action = "added";
+    } else if (!newValue && props.value) {
+      action = "deleted";
+    }
+    beaconHandler({ action });
+  };
+};
+const useInputAsset = (props, config) => {
+  var _a;
+  const [localValue, setLocalValue] = React.useState((_a = props.value) != null ? _a : "");
+  const formatTimerRef = React.useRef(void 0);
+  const inputBeacon = useInputBeacon(props);
+  const {
+    liveFormat,
+    suppressBeacons,
+    quickFormatDelay,
+    slowFormatDelay,
+    slowFormatKeys,
+    decimalSymbol,
+    prefix,
+    suffix
+  } = getConfig(config);
+  function clearPending() {
+    if (formatTimerRef.current) {
+      clearTimeout(formatTimerRef.current);
+      formatTimerRef.current = void 0;
+    }
+  }
+  function getFormatDelaySpeed(e) {
+    const key = slowFormatKeys.every((k) => typeof k === "number") ? e.which : e.key;
+    return slowFormatKeys.includes(key) ? slowFormatDelay : quickFormatDelay;
+  }
+  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) => {
+    var _a2;
+    const symbolPosition = currentValue.indexOf(decimalSymbol);
+    const newValue = (_a2 = props.format(currentValue)) != null ? _a2 : "";
+    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) => {
+    var _a2;
+    clearPending();
+    const formatted = (_a2 = prefix ? e.target.value.replace(prefix, "") : props.format(e.target.value)) != null ? _a2 : "";
+    if (formatted) {
+      props.set(formatted);
+      setLocalValue(formatValueWithAffix(formatted));
+    } else {
+      props.set("");
+      setLocalValue("");
+    }
+    if (!suppressBeacons) {
+      inputBeacon(formatted);
+    }
+  };
+  const onChange = (e) => {
+    setLocalValue(e.target.value);
+  };
+  const onKeyDown = (e) => {
+    clearPending();
+    if (prefix)
+      handlePrefixEdgeCases(e);
+    const target = e.target;
+    if (liveFormat) {
+      formatTimerRef.current = setTimeout(() => {
+        var _a2, _b;
+        const cursorPosition = target.selectionStart;
+        const currentValue = target.value;
+        if (cursorPosition !== currentValue.length) {
+          return;
+        }
+        const obj = onKeyDownHandler(currentValue);
+        setLocalValue(obj.newValue);
+        target.selectionStart = (_a2 = obj.newCursorPosition) != null ? _a2 : target.selectionStart;
+        target.selectionEnd = (_b = obj.newCursorPosition) != null ? _b : target.selectionEnd;
+      }, getFormatDelaySpeed(e));
+    }
+  };
+  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
+  };
+};
+
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
+    }
+  return a;
+};
+const Input = (props) => {
+  const { validation, label, id, note } = props;
+  const inputProps = useInputAsset(props);
+  return /* @__PURE__ */ React.createElement(FormControl, {
+    isInvalid: Boolean(validation)
+  }, label && /* @__PURE__ */ React.createElement(FormLabel, {
+    htmlFor: id
+  }, /* @__PURE__ */ React.createElement(Asset, __spreadValues$6({}, label))), /* @__PURE__ */ React.createElement(Input$1, __spreadValues$6({
+    id,
+    size: "md"
+  }, inputProps)), validation && /* @__PURE__ */ React.createElement(FormErrorMessage, null, validation.message), note && /* @__PURE__ */ React.createElement(FormHelperText, null, /* @__PURE__ */ React.createElement(Asset, __spreadValues$6({}, note))));
+};
+
+var __defProp$5 = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const TextModifierContext = React.createContext(void 0);
+const useText = (props) => {
+  let className;
+  const modifierContext = useContext(TextModifierContext);
+  if (props.modifiers && (modifierContext == null ? void 0 : modifierContext.getClassForModifier)) {
+    className = makeClass(...props.modifiers.map(modifierContext.getClassForModifier));
+  }
+  return __spreadProps(__spreadValues$5({}, useAssetProps(props)), {
+    className,
+    children: props.value
+  });
+};
+
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
+    }
+  return a;
+};
+const getLinkModifier = (asset) => {
+  var _a;
+  return (_a = asset.modifiers) == null ? void 0 : _a.find((mod) => {
+    var _a2;
+    return mod.type === "link" && ((_a2 = mod.metaData) == null ? void 0 : _a2.ref) !== void 0;
+  });
+};
+const Text = (props) => {
+  const spanProps = useText(props);
+  const linkModifier = getLinkModifier(props);
+  const { value } = props;
+  if (linkModifier) {
+    return /* @__PURE__ */ React.createElement(Link, {
+      href: linkModifier.metaData.ref
+    }, value);
+  }
+  return /* @__PURE__ */ React.createElement("span", __spreadValues$4({}, spanProps), value);
+};
+
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
+    }
+  return a;
+};
+const Collection = (props) => {
+  var _a;
+  return /* @__PURE__ */ React.createElement(Flex, {
+    direction: "column",
+    gap: "5"
+  }, props.label && /* @__PURE__ */ React.createElement("h3", null, /* @__PURE__ */ React.createElement(Asset, __spreadValues$3({}, props.label))), (_a = props.values) == null ? void 0 : _a.map((a) => /* @__PURE__ */ React.createElement(Asset, __spreadValues$3({
+    key: a.asset.id
+  }, a))));
+};
+
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
+    }
+  return a;
+};
+const useAction = (props) => {
+  const { label } = props;
+  const beacon = useBeacon({
+    asset: props,
+    action: "clicked",
+    element: "button"
+  });
+  return {
+    id: props.id,
+    onClick: () => {
+      beacon();
+      props.run();
+    },
+    children: (label == null ? void 0 : label.asset) ? /* @__PURE__ */ React.createElement(Asset, __spreadValues$2({}, label == null ? void 0 : label.asset)) : null
+  };
+};
+
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+const Action = (props) => {
+  const { label } = props;
+  const buttonProps = useAction(props);
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, __spreadValues$1({
+    variant: isBackAction(props) ? "ghost" : "solid"
+  }, buttonProps), isBackAction(props) && /* @__PURE__ */ React.createElement(ChevronLeftIcon, null), label && /* @__PURE__ */ React.createElement(Text$1, null, /* @__PURE__ */ React.createElement(Asset, __spreadValues$1({}, label)))));
+};
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const Info = (props) => {
+  var _a, _b;
+  const segmentedActions = React.useMemo(() => {
+    var _a2, _b2;
+    if (!((_a2 = props.actions) == null ? void 0 : _a2.length)) {
+      return;
+    }
+    return (_b2 = props.actions) == null ? void 0 : _b2.reduce((memo, next) => {
+      memo[isBackAction(next.asset) ? "prev" : "next"].push(next);
+      return memo;
+    }, { prev: [], next: [] });
+  }, [props.actions]);
+  return /* @__PURE__ */ React.createElement(Box, {
+    minW: { base: void 0, md: "md" }
+  }, /* @__PURE__ */ React.createElement(Stack, {
+    gap: "10"
+  }, props.title && /* @__PURE__ */ React.createElement(Heading, {
+    size: "lg",
+    as: "h1"
+  }, /* @__PURE__ */ React.createElement(Asset, __spreadValues({}, props.title))), props.subTitle && /* @__PURE__ */ React.createElement(Heading, {
+    size: "md",
+    as: "h3"
+  }, /* @__PURE__ */ React.createElement(Asset, __spreadValues({}, props.subTitle))), /* @__PURE__ */ React.createElement(Box, null, props.primaryInfo && /* @__PURE__ */ React.createElement(Asset, __spreadValues({}, props.primaryInfo))), /* @__PURE__ */ React.createElement(Stack, {
+    gap: "4"
+  }, segmentedActions && /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(HStack, {
+    justifyContent: "space-between"
+  }, /* @__PURE__ */ React.createElement(ButtonGroup, {
+    spacing: "6"
+  }, (_a = segmentedActions == null ? void 0 : segmentedActions.prev) == null ? void 0 : _a.map((a) => /* @__PURE__ */ React.createElement(Asset, __spreadValues({
+    key: a.asset.id
+  }, a)))), /* @__PURE__ */ React.createElement(ButtonGroup, {
+    spacing: "6"
+  }, (_b = segmentedActions == null ? void 0 : segmentedActions.next) == null ? void 0 : _b.map((a) => /* @__PURE__ */ React.createElement(Asset, __spreadValues({
+    key: a.asset.id
+  }, a))))))));
+};
+
+const OptionalChakraThemeProvider = (props) => {
+  const theme = useTheme();
+  if (theme) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, props.children);
+  }
+  return /* @__PURE__ */ React.createElement(ChakraProvider, null, props.children);
+};
+class ReferenceAssetsPlugin {
+  constructor() {
+    this.name = "reference-assets-web-plugin";
+  }
+  applyWeb(webplayer) {
+    webplayer.registerPlugin(new AssetProviderPlugin([
+      ["input", Input],
+      ["text", Text],
+      ["action", Action],
+      ["info", Info],
+      ["collection", Collection]
+    ]));
+    webplayer.hooks.webComponent.tap(this.name, (Comp) => {
+      return () => {
+        return /* @__PURE__ */ React.createElement(OptionalChakraThemeProvider, null, /* @__PURE__ */ React.createElement(Comp, null));
+      };
+    });
+  }
+  apply(player) {
+    player.registerPlugin(new ReferenceAssetsPlugin$1());
+  }
+}
+
+export { Action, Collection, Info, Input, ReferenceAssetsPlugin, Text, TextModifierContext, getConfig, getLinkModifier, useAction, useInputAsset, useInputBeacon, useText };
+//# sourceMappingURL=index.esm.js.map

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@player-ui/reference-assets-plugin-react",
+  "version": "0.0.1-next.1",
+  "private": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "peerDependencies": {
+    "@types/node": "^16.11.12",
+    "@player-ui/binding-grammar": "0.0.1-next.1"
+  },
+  "dependencies": {
+    "@player-ui/binding-grammar": "0.0.1-next.1",
+    "@player-ui/partial-match-registry": "0.0.1-next.1",
+    "clsx": "^1.1.1",
+    "@chakra-ui/react": "^1.7.3",
+    "@chakra-ui/icons": "^1.1.1",
+    "@babel/runtime": "7.15.4"
+  },
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "typings": "dist/index.d.ts"
+}

package/src/assets/action/Action.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Asset } from '@player-ui/react-asset';
+import { Button, Text } from '@chakra-ui/react';
+import { ChevronLeftIcon } from '@chakra-ui/icons';
+import type { TransformedAction } from '@player-ui/reference-assets-plugin';
+import { isBackAction } from '@player-ui/reference-assets-plugin';
+import { useAction } from './hooks';
+
+/**
+ * An action that a user can take
+ */
+export const Action = (props: TransformedAction) => {
+  const { label } = props;
+  const buttonProps = useAction(props);
+
+  return (
+    <div>
+      <Button
+        variant={isBackAction(props) ? 'ghost' : 'solid'}
+        {...buttonProps}
+      >
+        {isBackAction(props) && <ChevronLeftIcon />}
+        {label && (
+          <Text>
+            <Asset {...label} />
+          </Text>
+        )}
+      </Button>
+    </div>
+  );
+};

package/src/assets/action/hooks.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Asset } from '@player-ui/react-asset';
+import { useBeacon } from '@player-ui/beacon-plugin-react';
+import type { TransformedAction } from '@player-ui/reference-assets-plugin';
+
+/** Hook to get all the props for a button */
+export const useAction = (props: TransformedAction) => {
+  const { label } = props;
+  const beacon = useBeacon({
+    asset: props,
+    action: 'clicked',
+    element: 'button',
+  });
+
+  return {
+    id: props.id,
+    onClick: () => {
+      beacon();
+      props.run();
+    },
+    children: label?.asset ? <Asset {...label?.asset} /> : null,
+  } as const;
+};

package/src/assets/action/index.ts

@@ -0,0 +1,2 @@
+export * from './Action';
+export * from './hooks';

package/src/assets/collection/Collection.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Flex } from '@chakra-ui/react';
+import { Asset } from '@player-ui/react-asset';
+import type { CollectionAsset } from '@player-ui/reference-assets-plugin';
+
+export const Collection = (props: CollectionAsset) => {
+  return (
+    <Flex direction="column" gap="5">
+      {props.label && (
+        <h3>
+          <Asset {...props.label} />
+        </h3>
+      )}
+      {props.values?.map((a) => (
+        <Asset key={a.asset.id} {...a} />
+      ))}
+    </Flex>
+  );
+};

package/src/assets/collection/index.tsx

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

package/src/assets/index.tsx

@@ -0,0 +1,5 @@
+export * from './input';
+export * from './text';
+export * from './collection';
+export * from './action';
+export * from './info';

package/src/assets/info/Info.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import type {
+  ActionAsset,
+  InfoAsset,
+} from '@player-ui/reference-assets-plugin';
+import { isBackAction } from '@player-ui/reference-assets-plugin';
+import { Asset } from '@player-ui/react-asset';
+import {
+  ButtonGroup,
+  Box,
+  Heading,
+  Divider,
+  Stack,
+  HStack,
+} from '@chakra-ui/react';
+import type { AssetWrapper } from '@player-ui/react';
+
+/** The info view type is used to show information to the user */
+export const Info = (props: InfoAsset) => {
+  const segmentedActions = React.useMemo(() => {
+    if (!props.actions?.length) {
+      return;
+    }
+
+    return props.actions?.reduce(
+      (memo, next) => {
+        memo[isBackAction(next.asset as ActionAsset) ? 'prev' : 'next'].push(
+          next as AssetWrapper<ActionAsset>
+        );
+        return memo;
+      },
+      { prev: [], next: [] } as {
+        prev: Array<AssetWrapper<ActionAsset>>;
+        next: Array<AssetWrapper<ActionAsset>>;
+      }
+    );
+  }, [props.actions]);
+
+  return (
+    <Box minW={{ base: undefined, md: 'md' }}>
+      <Stack gap="10">
+        {props.title && (
+          <Heading size="lg" as="h1">
+            <Asset {...props.title} />
+          </Heading>
+        )}
+        {props.subTitle && (
+          <Heading size="md" as="h3">
+            <Asset {...props.subTitle} />
+          </Heading>
+        )}
+        <Box>{props.primaryInfo && <Asset {...props.primaryInfo} />}</Box>
+        <Stack gap="4">
+          {segmentedActions && <Divider />}
+          <HStack justifyContent="space-between">
+            <ButtonGroup spacing="6">
+              {segmentedActions?.prev?.map((a) => (
+                <Asset key={a.asset.id} {...a} />
+              ))}
+            </ButtonGroup>
+            <ButtonGroup spacing="6">
+              {segmentedActions?.next?.map((a) => (
+                <Asset key={a.asset.id} {...a} />
+              ))}
+            </ButtonGroup>
+          </HStack>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+};

package/src/assets/info/index.tsx

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

package/src/assets/input/Input.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Asset } from '@player-ui/react-asset';
+import type { TransformedInput } from '@player-ui/reference-assets-plugin';
+import {
+  Input as ChakraInput,
+  FormControl,
+  FormLabel,
+  FormErrorMessage,
+  FormHelperText,
+} from '@chakra-ui/react';
+import { useInputAsset } from './hooks';
+
+/** An Input */
+export const Input = (props: TransformedInput) => {
+  const { validation, label, id, note } = props;
+  const inputProps = useInputAsset(props);
+
+  return (
+    <FormControl isInvalid={Boolean(validation)}>
+      {label && (
+        <FormLabel htmlFor={id}>
+          <Asset {...label} />
+        </FormLabel>
+      )}
+      <ChakraInput id={id} size="md" {...inputProps} />
+      {validation && <FormErrorMessage>{validation.message}</FormErrorMessage>}
+      {note && (
+        <FormHelperText>
+          <Asset {...note} />
+        </FormHelperText>
+      )}
+    </FormControl>
+  );
+};
+
+export default Input;