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

package/dist/cjs/index.cjs

@@ -0,0 +1,141 @@
+"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/action/src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Action: () => Action,
+  ActionComponent: () => ActionComponent,
+  actionTransform: () => actionTransform,
+  expPropTransform: () => expPropTransform
+});
+module.exports = __toCommonJS(src_exports);
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/action/src/components/ActionComponent.tsx
+var import_react = __toESM(require("react"));
+var import_react2 = require("@chakra-ui/react");
+var import_react3 = require("@player-ui/react");
+var useActionPros = (props) => {
+  return {
+    ...props.label ? { children: /* @__PURE__ */ import_react.default.createElement(import_react3.ReactAsset, { ...props.label.asset }) } : {},
+    ...props.icon ? {
+      [props.metaData?.iconPosition === "left" ? "leftIcon" : "rightIcon"]: /* @__PURE__ */ import_react.default.createElement(import_react3.ReactAsset, { ...props.icon.asset })
+    } : {},
+    ...props.run ? { onClick: props.run } : {},
+    ...props.metaData?.variant ? { variant: props.metaData.variant } : {},
+    ...props.metaData?.isLoading ? { isLoading: props.metaData.isLoading } : {}
+  };
+};
+var ActionComponent = (props) => {
+  const { children, ...buttonProps } = useActionPros(props);
+  return /* @__PURE__ */ import_react.default.createElement(import_react2.Button, { ...buttonProps }, children);
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/action/src/dsl/Action.tsx
+var import_react4 = __toESM(require("react"));
+var import_dsl = require("@player-tools/dsl");
+var import_collection = require("@devtools-ui/collection");
+var import_text = require("@devtools-ui/text");
+var Action = (props) => {
+  const { exp, children, ...rest } = props;
+  let expValue;
+  if ((0, import_dsl.isTemplateStringInstance)(exp)) {
+    expValue = exp.toValue();
+  } else if (Array.isArray(exp)) {
+    expValue = exp.map((e) => typeof e === "string" ? e : e.toValue());
+  } else if (exp) {
+    expValue = exp;
+  }
+  return /* @__PURE__ */ import_react4.default.createElement(import_dsl.Asset, { type: "action", ...rest, ...expValue && { exp: expValue } }, children);
+};
+var CollectionComp = (props) => {
+  return /* @__PURE__ */ import_react4.default.createElement(import_collection.Collection, null, /* @__PURE__ */ import_react4.default.createElement(import_collection.Collection.Values, null, props.children));
+};
+Action.Label = (0, import_dsl.createSlot)({
+  name: "label",
+  TextComp: import_text.Text,
+  CollectionComp,
+  isArray: false,
+  wrapInAsset: true
+});
+Action.Icon = (0, import_dsl.createSlot)({
+  name: "icon",
+  TextComp: import_text.Text,
+  CollectionComp,
+  isArray: false,
+  wrapInAsset: true
+});
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/action/src/transform/index.ts
+var import_asset_transform_plugin = require("@player-ui/asset-transform-plugin");
+var transform = (action, options) => {
+  return {
+    ...action,
+    run() {
+      if (action.exp) {
+        options.evaluate(action.exp);
+      }
+      if (action.value) {
+        const skipValidation = action.metaData?.skipValidation;
+        options.transition?.(action.value, { force: skipValidation });
+      }
+    }
+  };
+};
+var expPropTransform = (asset) => {
+  const skipArray = asset.plugins?.stringResolver?.propertiesToSkip;
+  if (skipArray && skipArray.indexOf("exp") > 1) {
+    return asset;
+  }
+  return {
+    ...asset,
+    plugins: {
+      ...asset.plugins,
+      stringResolver: {
+        ...asset?.plugins?.stringResolver,
+        propertiesToSkip: [
+          ...asset.plugins?.stringResolver?.propertiesToSkip ?? [],
+          "exp"
+        ]
+      }
+    }
+  };
+};
+var actionTransform = (0, import_asset_transform_plugin.compose)(
+  transform,
+  (0, import_asset_transform_plugin.composeBefore)(expPropTransform)
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Action,
+  ActionComponent,
+  actionTransform,
+  expPropTransform
+});
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/action/src/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/action/src/components/ActionComponent.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/action/src/dsl/Action.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/action/src/transform/index.ts"],"sourcesContent":["export * from \"./types\";\nexport * from \"./components\";\nexport * from \"./dsl\";\nexport * from \"./transform\";\n","import React from \"react\";\nimport { Button } from \"@chakra-ui/react\";\nimport type { TransformedAction } from \"../types\";\nimport { ReactAsset } from \"@player-ui/react\";\n\nconst useActionPros = (props: TransformedAction) => {\n  return {\n    ...(props.label ? { children: <ReactAsset {...props.label.asset} /> } : {}),\n    ...(props.icon\n      ? {\n          [props.metaData?.iconPosition === \"left\" ? \"leftIcon\" : \"rightIcon\"]:\n            <ReactAsset {...props.icon.asset} />,\n        }\n      : {}),\n    ...(props.run ? { onClick: props.run } : {}),\n    ...(props.metaData?.variant ? { variant: props.metaData.variant } : {}),\n    ...(props.metaData?.isLoading\n      ? { isLoading: props.metaData.isLoading }\n      : {}),\n  } as const;\n};\n\nexport const ActionComponent = (props: TransformedAction) => {\n  const { children, ...buttonProps } = useActionPros(props);\n\n  return <Button {...buttonProps}>{children}</Button>;\n};\n","import React from \"react\";\nimport {\n  AssetPropsWithChildren,\n  Asset,\n  createSlot,\n  isTemplateStringInstance,\n} from \"@player-tools/dsl\";\nimport type { Asset as AssetType } from \"@player-ui/player\";\nimport type { ActionAsset } from \"../types\";\nimport { Collection } from \"@devtools-ui/collection\";\nimport { Text } from \"@devtools-ui/text\";\n\nexport const Action = (props: AssetPropsWithChildren<ActionAsset>) => {\n  const { exp, children, ...rest } = props;\n\n  let expValue: ActionAsset[\"exp\"];\n\n  if (isTemplateStringInstance(exp)) {\n    expValue = exp.toValue();\n  } else if (Array.isArray(exp)) {\n    expValue = exp.map((e) => (typeof e === \"string\" ? e : e.toValue()));\n  } else if (exp) {\n    expValue = exp;\n  }\n\n  return (\n    <Asset type=\"action\" {...rest} {...(expValue && { exp: expValue })}>\n      {children}\n    </Asset>\n  );\n};\n\nconst CollectionComp = (props: AssetPropsWithChildren<AssetType>) => {\n  return (\n    <Collection>\n      <Collection.Values>{props.children}</Collection.Values>\n    </Collection>\n  );\n};\n\nAction.Label = createSlot({\n  name: \"label\",\n  TextComp: Text,\n  CollectionComp,\n  isArray: false,\n  wrapInAsset: true,\n});\n\nAction.Icon = createSlot({\n  name: \"icon\",\n  TextComp: Text,\n  CollectionComp,\n  isArray: false,\n  wrapInAsset: true,\n});\n","import type {\n  Asset,\n  BeforeTransformFunction,\n  TransformFunction,\n} from \"@player-ui/player\";\nimport { compose, composeBefore } from \"@player-ui/asset-transform-plugin\";\nimport { ActionAsset, TransformedAction } from \"../types\";\n\n/**\n * Attaches the methods to execute an action\n */\nconst transform: TransformFunction<ActionAsset, TransformedAction> = (\n  action,\n  options\n) => {\n  return {\n    ...action,\n    run() {\n      if (action.exp) {\n        options.evaluate(action.exp);\n      }\n\n      if (action.value) {\n        const skipValidation = action.metaData?.skipValidation;\n        options.transition?.(action.value, { force: skipValidation });\n      }\n    },\n  };\n};\n\n/**\n * Appends `exp` to the plugins.stringResolver.propertiesToSkip array or creates it if it doesn't exist\n *\n * @param asset - Asset to apply the transform to\n */\nexport const expPropTransform: BeforeTransformFunction<Asset> = (asset) => {\n  const skipArray = asset.plugins?.stringResolver?.propertiesToSkip;\n\n  if (skipArray && skipArray.indexOf(\"exp\") > 1) {\n    return asset;\n  }\n\n  return {\n    ...asset,\n    plugins: {\n      ...asset.plugins,\n      stringResolver: {\n        ...asset?.plugins?.stringResolver,\n        propertiesToSkip: [\n          ...(asset.plugins?.stringResolver?.propertiesToSkip ?? []),\n          \"exp\",\n        ],\n      },\n    },\n  };\n};\n\nexport const actionTransform = compose(\n  transform,\n  composeBefore(expPropTransform)\n);\n"],"mappings":"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","names":["import_react","React","import_react","React"]}

package/dist/index.legacy-esm.js

@@ -0,0 +1,105 @@
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/action/src/components/ActionComponent.tsx
+import React from "react";
+import { Button } from "@chakra-ui/react";
+import { ReactAsset } from "@player-ui/react";
+var useActionPros = (props) => {
+  return {
+    ...props.label ? { children: /* @__PURE__ */ React.createElement(ReactAsset, { ...props.label.asset }) } : {},
+    ...props.icon ? {
+      [props.metaData?.iconPosition === "left" ? "leftIcon" : "rightIcon"]: /* @__PURE__ */ React.createElement(ReactAsset, { ...props.icon.asset })
+    } : {},
+    ...props.run ? { onClick: props.run } : {},
+    ...props.metaData?.variant ? { variant: props.metaData.variant } : {},
+    ...props.metaData?.isLoading ? { isLoading: props.metaData.isLoading } : {}
+  };
+};
+var ActionComponent = (props) => {
+  const { children, ...buttonProps } = useActionPros(props);
+  return /* @__PURE__ */ React.createElement(Button, { ...buttonProps }, children);
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/action/src/dsl/Action.tsx
+import React2 from "react";
+import {
+  Asset,
+  createSlot,
+  isTemplateStringInstance
+} from "@player-tools/dsl";
+import { Collection } from "@devtools-ui/collection";
+import { Text } from "@devtools-ui/text";
+var Action = (props) => {
+  const { exp, children, ...rest } = props;
+  let expValue;
+  if (isTemplateStringInstance(exp)) {
+    expValue = exp.toValue();
+  } else if (Array.isArray(exp)) {
+    expValue = exp.map((e) => typeof e === "string" ? e : e.toValue());
+  } else if (exp) {
+    expValue = exp;
+  }
+  return /* @__PURE__ */ React2.createElement(Asset, { type: "action", ...rest, ...expValue && { exp: expValue } }, children);
+};
+var CollectionComp = (props) => {
+  return /* @__PURE__ */ React2.createElement(Collection, null, /* @__PURE__ */ React2.createElement(Collection.Values, null, props.children));
+};
+Action.Label = createSlot({
+  name: "label",
+  TextComp: Text,
+  CollectionComp,
+  isArray: false,
+  wrapInAsset: true
+});
+Action.Icon = createSlot({
+  name: "icon",
+  TextComp: Text,
+  CollectionComp,
+  isArray: false,
+  wrapInAsset: true
+});
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/action/src/transform/index.ts
+import { compose, composeBefore } from "@player-ui/asset-transform-plugin";
+var transform = (action, options) => {
+  return {
+    ...action,
+    run() {
+      if (action.exp) {
+        options.evaluate(action.exp);
+      }
+      if (action.value) {
+        const skipValidation = action.metaData?.skipValidation;
+        options.transition?.(action.value, { force: skipValidation });
+      }
+    }
+  };
+};
+var expPropTransform = (asset) => {
+  const skipArray = asset.plugins?.stringResolver?.propertiesToSkip;
+  if (skipArray && skipArray.indexOf("exp") > 1) {
+    return asset;
+  }
+  return {
+    ...asset,
+    plugins: {
+      ...asset.plugins,
+      stringResolver: {
+        ...asset?.plugins?.stringResolver,
+        propertiesToSkip: [
+          ...asset.plugins?.stringResolver?.propertiesToSkip ?? [],
+          "exp"
+        ]
+      }
+    }
+  };
+};
+var actionTransform = compose(
+  transform,
+  composeBefore(expPropTransform)
+);
+export {
+  Action,
+  ActionComponent,
+  actionTransform,
+  expPropTransform
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs

@@ -0,0 +1,105 @@
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/action/src/components/ActionComponent.tsx
+import React from "react";
+import { Button } from "@chakra-ui/react";
+import { ReactAsset } from "@player-ui/react";
+var useActionPros = (props) => {
+  return {
+    ...props.label ? { children: /* @__PURE__ */ React.createElement(ReactAsset, { ...props.label.asset }) } : {},
+    ...props.icon ? {
+      [props.metaData?.iconPosition === "left" ? "leftIcon" : "rightIcon"]: /* @__PURE__ */ React.createElement(ReactAsset, { ...props.icon.asset })
+    } : {},
+    ...props.run ? { onClick: props.run } : {},
+    ...props.metaData?.variant ? { variant: props.metaData.variant } : {},
+    ...props.metaData?.isLoading ? { isLoading: props.metaData.isLoading } : {}
+  };
+};
+var ActionComponent = (props) => {
+  const { children, ...buttonProps } = useActionPros(props);
+  return /* @__PURE__ */ React.createElement(Button, { ...buttonProps }, children);
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/action/src/dsl/Action.tsx
+import React2 from "react";
+import {
+  Asset,
+  createSlot,
+  isTemplateStringInstance
+} from "@player-tools/dsl";
+import { Collection } from "@devtools-ui/collection";
+import { Text } from "@devtools-ui/text";
+var Action = (props) => {
+  const { exp, children, ...rest } = props;
+  let expValue;
+  if (isTemplateStringInstance(exp)) {
+    expValue = exp.toValue();
+  } else if (Array.isArray(exp)) {
+    expValue = exp.map((e) => typeof e === "string" ? e : e.toValue());
+  } else if (exp) {
+    expValue = exp;
+  }
+  return /* @__PURE__ */ React2.createElement(Asset, { type: "action", ...rest, ...expValue && { exp: expValue } }, children);
+};
+var CollectionComp = (props) => {
+  return /* @__PURE__ */ React2.createElement(Collection, null, /* @__PURE__ */ React2.createElement(Collection.Values, null, props.children));
+};
+Action.Label = createSlot({
+  name: "label",
+  TextComp: Text,
+  CollectionComp,
+  isArray: false,
+  wrapInAsset: true
+});
+Action.Icon = createSlot({
+  name: "icon",
+  TextComp: Text,
+  CollectionComp,
+  isArray: false,
+  wrapInAsset: true
+});
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/action/src/transform/index.ts
+import { compose, composeBefore } from "@player-ui/asset-transform-plugin";
+var transform = (action, options) => {
+  return {
+    ...action,
+    run() {
+      if (action.exp) {
+        options.evaluate(action.exp);
+      }
+      if (action.value) {
+        const skipValidation = action.metaData?.skipValidation;
+        options.transition?.(action.value, { force: skipValidation });
+      }
+    }
+  };
+};
+var expPropTransform = (asset) => {
+  const skipArray = asset.plugins?.stringResolver?.propertiesToSkip;
+  if (skipArray && skipArray.indexOf("exp") > 1) {
+    return asset;
+  }
+  return {
+    ...asset,
+    plugins: {
+      ...asset.plugins,
+      stringResolver: {
+        ...asset?.plugins?.stringResolver,
+        propertiesToSkip: [
+          ...asset.plugins?.stringResolver?.propertiesToSkip ?? [],
+          "exp"
+        ]
+      }
+    }
+  };
+};
+var actionTransform = compose(
+  transform,
+  composeBefore(expPropTransform)
+);
+export {
+  Action,
+  ActionComponent,
+  actionTransform,
+  expPropTransform
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/action/src/components/ActionComponent.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/action/src/dsl/Action.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/action/src/transform/index.ts"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@chakra-ui/react\";\nimport type { TransformedAction } from \"../types\";\nimport { ReactAsset } from \"@player-ui/react\";\n\nconst useActionPros = (props: TransformedAction) => {\n  return {\n    ...(props.label ? { children: <ReactAsset {...props.label.asset} /> } : {}),\n    ...(props.icon\n      ? {\n          [props.metaData?.iconPosition === \"left\" ? \"leftIcon\" : \"rightIcon\"]:\n            <ReactAsset {...props.icon.asset} />,\n        }\n      : {}),\n    ...(props.run ? { onClick: props.run } : {}),\n    ...(props.metaData?.variant ? { variant: props.metaData.variant } : {}),\n    ...(props.metaData?.isLoading\n      ? { isLoading: props.metaData.isLoading }\n      : {}),\n  } as const;\n};\n\nexport const ActionComponent = (props: TransformedAction) => {\n  const { children, ...buttonProps } = useActionPros(props);\n\n  return <Button {...buttonProps}>{children}</Button>;\n};\n","import React from \"react\";\nimport {\n  AssetPropsWithChildren,\n  Asset,\n  createSlot,\n  isTemplateStringInstance,\n} from \"@player-tools/dsl\";\nimport type { Asset as AssetType } from \"@player-ui/player\";\nimport type { ActionAsset } from \"../types\";\nimport { Collection } from \"@devtools-ui/collection\";\nimport { Text } from \"@devtools-ui/text\";\n\nexport const Action = (props: AssetPropsWithChildren<ActionAsset>) => {\n  const { exp, children, ...rest } = props;\n\n  let expValue: ActionAsset[\"exp\"];\n\n  if (isTemplateStringInstance(exp)) {\n    expValue = exp.toValue();\n  } else if (Array.isArray(exp)) {\n    expValue = exp.map((e) => (typeof e === \"string\" ? e : e.toValue()));\n  } else if (exp) {\n    expValue = exp;\n  }\n\n  return (\n    <Asset type=\"action\" {...rest} {...(expValue && { exp: expValue })}>\n      {children}\n    </Asset>\n  );\n};\n\nconst CollectionComp = (props: AssetPropsWithChildren<AssetType>) => {\n  return (\n    <Collection>\n      <Collection.Values>{props.children}</Collection.Values>\n    </Collection>\n  );\n};\n\nAction.Label = createSlot({\n  name: \"label\",\n  TextComp: Text,\n  CollectionComp,\n  isArray: false,\n  wrapInAsset: true,\n});\n\nAction.Icon = createSlot({\n  name: \"icon\",\n  TextComp: Text,\n  CollectionComp,\n  isArray: false,\n  wrapInAsset: true,\n});\n","import type {\n  Asset,\n  BeforeTransformFunction,\n  TransformFunction,\n} from \"@player-ui/player\";\nimport { compose, composeBefore } from \"@player-ui/asset-transform-plugin\";\nimport { ActionAsset, TransformedAction } from \"../types\";\n\n/**\n * Attaches the methods to execute an action\n */\nconst transform: TransformFunction<ActionAsset, TransformedAction> = (\n  action,\n  options\n) => {\n  return {\n    ...action,\n    run() {\n      if (action.exp) {\n        options.evaluate(action.exp);\n      }\n\n      if (action.value) {\n        const skipValidation = action.metaData?.skipValidation;\n        options.transition?.(action.value, { force: skipValidation });\n      }\n    },\n  };\n};\n\n/**\n * Appends `exp` to the plugins.stringResolver.propertiesToSkip array or creates it if it doesn't exist\n *\n * @param asset - Asset to apply the transform to\n */\nexport const expPropTransform: BeforeTransformFunction<Asset> = (asset) => {\n  const skipArray = asset.plugins?.stringResolver?.propertiesToSkip;\n\n  if (skipArray && skipArray.indexOf(\"exp\") > 1) {\n    return asset;\n  }\n\n  return {\n    ...asset,\n    plugins: {\n      ...asset.plugins,\n      stringResolver: {\n        ...asset?.plugins?.stringResolver,\n        propertiesToSkip: [\n          ...(asset.plugins?.stringResolver?.propertiesToSkip ?? []),\n          \"exp\",\n        ],\n      },\n    },\n  };\n};\n\nexport const actionTransform = compose(\n  transform,\n  composeBefore(expPropTransform)\n);\n"],"mappings":"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","names":["React"]}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@devtools-ui/action",
+  "version": "0.0.2--canary.11.588",
+  "main": "dist/cjs/index.cjs",
+  "dependencies": {
+    "@devtools-ui/text": "0.0.2--canary.11.588",
+    "@devtools-ui/collection": "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",
+    "@types/react": "^18.2.51",
+    "framer-motion": "^11.0.8",
+    "react": "^18.2.0",
+    "@player-ui/react": "^0.7.1",
+    "@player-ui/asset-transform-plugin": "^0.7.1",
+    "@player-ui/player": "0.7.1",
+    "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/ActionComponent.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Button } from "@chakra-ui/react";
+import type { TransformedAction } from "../types";
+import { ReactAsset } from "@player-ui/react";
+
+const useActionPros = (props: TransformedAction) => {
+  return {
+    ...(props.label ? { children: <ReactAsset {...props.label.asset} /> } : {}),
+    ...(props.icon
+      ? {
+          [props.metaData?.iconPosition === "left" ? "leftIcon" : "rightIcon"]:
+            <ReactAsset {...props.icon.asset} />,
+        }
+      : {}),
+    ...(props.run ? { onClick: props.run } : {}),
+    ...(props.metaData?.variant ? { variant: props.metaData.variant } : {}),
+    ...(props.metaData?.isLoading
+      ? { isLoading: props.metaData.isLoading }
+      : {}),
+  } as const;
+};
+
+export const ActionComponent = (props: TransformedAction) => {
+  const { children, ...buttonProps } = useActionPros(props);
+
+  return <Button {...buttonProps}>{children}</Button>;
+};

package/src/components/index.ts

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

package/src/dsl/Action.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import {
+  AssetPropsWithChildren,
+  Asset,
+  createSlot,
+  isTemplateStringInstance,
+} from "@player-tools/dsl";
+import type { Asset as AssetType } from "@player-ui/player";
+import type { ActionAsset } from "../types";
+import { Collection } from "@devtools-ui/collection";
+import { Text } from "@devtools-ui/text";
+
+export const Action = (props: AssetPropsWithChildren<ActionAsset>) => {
+  const { exp, children, ...rest } = props;
+
+  let expValue: ActionAsset["exp"];
+
+  if (isTemplateStringInstance(exp)) {
+    expValue = exp.toValue();
+  } else if (Array.isArray(exp)) {
+    expValue = exp.map((e) => (typeof e === "string" ? e : e.toValue()));
+  } else if (exp) {
+    expValue = exp;
+  }
+
+  return (
+    <Asset type="action" {...rest} {...(expValue && { exp: expValue })}>
+      {children}
+    </Asset>
+  );
+};
+
+const CollectionComp = (props: AssetPropsWithChildren<AssetType>) => {
+  return (
+    <Collection>
+      <Collection.Values>{props.children}</Collection.Values>
+    </Collection>
+  );
+};
+
+Action.Label = createSlot({
+  name: "label",
+  TextComp: Text,
+  CollectionComp,
+  isArray: false,
+  wrapInAsset: true,
+});
+
+Action.Icon = createSlot({
+  name: "icon",
+  TextComp: Text,
+  CollectionComp,
+  isArray: false,
+  wrapInAsset: true,
+});

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

@@ -0,0 +1,153 @@
+import React from "react";
+import { describe, expect, test } from "vitest";
+import { render, expression as e, Asset } from "@player-tools/dsl";
+import { Action } from "../Action";
+
+describe("DSL: Action", () => {
+  test("Renders action", async () => {
+    const rendered = await render(<Action></Action>);
+
+    expect(rendered.jsonValue).toStrictEqual({
+      id: "root",
+      type: "action",
+    });
+  });
+
+  test("action with label", async () => {
+    const rendered = await render(
+      <Action>
+        <Action.Label>Label</Action.Label>
+      </Action>
+    );
+
+    expect(rendered.jsonValue).toStrictEqual({
+      id: "root",
+      type: "action",
+      label: {
+        asset: {
+          id: "label",
+          type: "text",
+          value: "Label",
+        },
+      },
+    });
+  });
+
+  test("action with exp", async () => {
+    const rendered = await render(
+      <Action exp={e`noop`}>
+        <Action.Label>Label</Action.Label>
+      </Action>
+    );
+
+    expect(rendered.jsonValue).toStrictEqual({
+      id: "root",
+      type: "action",
+      exp: "noop",
+      label: {
+        asset: {
+          id: "label",
+          type: "text",
+          value: "Label",
+        },
+      },
+    });
+  });
+
+  test("action with icon", async () => {
+    const rendered = await render(
+      <Action exp={e`noop`}>
+        <Action.Label>Label</Action.Label>
+        <Action.Icon>
+          <Asset type="icon">
+            <property name="value">SomeIcon</property>
+          </Asset>
+        </Action.Icon>
+      </Action>
+    );
+
+    expect(rendered.jsonValue).toStrictEqual({
+      id: "root",
+      type: "action",
+      exp: "noop",
+      label: {
+        asset: {
+          id: "label",
+          type: "text",
+          value: "Label",
+        },
+      },
+      icon: {
+        asset: {
+          id: "icon",
+          type: "icon",
+          value: "SomeIcon",
+        },
+      },
+    });
+  });
+
+  test("action with metadata", async () => {
+    const rendered = await render(
+      <Action
+        metaData={{
+          isLoading: true,
+          variant: "solid",
+          iconPosition: "left",
+        }}
+      />
+    );
+
+    expect(rendered.jsonValue).toStrictEqual({
+      id: "root",
+      type: "action",
+      metaData: {
+        isLoading: true,
+        variant: "solid",
+        iconPosition: "left",
+      },
+    });
+  });
+
+  test("action with collection of text", async () => {
+    const rendered = await render(
+      <Action>
+        <Action.Label>
+          <Asset type="text">
+            <property name="value">Some</property>
+          </Asset>
+          <Asset type="text">
+            <property name="value">Text</property>
+          </Asset>
+        </Action.Label>
+      </Action>
+    );
+
+    expect(rendered.jsonValue).toStrictEqual({
+      id: "root",
+      type: "action",
+      label: {
+        asset: {
+          id: "label",
+          type: "collection",
+          values: [
+            {
+              asset: {
+                id: "label-values-0",
+                type: "text",
+                value: "Some",
+              },
+            },
+            {
+              asset: {
+                id: "label-values-1",
+                type: "text",
+                value: "Text",
+              },
+            },
+          ],
+        },
+      },
+    });
+  });
+});

package/src/dsl/index.ts

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

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,61 @@
+import type {
+  Asset,
+  BeforeTransformFunction,
+  TransformFunction,
+} from "@player-ui/player";
+import { compose, composeBefore } from "@player-ui/asset-transform-plugin";
+import { ActionAsset, TransformedAction } from "../types";
+
+/**
+ * Attaches the methods to execute an action
+ */
+const transform: TransformFunction<ActionAsset, TransformedAction> = (
+  action,
+  options
+) => {
+  return {
+    ...action,
+    run() {
+      if (action.exp) {
+        options.evaluate(action.exp);
+      }
+
+      if (action.value) {
+        const skipValidation = action.metaData?.skipValidation;
+        options.transition?.(action.value, { force: skipValidation });
+      }
+    },
+  };
+};
+
+/**
+ * Appends `exp` to the plugins.stringResolver.propertiesToSkip array or creates it if it doesn't exist
+ *
+ * @param asset - Asset to apply the transform to
+ */
+export const expPropTransform: BeforeTransformFunction<Asset> = (asset) => {
+  const skipArray = asset.plugins?.stringResolver?.propertiesToSkip;
+
+  if (skipArray && skipArray.indexOf("exp") > 1) {
+    return asset;
+  }
+
+  return {
+    ...asset,
+    plugins: {
+      ...asset.plugins,
+      stringResolver: {
+        ...asset?.plugins?.stringResolver,
+        propertiesToSkip: [
+          ...(asset.plugins?.stringResolver?.propertiesToSkip ?? []),
+          "exp",
+        ],
+      },
+    },
+  };
+};
+
+export const actionTransform = compose(
+  transform,
+  composeBefore(expPropTransform)
+);

package/src/types/index.ts

@@ -0,0 +1,39 @@
+import type { TextAsset } from "@devtools-ui/text";
+import type { Asset, AssetWrapper, Expression } from "@player-ui/types";
+
+export type Variant = "solid" | "outline" | "ghost" | "link";
+
+export interface ActionAsset extends Asset<"action"> {
+  /**text value for action */
+  value?: string;
+
+  /** An optional Icon asset. */
+  icon?: AssetWrapper;
+
+  /** A text asset for the action's label */
+  label?: AssetWrapper<TextAsset>;
+
+  /** An optional expression to execute before transitioning */
+  exp?: Expression;
+
+  /** Additional optional data to assist with the action interactions on the page */
+  metaData?: {
+    /** Force transition to the next view without checking for validation */
+    skipValidation?: boolean;
+
+    /** Button variant */
+    variant?: Variant;
+
+    /** Indicate a spinner for loading */
+    isLoading?: boolean;
+
+    /** icon position */
+    iconPosition?: "left" | "right";
+  };
+}
+
+/** A stateful instance of an action */
+export interface TransformedAction extends ActionAsset {
+  /** A method to execute the action */
+  run: () => void;
+}

package/types/components/ActionComponent.d.ts

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

package/types/components/index.d.ts

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

package/types/dsl/Action.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { AssetPropsWithChildren } from "@player-tools/dsl";
+import type { ActionAsset } from "../types";
+export declare const Action: {
+    (props: AssetPropsWithChildren<ActionAsset>): React.JSX.Element;
+    Label: (props: {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+    Icon: (props: {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+};
+//# sourceMappingURL=Action.d.ts.map

package/types/dsl/index.d.ts

@@ -0,0 +1,2 @@
+export { Action } from "./Action";
+//# 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,9 @@
+import type { Asset, BeforeTransformFunction } from "@player-ui/player";
+/**
+ * Appends `exp` to the plugins.stringResolver.propertiesToSkip array or creates it if it doesn't exist
+ *
+ * @param asset - Asset to apply the transform to
+ */
+export declare const expPropTransform: BeforeTransformFunction<Asset>;
+export declare const actionTransform: import("@player-ui/player").TransformFunctions;
+//# sourceMappingURL=index.d.ts.map

package/types/types/index.d.ts

@@ -0,0 +1,30 @@
+import type { TextAsset } from "@devtools-ui/text";
+import type { Asset, AssetWrapper, Expression } from "@player-ui/types";
+export type Variant = "solid" | "outline" | "ghost" | "link";
+export interface ActionAsset extends Asset<"action"> {
+    /**text value for action */
+    value?: string;
+    /** An optional Icon asset. */
+    icon?: AssetWrapper;
+    /** A text asset for the action's label */
+    label?: AssetWrapper<TextAsset>;
+    /** An optional expression to execute before transitioning */
+    exp?: Expression;
+    /** Additional optional data to assist with the action interactions on the page */
+    metaData?: {
+        /** Force transition to the next view without checking for validation */
+        skipValidation?: boolean;
+        /** Button variant */
+        variant?: Variant;
+        /** Indicate a spinner for loading */
+        isLoading?: boolean;
+        /** icon position */
+        iconPosition?: "left" | "right";
+    };
+}
+/** A stateful instance of an action */
+export interface TransformedAction extends ActionAsset {
+    /** A method to execute the action */
+    run: () => void;
+}
+//# sourceMappingURL=index.d.ts.map