@metamask/snaps-sdk 6.2.0 → 6.3.0

package/CHANGELOG.md

@@ -6,10 +6,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [6.3.0]
+### Added
+- Add `Selector` component ([#2645](https://github.com/MetaMask/snaps/pull/2645))
+- Add `Icon` component ([#2638](https://github.com/MetaMask/snaps/pull/2638))
+- Add `color` prop to `Text` component ([#2660](https://github.com/MetaMask/snaps/pull/2660))
+
+### Changed
+- `Button` children are now allowed to be `Image` and `Icon` ([#2641](https://github.com/MetaMask/snaps/pull/2641))
+
+## [6.2.1]
+### Fixed
+- Add structs to `typedUnion` schema ([#2623](https://github.com/MetaMask/snaps/pull/2623))
+
 ## [6.2.0]
 ### Added
 - Add `snap_getPreferences` ([#2607](https://github.com/MetaMask/snaps/pull/2607))
-- Add `RadioButton` component ([#2592](https://github.com/MetaMask/snaps/pull/2592))
+- Add `RadioGroup` component ([#2592](https://github.com/MetaMask/snaps/pull/2592))
 
 ## [6.1.1]
 ### Changed
@@ -211,7 +224,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Initial release of this package.
 
-[Unreleased]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@6.2.0...HEAD
+[Unreleased]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@6.3.0...HEAD
+[6.3.0]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@6.2.1...@metamask/snaps-sdk@6.3.0
+[6.2.1]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@6.2.0...@metamask/snaps-sdk@6.2.1
 [6.2.0]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@6.1.1...@metamask/snaps-sdk@6.2.0
 [6.1.1]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@6.1.0...@metamask/snaps-sdk@6.1.1
 [6.1.0]: https://github.com/MetaMask/snaps/compare/@metamask/snaps-sdk@6.0.0...@metamask/snaps-sdk@6.1.0

package/dist/index.js

@@ -311,7 +311,7 @@ function enumValue(constant) {
 function typedUnion(structs) {
   return new import_superstruct.Struct({
     type: "union",
-    schema: null,
+    schema: structs,
     *entries(value, context) {
       if (!(0, import_utils2.isPlainObject)(value) || !(0, import_utils2.hasProperty)(value, "type")) {
         return;
@@ -846,6 +846,187 @@ var NotificationType = /* @__PURE__ */ ((NotificationType2) => {
 var import_superstruct19 = require("@metamask/superstruct");
 var import_utils8 = require("@metamask/utils");
 
+// src/jsx/component.ts
+function removeUndefinedProps(props) {
+  return Object.fromEntries(
+    Object.entries(props).filter(([, value]) => value !== void 0)
+  );
+}
+function createSnapComponent(type) {
+  return (props) => {
+    const { key = null, ...rest } = props;
+    return {
+      type,
+      props: removeUndefinedProps(rest),
+      key
+    };
+  };
+}
+
+// src/jsx/components/Icon.ts
+var IconName = /* @__PURE__ */ ((IconName2) => {
+  IconName2["AddSquare"] = "add-square";
+  IconName2["Add"] = "add";
+  IconName2["Arrow2Down"] = "arrow-2-down";
+  IconName2["Arrow2Left"] = "arrow-2-left";
+  IconName2["Arrow2Right"] = "arrow-2-right";
+  IconName2["Arrow2Up"] = "arrow-2-up";
+  IconName2["Arrow2UpRight"] = "arrow-2-up-right";
+  IconName2["ArrowDoubleLeft"] = "arrow-double-left";
+  IconName2["ArrowDoubleRight"] = "arrow-double-right";
+  IconName2["ArrowDown"] = "arrow-down";
+  IconName2["ArrowLeft"] = "arrow-left";
+  IconName2["ArrowRight"] = "arrow-right";
+  IconName2["ArrowUp"] = "arrow-up";
+  IconName2["BankToken"] = "bank-token";
+  IconName2["Bank"] = "bank";
+  IconName2["Book"] = "book";
+  IconName2["Bookmark"] = "bookmark";
+  IconName2["Bridge"] = "bridge";
+  IconName2["Calculator"] = "calculator";
+  IconName2["CardPos"] = "card-pos";
+  IconName2["CardToken"] = "card-token";
+  IconName2["Card"] = "card";
+  IconName2["Category"] = "category";
+  IconName2["Chart"] = "chart";
+  IconName2["CheckBold"] = "check-bold";
+  IconName2["Check"] = "check";
+  IconName2["Clock"] = "clock";
+  IconName2["Close"] = "close";
+  IconName2["CodeCircle"] = "code-circle";
+  IconName2["Coin"] = "coin";
+  IconName2["Confirmation"] = "confirmation";
+  IconName2["Connect"] = "connect";
+  IconName2["CopySuccess"] = "copy-success";
+  IconName2["Copy"] = "copy";
+  IconName2["Customize"] = "customize";
+  IconName2["Danger"] = "danger";
+  IconName2["Dark"] = "dark";
+  IconName2["Data"] = "data";
+  IconName2["Diagram"] = "diagram";
+  IconName2["DocumentCode"] = "document-code";
+  IconName2["DragDrop"] = "drag-drop";
+  IconName2["DraggingAnimation"] = "dragging-animation";
+  IconName2["PinningAnimation"] = "pinning-animation";
+  IconName2["Edit"] = "edit";
+  IconName2["Eraser"] = "eraser";
+  IconName2["Ethereum"] = "ethereum";
+  IconName2["Expand"] = "expand";
+  IconName2["Explore"] = "explore";
+  IconName2["Export"] = "export";
+  IconName2["EyeSlash"] = "eye-slash";
+  IconName2["Eye"] = "eye";
+  IconName2["Filter"] = "filter";
+  IconName2["Flag"] = "flag";
+  IconName2["FlashSlash"] = "flash-slash";
+  IconName2["Flash"] = "flash";
+  IconName2["FullCircle"] = "full-circle";
+  IconName2["Gas"] = "gas";
+  IconName2["GlobalSearch"] = "global-search";
+  IconName2["Global"] = "global";
+  IconName2["Graph"] = "graph";
+  IconName2["Hardware"] = "hardware";
+  IconName2["Heart"] = "heart";
+  IconName2["Hierarchy"] = "hierarchy";
+  IconName2["Home"] = "home";
+  IconName2["Import"] = "import";
+  IconName2["Info"] = "info";
+  IconName2["Key"] = "key";
+  IconName2["Light"] = "light";
+  IconName2["Link"] = "link";
+  IconName2["Loading"] = "loading";
+  IconName2["LockCircle"] = "lock-circle";
+  IconName2["LockSlash"] = "lock-slash";
+  IconName2["Lock"] = "lock";
+  IconName2["Login"] = "login";
+  IconName2["Logout"] = "logout";
+  IconName2["Menu"] = "menu";
+  IconName2["MessageQuestion"] = "message-question";
+  IconName2["Messages"] = "messages";
+  IconName2["MinusBold"] = "minus-bold";
+  IconName2["MinusSquare"] = "minus-square";
+  IconName2["Minus"] = "minus";
+  IconName2["Mobile"] = "mobile";
+  IconName2["Money"] = "money";
+  IconName2["Monitor"] = "monitor";
+  IconName2["MoreHorizontal"] = "more-horizontal";
+  IconName2["MoreVertical"] = "more-vertical";
+  IconName2["NotificationCircle"] = "notification-circle";
+  IconName2["Notification"] = "notification";
+  IconName2["PasswordCheck"] = "password-check";
+  IconName2["People"] = "people";
+  IconName2["Pin"] = "pin";
+  IconName2["ProgrammingArrows"] = "programming-arrows";
+  IconName2["Custody"] = "custody";
+  IconName2["Question"] = "question";
+  IconName2["Received"] = "received";
+  IconName2["Refresh"] = "refresh";
+  IconName2["Save"] = "save";
+  IconName2["ScanBarcode"] = "scan-barcode";
+  IconName2["ScanFocus"] = "scan-focus";
+  IconName2["Scan"] = "scan";
+  IconName2["Scroll"] = "scroll";
+  IconName2["Search"] = "search";
+  IconName2["SecurityCard"] = "security-card";
+  IconName2["SecurityCross"] = "security-cross";
+  IconName2["SecurityKey"] = "security-key";
+  IconName2["SecuritySearch"] = "security-search";
+  IconName2["SecuritySlash"] = "security-slash";
+  IconName2["SecurityTick"] = "security-tick";
+  IconName2["SecurityTime"] = "security-time";
+  IconName2["SecurityUser"] = "security-user";
+  IconName2["Security"] = "security";
+  IconName2["Send1"] = "send-1";
+  IconName2["Send2"] = "send-2";
+  IconName2["Setting"] = "setting";
+  IconName2["Slash"] = "slash";
+  IconName2["SnapsMobile"] = "snaps-mobile";
+  IconName2["SnapsPlus"] = "snaps-plus";
+  IconName2["Snaps"] = "snaps";
+  IconName2["Speedometer"] = "speedometer";
+  IconName2["Star"] = "star";
+  IconName2["Stake"] = "stake";
+  IconName2["Student"] = "student";
+  IconName2["SwapHorizontal"] = "swap-horizontal";
+  IconName2["SwapVertical"] = "swap-vertical";
+  IconName2["Tag"] = "tag";
+  IconName2["Tilde"] = "tilde";
+  IconName2["Timer"] = "timer";
+  IconName2["Trash"] = "trash";
+  IconName2["TrendDown"] = "trend-down";
+  IconName2["TrendUp"] = "trend-up";
+  IconName2["UserCircleAdd"] = "user-circle-add";
+  IconName2["UserCircleLink"] = "user-circle-link";
+  IconName2["UserCircleRemove"] = "user-circle-remove";
+  IconName2["UserCircle"] = "user-circle";
+  IconName2["User"] = "user";
+  IconName2["WalletCard"] = "wallet-card";
+  IconName2["WalletMoney"] = "wallet-money";
+  IconName2["Wallet"] = "wallet";
+  IconName2["Warning"] = "warning";
+  IconName2["Twitter"] = "twitter";
+  IconName2["QrCode"] = "qr-code";
+  IconName2["UserCheck"] = "user-check";
+  IconName2["Unpin"] = "unpin";
+  IconName2["Ban"] = "ban";
+  IconName2["Bold"] = "bold";
+  IconName2["CircleX"] = "circle-x";
+  IconName2["Download"] = "download";
+  IconName2["FileIcon"] = "file";
+  IconName2["Flask"] = "flask";
+  IconName2["Plug"] = "plug";
+  IconName2["Share"] = "share";
+  IconName2["Square"] = "square";
+  IconName2["Tint"] = "tint";
+  IconName2["Upload"] = "upload";
+  IconName2["Usb"] = "usb";
+  IconName2["Wifi"] = "wifi";
+  IconName2["PlusMinus"] = "plus-minus";
+  return IconName2;
+})(IconName || {});
+var TYPE = "Icon";
+var Icon = createSnapComponent(TYPE);
+
 // src/jsx/validation.ts
 var import_superstruct18 = require("@metamask/superstruct");
 var import_utils7 = require("@metamask/utils");
@@ -875,8 +1056,22 @@ function element(name, props = {}) {
     key: (0, import_superstruct18.nullable)(KeyStruct)
   });
 }
+var ImageStruct2 = element("Image", {
+  src: svg(),
+  alt: (0, import_superstruct18.optional)((0, import_superstruct18.string)())
+});
+var IconNameStruct = nullUnion(
+  Object.values(IconName).map((name) => literal(name))
+);
+var IconStruct = element("Icon", {
+  name: IconNameStruct,
+  color: (0, import_superstruct18.optional)(
+    nullUnion([literal("default"), literal("primary"), literal("muted")])
+  ),
+  size: (0, import_superstruct18.optional)(nullUnion([literal("md"), literal("inherit")]))
+});
 var ButtonStruct2 = element("Button", {
-  children: StringElementStruct,
+  children: children([StringElementStruct, ImageStruct2, IconStruct]),
   name: (0, import_superstruct18.optional)((0, import_superstruct18.string)()),
   type: (0, import_superstruct18.optional)(nullUnion([literal("button"), literal("submit")])),
   variant: (0, import_superstruct18.optional)(nullUnion([literal("primary"), literal("destructive")])),
@@ -898,13 +1093,33 @@ var InputStruct2 = element("Input", {
 });
 var OptionStruct = element("Option", {
   value: (0, import_superstruct18.string)(),
-  children: (0, import_superstruct18.string)()
+  children: nullUnion([(0, import_superstruct18.string)()])
 });
 var DropdownStruct = element("Dropdown", {
   name: (0, import_superstruct18.string)(),
   value: (0, import_superstruct18.optional)((0, import_superstruct18.string)()),
   children: children([OptionStruct])
 });
+var CardStruct = element("Card", {
+  image: (0, import_superstruct18.optional)((0, import_superstruct18.string)()),
+  title: (0, import_superstruct18.string)(),
+  description: (0, import_superstruct18.optional)((0, import_superstruct18.string)()),
+  value: (0, import_superstruct18.string)(),
+  extra: (0, import_superstruct18.optional)((0, import_superstruct18.string)())
+});
+var SelectorOptionStruct = element(
+  "SelectorOption",
+  {
+    value: (0, import_superstruct18.string)(),
+    children: CardStruct
+  }
+);
+var SelectorStruct = element("Selector", {
+  name: (0, import_superstruct18.string)(),
+  title: (0, import_superstruct18.string)(),
+  value: (0, import_superstruct18.optional)((0, import_superstruct18.string)()),
+  children: children([SelectorOptionStruct])
+});
 var RadioStruct = element("Radio", {
   value: (0, import_superstruct18.string)(),
   children: (0, import_superstruct18.string)()
@@ -931,7 +1146,8 @@ var FIELD_CHILDREN_ARRAY = [
   DropdownStruct,
   RadioGroupStruct,
   FileInputStruct,
-  CheckboxStruct
+  CheckboxStruct,
+  SelectorStruct
 ];
 var FieldChildUnionStruct = nullUnion([
   ...FIELD_CHILDREN_ARRAY,
@@ -1018,28 +1234,33 @@ var ValueStruct = element("Value", {
   value: (0, import_superstruct18.string)(),
   extra: (0, import_superstruct18.string)()
 });
-var CardStruct = element("Card", {
-  image: (0, import_superstruct18.optional)((0, import_superstruct18.string)()),
-  title: (0, import_superstruct18.string)(),
-  description: (0, import_superstruct18.optional)((0, import_superstruct18.string)()),
-  value: (0, import_superstruct18.string)(),
-  extra: (0, import_superstruct18.optional)((0, import_superstruct18.string)())
-});
 var HeadingStruct2 = element("Heading", {
   children: StringElementStruct
 });
-var ImageStruct2 = element("Image", {
-  src: svg(),
-  alt: (0, import_superstruct18.optional)((0, import_superstruct18.string)())
-});
 var LinkStruct = element("Link", {
   href: (0, import_superstruct18.string)(),
   children: children([FormattingStruct, (0, import_superstruct18.string)()])
 });
 var TextStruct2 = element("Text", {
-  children: children([(0, import_superstruct18.string)(), BoldStruct, ItalicStruct, LinkStruct]),
+  children: children([
+    (0, import_superstruct18.string)(),
+    BoldStruct,
+    ItalicStruct,
+    LinkStruct,
+    IconStruct
+  ]),
   alignment: (0, import_superstruct18.optional)(
     nullUnion([literal("start"), literal("center"), literal("end")])
+  ),
+  color: (0, import_superstruct18.optional)(
+    nullUnion([
+      literal("default"),
+      literal("alternative"),
+      literal("muted"),
+      literal("error"),
+      literal("success"),
+      literal("warning")
+    ])
   )
 });
 var TooltipChildStruct = nullUnion([
@@ -1048,6 +1269,7 @@ var TooltipChildStruct = nullUnion([
   ItalicStruct,
   LinkStruct,
   ImageStruct2,
+  IconStruct,
   (0, import_superstruct18.boolean)()
 ]);
 var TooltipContentStruct = nullUnion([
@@ -1055,6 +1277,7 @@ var TooltipContentStruct = nullUnion([
   BoldStruct,
   ItalicStruct,
   LinkStruct,
+  IconStruct,
   (0, import_superstruct18.string)()
 ]);
 var TooltipStruct = element("Tooltip", {
@@ -1091,7 +1314,9 @@ var BoxChildStruct = typedUnion([
   TextStruct2,
   TooltipStruct,
   CheckboxStruct,
-  CardStruct
+  CardStruct,
+  IconStruct,
+  SelectorStruct
 ]);
 var RootJSXElementStruct = nullUnion([
   BoxChildStruct,
@@ -1124,7 +1349,10 @@ var JSXElementStruct = typedUnion([
   CheckboxStruct,
   FooterStruct,
   ContainerStruct,
-  CardStruct
+  CardStruct,
+  IconStruct,
+  SelectorStruct,
+  SelectorOptionStruct
 ]);
 
 // src/types/interface.ts