@metamask-previews/design-system-react 0.6.1-preview.abc15cd → 0.9.0-preview.694a8ed

package/dist/components/BadgeStatus/BadgeStatus.types.d.mts

@@ -1,34 +1,10 @@
+import type { BadgeStatusPropsShared } from "@metamask-previews/design-system-shared";
 import type { ComponentProps } from "react";
-import type { BadgeStatusSize, BadgeStatusStatus } from "../../types/index.mjs";
 /**
- * BadgeStatus component props.
+ * BadgeStatus component props (React platform-specific)
+ * Extends shared props from @metamask-previews/design-system-shared with React-specific platform concerns
  */
-export type BadgeStatusProps = ComponentProps<'div'> & {
-    /**
-     * Optional prop to control the status of the badge
-     * Possible values:
-     * - BadgeStatusStatus.Active. (Connected)
-     * - BadgeStatusStatus.Inactive. (Connected)
-     * - BadgeStatusStatus.Disconnected.
-     * - BadgeStatusStatus.New.
-     * - BadgeStatusStatus.Attention.
-     */
-    status: BadgeStatusStatus;
-    /**
-     * Optional prop to determine whether the badge should display a border
-     *
-     * @default true
-     */
-    hasBorder?: boolean;
-    /**
-     * Optional prop to control the size of the BadgeStatus
-     * Possible values:
-     * - BadgeStatusSize.Md (8px),
-     * - BadgeStatusSize.Lg (10px),
-     *
-     * @default AvatarBaseSize.Md
-     */
-    size?: BadgeStatusSize;
+export type BadgeStatusProps = ComponentProps<'div'> & BadgeStatusPropsShared & {
     /**
      * Optional prop for additional CSS classes to be applied to the BadgeStatus component.
      * These classes will be merged with the component's default classes using twMerge.

package/dist/components/BadgeStatus/BadgeStatus.types.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeStatus.types.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,iBAAiB,EAAE,8BAAoB;AAEtE;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACrD;;;;;;;;OAQG;IACH,MAAM,EAAE,iBAAiB,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}
+{"version":3,"file":"BadgeStatus.types.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,gDAAgD;AACtF,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,GAClD,sBAAsB,GAAG;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}

package/dist/components/BadgeStatus/BadgeStatus.types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeStatus.types.mjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { BadgeStatusSize, BadgeStatusStatus } from '../../types';\n\n/**\n * BadgeStatus component props.\n */\nexport type BadgeStatusProps = ComponentProps<'div'> & {\n  /**\n   * Optional prop to control the status of the badge\n   * Possible values:\n   * - BadgeStatusStatus.Active. (Connected)\n   * - BadgeStatusStatus.Inactive. (Connected)\n   * - BadgeStatusStatus.Disconnected.\n   * - BadgeStatusStatus.New.\n   * - BadgeStatusStatus.Attention.\n   */\n  status: BadgeStatusStatus;\n  /**\n   * Optional prop to determine whether the badge should display a border\n   *\n   * @default true\n   */\n  hasBorder?: boolean;\n  /**\n   * Optional prop to control the size of the BadgeStatus\n   * Possible values:\n   * - BadgeStatusSize.Md (8px),\n   * - BadgeStatusSize.Lg (10px),\n   *\n   * @default AvatarBaseSize.Md\n   */\n  size?: BadgeStatusSize;\n  /**\n   * Optional prop for additional CSS classes to be applied to the BadgeStatus component.\n   * These classes will be merged with the component's default classes using twMerge.\n   */\n  className?: string;\n  /**\n   * Optional CSS styles to be applied to the component.\n   * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n   */\n  style?: React.CSSProperties;\n};\n"]}
+{"version":3,"file":"BadgeStatus.types.mjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BadgeStatusPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\n/**\n * BadgeStatus component props (React platform-specific)\n * Extends shared props from @metamask-previews/design-system-shared with React-specific platform concerns\n */\nexport type BadgeStatusProps = ComponentProps<'div'> &\n  BadgeStatusPropsShared & {\n    /**\n     * Optional prop for additional CSS classes to be applied to the BadgeStatus component.\n     * These classes will be merged with the component's default classes using twMerge.\n     */\n    className?: string;\n    /**\n     * Optional CSS styles to be applied to the component.\n     * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n     */\n    style?: React.CSSProperties;\n  };\n"]}

package/dist/components/BadgeStatus/index.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BadgeStatus = exports.BadgeStatusStatus = exports.BadgeStatusSize = void 0;
-var types_1 = require("../../types/index.cjs");
-Object.defineProperty(exports, "BadgeStatusSize", { enumerable: true, get: function () { return types_1.BadgeStatusSize; } });
-Object.defineProperty(exports, "BadgeStatusStatus", { enumerable: true, get: function () { return types_1.BadgeStatusStatus; } });
+var design_system_shared_1 = require("@metamask-previews/design-system-shared");
+Object.defineProperty(exports, "BadgeStatusSize", { enumerable: true, get: function () { return design_system_shared_1.BadgeStatusSize; } });
+Object.defineProperty(exports, "BadgeStatusStatus", { enumerable: true, get: function () { return design_system_shared_1.BadgeStatusStatus; } });
 var BadgeStatus_1 = require("./BadgeStatus.cjs");
 Object.defineProperty(exports, "BadgeStatus", { enumerable: true, get: function () { return BadgeStatus_1.BadgeStatus; } });
 //# sourceMappingURL=index.cjs.map

package/dist/components/BadgeStatus/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/index.ts"],"names":[],"mappings":";;;AAAA,+CAAiE;AAAxD,wGAAA,eAAe,OAAA;AAAE,0GAAA,iBAAiB,OAAA;AAC3C,iDAA4C;AAAnC,0GAAA,WAAW,OAAA","sourcesContent":["export { BadgeStatusSize, BadgeStatusStatus } from '../../types';\nexport { BadgeStatus } from './BadgeStatus';\nexport type { BadgeStatusProps } from './BadgeStatus.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/index.ts"],"names":[],"mappings":";;;AAAA,gFAGiD;AAF/C,uHAAA,eAAe,OAAA;AACf,yHAAA,iBAAiB,OAAA;AAEnB,iDAA4C;AAAnC,0GAAA,WAAW,OAAA","sourcesContent":["export {\n  BadgeStatusSize,\n  BadgeStatusStatus,\n} from '@metamask-previews/design-system-shared';\nexport { BadgeStatus } from './BadgeStatus';\nexport type { BadgeStatusProps } from './BadgeStatus.types';\n"]}

package/dist/components/BadgeStatus/index.d.cts

@@ -1,4 +1,4 @@
-export { BadgeStatusSize, BadgeStatusStatus } from "../../types/index.cjs";
+export { BadgeStatusSize, BadgeStatusStatus, } from "@metamask-previews/design-system-shared";
 export { BadgeStatus } from "./BadgeStatus.cjs";
 export type { BadgeStatusProps } from "./BadgeStatus.types.cjs";
 //# sourceMappingURL=index.d.cts.map

package/dist/components/BadgeStatus/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,8BAAoB;AACjE,OAAO,EAAE,WAAW,EAAE,0BAAsB;AAC5C,YAAY,EAAE,gBAAgB,EAAE,gCAA4B"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,GAClB,gDAAgD;AACjD,OAAO,EAAE,WAAW,EAAE,0BAAsB;AAC5C,YAAY,EAAE,gBAAgB,EAAE,gCAA4B"}

package/dist/components/BadgeStatus/index.d.mts

@@ -1,4 +1,4 @@
-export { BadgeStatusSize, BadgeStatusStatus } from "../../types/index.mjs";
+export { BadgeStatusSize, BadgeStatusStatus, } from "@metamask-previews/design-system-shared";
 export { BadgeStatus } from "./BadgeStatus.mjs";
 export type { BadgeStatusProps } from "./BadgeStatus.types.mjs";
 //# sourceMappingURL=index.d.mts.map

package/dist/components/BadgeStatus/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,8BAAoB;AACjE,OAAO,EAAE,WAAW,EAAE,0BAAsB;AAC5C,YAAY,EAAE,gBAAgB,EAAE,gCAA4B"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,GAClB,gDAAgD;AACjD,OAAO,EAAE,WAAW,EAAE,0BAAsB;AAC5C,YAAY,EAAE,gBAAgB,EAAE,gCAA4B"}

package/dist/components/BadgeStatus/index.mjs

@@ -1,3 +1,3 @@
-export { BadgeStatusSize, BadgeStatusStatus } from "../../types/index.mjs";
+export { BadgeStatusSize, BadgeStatusStatus } from "@metamask-previews/design-system-shared";
 export { BadgeStatus } from "./BadgeStatus.mjs";
 //# sourceMappingURL=index.mjs.map

package/dist/components/BadgeStatus/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,8BAAoB;AACjE,OAAO,EAAE,WAAW,EAAE,0BAAsB","sourcesContent":["export { BadgeStatusSize, BadgeStatusStatus } from '../../types';\nexport { BadgeStatus } from './BadgeStatus';\nexport type { BadgeStatusProps } from './BadgeStatus.types';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,EAClB,gDAAgD;AACjD,OAAO,EAAE,WAAW,EAAE,0BAAsB","sourcesContent":["export {\n  BadgeStatusSize,\n  BadgeStatusStatus,\n} from '@metamask-previews/design-system-shared';\nexport { BadgeStatus } from './BadgeStatus';\nexport type { BadgeStatusProps } from './BadgeStatus.types';\n"]}

package/dist/components/BannerBase/BannerBase.cjs

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BannerBase = void 0;
+const react_1 = __importStar(require("react"));
+const types_1 = require("../../types/index.cjs");
+const tw_merge_1 = require("../../utils/tw-merge.cjs");
+const Box_1 = require("../Box/index.cjs");
+const Button_1 = require("../Button/index.cjs");
+const ButtonIcon_1 = require("../ButtonIcon/index.cjs");
+const Text_1 = require("../Text/index.cjs");
+const isTextContent = (content) => typeof content === 'string' || typeof content === 'number';
+const hasContent = (content) => content !== null && content !== undefined;
+exports.BannerBase = (0, react_1.forwardRef)(({ title, titleProps, description, descriptionProps, children, childrenWrapperProps, actionButtonLabel, actionButtonOnClick, actionButtonProps, startAccessory, onClose, closeButtonProps, className, ...props }, ref) => {
+    const resolvedActionButtonProps = actionButtonProps ?? {};
+    const { ariaLabel: closeButtonAriaLabel = 'Close banner', onClick: closeButtonPropsOnClick, className: closeButtonClassName, ...resolvedCloseButtonProps } = closeButtonProps ?? {};
+    const shouldShowCloseButton = Boolean(onClose || closeButtonProps);
+    const shouldShowActionButton = Boolean(actionButtonOnClick);
+    return (react_1.default.createElement(Box_1.Box, { ref: ref, flexDirection: types_1.BoxFlexDirection.Row, alignItems: types_1.BoxAlignItems.Start, gap: 2, backgroundColor: types_1.BoxBackgroundColor.BackgroundDefault, padding: 3, className: (0, tw_merge_1.twMerge)('rounded-sm', className), ...props },
+        startAccessory,
+        react_1.default.createElement(Box_1.Box, { className: "min-w-0 flex-1" },
+            hasContent(title) &&
+                (isTextContent(title) ? (react_1.default.createElement(Text_1.Text, { variant: types_1.TextVariant.BodyMd, fontWeight: types_1.FontWeight.Medium, ...titleProps }, title)) : (title)),
+            hasContent(description) && (react_1.default.createElement(Box_1.Box, { className: hasContent(title) ? 'mt-1' : undefined }, isTextContent(description) ? (react_1.default.createElement(Text_1.Text, { variant: types_1.TextVariant.BodySm, ...descriptionProps }, description)) : (description))),
+            hasContent(children) &&
+                (isTextContent(children) ? (react_1.default.createElement(Text_1.Text, { variant: types_1.TextVariant.BodyMd, ...childrenWrapperProps }, children)) : (children)),
+            shouldShowActionButton && (react_1.default.createElement(Box_1.Box, { className: "mt-4" },
+                react_1.default.createElement(Button_1.Button, { size: types_1.ButtonSize.Md, onClick: actionButtonOnClick, ...resolvedActionButtonProps }, actionButtonLabel)))),
+        shouldShowCloseButton && (react_1.default.createElement(ButtonIcon_1.ButtonIcon, { "data-testid": "banner-base-close-button", className: (0, tw_merge_1.twMerge)('ml-3 self-start', closeButtonClassName), iconName: types_1.IconName.Close, size: types_1.ButtonIconSize.Sm, ariaLabel: closeButtonAriaLabel, onClick: onClose ?? closeButtonPropsOnClick, ...resolvedCloseButtonProps }))));
+});
+exports.BannerBase.displayName = 'BannerBase';
+//# sourceMappingURL=BannerBase.cjs.map

package/dist/components/BannerBase/BannerBase.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerBase.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport {\n  BoxAlignItems,\n  BoxBackgroundColor,\n  ButtonIconSize,\n  ButtonSize,\n  FontWeight,\n  BoxFlexDirection,\n  IconName,\n  TextVariant,\n} from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n  typeof content === 'string' || typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n  content !== null && content !== undefined;\n\nexport const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(\n  (\n    {\n      title,\n      titleProps,\n      description,\n      descriptionProps,\n      children,\n      childrenWrapperProps,\n      actionButtonLabel,\n      actionButtonOnClick,\n      actionButtonProps,\n      startAccessory,\n      onClose,\n      closeButtonProps,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedActionButtonProps = actionButtonProps ?? {};\n\n    const {\n      ariaLabel: closeButtonAriaLabel = 'Close banner',\n      onClick: closeButtonPropsOnClick,\n      className: closeButtonClassName,\n      ...resolvedCloseButtonProps\n    } = closeButtonProps ?? {};\n\n    const shouldShowCloseButton = Boolean(onClose || closeButtonProps);\n    const shouldShowActionButton = Boolean(actionButtonOnClick);\n\n    return (\n      <Box\n        ref={ref}\n        flexDirection={BoxFlexDirection.Row}\n        alignItems={BoxAlignItems.Start}\n        gap={2}\n        backgroundColor={BoxBackgroundColor.BackgroundDefault}\n        padding={3}\n        className={twMerge('rounded-sm', className)}\n        {...props}\n      >\n        {startAccessory}\n\n        <Box className=\"min-w-0 flex-1\">\n          {hasContent(title) &&\n            (isTextContent(title) ? (\n              <Text\n                variant={TextVariant.BodyMd}\n                fontWeight={FontWeight.Medium}\n                {...titleProps}\n              >\n                {title}\n              </Text>\n            ) : (\n              title\n            ))}\n\n          {hasContent(description) && (\n            <Box className={hasContent(title) ? 'mt-1' : undefined}>\n              {isTextContent(description) ? (\n                <Text variant={TextVariant.BodySm} {...descriptionProps}>\n                  {description}\n                </Text>\n              ) : (\n                description\n              )}\n            </Box>\n          )}\n\n          {hasContent(children) &&\n            (isTextContent(children) ? (\n              <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n                {children}\n              </Text>\n            ) : (\n              children\n            ))}\n\n          {shouldShowActionButton && (\n            <Box className=\"mt-4\">\n              <Button\n                size={ButtonSize.Md}\n                onClick={actionButtonOnClick}\n                {...resolvedActionButtonProps}\n              >\n                {actionButtonLabel}\n              </Button>\n            </Box>\n          )}\n        </Box>\n\n        {shouldShowCloseButton && (\n          <ButtonIcon\n            data-testid=\"banner-base-close-button\"\n            className={twMerge('ml-3 self-start', closeButtonClassName)}\n            iconName={IconName.Close}\n            size={ButtonIconSize.Sm}\n            ariaLabel={closeButtonAriaLabel}\n            onClick={onClose ?? closeButtonPropsOnClick}\n            {...resolvedCloseButtonProps}\n          />\n        )}\n      </Box>\n    );\n  },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}