@devtools-ui/radio-group 0.1.2-next.0

package/dist/cjs/index.cjs

@@ -0,0 +1,105 @@
+"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/radio-group/src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  RadioGroup: () => RadioGroup2,
+  RadioGroupComponent: () => RadioGroupComponent,
+  RadioItem: () => RadioItem,
+  radioGroupTransform: () => radioGroupTransform
+});
+module.exports = __toCommonJS(src_exports);
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/radio-group/src/component/index.tsx
+var import_react = __toESM(require("react"));
+var import_react2 = require("@chakra-ui/react");
+var import_react3 = require("@player-ui/react");
+var RadioGroupComponent = (props) => {
+  const { id, label, setRadio, values } = props;
+  return /* @__PURE__ */ import_react.default.createElement(import_react2.RadioGroup, null, label && /* @__PURE__ */ import_react.default.createElement(import_react2.FormLabel, { htmlFor: id }, /* @__PURE__ */ import_react.default.createElement(import_react3.ReactAsset, { ...label.asset })), /* @__PURE__ */ import_react.default.createElement(import_react2.Stack, null, values?.map((radioItem) => {
+    const onChange = (e) => {
+      setRadio(e.target.value);
+    };
+    const { value, label: label2 } = radioItem;
+    return /* @__PURE__ */ import_react.default.createElement(import_react2.Radio, { key: value, onChange, value }, /* @__PURE__ */ import_react.default.createElement(import_react3.ReactAsset, { ...label2.asset }));
+  })));
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/radio-group/src/dsl/index.tsx
+var import_react4 = __toESM(require("react"));
+var import_dsl = require("@player-tools/dsl");
+var import_text = require("@devtools-ui/text");
+var RadioGroup2 = (props) => {
+  const { children, binding, ...rest } = props;
+  return /* @__PURE__ */ import_react4.default.createElement(import_dsl.Asset, { type: "radio-group", ...rest }, /* @__PURE__ */ import_react4.default.createElement("property", { name: "binding" }, binding.toValue()), children);
+};
+var RadioItem = (props) => {
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ import_react4.default.createElement("obj", null, (0, import_dsl.toJsonProperties)(rest), children);
+};
+RadioItem.Label = (0, import_dsl.createSlot)({
+  name: "label",
+  TextComp: import_text.Text,
+  isArray: false,
+  wrapInAsset: true
+});
+var RadioGroupValues = (props) => {
+  return /* @__PURE__ */ import_react4.default.createElement("property", { name: "values" }, /* @__PURE__ */ import_react4.default.createElement("array", { ...props }));
+};
+RadioGroup2.Label = (0, import_dsl.createSlot)({
+  name: "label",
+  TextComp: import_text.Text,
+  isArray: false,
+  wrapInAsset: true
+});
+RadioGroup2.Values = RadioGroupValues;
+RadioGroupValues.Value = RadioItem;
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/radio-group/src/transform/index.ts
+var radioGroupTransform = (asset, options) => {
+  return {
+    ...asset,
+    setRadio(val) {
+      if (asset.binding === void 0) {
+        return;
+      }
+      return options.data.model.set([[asset.binding, val]]);
+    },
+    value: asset.binding === void 0 ? "" : options.data.model.get(asset.binding)
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RadioGroup,
+  RadioGroupComponent,
+  RadioItem,
+  radioGroupTransform
+});
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/radio-group/src/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/radio-group/src/component/index.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/radio-group/src/dsl/index.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/radio-group/src/transform/index.ts"],"sourcesContent":["export * from \"./types\";\nexport * from \"./component\";\nexport * from \"./dsl\";\nexport * from \"./transform\";\n","import React from \"react\";\nimport type { TransformedRadioGroup } from \"../types\";\nimport { RadioGroup, Stack, FormLabel, Radio } from \"@chakra-ui/react\";\nimport { ReactAsset } from \"@player-ui/react\";\n\nexport const RadioGroupComponent = (props: TransformedRadioGroup) => {\n  const { id, label, setRadio, values } = props;\n\n  return (\n    <RadioGroup>\n      {label && (\n        <FormLabel htmlFor={id}>\n          <ReactAsset {...label.asset} />\n        </FormLabel>\n      )}\n      <Stack>\n        {values?.map((radioItem) => {\n          const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n            setRadio(e.target.value);\n          };\n          const { value, label } = radioItem;\n\n          return (\n            <Radio key={value} onChange={onChange} value={value}>\n              <ReactAsset {...label.asset} />\n            </Radio>\n          );\n        })}\n      </Stack>\n    </RadioGroup>\n  );\n};\n","import React from \"react\";\nimport {\n  AssetPropsWithChildren,\n  Asset,\n  createSlot,\n  BindingTemplateInstance,\n  WithTemplateTypes,\n  WithChildren,\n  toJsonProperties,\n} from \"@player-tools/dsl\";\nimport type { Asset as AssetType } from \"@player-ui/player\";\nimport { Text } from \"@devtools-ui/text\";\nimport type { RadioGroupAsset, RadioItemAsset } from \"../types\";\n\nexport const RadioGroup = (\n  props: Omit<AssetPropsWithChildren<RadioGroupAsset>, \"binding\"> & {\n    /** The binding as a tagged template instance */\n    binding: BindingTemplateInstance;\n  }\n) => {\n  const { children, binding, ...rest } = props;\n\n  return (\n    <Asset type=\"radio-group\" {...rest}>\n      <property name=\"binding\">{binding.toValue()}</property>\n      {children}\n    </Asset>\n  );\n};\n\nexport const RadioItem = (\n  props: Partial<WithChildren<WithTemplateTypes<RadioItemAsset>>>\n) => {\n  const { children, ...rest } = props;\n  return (\n    <obj>\n      {toJsonProperties(rest)}\n      {children}\n    </obj>\n  );\n};\n\nRadioItem.Label = createSlot({\n  name: \"label\",\n  TextComp: Text,\n  isArray: false,\n  wrapInAsset: true,\n});\n\nconst RadioGroupValues = (props: AssetPropsWithChildren<AssetType>) => {\n  return (\n    <property name=\"values\">\n      <array {...props} />\n    </property>\n  );\n};\n\nRadioGroup.Label = createSlot({\n  name: \"label\",\n  TextComp: Text,\n  isArray: false,\n  wrapInAsset: true,\n});\n\nRadioGroup.Values = RadioGroupValues;\nRadioGroupValues.Value = RadioItem;\n","import type { TransformFunction } from \"@player-ui/player\";\nimport { RadioGroupAsset, TransformedRadioGroup } from \"../types\";\n\nexport const radioGroupTransform: TransformFunction<\n  RadioGroupAsset,\n  TransformedRadioGroup\n> = (asset, options) => {\n  return {\n    ...asset,\n    setRadio(val) {\n      if (asset.binding === undefined) {\n        return;\n      }\n\n      return options.data.model.set([[asset.binding, val]]);\n    },\n    value:\n      asset.binding === undefined ? \"\" : options.data.model.get(asset.binding),\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,oBAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAElB,IAAAC,gBAAoD;AACpD,IAAAA,gBAA2B;AAEpB,IAAM,sBAAsB,CAAC,UAAiC;AACnE,QAAM,EAAE,IAAI,OAAO,UAAU,OAAO,IAAI;AAExC,SACE,6BAAAC,QAAA,cAAC,gCACE,SACC,6BAAAA,QAAA,cAAC,2BAAU,SAAS,MAClB,6BAAAA,QAAA,cAAC,4BAAY,GAAG,MAAM,OAAO,CAC/B,GAEF,6BAAAA,QAAA,cAAC,2BACE,QAAQ,IAAI,CAAC,cAAc;AAC1B,UAAM,WAAuD,CAAC,MAAM;AAClE,eAAS,EAAE,OAAO,KAAK;AAAA,IACzB;AACA,UAAM,EAAE,OAAO,OAAAC,OAAM,IAAI;AAEzB,WACE,6BAAAD,QAAA,cAAC,uBAAM,KAAK,OAAO,UAAoB,SACrC,6BAAAA,QAAA,cAAC,4BAAY,GAAGC,OAAM,OAAO,CAC/B;AAAA,EAEJ,CAAC,CACH,CACF;AAEJ;;;AC/BA,IAAAC,gBAAkB;AAClB,iBAQO;AAEP,kBAAqB;AAGd,IAAMC,cAAa,CACxB,UAIG;AACH,QAAM,EAAE,UAAU,SAAS,GAAG,KAAK,IAAI;AAEvC,SACE,8BAAAC,QAAA,cAAC,oBAAM,MAAK,eAAe,GAAG,QAC5B,8BAAAA,QAAA,cAAC,cAAS,MAAK,aAAW,QAAQ,QAAQ,CAAE,GAC3C,QACH;AAEJ;AAEO,IAAM,YAAY,CACvB,UACG;AACH,QAAM,EAAE,UAAU,GAAG,KAAK,IAAI;AAC9B,SACE,8BAAAA,QAAA,cAAC,iBACE,6BAAiB,IAAI,GACrB,QACH;AAEJ;AAEA,UAAU,YAAQ,uBAAW;AAAA,EAC3B,MAAM;AAAA,EACN,UAAU;AAAA,EACV,SAAS;AAAA,EACT,aAAa;AACf,CAAC;AAED,IAAM,mBAAmB,CAAC,UAA6C;AACrE,SACE,8BAAAA,QAAA,cAAC,cAAS,MAAK,YACb,8BAAAA,QAAA,cAAC,WAAO,GAAG,OAAO,CACpB;AAEJ;AAEAD,YAAW,YAAQ,uBAAW;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU;AAAA,EACV,SAAS;AAAA,EACT,aAAa;AACf,CAAC;AAEDA,YAAW,SAAS;AACpB,iBAAiB,QAAQ;;;AC9DlB,IAAM,sBAGT,CAAC,OAAO,YAAY;AACtB,SAAO;AAAA,IACL,GAAG;AAAA,IACH,SAAS,KAAK;AACZ,UAAI,MAAM,YAAY,QAAW;AAC/B;AAAA,MACF;AAEA,aAAO,QAAQ,KAAK,MAAM,IAAI,CAAC,CAAC,MAAM,SAAS,GAAG,CAAC,CAAC;AAAA,IACtD;AAAA,IACA,OACE,MAAM,YAAY,SAAY,KAAK,QAAQ,KAAK,MAAM,IAAI,MAAM,OAAO;AAAA,EAC3E;AACF;","names":["RadioGroup","import_react","React","label","import_react","RadioGroup","React"]}

package/dist/index.legacy-esm.js

@@ -0,0 +1,69 @@
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/radio-group/src/component/index.tsx
+import React from "react";
+import { RadioGroup, Stack, FormLabel, Radio } from "@chakra-ui/react";
+import { ReactAsset } from "@player-ui/react";
+var RadioGroupComponent = (props) => {
+  const { id, label, setRadio, values } = props;
+  return /* @__PURE__ */ React.createElement(RadioGroup, null, label && /* @__PURE__ */ React.createElement(FormLabel, { htmlFor: id }, /* @__PURE__ */ React.createElement(ReactAsset, { ...label.asset })), /* @__PURE__ */ React.createElement(Stack, null, values?.map((radioItem) => {
+    const onChange = (e) => {
+      setRadio(e.target.value);
+    };
+    const { value, label: label2 } = radioItem;
+    return /* @__PURE__ */ React.createElement(Radio, { key: value, onChange, value }, /* @__PURE__ */ React.createElement(ReactAsset, { ...label2.asset }));
+  })));
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/radio-group/src/dsl/index.tsx
+import React2 from "react";
+import {
+  Asset,
+  createSlot,
+  toJsonProperties
+} from "@player-tools/dsl";
+import { Text } from "@devtools-ui/text";
+var RadioGroup2 = (props) => {
+  const { children, binding, ...rest } = props;
+  return /* @__PURE__ */ React2.createElement(Asset, { type: "radio-group", ...rest }, /* @__PURE__ */ React2.createElement("property", { name: "binding" }, binding.toValue()), children);
+};
+var RadioItem = (props) => {
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ React2.createElement("obj", null, toJsonProperties(rest), children);
+};
+RadioItem.Label = createSlot({
+  name: "label",
+  TextComp: Text,
+  isArray: false,
+  wrapInAsset: true
+});
+var RadioGroupValues = (props) => {
+  return /* @__PURE__ */ React2.createElement("property", { name: "values" }, /* @__PURE__ */ React2.createElement("array", { ...props }));
+};
+RadioGroup2.Label = createSlot({
+  name: "label",
+  TextComp: Text,
+  isArray: false,
+  wrapInAsset: true
+});
+RadioGroup2.Values = RadioGroupValues;
+RadioGroupValues.Value = RadioItem;
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/radio-group/src/transform/index.ts
+var radioGroupTransform = (asset, options) => {
+  return {
+    ...asset,
+    setRadio(val) {
+      if (asset.binding === void 0) {
+        return;
+      }
+      return options.data.model.set([[asset.binding, val]]);
+    },
+    value: asset.binding === void 0 ? "" : options.data.model.get(asset.binding)
+  };
+};
+export {
+  RadioGroup2 as RadioGroup,
+  RadioGroupComponent,
+  RadioItem,
+  radioGroupTransform
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs

@@ -0,0 +1,69 @@
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/radio-group/src/component/index.tsx
+import React from "react";
+import { RadioGroup, Stack, FormLabel, Radio } from "@chakra-ui/react";
+import { ReactAsset } from "@player-ui/react";
+var RadioGroupComponent = (props) => {
+  const { id, label, setRadio, values } = props;
+  return /* @__PURE__ */ React.createElement(RadioGroup, null, label && /* @__PURE__ */ React.createElement(FormLabel, { htmlFor: id }, /* @__PURE__ */ React.createElement(ReactAsset, { ...label.asset })), /* @__PURE__ */ React.createElement(Stack, null, values?.map((radioItem) => {
+    const onChange = (e) => {
+      setRadio(e.target.value);
+    };
+    const { value, label: label2 } = radioItem;
+    return /* @__PURE__ */ React.createElement(Radio, { key: value, onChange, value }, /* @__PURE__ */ React.createElement(ReactAsset, { ...label2.asset }));
+  })));
+};
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/radio-group/src/dsl/index.tsx
+import React2 from "react";
+import {
+  Asset,
+  createSlot,
+  toJsonProperties
+} from "@player-tools/dsl";
+import { Text } from "@devtools-ui/text";
+var RadioGroup2 = (props) => {
+  const { children, binding, ...rest } = props;
+  return /* @__PURE__ */ React2.createElement(Asset, { type: "radio-group", ...rest }, /* @__PURE__ */ React2.createElement("property", { name: "binding" }, binding.toValue()), children);
+};
+var RadioItem = (props) => {
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ React2.createElement("obj", null, toJsonProperties(rest), children);
+};
+RadioItem.Label = createSlot({
+  name: "label",
+  TextComp: Text,
+  isArray: false,
+  wrapInAsset: true
+});
+var RadioGroupValues = (props) => {
+  return /* @__PURE__ */ React2.createElement("property", { name: "values" }, /* @__PURE__ */ React2.createElement("array", { ...props }));
+};
+RadioGroup2.Label = createSlot({
+  name: "label",
+  TextComp: Text,
+  isArray: false,
+  wrapInAsset: true
+});
+RadioGroup2.Values = RadioGroupValues;
+RadioGroupValues.Value = RadioItem;
+
+// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/radio-group/src/transform/index.ts
+var radioGroupTransform = (asset, options) => {
+  return {
+    ...asset,
+    setRadio(val) {
+      if (asset.binding === void 0) {
+        return;
+      }
+      return options.data.model.set([[asset.binding, val]]);
+    },
+    value: asset.binding === void 0 ? "" : options.data.model.get(asset.binding)
+  };
+};
+export {
+  RadioGroup2 as RadioGroup,
+  RadioGroupComponent,
+  RadioItem,
+  radioGroupTransform
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/radio-group/src/component/index.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/radio-group/src/dsl/index.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/radio-group/src/transform/index.ts"],"sourcesContent":["import React from \"react\";\nimport type { TransformedRadioGroup } from \"../types\";\nimport { RadioGroup, Stack, FormLabel, Radio } from \"@chakra-ui/react\";\nimport { ReactAsset } from \"@player-ui/react\";\n\nexport const RadioGroupComponent = (props: TransformedRadioGroup) => {\n  const { id, label, setRadio, values } = props;\n\n  return (\n    <RadioGroup>\n      {label && (\n        <FormLabel htmlFor={id}>\n          <ReactAsset {...label.asset} />\n        </FormLabel>\n      )}\n      <Stack>\n        {values?.map((radioItem) => {\n          const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n            setRadio(e.target.value);\n          };\n          const { value, label } = radioItem;\n\n          return (\n            <Radio key={value} onChange={onChange} value={value}>\n              <ReactAsset {...label.asset} />\n            </Radio>\n          );\n        })}\n      </Stack>\n    </RadioGroup>\n  );\n};\n","import React from \"react\";\nimport {\n  AssetPropsWithChildren,\n  Asset,\n  createSlot,\n  BindingTemplateInstance,\n  WithTemplateTypes,\n  WithChildren,\n  toJsonProperties,\n} from \"@player-tools/dsl\";\nimport type { Asset as AssetType } from \"@player-ui/player\";\nimport { Text } from \"@devtools-ui/text\";\nimport type { RadioGroupAsset, RadioItemAsset } from \"../types\";\n\nexport const RadioGroup = (\n  props: Omit<AssetPropsWithChildren<RadioGroupAsset>, \"binding\"> & {\n    /** The binding as a tagged template instance */\n    binding: BindingTemplateInstance;\n  }\n) => {\n  const { children, binding, ...rest } = props;\n\n  return (\n    <Asset type=\"radio-group\" {...rest}>\n      <property name=\"binding\">{binding.toValue()}</property>\n      {children}\n    </Asset>\n  );\n};\n\nexport const RadioItem = (\n  props: Partial<WithChildren<WithTemplateTypes<RadioItemAsset>>>\n) => {\n  const { children, ...rest } = props;\n  return (\n    <obj>\n      {toJsonProperties(rest)}\n      {children}\n    </obj>\n  );\n};\n\nRadioItem.Label = createSlot({\n  name: \"label\",\n  TextComp: Text,\n  isArray: false,\n  wrapInAsset: true,\n});\n\nconst RadioGroupValues = (props: AssetPropsWithChildren<AssetType>) => {\n  return (\n    <property name=\"values\">\n      <array {...props} />\n    </property>\n  );\n};\n\nRadioGroup.Label = createSlot({\n  name: \"label\",\n  TextComp: Text,\n  isArray: false,\n  wrapInAsset: true,\n});\n\nRadioGroup.Values = RadioGroupValues;\nRadioGroupValues.Value = RadioItem;\n","import type { TransformFunction } from \"@player-ui/player\";\nimport { RadioGroupAsset, TransformedRadioGroup } from \"../types\";\n\nexport const radioGroupTransform: TransformFunction<\n  RadioGroupAsset,\n  TransformedRadioGroup\n> = (asset, options) => {\n  return {\n    ...asset,\n    setRadio(val) {\n      if (asset.binding === undefined) {\n        return;\n      }\n\n      return options.data.model.set([[asset.binding, val]]);\n    },\n    value:\n      asset.binding === undefined ? \"\" : options.data.model.get(asset.binding),\n  };\n};\n"],"mappings":";AAAA,OAAO,WAAW;AAElB,SAAS,YAAY,OAAO,WAAW,aAAa;AACpD,SAAS,kBAAkB;AAEpB,IAAM,sBAAsB,CAAC,UAAiC;AACnE,QAAM,EAAE,IAAI,OAAO,UAAU,OAAO,IAAI;AAExC,SACE,oCAAC,kBACE,SACC,oCAAC,aAAU,SAAS,MAClB,oCAAC,cAAY,GAAG,MAAM,OAAO,CAC/B,GAEF,oCAAC,aACE,QAAQ,IAAI,CAAC,cAAc;AAC1B,UAAM,WAAuD,CAAC,MAAM;AAClE,eAAS,EAAE,OAAO,KAAK;AAAA,IACzB;AACA,UAAM,EAAE,OAAO,OAAAA,OAAM,IAAI;AAEzB,WACE,oCAAC,SAAM,KAAK,OAAO,UAAoB,SACrC,oCAAC,cAAY,GAAGA,OAAM,OAAO,CAC/B;AAAA,EAEJ,CAAC,CACH,CACF;AAEJ;;;AC/BA,OAAOC,YAAW;AAClB;AAAA,EAEE;AAAA,EACA;AAAA,EAIA;AAAA,OACK;AAEP,SAAS,YAAY;AAGd,IAAMC,cAAa,CACxB,UAIG;AACH,QAAM,EAAE,UAAU,SAAS,GAAG,KAAK,IAAI;AAEvC,SACE,gBAAAD,OAAA,cAAC,SAAM,MAAK,eAAe,GAAG,QAC5B,gBAAAA,OAAA,cAAC,cAAS,MAAK,aAAW,QAAQ,QAAQ,CAAE,GAC3C,QACH;AAEJ;AAEO,IAAM,YAAY,CACvB,UACG;AACH,QAAM,EAAE,UAAU,GAAG,KAAK,IAAI;AAC9B,SACE,gBAAAA,OAAA,cAAC,aACE,iBAAiB,IAAI,GACrB,QACH;AAEJ;AAEA,UAAU,QAAQ,WAAW;AAAA,EAC3B,MAAM;AAAA,EACN,UAAU;AAAA,EACV,SAAS;AAAA,EACT,aAAa;AACf,CAAC;AAED,IAAM,mBAAmB,CAAC,UAA6C;AACrE,SACE,gBAAAA,OAAA,cAAC,cAAS,MAAK,YACb,gBAAAA,OAAA,cAAC,WAAO,GAAG,OAAO,CACpB;AAEJ;AAEAC,YAAW,QAAQ,WAAW;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU;AAAA,EACV,SAAS;AAAA,EACT,aAAa;AACf,CAAC;AAEDA,YAAW,SAAS;AACpB,iBAAiB,QAAQ;;;AC9DlB,IAAM,sBAGT,CAAC,OAAO,YAAY;AACtB,SAAO;AAAA,IACL,GAAG;AAAA,IACH,SAAS,KAAK;AACZ,UAAI,MAAM,YAAY,QAAW;AAC/B;AAAA,MACF;AAEA,aAAO,QAAQ,KAAK,MAAM,IAAI,CAAC,CAAC,MAAM,SAAS,GAAG,CAAC,CAAC;AAAA,IACtD;AAAA,IACA,OACE,MAAM,YAAY,SAAY,KAAK,QAAQ,KAAK,MAAM,IAAI,MAAM,OAAO;AAAA,EAC3E;AACF;","names":["label","React","RadioGroup"]}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@devtools-ui/radio-group",
+  "version": "0.1.2-next.0",
+  "main": "dist/cjs/index.cjs",
+  "dependencies": {
+    "@devtools-ui/text": "0.1.2-next.0",
+    "@devtools-ui/collection": "0.1.2-next.0",
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
+    "@player-tools/dsl": "0.6.0-next.2",
+    "@player-ui/asset-transform-plugin": "0.7.3",
+    "@player-ui/player": "0.7.3",
+    "@player-ui/react": "0.7.3",
+    "@player-ui/types": "0.7.3",
+    "@types/react": "^18.2.51",
+    "dlv": "^1.1.3",
+    "framer-motion": "^11.0.8",
+    "react": "^18.2.0",
+    "tslib": "^2.6.2"
+  },
+  "module": "dist/index.legacy-esm.js",
+  "types": "types/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    "./package.json": "./package.json",
+    "./dist/index.css": "./dist/index.css",
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/cjs/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "types"
+  ],
+  "peerDependencies": {}
+}

package/src/component/index.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import type { TransformedRadioGroup } from "../types";
+import { RadioGroup, Stack, FormLabel, Radio } from "@chakra-ui/react";
+import { ReactAsset } from "@player-ui/react";
+
+export const RadioGroupComponent = (props: TransformedRadioGroup) => {
+  const { id, label, setRadio, values } = props;
+
+  return (
+    <RadioGroup>
+      {label && (
+        <FormLabel htmlFor={id}>
+          <ReactAsset {...label.asset} />
+        </FormLabel>
+      )}
+      <Stack>
+        {values?.map((radioItem) => {
+          const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+            setRadio(e.target.value);
+          };
+          const { value, label } = radioItem;
+
+          return (
+            <Radio key={value} onChange={onChange} value={value}>
+              <ReactAsset {...label.asset} />
+            </Radio>
+          );
+        })}
+      </Stack>
+    </RadioGroup>
+  );
+};

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

@@ -0,0 +1,61 @@
+import React from "react";
+import { describe, expect, test } from "vitest";
+import { render, binding as b } from "@player-tools/dsl";
+import { RadioGroup } from "../";
+
+describe("DSL: RadioGroup", () => {
+  test("Renders radioGroup with a couple options", async () => {
+    const rendered = await render(
+      <RadioGroup binding={b`my_binding`}>
+        <RadioGroup.Label>RadioGroup Label</RadioGroup.Label>
+        <RadioGroup.Values>
+          <RadioGroup.Values.Value value="opt1">
+            <RadioGroup.Values.Value.Label>
+              Option 1
+            </RadioGroup.Values.Value.Label>
+          </RadioGroup.Values.Value>
+          <RadioGroup.Values.Value value="opt2">
+            <RadioGroup.Values.Value.Label>
+              Option 2
+            </RadioGroup.Values.Value.Label>
+          </RadioGroup.Values.Value>
+        </RadioGroup.Values>
+      </RadioGroup>
+    );
+
+    expect(rendered.jsonValue).toStrictEqual({
+      id: "root",
+      type: "radio-group",
+      binding: "my_binding",
+      label: {
+        asset: {
+          id: "label",
+          type: "text",
+          value: "RadioGroup Label",
+        },
+      },
+      values: [
+        {
+          label: {
+            asset: {
+              id: "label",
+              type: "text",
+              value: "Option 1",
+            },
+          },
+          value: "opt1",
+        },
+        {
+          label: {
+            asset: {
+              id: "label",
+              type: "text",
+              value: "Option 2",
+            },
+          },
+          value: "opt2",
+        },
+      ],
+    });
+  });
+});

package/src/dsl/index.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import {
+  AssetPropsWithChildren,
+  Asset,
+  createSlot,
+  BindingTemplateInstance,
+  WithTemplateTypes,
+  WithChildren,
+  toJsonProperties,
+} from "@player-tools/dsl";
+import type { Asset as AssetType } from "@player-ui/player";
+import { Text } from "@devtools-ui/text";
+import type { RadioGroupAsset, RadioItemAsset } from "../types";
+
+export const RadioGroup = (
+  props: Omit<AssetPropsWithChildren<RadioGroupAsset>, "binding"> & {
+    /** The binding as a tagged template instance */
+    binding: BindingTemplateInstance;
+  }
+) => {
+  const { children, binding, ...rest } = props;
+
+  return (
+    <Asset type="radio-group" {...rest}>
+      <property name="binding">{binding.toValue()}</property>
+      {children}
+    </Asset>
+  );
+};
+
+export const RadioItem = (
+  props: Partial<WithChildren<WithTemplateTypes<RadioItemAsset>>>
+) => {
+  const { children, ...rest } = props;
+  return (
+    <obj>
+      {toJsonProperties(rest)}
+      {children}
+    </obj>
+  );
+};
+
+RadioItem.Label = createSlot({
+  name: "label",
+  TextComp: Text,
+  isArray: false,
+  wrapInAsset: true,
+});
+
+const RadioGroupValues = (props: AssetPropsWithChildren<AssetType>) => {
+  return (
+    <property name="values">
+      <array {...props} />
+    </property>
+  );
+};
+
+RadioGroup.Label = createSlot({
+  name: "label",
+  TextComp: Text,
+  isArray: false,
+  wrapInAsset: true,
+});
+
+RadioGroup.Values = RadioGroupValues;
+RadioGroupValues.Value = RadioItem;

package/src/index.ts

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

package/src/transform/index.ts

@@ -0,0 +1,20 @@
+import type { TransformFunction } from "@player-ui/player";
+import { RadioGroupAsset, TransformedRadioGroup } from "../types";
+
+export const radioGroupTransform: TransformFunction<
+  RadioGroupAsset,
+  TransformedRadioGroup
+> = (asset, options) => {
+  return {
+    ...asset,
+    setRadio(val) {
+      if (asset.binding === undefined) {
+        return;
+      }
+
+      return options.data.model.set([[asset.binding, val]]);
+    },
+    value:
+      asset.binding === undefined ? "" : options.data.model.get(asset.binding),
+  };
+};

package/src/types/index.ts

@@ -0,0 +1,26 @@
+import type { Asset, AssetWrapper } from "@player-ui/types";
+
+export interface RadioItemAsset<AnyAsset extends Asset = Asset> {
+  /** Value */
+  value: string;
+  /** Label */
+  label: AssetWrapper<AnyAsset>;
+}
+
+export interface RadioGroupAsset<AnyAsset extends Asset = Asset>
+  extends Asset<"radio-group"> {
+  /** list of assets in the collection */
+  values?: Array<RadioItemAsset<AnyAsset>>;
+  /** Label */
+  label?: AssetWrapper<AnyAsset>;
+  /** Dot sepparated string Representation of a path within the data-model */
+  binding?: string;
+}
+
+/** A stateful instance of the asset */
+export interface TransformedRadioGroup extends RadioGroupAsset {
+  /** A function to commit the new value to the data-model */
+  setRadio: (newValue: string) => void;
+  /** The current value of the radio group from the data-model */
+  value: string;
+}

package/types/component/index.d.ts

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

package/types/dsl/index.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { AssetPropsWithChildren, BindingTemplateInstance, WithTemplateTypes, WithChildren } from "@player-tools/dsl";
+import type { Asset as AssetType } from "@player-ui/player";
+import type { RadioGroupAsset, RadioItemAsset } from "../types";
+export declare const RadioGroup: {
+    (props: Omit<AssetPropsWithChildren<RadioGroupAsset>, "binding"> & {
+        /** The binding as a tagged template instance */
+        binding: BindingTemplateInstance;
+    }): React.JSX.Element;
+    Label: (props: {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+    Values: {
+        (props: AssetPropsWithChildren<AssetType>): React.JSX.Element;
+        Value: {
+            (props: Partial<WithChildren<WithTemplateTypes<RadioItemAsset>>>): React.JSX.Element;
+            Label: (props: {
+                children?: React.ReactNode;
+            }) => React.JSX.Element;
+        };
+    };
+};
+export declare const RadioItem: {
+    (props: Partial<WithChildren<WithTemplateTypes<RadioItemAsset>>>): React.JSX.Element;
+    Label: (props: {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+};
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./types";
+export * from "./component";
+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 { RadioGroupAsset, TransformedRadioGroup } from "../types";
+export declare const radioGroupTransform: TransformFunction<RadioGroupAsset, TransformedRadioGroup>;
+//# sourceMappingURL=index.d.ts.map

package/types/types/index.d.ts

@@ -0,0 +1,23 @@
+import type { Asset, AssetWrapper } from "@player-ui/types";
+export interface RadioItemAsset<AnyAsset extends Asset = Asset> {
+    /** Value */
+    value: string;
+    /** Label */
+    label: AssetWrapper<AnyAsset>;
+}
+export interface RadioGroupAsset<AnyAsset extends Asset = Asset> extends Asset<"radio-group"> {
+    /** list of assets in the collection */
+    values?: Array<RadioItemAsset<AnyAsset>>;
+    /** Label */
+    label?: AssetWrapper<AnyAsset>;
+    /** Dot sepparated string Representation of a path within the data-model */
+    binding?: string;
+}
+/** A stateful instance of the asset */
+export interface TransformedRadioGroup extends RadioGroupAsset {
+    /** A function to commit the new value to the data-model */
+    setRadio: (newValue: string) => void;
+    /** The current value of the radio group from the data-model */
+    value: string;
+}
+//# sourceMappingURL=index.d.ts.map