@common-origin/design-system 1.7.0 → 1.8.0

package/dist/index.js

@@ -747,7 +747,7 @@ var AvatarContainer = styled.div.withConfig({
   },
   displayName: "Avatar__AvatarContainer",
   componentId: "sc-ezn4ax-0"
-})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"])), function (_a) {
+})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"])), function (_a) {
   var $size = _a.$size;
   return tokens.semantic.size.avatar[$size];
 }, function (_a) {
@@ -760,14 +760,14 @@ var AvatarImage = styled.img.withConfig({
   },
   displayName: "Avatar__AvatarImage",
   componentId: "sc-ezn4ax-1"
-})(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"])), tokens.base.border.radius.circle);
+})(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"])), tokens.base.border.radius.circle);
 var AvatarInitials = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Avatar__AvatarInitials",
   componentId: "sc-ezn4ax-2"
-})(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: 1;\n  text-transform: uppercase;\n  user-select: none;\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: 1;\n  text-transform: uppercase;\n  user-select: none;\n"
+})(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: 1;\n  text-transform: uppercase;\n  user-select: none;\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: 1;\n  text-transform: uppercase;\n  user-select: none;\n"
 // Helper function to get initials from name
 ])), tokens.base.fontFamily.body, tokens.base.fontWeight[3], function (_a) {
   var $size = _a.$size;
@@ -830,7 +830,80 @@ var Avatar = function Avatar(_a) {
     "aria-hidden": "true"
   }, initials));
 };
-var templateObject_1$l, templateObject_2$a, templateObject_3$8;
+var templateObject_1$m, templateObject_2$b, templateObject_3$9;
+
+React.createElement;
+var _a$6 = tokens.semantic,
+  color$4 = _a$6.color,
+  typography$3 = _a$6.typography,
+  _b$2 = tokens.base,
+  fontSize = _b$2.fontSize;
+  _b$2.shadow;
+var scaleIn = styled.keyframes(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"], ["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"])));
+var BadgeWrapper = styled.span.withConfig({
+  displayName: "Badge__BadgeWrapper",
+  componentId: "sc-tjz4pp-0"
+})(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n  flex-shrink: 0;\n"])));
+var BadgeIndicator = styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Badge__BadgeIndicator",
+  componentId: "sc-tjz4pp-1"
+})(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  font: ", ";\n  font-size: ", ";\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  box-shadow: 0 0 0 2px ", ";\n  animation: ", " 0.2s ease-out;\n  \n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  font: ", ";\n  font-size: ", ";\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  box-shadow: 0 0 0 2px ", ";\n  animation: ", " 0.2s ease-out;\n  \n  ", "\n"])), function (props) {
+  return props.$isVisible ? 'flex' : 'none';
+}, function (props) {
+  return props.$isDot ? '8px' : '20px';
+}, function (props) {
+  return props.$isDot ? '8px' : '20px';
+}, function (props) {
+  return props.$isDot ? '0' : '0 6px';
+}, tokens.base.border.radius.circle, typography$3.caption, fontSize[1], color$4.background["default"], scaleIn, function (props) {
+  switch (props.$variant) {
+    case 'primary':
+      return "\n          background-color: ".concat(color$4.background.interactive, ";\n          color: ").concat(color$4.text.inverse, ";\n        ");
+    case 'error':
+      return "\n          background-color: ".concat(color$4.background.error, ";\n          color: ").concat(color$4.text.inverse, ";\n        ");
+    case 'warning':
+      return "\n          background-color: ".concat(color$4.background.warning, ";\n          color: ").concat(color$4.text.inverse, ";\n        ");
+    case 'success':
+      return "\n          background-color: ".concat(color$4.background.success, ";\n          color: ").concat(color$4.text.inverse, ";\n        ");
+    default:
+      return "\n          background-color: ".concat(color$4.background.emphasis, ";\n          color: ").concat(color$4.text.inverse, ";\n        ");
+  }
+});
+var ScreenReaderOnly = styled.span.withConfig({
+  displayName: "Badge__ScreenReaderOnly",
+  componentId: "sc-tjz4pp-2"
+})(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n"])));
+var Badge = function Badge(_a) {
+  var children = _a.children,
+    _b = _a.count,
+    count = _b === void 0 ? 0 : _b,
+    _c = _a.max,
+    max = _c === void 0 ? 99 : _c,
+    _d = _a.variant,
+    variant = _d === void 0 ? 'default' : _d,
+    _e = _a.dot,
+    dot = _e === void 0 ? false : _e,
+    ariaLabel = _a["aria-label"],
+    className = _a.className;
+  var isVisible = dot || count > 0;
+  var displayCount = count > max ? "".concat(max, "+") : count.toString();
+  // Generate default aria-label if not provided
+  var defaultAriaLabel = dot ? 'New notification indicator' : count === 1 ? '1 notification' : "".concat(count, " notifications");
+  var label = ariaLabel || defaultAriaLabel;
+  return /*#__PURE__*/React.createElement(BadgeWrapper, {
+    className: className
+  }, children, /*#__PURE__*/React.createElement(BadgeIndicator, {
+    $variant: variant,
+    $isDot: dot,
+    $isVisible: isVisible,
+    role: "status",
+    "aria-live": "polite"
+  }, !dot && displayCount, /*#__PURE__*/React.createElement(ScreenReaderOnly, null, label)));
+};
+var templateObject_1$l, templateObject_2$a, templateObject_3$8, templateObject_4$6;
 
 React.createElement;
 var StyledBox = styled.div.withConfig({
@@ -1405,7 +1478,7 @@ var BaseChipStyled = styled.span.withConfig({
   },
   displayName: "ChipBase__BaseChipStyled",
   componentId: "sc-moa6zc-0"
-})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: 12px;\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  \n  /* Use CSS custom properties set by wrapper */\n  background-color: var(--chip-bg-color);\n  color: var(--chip-text-color);\n  font: var(--chip-font);\n  padding: var(--chip-padding);\n  opacity: var(--chip-opacity, 1);\n  cursor: var(--chip-cursor, default);\n  \n  &:hover {\n    opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:active {\n    opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: 12px;\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  \n  /* Use CSS custom properties set by wrapper */\n  background-color: var(--chip-bg-color);\n  color: var(--chip-text-color);\n  font: var(--chip-font);\n  padding: var(--chip-padding);\n  opacity: var(--chip-opacity, 1);\n  cursor: var(--chip-cursor, default);\n  \n  &:hover {\n    opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:active {\n    opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"
+})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: 12px;\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: width ", ";\n  \n  /* Use CSS custom properties set by wrapper */\n  background-color: var(--chip-bg-color);\n  color: var(--chip-text-color);\n  font: var(--chip-font);\n  padding: var(--chip-padding);\n  opacity: var(--chip-opacity, 1);\n  cursor: var(--chip-cursor, default);\n  \n  &:hover {\n    opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:active {\n    opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: 12px;\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: width ", ";\n  \n  /* Use CSS custom properties set by wrapper */\n  background-color: var(--chip-bg-color);\n  color: var(--chip-text-color);\n  font: var(--chip-font);\n  padding: var(--chip-padding);\n  opacity: var(--chip-opacity, 1);\n  cursor: var(--chip-cursor, default);\n  \n  &:hover {\n    opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:active {\n    opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"
 // Icon container for selected indicator or leading icons
 ])), tokens.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
 // Icon container for selected indicator or leading icons
@@ -3040,6 +3113,7 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
 
 exports.ArtCard = ArtCard;
 exports.Avatar = Avatar;
+exports.Badge = Badge;
 exports.BooleanChip = BooleanChip;
 exports.Box = Box;
 exports.Breadcrumbs = Breadcrumbs;