@common-origin/design-system 1.16.1 → 2.0.0

package/README.md

@@ -1,10 +1,49 @@
 # Common Origin Design System
 
-A production-ready design system built with atomic design principles, design tokens, and WCAG 2.2 AA accessibility compliance. This package provides reusable React components and design tokens for building consistent user interfaces.
+A production-ready, **framework-agnostic** design system built with atomic design principles, design tokens, and WCAG 2.2 AA accessibility compliance. This package provides reusable React components and design tokens for building consistent user interfaces.
+
+## ⚠️ Version 2.0 Breaking Changes
+
+**Version 2.0.0** removes Next.js dependencies, making the design system work in **any React application** (Next.js, Create React App, Vite, etc.).
+
+If you're upgrading from v1.x, see **[MIGRATION-V2.md](./MIGRATION-V2.md)** for the complete migration guide.
+
+**Quick summary:** Components like `Button`, `Breadcrumbs`, and `CardSmall` now accept an optional `linkComponent` prop. Pass your framework's Link component (e.g., Next.js Link, React Router Link) for client-side navigation, or omit it to use standard HTML links.
 
 ## 🚀 Getting Started
 
+### Installation
+
+```bash
+npm install @common-origin/design-system styled-components
+```
+
+### Usage
+
+```tsx
+import { Button, Typography, Stack } from '@common-origin/design-system'
+
+// For Next.js apps, pass Link component for client-side routing
+import Link from 'next/link'
+
+function App() {
+  return (
+    <Stack direction="column" gap="md">
+      <Typography variant="h1">Welcome</Typography>
+      <Button 
+        purpose="link" 
+        url="/about" 
+        linkComponent={Link}
+      >
+        Learn More
+      </Button>
+    </Stack>
+  )
+}
+```
+
 ### Development
+
 ```bash
 # Install dependencies
 npm install

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

@@ -10,6 +10,12 @@ export interface BaseButtonProps {
     iconName?: IconName;
     id?: string;
     'data-testid'?: string;
+    /**
+     * Custom link component (e.g., Next.js Link, React Router Link)
+     * Receives href, children, and other props
+     * @example linkComponent={NextLink} or linkComponent={ReactRouterLink}
+     */
+    linkComponent?: React.ComponentType<any>;
 }
 export interface ButtonProps extends BaseButtonProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseButtonProps> {
     purpose?: 'button';

package/dist/components/molecules/Breadcrumbs/Breadcrumbs.d.ts

@@ -6,6 +6,11 @@ interface Breadcrumb {
 interface BreadcrumbsProps {
     breadcrumbs: Breadcrumb[];
     'data-testid'?: string;
+    /**
+     * Custom link component (e.g., Next.js Link)
+     * @example linkComponent={NextLink}
+     */
+    linkComponent?: React.ComponentType<any>;
 }
 export declare const Breadcrumbs: React.FC<BreadcrumbsProps>;
 export {};

package/dist/components/molecules/CardSmall/CardSmall.d.ts

@@ -5,5 +5,10 @@ export type CardSmallProps = {
     subtitle?: string;
     meta?: string;
     href?: string;
+    /**
+     * Custom link component (e.g., Next.js Link)
+     * @example linkComponent={NextLink}
+     */
+    linkComponent?: React.ComponentType<any>;
 };
 export declare const CardSmall: React.FC<CardSmallProps>;

package/dist/index.esm.js

@@ -1,6 +1,5 @@
 import React, { useState, forwardRef, useId, useRef, useEffect, useCallback } from 'react';
 import styled, { keyframes, css } from 'styled-components';
-import Link from 'next/link';
 import { parseISO, format } from 'date-fns';
 
 function _extends() {
@@ -745,7 +744,7 @@ var semantic$a = {
 		h1: "700 3rem/3rem 'Inter', sans-serif",
 		h2: "700 2rem/2.5rem 'Inter', sans-serif",
 		h3: "700 1.75rem/2.25rem 'Inter', sans-serif",
-		h4: "500 1.5rem/2rem 'Inter', sans-serif",
+		h4: "700 1.5rem/2rem 'Inter', sans-serif",
 		h5: "500 1.25rem/1.75rem 'Inter', sans-serif",
 		h6: "500 1.125rem/1.5rem 'Inter', sans-serif",
 		subtitle: "500 1rem/1.5rem 'Inter', sans-serif",
@@ -804,7 +803,7 @@ var AvatarInitials = styled.span.withConfig({
   },
   displayName: "Avatar__AvatarInitials",
   componentId: "sc-ezn4ax-2"
-})(templateObject_3$i || (templateObject_3$i = __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$h || (templateObject_3$h = __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
 ])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
   var $size = _a.$size;
@@ -867,7 +866,7 @@ var Avatar = function Avatar(_a) {
     "aria-hidden": "true"
   }, initials));
 };
-var templateObject_1$y, templateObject_2$l, templateObject_3$i;
+var templateObject_1$y, templateObject_2$l, templateObject_3$h;
 
 React.createElement;
 var _a$5 = tokensData.semantic,
@@ -1018,7 +1017,7 @@ var BadgeIndicator = styled.span.withConfig({
   },
   displayName: "Badge__BadgeIndicator",
   componentId: "sc-tjz4pp-1"
-})(templateObject_3$h || (templateObject_3$h = __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  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  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) {
+})(templateObject_3$g || (templateObject_3$g = __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  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  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' : '16px';
@@ -1074,7 +1073,7 @@ var Badge = function Badge(_a) {
     color: "inverse"
   }, displayCount), /*#__PURE__*/React.createElement(ScreenReaderOnly, null, label)));
 };
-var templateObject_1$w, templateObject_2$k, templateObject_3$h, templateObject_4$e;
+var templateObject_1$w, templateObject_2$k, templateObject_3$g, templateObject_4$e;
 
 React.createElement;
 var StyledBox = styled.div.withConfig({
@@ -1090,7 +1089,7 @@ var StyledBox = styled.div.withConfig({
 }, function (props) {
   return props.$flexDirection && css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
 }, function (props) {
-  return props.$justifyContent && css(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
+  return props.$justifyContent && css(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
 }, function (props) {
   return props.$alignItems && css(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
 }, function (props) {
@@ -1276,7 +1275,7 @@ var BoxTransform = function BoxTransform(props) {
   }, rest), children);
 };
 var Box = BoxTransform;
-var templateObject_1$v, templateObject_2$j, templateObject_3$g, templateObject_4$d, templateObject_5$a, templateObject_6$9, templateObject_7$7, templateObject_8$3, templateObject_9$2, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43;
+var templateObject_1$v, templateObject_2$j, templateObject_3$f, templateObject_4$d, templateObject_5$a, templateObject_6$9, templateObject_7$7, templateObject_8$3, templateObject_9$2, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43;
 
 var add = {
 	path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
@@ -1606,16 +1605,6 @@ var StyledLink = styled.a.withConfig({
   displayName: "Button__StyledLink",
   componentId: "sc-1eiuum9-1"
 })(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"
-// Styled Next.js Link component (modern API without legacyBehavior)
-])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
-// Styled Next.js Link component (modern API without legacyBehavior)
-var StyledNextLink = styled(Link).withConfig({
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return !prop.startsWith('$');
-  },
-  displayName: "Button__StyledNextLink",
-  componentId: "sc-1eiuum9-2"
-})(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"
 // Helper function to get icon size based on button size
 ])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
 // Helper function to get icon size based on button size
@@ -1652,18 +1641,21 @@ var Button = function Button(_a) {
     children = _a.children,
     target = _a.target,
     iconName = _a.iconName,
+    LinkComponent = _a.linkComponent,
     dataTestId = _a["data-testid"],
-    rest = __rest(_a, ["variant", "size", "url", "purpose", "children", "target", "iconName", 'data-testid']);
-  // For internal links, use Next.js Link (modern API without legacyBehavior)
-  if (purpose === 'link' && url && !url.startsWith('http') && !target) {
-    return /*#__PURE__*/React.createElement(StyledNextLink, {
-      href: url,
+    rest = __rest(_a, ["variant", "size", "url", "purpose", "children", "target", "iconName", "linkComponent", 'data-testid']);
+  // For links with custom link component (e.g., Next.js Link, React Router Link)
+  if (purpose === 'link' && url && LinkComponent) {
+    return /*#__PURE__*/React.createElement(LinkComponent, {
+      href: url
+    }, /*#__PURE__*/React.createElement(StyledLink, {
+      as: "span",
       $variant: variant,
       $size: size,
       "data-testid": dataTestId
-    }, renderButtonContent(children, iconName, size));
+    }, renderButtonContent(children, iconName, size)));
   }
-  // For external links or links with target
+  // For standard links (external or without custom component)
   if (purpose === 'link' && url) {
     var linkProps = rest;
     return /*#__PURE__*/React.createElement(StyledLink, _extends({
@@ -1704,7 +1696,7 @@ var Button = function Button(_a) {
     "data-testid": dataTestId
   }, buttonProps), renderButtonContent(children, iconName, size));
 };
-var templateObject_1$t, templateObject_2$i, templateObject_3$f;
+var templateObject_1$t, templateObject_2$i;
 
 var chip = tokensData.component.chip;
 // Helper function to get variant styles as objects for CSS custom properties
@@ -2735,7 +2727,8 @@ var isInternalUrl = function isInternalUrl(url) {
   return url.startsWith('/') && !url.startsWith('http');
 };
 var Breadcrumbs = function Breadcrumbs(_a) {
-  var breadcrumbs = _a.breadcrumbs;
+  var breadcrumbs = _a.breadcrumbs,
+    LinkComponent = _a.linkComponent;
   return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(BreadcrumbNavStyled, {
     "aria-label": "breadcrumb"
   }, /*#__PURE__*/React.createElement("ol", null, breadcrumbs.map(function (breadcrumb, index) {
@@ -2743,15 +2736,16 @@ var Breadcrumbs = function Breadcrumbs(_a) {
       key: index
     }, index === breadcrumbs.length - 1 ? /*#__PURE__*/React.createElement(Typography, {
       variant: "caption"
-    }, breadcrumb.label) : isInternalUrl(breadcrumb.url) ? /*#__PURE__*/React.createElement(Link, {
+    }, breadcrumb.label) : LinkComponent && isInternalUrl(breadcrumb.url) ? /*#__PURE__*/React.createElement(LinkComponent, {
       href: breadcrumb.url
     }, /*#__PURE__*/React.createElement(Typography, {
       variant: "caption"
-    }, breadcrumb.label)) : /*#__PURE__*/React.createElement("a", {
-      href: breadcrumb.url,
+    }, breadcrumb.label)) : /*#__PURE__*/React.createElement("a", _extends({
+      href: breadcrumb.url
+    }, !isInternalUrl(breadcrumb.url) && {
       target: "_blank",
       rel: "noopener noreferrer"
-    }, /*#__PURE__*/React.createElement(Typography, {
+    }), /*#__PURE__*/React.createElement(Typography, {
       variant: "caption"
     }, breadcrumb.label)));
   }))));
@@ -2768,14 +2762,12 @@ var CardSmall = function CardSmall(_a) {
     picture = _a.picture,
     subtitle = _a.subtitle,
     meta = _a.meta,
-    href = _a.href;
+    href = _a.href,
+    LinkComponent = _a.linkComponent;
   if (!picture || !meta) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(CardSmallStyled, null, /*#__PURE__*/React.createElement(Link, {
-    href: href || '#',
-    "aria-label": title
-  }, /*#__PURE__*/React.createElement(Stack, {
+  var content = /*#__PURE__*/React.createElement(Stack, {
     direction: "column",
     gap: "sm"
   }, /*#__PURE__*/React.createElement(Picture, {
@@ -2797,7 +2789,14 @@ var CardSmall = function CardSmall(_a) {
   }, subtitle), meta && /*#__PURE__*/React.createElement(Typography, {
     variant: "label",
     color: "subdued"
-  }, meta))))));
+  }, meta))));
+  return /*#__PURE__*/React.createElement(CardSmallStyled, null, LinkComponent && href ? /*#__PURE__*/React.createElement(LinkComponent, {
+    href: href,
+    "aria-label": title
+  }, content) : /*#__PURE__*/React.createElement("a", {
+    href: href || '#',
+    "aria-label": title
+  }, content));
 };
 var templateObject_1$h;