@easypost/easy-ui 1.0.0-alpha.109 → 1.0.0-alpha.110

package/AlertBadge/AlertBadge.d.ts

@@ -0,0 +1,32 @@
+import React, { ReactNode } from "react";
+import { IconSymbol } from "../types";
+export declare const DEFAULT_VARIANT = "danger";
+export declare const DEFAULT_PLACEMENT = "top right";
+export type AlertBadgeVariant = "primary" | "secondary" | "success" | "danger";
+export type AlertBadgePlacement = "top right" | "bottom right";
+export type AlertBadgeProps = {
+    /** AlertBadge placement
+     * @default top right
+     */
+    placement?: AlertBadgePlacement;
+    /** AlertBadge icon (IconSymbol)
+     * @default undefined
+     */
+    icon?: IconSymbol;
+    /**
+     * Accessible label for the AlertBadge.
+     * @default Alert Badge
+     */
+    accessibilityLabel?: string;
+    /**
+     * AlertBadge variant.
+     * @default danger
+     */
+    variant?: AlertBadgeVariant;
+    /** AlertBadge attachment target. */
+    children: ReactNode;
+    /**  Show/hide AlertBadge. */
+    show: boolean;
+};
+export declare function AlertBadge(props: AlertBadgeProps): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+//# sourceMappingURL=AlertBadge.d.ts.map

package/AlertBadge/AlertBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertBadge.d.ts","sourceRoot":"","sources":["../../src/AlertBadge/AlertBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAKtC,eAAO,MAAM,eAAe,WAAW,CAAC;AAExC,eAAO,MAAM,iBAAiB,cAAc,CAAC;AAE7C,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/E,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAAG,cAAc,CAAC;AAE/D,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAEhC;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAE5B,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAC;IAEpB,6BAA6B;IAC7B,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,gGA+BhD"}

package/AlertBadge/AlertBadge.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { AlertBadge } from "./AlertBadge";
+type Story = StoryObj<typeof AlertBadge>;
+declare const meta: Meta<typeof AlertBadge>;
+export default meta;
+export declare const Variants: Story;
+export declare const Placement: Story;
+export declare const Icon: Story;
+export declare const WithTooltip: Story;
+//# sourceMappingURL=AlertBadge.stories.d.ts.map

package/AlertBadge/AlertBadge.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertBadge.stories.d.ts","sourceRoot":"","sources":["../../src/AlertBadge/AlertBadge.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAMvD,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAC;AAK3D,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAQzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAiBjC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,QAAQ,EAAE,KAkBtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA+BvB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAclB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAoBzB,CAAC"}

package/AlertBadge/AlertBadge.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AlertBadge.test.d.ts.map

package/AlertBadge/AlertBadge.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertBadge.test.d.ts","sourceRoot":"","sources":["../../src/AlertBadge/AlertBadge.test.tsx"],"names":[],"mappings":""}

package/AlertBadge/index.d.ts

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

package/AlertBadge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/AlertBadge/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/AlertBadge/index.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const Icon = require("../__chunks__/Icon-W8F9w-jS.js");
+const Text = require("../__chunks__/Text-CSESKR_s.js");
+const utilities_css = require("../utilities/css.js");
+const container = "_container_7b7g9_4";
+const root = "_root_7b7g9_9";
+const badge = "_badge_7b7g9_13";
+const bottom = "_bottom_7b7g9_24";
+const top = "_top_7b7g9_28";
+const right = "_right_7b7g9_32";
+const variantPrimary = "_variantPrimary_7b7g9_36";
+const variantSecondary = "_variantSecondary_7b7g9_41";
+const variantSuccess = "_variantSuccess_7b7g9_46";
+const variantDanger = "_variantDanger_7b7g9_51";
+const styles = {
+  container,
+  root,
+  badge,
+  bottom,
+  top,
+  right,
+  variantPrimary,
+  variantSecondary,
+  variantSuccess,
+  variantDanger
+};
+const DEFAULT_VARIANT = "danger";
+const DEFAULT_PLACEMENT = "top right";
+function AlertBadge(props) {
+  const { accessibilityLabel = "Alert Badge", placement = DEFAULT_PLACEMENT, variant = DEFAULT_VARIANT, icon, show, children } = props;
+  const className = utilities_css.classNames(styles.root, styles[utilities_css.variationName("variant", variant)], ...placement.split(" ").map((position) => styles[position]));
+  if (!show) {
+    return children;
+  }
+  return React.createElement("span", {
+    className: styles.container
+  }, children, React.createElement("span", {
+    className
+  }, React.createElement(Text.Text, {
+    visuallyHidden: true
+  }, accessibilityLabel), React.createElement("span", {
+    className: styles.badge,
+    role: "status"
+  }, icon && React.createElement(Icon.Icon, {
+    symbol: icon,
+    size: "2xs"
+  }))));
+}
+exports.AlertBadge = AlertBadge;
+exports.DEFAULT_PLACEMENT = DEFAULT_PLACEMENT;
+exports.DEFAULT_VARIANT = DEFAULT_VARIANT;

package/AlertBadge/index.mjs

@@ -0,0 +1,53 @@
+import React__default from "react";
+import { I as Icon } from "../__chunks__/Icon-0SN9dbwU.mjs";
+import { T as Text } from "../__chunks__/Text-YOL3isF4.mjs";
+import { classNames, variationName } from "../utilities/css.mjs";
+const container = "_container_7b7g9_4";
+const root = "_root_7b7g9_9";
+const badge = "_badge_7b7g9_13";
+const bottom = "_bottom_7b7g9_24";
+const top = "_top_7b7g9_28";
+const right = "_right_7b7g9_32";
+const variantPrimary = "_variantPrimary_7b7g9_36";
+const variantSecondary = "_variantSecondary_7b7g9_41";
+const variantSuccess = "_variantSuccess_7b7g9_46";
+const variantDanger = "_variantDanger_7b7g9_51";
+const styles = {
+  container,
+  root,
+  badge,
+  bottom,
+  top,
+  right,
+  variantPrimary,
+  variantSecondary,
+  variantSuccess,
+  variantDanger
+};
+const DEFAULT_VARIANT = "danger";
+const DEFAULT_PLACEMENT = "top right";
+function AlertBadge(props) {
+  const { accessibilityLabel = "Alert Badge", placement = DEFAULT_PLACEMENT, variant = DEFAULT_VARIANT, icon, show, children } = props;
+  const className = classNames(styles.root, styles[variationName("variant", variant)], ...placement.split(" ").map((position) => styles[position]));
+  if (!show) {
+    return children;
+  }
+  return React__default.createElement("span", {
+    className: styles.container
+  }, children, React__default.createElement("span", {
+    className
+  }, React__default.createElement(Text, {
+    visuallyHidden: true
+  }, accessibilityLabel), React__default.createElement("span", {
+    className: styles.badge,
+    role: "status"
+  }, icon && React__default.createElement(Icon, {
+    symbol: icon,
+    size: "2xs"
+  }))));
+}
+export {
+  AlertBadge,
+  DEFAULT_PLACEMENT,
+  DEFAULT_VARIANT
+};

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @easypost/easy-ui
 
+## 1.0.0-alpha.110
+
+### Minor Changes
+
+- 0fa20fa: feat: Add AlertBadge
+
 ## 1.0.0-alpha.109
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easypost/easy-ui",
-  "version": "1.0.0-alpha.109",
+  "version": "1.0.0-alpha.110",
   "sideEffects": [
     "**/*.css"
   ],

package/style.css

@@ -4258,6 +4258,59 @@ textarea {
 }/**
  * Do not edit directly, this file was auto-generated.
  */
+._container_7b7g9_4 {
+  position: relative;
+  display: inline-block;
+}
+
+._root_7b7g9_9 {
+  position: absolute;
+}
+
+._badge_7b7g9_13 {
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--ezui-space-2);
+  height: var(--ezui-space-2);
+  background: var(--ezui-c-alert-badge-badge-color-background);
+  color: var(--ezui-c-alert-badge-badge-color-text);
+}
+
+._bottom_7b7g9_24 {
+  bottom: calc(var(--ezui-space-1) * -1);
+}
+
+._top_7b7g9_28 {
+  top: calc(var(--ezui-space-1) * -1);
+}
+
+._right_7b7g9_32 {
+  right: calc(var(--ezui-space-1) * -1);
+}
+
+._variantPrimary_7b7g9_36 {
+  --ezui-c-alert-badge-badge-color-background: var(--ezui-color-primary-500);
+  --ezui-c-alert-badge-badge-color-text: var(--ezui-color-neutral-000);
+}
+
+._variantSecondary_7b7g9_41 {
+  --ezui-c-alert-badge-badge-color-background: var(--ezui-color-secondary-500);
+  --ezui-c-alert-badge-badge-color-text: var(--ezui-color-neutral-000);
+}
+
+._variantSuccess_7b7g9_46 {
+  --ezui-c-alert-badge-badge-color-background: var(--ezui-color-positive-500);
+  --ezui-c-alert-badge-badge-color-text: var(--ezui-color-primary-800);
+}
+
+._variantDanger_7b7g9_51 {
+  --ezui-c-alert-badge-badge-color-background: var(--ezui-color-negative-600);
+  --ezui-c-alert-badge-badge-color-text: var(--ezui-color-neutral-000);
+}/**
+ * Do not edit directly, this file was auto-generated.
+ */
 ._underlay_10bf4_4 {
   position: fixed;
   inset: 0;