@common-origin/design-system 1.7.0 → 1.8.1

package/dist/components/atoms/Badge/Badge.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface BadgeProps {
+    /** Content to wrap with the badge */
+    children: React.ReactNode;
+    /** Number to display in the badge. If 0, badge is hidden */
+    count?: number;
+    /** Maximum number to display before showing "99+" */
+    max?: number;
+    /** Visual variant of the badge */
+    variant?: 'default' | 'primary' | 'error' | 'warning' | 'success';
+    /** Show only a dot indicator instead of count */
+    dot?: boolean;
+    /** Screen reader label for the badge */
+    'aria-label'?: string;
+    /** Additional CSS class */
+    className?: string;
+}
+export declare const Badge: React.FC<BadgeProps>;

package/dist/components/atoms/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps } from './Badge';

package/dist/components/atoms/SectionSeparator/SectionSeparator.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export interface SectionSeparatorProps {
+    /** Variant style of the separator */
+    variant?: 'default' | 'strong' | 'minimal';
+    /** Size variation affecting spacing */
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    /** Data test id for testing */
+    'data-testid'?: string;
+}
+/**
+ * SectionSeparator is an atomic component that provides visual separation between content sections.
+ *
+ * Features:
+ * - Multiple variants (default, strong, minimal)
+ * - Size variations for different spacing needs
+ * - Semantic token usage for consistent styling
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <SectionSeparator />
+ * <SectionSeparator variant="strong" size="xlarge" />
+ * <SectionSeparator variant="minimal" />
+ * ```
+ */
+export declare const SectionSeparator: React.FC<SectionSeparatorProps>;

package/dist/components/atoms/SectionSeparator/index.d.ts

@@ -0,0 +1 @@
+export * from './SectionSeparator';

package/dist/components/atoms/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Avatar';
+export * from './Badge';
 export * from './Box';
 export * from './Button';
 export * from './Chip';

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import styled, { css } from 'styled-components';
+import styled, { keyframes, css } from 'styled-components';
 import Link from 'next/link';
 import { parseISO, format } from 'date-fns';
 import Image from 'next/image';
@@ -745,7 +745,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) {
@@ -758,14 +758,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;
@@ -828,7 +828,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 = 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({
@@ -1403,7 +1476,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
@@ -3036,5 +3109,5 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35;
 
-export { ArtCard, Avatar, BooleanChip, Box, Breadcrumbs, Button, Chip, ChipGroup, CodeBlock, Container, DateFormatter, DesignCard, Divider, Dropdown, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, PageTitle, Picture, ProgressBar, ReleaseCard, ResponsiveGrid, Stack, Typography, iconsData, tokens };
+export { ArtCard, Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, Chip, ChipGroup, CodeBlock, Container, DateFormatter, DesignCard, Divider, Dropdown, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, PageTitle, Picture, ProgressBar, ReleaseCard, ResponsiveGrid, Stack, Typography, iconsData, tokens };
 //# sourceMappingURL=index.esm.js.map