@onbeam/ui - npm Package Compare versions

Comparing version 1.0.0-21 to 1.0.0-22

dist/index.d.ts

 import * as react from 'react';
-import { PropsWithChildren, ReactNode, InputHTMLAttributes, ReactElement } from 'react';
+import { PropsWithChildren, ReactElement, InputHTMLAttributes, ReactNode, HTMLProps } from 'react';
 import * as _onbeam_styled_system_types from '@onbeam/styled-system/types';
@@ -89,2 +89,3 @@ import { RecipeVariantProps } from '@onbeam/styled-system/types';
                 textStyle: "md";
+                width: "100%";
             };
@@ -143,7 +144,7 @@ iconLeft: {
      */
-    iconLeft?: ReactNode;
+    iconLeft?: ReactElement;
     /**
      * Adds an icon to the right of the button. Combining this with `iconLeft` or `hasLed` could cause unexpected results.
      */
-    iconRight?: ReactNode;
+    iconRight?: ReactElement;
     /**
@@ -214,2 +215,4 @@ * Adds an LED to the button. Combining this with `iconLeft` or `iconRight` could cause unexpected results.
 
+declare const Divider: ComponentWithAs<"div", object>;
+
 declare const ErrorMessage: ComponentWithAs<"span", {
@@ -219,2 +222,9 @@ children?: react.ReactNode;
 
+type IconProps = HTMLProps<SVGElement> & {
+    children: ReactElement;
+    size?: number;
+};
+
+declare const Icon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<"svg">>;
+
 declare const iconButtonStyle: _onbeam_styled_system_types.RecipeRuntimeFn<{
@@ -234,3 +244,5 @@ size: {
 type IconButtonVariants = NonNullable<RecipeVariantProps<typeof iconButtonStyle>>;
-type IconButtonProps = PropsWithChildren<Pick<IconButtonVariants, 'size'>>;
+type IconButtonProps = Pick<IconButtonVariants, 'size'> & {
+    children: ReactElement<HTMLProps<SVGElement>, 'svg'>;
+};
 
@@ -336,2 +348,11 @@ declare const IconButton: ComponentWithAs<"a" | "button", IconButtonProps>;
 
+type NotificationProps = {
+    title: string;
+    description?: string;
+    icon?: ReactElement;
+    onClose: () => void;
+};
+
+declare const Notification: ComponentWithAs<"div", NotificationProps>;
+
 declare const PoweredByBeamBanner: ComponentWithAs<"div", object>;
@@ -347,3 +368,3 @@
      */
-    icon?: ReactNode;
+    icon?: ReactElement;
     /**
@@ -501,2 +522,36 @@ * Removes the chevron icon from the right of the component
 
+type TranscationDetailsBoxProps = PropsWithChildren;
+type TranscationDetailsRowProps = {
+    /**
+     * The label describing the details of the row. Rendered at the left side of the row.
+     */
+    label: string;
+    /**
+     * Will render next to the label
+     */
+    tooltipLabel?: ReactNode;
+    /**
+     * The details of what is described by the label. Rendered at the right side of the row.
+     */
+    details: {
+        /**
+         * The visual label of the detail
+         */
+        label: string;
+        /**
+         * When onClick is passed, the label will gain different styles
+         */
+        onClick?: () => void;
+        /**
+         * Rendered at the right side of the detail label
+         */
+        icon?: ReactElement;
+    };
+};
+
+declare const TransactionDetailsBox: ComponentWithAs<"div" | "ul", {
+    children?: react.ReactNode;
+}>;
+declare const TransactionDetailsRow: ComponentWithAs<"div" | "li", TranscationDetailsRowProps>;
+
 declare function beamRef<Props extends object, Component extends As>(component: React.ForwardRefRenderFunction<any, RightJoinProps<PropsOf<Component>, Props> & {
@@ -509,2 +564,2 @@ as?: As;
 
-export { AlertMessage, type AlertMessageProps, Button, type ButtonProps, Card, type CardProps, DappInputField, type DappInputFieldProps, ErrorMessage, IconButton, type IconButtonProps, Input, InputOTP, type InputProps, Label, type LabelProps, NativeSelect, type NativeSelectProps, type NavigationItem, PoweredByBeamBanner, SelectButton, type SelectButtonProps, Text, type TextProps, Tooltip, TooltipPrimitive, type TooltipProps, TopNav, type TopNavProps, beamRef, gridBackgroundStyle, noiseBackgroundStyle };
+export { AlertMessage, type AlertMessageProps, Button, type ButtonProps, Card, type CardProps, DappInputField, type DappInputFieldProps, Divider, ErrorMessage, Icon, IconButton, type IconButtonProps, type IconProps, Input, InputOTP, type InputProps, Label, type LabelProps, NativeSelect, type NativeSelectProps, type NavigationItem, Notification, type NotificationProps, PoweredByBeamBanner, SelectButton, type SelectButtonProps, Text, type TextProps, Tooltip, TooltipPrimitive, type TooltipProps, TopNav, type TopNavProps, TransactionDetailsBox, TransactionDetailsRow, type TranscationDetailsBoxProps, type TranscationDetailsRowProps, beamRef, gridBackgroundStyle, noiseBackgroundStyle };

dist/index.js

@@ -142,3 +142,3 @@ 'use strict';
       lg: {
-        root: { p: 3, textStyle: "md" },
+        root: { p: 3, textStyle: "md", width: "100%" },
         iconLeft: {
@@ -236,2 +236,9 @@ position: "absolute",
 });
+var Icon = react.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, size = 24 } = _b, props = __objRest(_b, ["children", "size"]);
+    return react.cloneElement(children, __spreadValues({ ref, height: size, width: size }, props));
+  }
+);
+Icon.displayName = "Icon";
 var Button = beamRef(
@@ -266,6 +273,6 @@ (_a, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(As, __spreadProps(__spreadValues({ ref, className: css.cx(classes.root, className) }, props), { children: [
-      hasLed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.led, children: ledOn && !props.disabled ? /* @__PURE__ */ jsxRuntime.jsx(icons.LedOnIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.LedOffIcon, {}) }),
-      iconLeft && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.iconLeft, children: iconLeft }),
+      hasLed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.led, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 16, children: ledOn && !props.disabled ? /* @__PURE__ */ jsxRuntime.jsx(icons.LedOnIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.LedOffIcon, {}) }) }),
+      iconLeft && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.iconLeft, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 24, children: iconLeft }) }),
       children,
-      iconRight && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.iconRight, children: iconRight })
+      iconRight && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.iconRight, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 24, children: iconRight }) })
     ] }));
@@ -515,2 +522,84 @@ }
 DappInputField.displayName = "DappInputField";
+var dividerStyle = css.css({
+  width: "100%"
+});
+var Divider = beamRef(
+  (_a, ref) => {
+    var _b = _a, { as: As = "div", className } = _b, props = __objRest(_b, ["as", "className"]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      As,
+      __spreadProps(__spreadValues({
+        ref,
+        className: css.cx(dividerStyle, className),
+        role: "separator"
+      }, props), {
+        children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              filter: "url(#filter0_d_162_441)",
+              x1: "0",
+              y1: "1",
+              x2: "100%",
+              y2: "1",
+              stroke: "black",
+              "stroke-dasharray": "6 1"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "filter",
+            {
+              id: "filter0_d_162_441",
+              x: "0",
+              y: "0.5",
+              width: "100%",
+              height: "2",
+              filterUnits: "userSpaceOnUse",
+              "color-interpolation-filters": "sRGB",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "feColorMatrix",
+                  {
+                    in: "SourceAlpha",
+                    type: "matrix",
+                    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+                    result: "hardAlpha"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("feOffset", { dy: "1" }),
+                /* @__PURE__ */ jsxRuntime.jsx("feComposite", { in2: "hardAlpha", operator: "out" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "feColorMatrix",
+                  {
+                    type: "matrix",
+                    values: "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "feBlend",
+                  {
+                    mode: "normal",
+                    in2: "BackgroundImageFix",
+                    result: "effect1_dropShadow_162_440"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "feBlend",
+                  {
+                    mode: "normal",
+                    in: "SourceGraphic",
+                    in2: "effect1_dropShadow_162_440",
+                    result: "shape"
+                  }
+                )
+              ]
+            }
+          ) })
+        ] })
+      })
+    );
+  }
+);
+Divider.displayName = "Divider";
 var errorStyle = css.css({
@@ -542,6 +631,2 @@ textStyle: "xs",
     backgroundBlendMode: "overlay, normal",
-    "& > svg": {
-      w: "12px",
-      h: "12px"
-    },
     _hover: {
@@ -593,3 +678,3 @@ "&:not(:disabled)": {
       }, props), {
-        children
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 12, children })
       })
@@ -887,7 +972,3 @@ );
 var chevronStyle = css.css({
-  ml: "auto",
-  "& > svg": {
-    h: "16px",
-    w: "16px"
-  }
+  ml: "auto"
 });
@@ -903,3 +984,3 @@ var dummyTextStyle = css.css({
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: dummyTextStyle, "aria-hidden": true, children: "dummy" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: chevronStyle, children: /* @__PURE__ */ jsxRuntime.jsx(icons.DownIcon, {}) })
+      /* @__PURE__ */ jsxRuntime.jsx(icons.DownIcon, { className: chevronStyle, height: 16, width: 16 })
     ] });
@@ -909,2 +990,83 @@ }
 NativeSelect.displayName = "NativeSelect";
+var rootStyle2 = css.css({
+  p: 1,
+  w: "100%",
+  rounded: "lg",
+  border: "1px solid",
+  borderColor: "mono.400",
+  _before: {
+    rounded: "lg"
+  }
+});
+var innerStyle = css.css({
+  position: "relative",
+  border: "1px solid",
+  borderColor: "mono.900",
+  backgroundBlendMode: "multiply, normal",
+  gap: 2,
+  p: 3,
+  display: "flex",
+  alignItems: "center",
+  rounded: "md",
+  _after: {
+    rounded: "md"
+  }
+});
+var contentStyle = css.css({
+  display: "flex",
+  flexDirection: "column",
+  textStyle: "sm"
+});
+var closeStyle = css.css({
+  position: "absolute",
+  top: 2,
+  right: 2,
+  p: 1,
+  cursor: "pointer"
+});
+var Text = beamRef(
+  (_a, ref) => {
+    var _b = _a, {
+      as: As = "p",
+      color = "mono.100",
+      textStyle = "base",
+      className
+    } = _b, props = __objRest(_b, [
+      "as",
+      "color",
+      "textStyle",
+      "className"
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      As,
+      __spreadValues({
+        ref,
+        className: css.cx(css.css({ color, textStyle }), className)
+      }, props)
+    );
+  }
+);
+Text.displayName = "Text";
+var Notification = beamRef(
+  (_a, ref) => {
+    var _b = _a, { as: As = "div", icon, title, description, onClose, className } = _b, props = __objRest(_b, ["as", "icon", "title", "description", "onClose", "className"]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      As,
+      __spreadProps(__spreadValues({
+        ref,
+        className: css.cx(noiseBackgroundStyle, rootStyle2, className)
+      }, props), {
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.cx(gridBackgroundStyle, innerStyle), children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 24, children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: contentStyle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Text, { color: "mono.100", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx(Text, { color: "mono.300", children: description })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: closeStyle, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, { height: 16, width: 16 }) })
+        ] })
+      })
+    );
+  }
+);
+Notification.displayName = "Notification";
 var bannerStyle = css.css({
@@ -915,3 +1077,2 @@ display: "flex",
   color: "mono.300",
-  gap: 1,
   textStyle: "xs"
@@ -923,3 +1084,4 @@ });
   flexDirection: "row-reverse",
-  flex: 1
+  flex: 1,
+  ml: 1
 });
@@ -960,3 +1122,3 @@ var svgStyle = css.css({
     return /* @__PURE__ */ jsxRuntime.jsxs(As, __spreadProps(__spreadValues({ ref, className: css.cx(bannerStyle, className) }, props), { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(icons.LedOnIcon, { height: 24, width: 24 }),
+      /* @__PURE__ */ jsxRuntime.jsx(icons.LedOnIcon, { height: 16, width: 16 }),
       "powered by",
@@ -1057,7 +1219,3 @@ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: logoStyle, children: [
       rounded: "full",
-      overflow: "hidden",
-      "& > svg": {
-        height: "24px",
-        width: "24px"
-      }
+      overflow: "hidden"
     }
@@ -1107,5 +1265,5 @@ },
       /* @__PURE__ */ jsxRuntime.jsxs(As, __spreadProps(__spreadValues({ ref, className: classes.button }, props), { children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.icon, children: icon }),
+        icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 24, className: classes.icon, children: icon }),
         children,
-        !disableChevron && /* @__PURE__ */ jsxRuntime.jsx(icons.DownIcon, {})
+        !disableChevron && /* @__PURE__ */ jsxRuntime.jsx(icons.DownIcon, { height: 16, width: 16 })
       ] }))
@@ -1116,25 +1274,2 @@ ] });
 SelectButton.displayName = "SelectButton";
-var Text = beamRef(
-  (_a, ref) => {
-    var _b = _a, {
-      as: As = "p",
-      color = "mono.100",
-      textStyle = "base",
-      className
-    } = _b, props = __objRest(_b, [
-      "as",
-      "color",
-      "textStyle",
-      "className"
-    ]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      As,
-      __spreadValues({
-        ref,
-        className: css.cx(css.css({ color, textStyle }), className)
-      }, props)
-    );
-  }
-);
-Text.displayName = "Text";
 var tooltipStyles = css.css({
@@ -1167,3 +1302,3 @@ zIndex: 50,
   ({ label, width, children }, ref) => /* @__PURE__ */ jsxRuntime.jsx(reactTooltip.Provider, { delayDuration: 250, children: /* @__PURE__ */ jsxRuntime.jsxs(reactTooltip.Root, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactTooltip.Trigger, { children: children != null ? children : /* @__PURE__ */ jsxRuntime.jsx(icons.TooltipIcon, { className: tooltipTriggerStyles }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactTooltip.Trigger, { className: tooltipTriggerStyles, children: children != null ? children : /* @__PURE__ */ jsxRuntime.jsx(icons.TooltipIcon, { height: 16, width: 16 }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -1187,3 +1322,3 @@ TooltipContent,
 };
-var rootStyle2 = css.css({
+var rootStyle3 = css.css({
   w: "100%",
@@ -1205,7 +1340,3 @@ display: "flex",
   alignItems: "center",
-  gap: 3,
-  "& > svg ": {
-    h: "28px",
-    w: "28px"
-  }
+  gap: 3
 });
@@ -1280,6 +1411,6 @@ var titleStyle = css.css({
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs(As, __spreadProps(__spreadValues({ ref, className: css.cx(rootStyle2, className) }, props), { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(As, __spreadProps(__spreadValues({ ref, className: css.cx(rootStyle3, className) }, props), { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: logoStyle2, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("a", { href: homeHref, className: homeLinkStyle, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(icons.BeamNetworkIcon, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(icons.BeamNetworkIcon, { height: 28, width: 28 }),
           /* @__PURE__ */ jsxRuntime.jsx(Text, { textStyle: "base", color: "mono.100", className: titleStyle, children: title })
@@ -1320,2 +1451,98 @@ ] }),
 TopNav.displayName = "TopNav";
+var boxStyle = css.css({
+  py: 2,
+  px: 3,
+  display: "flex",
+  flexDirection: "column",
+  gap: 1,
+  rounded: "sm",
+  border: "1px solid",
+  borderColor: "mono.900",
+  bg: "#151515",
+  w: "100%",
+  _before: {
+    rounded: "sm"
+  },
+  _after: {
+    rounded: "sm"
+  }
+});
+var rowStyle2 = css.css({
+  display: "flex",
+  justifyContent: "space-between",
+  textStyle: "caption",
+  width: "100%"
+});
+var labelStyle2 = css.css({
+  display: "flex",
+  alignItems: "center",
+  gap: 1,
+  color: "mono.300"
+});
+var detailStyle = css.cva({
+  base: {
+    display: "flex",
+    gap: 1,
+    alignItems: "center",
+    "& > svg": {
+      height: "16px",
+      width: "16px"
+    }
+  },
+  variants: {
+    isAction: {
+      true: {
+        cursor: "pointer",
+        color: "orange.200",
+        _hover: {
+          color: "orange.600"
+        }
+      },
+      false: {
+        color: "mono.100"
+      }
+    }
+  }
+});
+var TransactionDetailsBox = beamRef((_a, ref) => {
+  var _b = _a, { as: As = "ul", children, className } = _b, props = __objRest(_b, ["as", "children", "className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    As,
+    __spreadProps(__spreadValues({
+      ref,
+      className: css.cx(
+        gridBackgroundStyle,
+        noiseBackgroundStyle,
+        boxStyle,
+        className
+      )
+    }, props), {
+      children
+    })
+  );
+});
+TransactionDetailsBox.displayName = "TransactionDetailsBox";
+var TransactionDetailsRow = beamRef(
+  (_a, ref) => {
+    var _b = _a, { as: As = "li", label, tooltipLabel, details, className } = _b, props = __objRest(_b, ["as", "label", "tooltipLabel", "details", "className"]);
+    const ActionComponent = details.onClick ? "button" : "div";
+    return /* @__PURE__ */ jsxRuntime.jsxs(As, __spreadProps(__spreadValues({ ref, className: css.cx(rowStyle2, className) }, props), { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: labelStyle2, children: [
+        label,
+        tooltipLabel && /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { label: tooltipLabel, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 16, children: /* @__PURE__ */ jsxRuntime.jsx(icons.TooltipGreyIcon, {}) }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        ActionComponent,
+        {
+          className: detailStyle({ isAction: !!details.onClick }),
+          children: [
+            details.label,
+            details.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 16, children: details.icon })
+          ]
+        }
+      )
+    ] }));
+  }
+);
+TransactionDetailsRow.displayName = "TransactionDetailsRow";
 
@@ -1326,3 +1553,5 @@ exports.AlertMessage = AlertMessage;
 exports.DappInputField = DappInputField;
+exports.Divider = Divider;
 exports.ErrorMessage = ErrorMessage;
+exports.Icon = Icon;
 exports.IconButton = IconButton;
@@ -1333,2 +1562,3 @@ exports.Input = Input;
 exports.NativeSelect = NativeSelect;
+exports.Notification = Notification;
 exports.PoweredByBeamBanner = PoweredByBeamBanner;
@@ -1340,2 +1570,4 @@ exports.SelectButton = SelectButton;
 exports.TopNav = TopNav;
+exports.TransactionDetailsBox = TransactionDetailsBox;
+exports.TransactionDetailsRow = TransactionDetailsRow;
 exports.beamRef = beamRef;
@@ -1342,0 +1574,0 @@ exports.gridBackgroundStyle = gridBackgroundStyle;

package.json

 {
   "name": "@onbeam/ui",
-  "version": "1.0.0-21",
+  "version": "1.0.0-22",
   "sideEffects": false,
@@ -18,4 +18,4 @@ "license": "MIT",
     "input-otp": "^1.2.4",
-    "@onbeam/icons": "1.0.0-21",
-    "@onbeam/styled-system": "1.0.0-21"
+    "@onbeam/icons": "1.0.0-22",
+    "@onbeam/styled-system": "1.0.0-22"
   },
@@ -22,0 +22,0 @@ "devDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

2134818

increased by2.08%

Lines of code

3599

increased by16.47%

Dependency changes

• + Added@onbeam/icons@1.0.0-22(transitive)

• + Added@onbeam/styled-system@1.0.0-22(transitive)

• - Removed@onbeam/icons@1.0.0-21(transitive)

• - Removed@onbeam/styled-system@1.0.0-21(transitive)

• Updated@onbeam/icons@1.0.0-22

• Updated@onbeam/styled-system@1.0.0-22