@common-origin/design-system 2.14.0 → 2.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +50 -184
- package/dist/client.esm.js +182 -98
- package/dist/client.esm.js.map +1 -1
- package/dist/client.js +182 -98
- package/dist/client.js.map +1 -1
- package/dist/components/atoms/Badge/Badge.d.ts +2 -0
- package/dist/components/atoms/Chip/shared/utils.d.ts +3 -0
- package/dist/components/atoms/ProgressBar/ProgressBar.d.ts +4 -0
- package/dist/components/layout/GridSystem/GridSystem.d.ts +6 -0
- package/dist/components/molecules/CardLarge/CardLarge.d.ts +3 -1
- package/dist/components/molecules/CardSmall/CardSmall.d.ts +2 -0
- package/dist/components/molecules/Dropdown/Dropdown.d.ts +2 -0
- package/dist/components/molecules/FeatureBlock/FeatureBlock.d.ts +2 -0
- package/dist/components/molecules/PageTitle/PageTitle.d.ts +13 -0
- package/dist/data.esm.js +5 -1
- package/dist/data.esm.js.map +1 -1
- package/dist/data.js +5 -1
- package/dist/data.js.map +1 -1
- package/dist/styles/tokens.json +5 -1
- package/dist/tokens/index.esm.js +5 -1
- package/dist/tokens/index.esm.js.map +1 -1
- package/dist/tokens/index.js +5 -1
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/types/tokens.d.ts +4 -0
- package/dist/types/tokens.d.ts +4 -0
- package/package.json +4 -6
|
@@ -10,6 +10,10 @@ export interface ProgressBarProps {
|
|
|
10
10
|
height?: 'sm' | 'md' | 'lg' | 'xl';
|
|
11
11
|
/** Width size for vertical progress bar (default: md) */
|
|
12
12
|
width?: 'sm' | 'md' | 'lg' | 'xl';
|
|
13
|
+
/** Accessible name, e.g. "Upload progress". Provide this or aria-labelledby; falls back to "Progress" */
|
|
14
|
+
'aria-label'?: string;
|
|
15
|
+
/** ID of the visible element that names the progress bar */
|
|
16
|
+
'aria-labelledby'?: string;
|
|
13
17
|
/** Data attribute for testing */
|
|
14
18
|
'data-testid'?: string;
|
|
15
19
|
}
|
|
@@ -6,6 +6,8 @@ interface GridProps {
|
|
|
6
6
|
gapX?: keyof Tokens['base']['spacing'];
|
|
7
7
|
gapY?: keyof Tokens['base']['spacing'];
|
|
8
8
|
className?: string;
|
|
9
|
+
/** Test identifier for automated testing */
|
|
10
|
+
'data-testid'?: string;
|
|
9
11
|
children: React.ReactNode;
|
|
10
12
|
}
|
|
11
13
|
export declare const Grid: React.FC<GridProps>;
|
|
@@ -21,6 +23,8 @@ interface GridColProps {
|
|
|
21
23
|
orderLg?: number;
|
|
22
24
|
orderXl?: number;
|
|
23
25
|
className?: string;
|
|
26
|
+
/** Test identifier for automated testing */
|
|
27
|
+
'data-testid'?: string;
|
|
24
28
|
children: React.ReactNode;
|
|
25
29
|
}
|
|
26
30
|
export declare const GridCol: React.FC<GridColProps>;
|
|
@@ -46,6 +50,8 @@ interface ResponsiveGridProps {
|
|
|
46
50
|
gapYLg?: keyof Tokens['base']['spacing'];
|
|
47
51
|
gapYXl?: keyof Tokens['base']['spacing'];
|
|
48
52
|
className?: string;
|
|
53
|
+
/** Test identifier for automated testing */
|
|
54
|
+
'data-testid'?: string;
|
|
49
55
|
children: React.ReactNode;
|
|
50
56
|
}
|
|
51
57
|
export declare const ResponsiveGrid: React.FC<ResponsiveGridProps>;
|
|
@@ -6,5 +6,7 @@ export type CardLargeProps = {
|
|
|
6
6
|
picture: string;
|
|
7
7
|
onImageClick?: () => void;
|
|
8
8
|
imageHref?: string;
|
|
9
|
+
/** Test identifier for automated testing */
|
|
10
|
+
'data-testid'?: string;
|
|
9
11
|
};
|
|
10
|
-
export declare const CardLarge: ({ title, excerpt, subtitle, labels, picture, onImageClick, imageHref, }: CardLargeProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export declare const CardLarge: ({ title, excerpt, subtitle, labels, picture, onImageClick, imageHref, "data-testid": dataTestId, }: CardLargeProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -14,6 +14,8 @@ export interface DropdownProps {
|
|
|
14
14
|
label?: string;
|
|
15
15
|
helperText?: string;
|
|
16
16
|
error?: string;
|
|
17
|
+
/** Test identifier for automated testing */
|
|
18
|
+
'data-testid'?: string;
|
|
17
19
|
}
|
|
18
20
|
declare const DropdownOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
|
|
19
21
|
style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
|
|
@@ -4,5 +4,18 @@ interface PageTitleProps {
|
|
|
4
4
|
hasBackButton?: boolean;
|
|
5
5
|
subtitle?: string;
|
|
6
6
|
}
|
|
7
|
+
/**
|
|
8
|
+
* @deprecated PageTitle is a leftover from the personal site (its back button always links to `/music`)
|
|
9
|
+
* and will be removed in the next major version. Compose a page title from `Typography` in a `Stack`:
|
|
10
|
+
*
|
|
11
|
+
* ```tsx
|
|
12
|
+
* <Stack direction="column" gap="md">
|
|
13
|
+
* <Typography variant="h1">{title}</Typography>
|
|
14
|
+
* <Typography variant="caption" color="subdued">{subtitle}</Typography>
|
|
15
|
+
* </Stack>
|
|
16
|
+
* ```
|
|
17
|
+
*
|
|
18
|
+
* For a back link, add an `IconButton` with your own `url` and `aria-label`.
|
|
19
|
+
*/
|
|
7
20
|
export declare const PageTitle: FC<PageTitleProps>;
|
|
8
21
|
export {};
|
package/dist/data.esm.js
CHANGED
|
@@ -426,6 +426,9 @@ var component = {
|
|
|
426
426
|
}
|
|
427
427
|
},
|
|
428
428
|
chip: {
|
|
429
|
+
closeButton: {
|
|
430
|
+
size: "1.25rem"
|
|
431
|
+
},
|
|
429
432
|
"default": {
|
|
430
433
|
backgroundColor: "#e9ecef",
|
|
431
434
|
textColor: "#212529",
|
|
@@ -996,7 +999,8 @@ var semantic = {
|
|
|
996
999
|
page: "#f8f9fa",
|
|
997
1000
|
overlay: "rgba(33, 37, 41, 0.5)",
|
|
998
1001
|
"hover-overlay": "rgba(33, 37, 41, 0.1)",
|
|
999
|
-
"active-overlay": "rgba(33, 37, 41, 0.15)"
|
|
1002
|
+
"active-overlay": "rgba(33, 37, 41, 0.15)",
|
|
1003
|
+
"inverse-overlay": "rgba(255, 255, 255, 0.2)"
|
|
1000
1004
|
},
|
|
1001
1005
|
border: {
|
|
1002
1006
|
"default": "#e9ecef",
|
package/dist/data.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data.esm.js","sources":["../src/types/tokens.ts","../src/types/icons.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\n\n// Re-declared as a const so emitted .d.ts files inline the token shape instead of importing JSON,\n// which consumers can only resolve with `resolveJsonModule`.\nexport const tokens = tokensJson\n\nexport type Tokens = typeof tokens\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Icon type definitions for external consumption\n// This is a self-contained type that doesn't depend on JSON imports\n// to ensure it works correctly in consuming projects\n\nimport iconsJson from '../styles/icons.json'\n\nexport type IconName =\n | 'add'\n | 'addRing'\n | 'arrowDown'\n | 'arrowLeft'\n | 'arrowRight'\n | 'arrowUp'\n | 'back'\n | 'bell'\n | 'cancel'\n | 'caret'\n | 'caretDown'\n | 'caretUp'\n | 'check'\n | 'checkRing'\n | 'close'\n | 'copy'\n | 'creditCard'\n | 'crossCircle'\n | 'directionRight'\n | 'directionUp'\n | 'edit'\n | 'export'\n | 'fileDocSearch'\n | 'filter'\n | 'info'\n | 'kebab'\n | 'lamp'\n | 'lineOut'\n | 'link'\n | 'meatballs'\n | 'menu'\n | 'message'\n | 'move'\n | 'mic'\n | 'order'\n | 'paper'\n | 'pause'\n | 'play'\n | 'playBack'\n | 'refresh'\n | 'remove'\n | 'search'\n | 'star'\n | 'starFilled'\n | 'table'\n | 'trash'\n | 'userBox'\n | 'view'\n | 'viewHide'\n | 'wallet'\n\n/** Semantic category for grouping icons by purpose */\nexport type IconCategory =\n | 'action'\n | 'communication'\n | 'content'\n | 'feedback'\n | 'media'\n | 'navigation'\n | 'object'\n | 'status'\n | 'user'\n\n/** Enriched metadata for each icon entry in icons.json */\nexport interface IconMetadata {\n /** SVG path data */\n path: string\n /** Display name of the icon */\n name: string\n /** What the icon visually depicts */\n description: string\n /** Semantic category for grouping */\n category: IconCategory\n /** Alternative names and search terms */\n aliases: string[]\n /** When and why to use this icon */\n intent: string\n /** Whether the icon is typically decorative (true) or informative (false) */\n decorativeDefault: boolean\n /** Suggested accessible label when the icon conveys meaning */\n ariaLabelDefault: string\n}\n\n/** The full icon registry keyed by IconName */\nexport type IconRegistry = Record<IconName, IconMetadata>\n\n// Typed as IconRegistry so emitted .d.ts files don't import JSON (needs `resolveJsonModule` in consumers).\nexport const iconsData = iconsJson as IconRegistry\n"],"names":["tokens","tokensJson","iconsData","iconsJson"],"mappings":"
|
|
1
|
+
{"version":3,"file":"data.esm.js","sources":["../src/types/tokens.ts","../src/types/icons.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\n\n// Re-declared as a const so emitted .d.ts files inline the token shape instead of importing JSON,\n// which consumers can only resolve with `resolveJsonModule`.\nexport const tokens = tokensJson\n\nexport type Tokens = typeof tokens\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Icon type definitions for external consumption\n// This is a self-contained type that doesn't depend on JSON imports\n// to ensure it works correctly in consuming projects\n\nimport iconsJson from '../styles/icons.json'\n\nexport type IconName =\n | 'add'\n | 'addRing'\n | 'arrowDown'\n | 'arrowLeft'\n | 'arrowRight'\n | 'arrowUp'\n | 'back'\n | 'bell'\n | 'cancel'\n | 'caret'\n | 'caretDown'\n | 'caretUp'\n | 'check'\n | 'checkRing'\n | 'close'\n | 'copy'\n | 'creditCard'\n | 'crossCircle'\n | 'directionRight'\n | 'directionUp'\n | 'edit'\n | 'export'\n | 'fileDocSearch'\n | 'filter'\n | 'info'\n | 'kebab'\n | 'lamp'\n | 'lineOut'\n | 'link'\n | 'meatballs'\n | 'menu'\n | 'message'\n | 'move'\n | 'mic'\n | 'order'\n | 'paper'\n | 'pause'\n | 'play'\n | 'playBack'\n | 'refresh'\n | 'remove'\n | 'search'\n | 'star'\n | 'starFilled'\n | 'table'\n | 'trash'\n | 'userBox'\n | 'view'\n | 'viewHide'\n | 'wallet'\n\n/** Semantic category for grouping icons by purpose */\nexport type IconCategory =\n | 'action'\n | 'communication'\n | 'content'\n | 'feedback'\n | 'media'\n | 'navigation'\n | 'object'\n | 'status'\n | 'user'\n\n/** Enriched metadata for each icon entry in icons.json */\nexport interface IconMetadata {\n /** SVG path data */\n path: string\n /** Display name of the icon */\n name: string\n /** What the icon visually depicts */\n description: string\n /** Semantic category for grouping */\n category: IconCategory\n /** Alternative names and search terms */\n aliases: string[]\n /** When and why to use this icon */\n intent: string\n /** Whether the icon is typically decorative (true) or informative (false) */\n decorativeDefault: boolean\n /** Suggested accessible label when the icon conveys meaning */\n ariaLabelDefault: string\n}\n\n/** The full icon registry keyed by IconName */\nexport type IconRegistry = Record<IconName, IconMetadata>\n\n// Typed as IconRegistry so emitted .d.ts files don't import JSON (needs `resolveJsonModule` in consumers).\nexport const iconsData = iconsJson as IconRegistry\n"],"names":["tokens","tokensJson","iconsData","iconsJson"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AACO,IAAMA,MAAM,GAAGC;;ACJtB;AACA;AACA;AA2FA;AACO,IAAMC,SAAS,GAAGC;;;;"}
|
package/dist/data.js
CHANGED
|
@@ -428,6 +428,9 @@ var component = {
|
|
|
428
428
|
}
|
|
429
429
|
},
|
|
430
430
|
chip: {
|
|
431
|
+
closeButton: {
|
|
432
|
+
size: "1.25rem"
|
|
433
|
+
},
|
|
431
434
|
"default": {
|
|
432
435
|
backgroundColor: "#e9ecef",
|
|
433
436
|
textColor: "#212529",
|
|
@@ -998,7 +1001,8 @@ var semantic = {
|
|
|
998
1001
|
page: "#f8f9fa",
|
|
999
1002
|
overlay: "rgba(33, 37, 41, 0.5)",
|
|
1000
1003
|
"hover-overlay": "rgba(33, 37, 41, 0.1)",
|
|
1001
|
-
"active-overlay": "rgba(33, 37, 41, 0.15)"
|
|
1004
|
+
"active-overlay": "rgba(33, 37, 41, 0.15)",
|
|
1005
|
+
"inverse-overlay": "rgba(255, 255, 255, 0.2)"
|
|
1002
1006
|
},
|
|
1003
1007
|
border: {
|
|
1004
1008
|
"default": "#e9ecef",
|
package/dist/data.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data.js","sources":["../src/types/tokens.ts","../src/types/icons.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\n\n// Re-declared as a const so emitted .d.ts files inline the token shape instead of importing JSON,\n// which consumers can only resolve with `resolveJsonModule`.\nexport const tokens = tokensJson\n\nexport type Tokens = typeof tokens\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Icon type definitions for external consumption\n// This is a self-contained type that doesn't depend on JSON imports\n// to ensure it works correctly in consuming projects\n\nimport iconsJson from '../styles/icons.json'\n\nexport type IconName =\n | 'add'\n | 'addRing'\n | 'arrowDown'\n | 'arrowLeft'\n | 'arrowRight'\n | 'arrowUp'\n | 'back'\n | 'bell'\n | 'cancel'\n | 'caret'\n | 'caretDown'\n | 'caretUp'\n | 'check'\n | 'checkRing'\n | 'close'\n | 'copy'\n | 'creditCard'\n | 'crossCircle'\n | 'directionRight'\n | 'directionUp'\n | 'edit'\n | 'export'\n | 'fileDocSearch'\n | 'filter'\n | 'info'\n | 'kebab'\n | 'lamp'\n | 'lineOut'\n | 'link'\n | 'meatballs'\n | 'menu'\n | 'message'\n | 'move'\n | 'mic'\n | 'order'\n | 'paper'\n | 'pause'\n | 'play'\n | 'playBack'\n | 'refresh'\n | 'remove'\n | 'search'\n | 'star'\n | 'starFilled'\n | 'table'\n | 'trash'\n | 'userBox'\n | 'view'\n | 'viewHide'\n | 'wallet'\n\n/** Semantic category for grouping icons by purpose */\nexport type IconCategory =\n | 'action'\n | 'communication'\n | 'content'\n | 'feedback'\n | 'media'\n | 'navigation'\n | 'object'\n | 'status'\n | 'user'\n\n/** Enriched metadata for each icon entry in icons.json */\nexport interface IconMetadata {\n /** SVG path data */\n path: string\n /** Display name of the icon */\n name: string\n /** What the icon visually depicts */\n description: string\n /** Semantic category for grouping */\n category: IconCategory\n /** Alternative names and search terms */\n aliases: string[]\n /** When and why to use this icon */\n intent: string\n /** Whether the icon is typically decorative (true) or informative (false) */\n decorativeDefault: boolean\n /** Suggested accessible label when the icon conveys meaning */\n ariaLabelDefault: string\n}\n\n/** The full icon registry keyed by IconName */\nexport type IconRegistry = Record<IconName, IconMetadata>\n\n// Typed as IconRegistry so emitted .d.ts files don't import JSON (needs `resolveJsonModule` in consumers).\nexport const iconsData = iconsJson as IconRegistry\n"],"names":["tokens","tokensJson","iconsData","iconsJson"],"mappings":"
|
|
1
|
+
{"version":3,"file":"data.js","sources":["../src/types/tokens.ts","../src/types/icons.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\n\n// Re-declared as a const so emitted .d.ts files inline the token shape instead of importing JSON,\n// which consumers can only resolve with `resolveJsonModule`.\nexport const tokens = tokensJson\n\nexport type Tokens = typeof tokens\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Icon type definitions for external consumption\n// This is a self-contained type that doesn't depend on JSON imports\n// to ensure it works correctly in consuming projects\n\nimport iconsJson from '../styles/icons.json'\n\nexport type IconName =\n | 'add'\n | 'addRing'\n | 'arrowDown'\n | 'arrowLeft'\n | 'arrowRight'\n | 'arrowUp'\n | 'back'\n | 'bell'\n | 'cancel'\n | 'caret'\n | 'caretDown'\n | 'caretUp'\n | 'check'\n | 'checkRing'\n | 'close'\n | 'copy'\n | 'creditCard'\n | 'crossCircle'\n | 'directionRight'\n | 'directionUp'\n | 'edit'\n | 'export'\n | 'fileDocSearch'\n | 'filter'\n | 'info'\n | 'kebab'\n | 'lamp'\n | 'lineOut'\n | 'link'\n | 'meatballs'\n | 'menu'\n | 'message'\n | 'move'\n | 'mic'\n | 'order'\n | 'paper'\n | 'pause'\n | 'play'\n | 'playBack'\n | 'refresh'\n | 'remove'\n | 'search'\n | 'star'\n | 'starFilled'\n | 'table'\n | 'trash'\n | 'userBox'\n | 'view'\n | 'viewHide'\n | 'wallet'\n\n/** Semantic category for grouping icons by purpose */\nexport type IconCategory =\n | 'action'\n | 'communication'\n | 'content'\n | 'feedback'\n | 'media'\n | 'navigation'\n | 'object'\n | 'status'\n | 'user'\n\n/** Enriched metadata for each icon entry in icons.json */\nexport interface IconMetadata {\n /** SVG path data */\n path: string\n /** Display name of the icon */\n name: string\n /** What the icon visually depicts */\n description: string\n /** Semantic category for grouping */\n category: IconCategory\n /** Alternative names and search terms */\n aliases: string[]\n /** When and why to use this icon */\n intent: string\n /** Whether the icon is typically decorative (true) or informative (false) */\n decorativeDefault: boolean\n /** Suggested accessible label when the icon conveys meaning */\n ariaLabelDefault: string\n}\n\n/** The full icon registry keyed by IconName */\nexport type IconRegistry = Record<IconName, IconMetadata>\n\n// Typed as IconRegistry so emitted .d.ts files don't import JSON (needs `resolveJsonModule` in consumers).\nexport const iconsData = iconsJson as IconRegistry\n"],"names":["tokens","tokensJson","iconsData","iconsJson"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AACO,IAAMA,MAAM,GAAGC;;ACJtB;AACA;AACA;AA2FA;AACO,IAAMC,SAAS,GAAGC;;;;;;;"}
|
package/dist/styles/tokens.json
CHANGED
|
@@ -427,6 +427,9 @@
|
|
|
427
427
|
}
|
|
428
428
|
},
|
|
429
429
|
"chip": {
|
|
430
|
+
"closeButton": {
|
|
431
|
+
"size": "1.25rem"
|
|
432
|
+
},
|
|
430
433
|
"default": {
|
|
431
434
|
"backgroundColor": "#e9ecef",
|
|
432
435
|
"textColor": "#212529",
|
|
@@ -997,7 +1000,8 @@
|
|
|
997
1000
|
"page": "#f8f9fa",
|
|
998
1001
|
"overlay": "rgba(33, 37, 41, 0.5)",
|
|
999
1002
|
"hover-overlay": "rgba(33, 37, 41, 0.1)",
|
|
1000
|
-
"active-overlay": "rgba(33, 37, 41, 0.15)"
|
|
1003
|
+
"active-overlay": "rgba(33, 37, 41, 0.15)",
|
|
1004
|
+
"inverse-overlay": "rgba(255, 255, 255, 0.2)"
|
|
1001
1005
|
},
|
|
1002
1006
|
"border": {
|
|
1003
1007
|
"default": "#e9ecef",
|
package/dist/tokens/index.esm.js
CHANGED
|
@@ -426,6 +426,9 @@ var component = {
|
|
|
426
426
|
}
|
|
427
427
|
},
|
|
428
428
|
chip: {
|
|
429
|
+
closeButton: {
|
|
430
|
+
size: "1.25rem"
|
|
431
|
+
},
|
|
429
432
|
"default": {
|
|
430
433
|
backgroundColor: "#e9ecef",
|
|
431
434
|
textColor: "#212529",
|
|
@@ -996,7 +999,8 @@ var semantic = {
|
|
|
996
999
|
page: "#f8f9fa",
|
|
997
1000
|
overlay: "rgba(33, 37, 41, 0.5)",
|
|
998
1001
|
"hover-overlay": "rgba(33, 37, 41, 0.1)",
|
|
999
|
-
"active-overlay": "rgba(33, 37, 41, 0.15)"
|
|
1002
|
+
"active-overlay": "rgba(33, 37, 41, 0.15)",
|
|
1003
|
+
"inverse-overlay": "rgba(255, 255, 255, 0.2)"
|
|
1000
1004
|
},
|
|
1001
1005
|
border: {
|
|
1002
1006
|
"default": "#e9ecef",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../../src/types/tokens.ts","../../src/tokens.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\n\n// Re-declared as a const so emitted .d.ts files inline the token shape instead of importing JSON,\n// which consumers can only resolve with `resolveJsonModule`.\nexport const tokens = tokensJson\n\nexport type Tokens = typeof tokens\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Tokens-only export for standalone usage\nimport { tokens } from './types/tokens'\n\nexport { tokens }\nexport default tokens\n\nexport type {\n Tokens,\n TokensBase,\n TokensSemantic,\n TokensComponent\n} from './types/tokens'\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../../src/types/tokens.ts","../../src/tokens.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\n\n// Re-declared as a const so emitted .d.ts files inline the token shape instead of importing JSON,\n// which consumers can only resolve with `resolveJsonModule`.\nexport const tokens = tokensJson\n\nexport type Tokens = typeof tokens\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Tokens-only export for standalone usage\nimport { tokens } from './types/tokens'\n\nexport { tokens }\nexport default tokens\n\nexport type {\n Tokens,\n TokensBase,\n TokensSemantic,\n TokensComponent\n} from './types/tokens'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AACO,IAAM,MAAM,GAAG;;ACJtB;;;;"}
|
package/dist/tokens/index.js
CHANGED
|
@@ -430,6 +430,9 @@ var component = {
|
|
|
430
430
|
}
|
|
431
431
|
},
|
|
432
432
|
chip: {
|
|
433
|
+
closeButton: {
|
|
434
|
+
size: "1.25rem"
|
|
435
|
+
},
|
|
433
436
|
"default": {
|
|
434
437
|
backgroundColor: "#e9ecef",
|
|
435
438
|
textColor: "#212529",
|
|
@@ -1000,7 +1003,8 @@ var semantic = {
|
|
|
1000
1003
|
page: "#f8f9fa",
|
|
1001
1004
|
overlay: "rgba(33, 37, 41, 0.5)",
|
|
1002
1005
|
"hover-overlay": "rgba(33, 37, 41, 0.1)",
|
|
1003
|
-
"active-overlay": "rgba(33, 37, 41, 0.15)"
|
|
1006
|
+
"active-overlay": "rgba(33, 37, 41, 0.15)",
|
|
1007
|
+
"inverse-overlay": "rgba(255, 255, 255, 0.2)"
|
|
1004
1008
|
},
|
|
1005
1009
|
border: {
|
|
1006
1010
|
"default": "#e9ecef",
|
package/dist/tokens/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/types/tokens.ts","../../src/tokens.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\n\n// Re-declared as a const so emitted .d.ts files inline the token shape instead of importing JSON,\n// which consumers can only resolve with `resolveJsonModule`.\nexport const tokens = tokensJson\n\nexport type Tokens = typeof tokens\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Tokens-only export for standalone usage\nimport { tokens } from './types/tokens'\n\nexport { tokens }\nexport default tokens\n\nexport type {\n Tokens,\n TokensBase,\n TokensSemantic,\n TokensComponent\n} from './types/tokens'\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/types/tokens.ts","../../src/tokens.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\n\n// Re-declared as a const so emitted .d.ts files inline the token shape instead of importing JSON,\n// which consumers can only resolve with `resolveJsonModule`.\nexport const tokens = tokensJson\n\nexport type Tokens = typeof tokens\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Tokens-only export for standalone usage\nimport { tokens } from './types/tokens'\n\nexport { tokens }\nexport default tokens\n\nexport type {\n Tokens,\n TokensBase,\n TokensSemantic,\n TokensComponent\n} from './types/tokens'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AACO,IAAM,MAAM,GAAG;;ACJtB;;;;;"}
|
|
@@ -427,6 +427,9 @@ export declare const tokens: {
|
|
|
427
427
|
};
|
|
428
428
|
};
|
|
429
429
|
chip: {
|
|
430
|
+
closeButton: {
|
|
431
|
+
size: string;
|
|
432
|
+
};
|
|
430
433
|
default: {
|
|
431
434
|
backgroundColor: string;
|
|
432
435
|
textColor: string;
|
|
@@ -998,6 +1001,7 @@ export declare const tokens: {
|
|
|
998
1001
|
overlay: string;
|
|
999
1002
|
"hover-overlay": string;
|
|
1000
1003
|
"active-overlay": string;
|
|
1004
|
+
"inverse-overlay": string;
|
|
1001
1005
|
};
|
|
1002
1006
|
border: {
|
|
1003
1007
|
default: string;
|
package/dist/types/tokens.d.ts
CHANGED
|
@@ -427,6 +427,9 @@ export declare const tokens: {
|
|
|
427
427
|
};
|
|
428
428
|
};
|
|
429
429
|
chip: {
|
|
430
|
+
closeButton: {
|
|
431
|
+
size: string;
|
|
432
|
+
};
|
|
430
433
|
default: {
|
|
431
434
|
backgroundColor: string;
|
|
432
435
|
textColor: string;
|
|
@@ -998,6 +1001,7 @@ export declare const tokens: {
|
|
|
998
1001
|
overlay: string;
|
|
999
1002
|
"hover-overlay": string;
|
|
1000
1003
|
"active-overlay": string;
|
|
1004
|
+
"inverse-overlay": string;
|
|
1001
1005
|
};
|
|
1002
1006
|
border: {
|
|
1003
1007
|
default: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@common-origin/design-system",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.15.0",
|
|
4
4
|
"description": "Common Origin Design System - Framework-agnostic atomic design components with comprehensive WCAG 2.2 AA testing",
|
|
5
5
|
"private": false,
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -47,14 +47,14 @@
|
|
|
47
47
|
"test:watch": "jest --watch",
|
|
48
48
|
"test:coverage": "jest --coverage",
|
|
49
49
|
"typecheck": "tsc --noEmit",
|
|
50
|
-
"lint": "eslint . --max-warnings
|
|
51
|
-
"docs:generate": "node lib/docgen/generate.js",
|
|
50
|
+
"lint": "eslint . --max-warnings 195",
|
|
52
51
|
"docs:dev": "npm run build:tokens && npm run dev",
|
|
53
52
|
"verify:types": "node scripts/verify-types.cjs",
|
|
54
53
|
"verify:no-nextjs": "node scripts/verify-no-nextjs-deps.cjs",
|
|
55
54
|
"verify:consumer": "node scripts/verify-consumer-types.cjs",
|
|
56
55
|
"verify:directives": "node scripts/verify-directives.cjs",
|
|
57
56
|
"verify:load": "node scripts/verify-load.cjs",
|
|
57
|
+
"verify:docs": "node scripts/verify-docs.cjs",
|
|
58
58
|
"verify:package": "npm run verify:types && npm run verify:no-nextjs && npm run verify:directives && npm run verify:load && npm run verify:consumer && publint && attw --pack . --ignore-rules unexpected-module-syntax",
|
|
59
59
|
"prepublishOnly": "npm run build:tokens && npm run build:package && npm run verify:package",
|
|
60
60
|
"version": "auto-changelog -p && git add CHANGELOG.md",
|
|
@@ -68,7 +68,6 @@
|
|
|
68
68
|
"styled-components": "^6.0.0"
|
|
69
69
|
},
|
|
70
70
|
"dependencies": {
|
|
71
|
-
"@babel/runtime": "^7.0.0",
|
|
72
71
|
"date-fns": "^4.1.0"
|
|
73
72
|
},
|
|
74
73
|
"devDependencies": {
|
|
@@ -88,7 +87,7 @@
|
|
|
88
87
|
"@testing-library/user-event": "^14.6.1",
|
|
89
88
|
"@types/jest": "^30.0.0",
|
|
90
89
|
"@types/jest-axe": "^3.5.9",
|
|
91
|
-
"@types/node": "^
|
|
90
|
+
"@types/node": "^22.20.4",
|
|
92
91
|
"@types/react": "^19.2.2",
|
|
93
92
|
"@types/react-dom": "^19.2.2",
|
|
94
93
|
"@vercel/analytics": "^2.0.1",
|
|
@@ -114,7 +113,6 @@
|
|
|
114
113
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
115
114
|
"style-dictionary": "^3.8.0",
|
|
116
115
|
"styled-components": "^6.1.1",
|
|
117
|
-
"ts-morph": "^27.0.2",
|
|
118
116
|
"typescript": "^5.7.3",
|
|
119
117
|
"typescript-eslint": "^8.70.1"
|
|
120
118
|
},
|