@common-origin/design-system 2.12.1 → 2.13.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.
Files changed (42) hide show
  1. package/LICENSE +21 -0
  2. package/dist/client.esm.js +7327 -0
  3. package/dist/client.esm.js.map +1 -0
  4. package/dist/client.js +7385 -0
  5. package/dist/client.js.map +1 -0
  6. package/dist/components/atoms/Box/Box.d.ts +26 -26
  7. package/dist/components/atoms/Chip/shared/ChipBase.d.ts +9 -3
  8. package/dist/components/layout/GridSystem/GridSystem.d.ts +19 -19
  9. package/dist/components/molecules/Checkbox/SelectableInputBase.d.ts +12 -4
  10. package/dist/components/molecules/Dropdown/Dropdown.d.ts +3 -1
  11. package/dist/components/molecules/TextField/InputBase.d.ts +6 -2
  12. package/dist/data.esm.js +1693 -0
  13. package/dist/data.esm.js.map +1 -0
  14. package/dist/data.js +1698 -0
  15. package/dist/data.js.map +1 -0
  16. package/dist/index.d.ts +1 -858
  17. package/dist/index.esm.js +7 -8980
  18. package/dist/index.esm.js.map +1 -1
  19. package/dist/index.js +64 -9033
  20. package/dist/index.js.map +1 -1
  21. package/dist/lib/styleUtils.d.ts +0 -3
  22. package/dist/styles/tokens.json +30 -2
  23. package/dist/tokens/index.esm.js +35 -4
  24. package/dist/tokens/index.esm.js.map +1 -1
  25. package/dist/tokens/index.js +35 -4
  26. package/dist/tokens/index.js.map +1 -1
  27. package/dist/tokens/tokens.d.ts +4 -860
  28. package/dist/tokens/types/tokens.d.ts +889 -0
  29. package/dist/types/icons.d.ts +1 -1
  30. package/dist/types/tokens.d.ts +889 -0
  31. package/package.json +36 -16
  32. package/dist/lib/errorReporting.d.ts +0 -24
  33. package/dist/page-components/ErrorBoundaries.d.ts +0 -16
  34. package/dist/page-components/ErrorBoundary.d.ts +0 -20
  35. package/dist/page-components/Footer/Footer.d.ts +0 -8
  36. package/dist/page-components/Footer/index.d.ts +0 -1
  37. package/dist/page-components/HeroBanner/HeroBanner.d.ts +0 -10
  38. package/dist/page-components/HeroBanner/index.d.ts +0 -1
  39. package/dist/page-components/Meta.d.ts +0 -2
  40. package/dist/page-components/Navigation.d.ts +0 -2
  41. package/dist/page-components/PageLayout.d.ts +0 -7
  42. package/dist/page-components/index.d.ts +0 -8
package/dist/components/atoms/Box/Box.d.ts CHANGED
@@ -1,26 +1,26 @@
1
1
  import React from 'react';
2
- import tokens from '../../../styles/tokens.json';
2
+ import type { Tokens } from '../../../types/tokens';
3
3
  export interface BoxProps {
4
4
  display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'none';
5
5
  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
6
6
  justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
7
7
  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
8
8
  flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
9
- gap?: keyof typeof tokens.semantic.spacing.layout;
10
- m?: keyof typeof tokens.semantic.spacing.layout;
11
- mt?: keyof typeof tokens.semantic.spacing.layout;
12
- mr?: keyof typeof tokens.semantic.spacing.layout;
13
- mb?: keyof typeof tokens.semantic.spacing.layout;
14
- ml?: keyof typeof tokens.semantic.spacing.layout;
15
- mx?: keyof typeof tokens.semantic.spacing.layout;
16
- my?: keyof typeof tokens.semantic.spacing.layout;
17
- p?: keyof typeof tokens.semantic.spacing.layout;
18
- pt?: keyof typeof tokens.semantic.spacing.layout;
19
- pr?: keyof typeof tokens.semantic.spacing.layout;
20
- pb?: keyof typeof tokens.semantic.spacing.layout;
21
- pl?: keyof typeof tokens.semantic.spacing.layout;
22
- px?: keyof typeof tokens.semantic.spacing.layout;
23
- py?: keyof typeof tokens.semantic.spacing.layout;
9
+ gap?: keyof Tokens['semantic']['spacing']['layout'];
10
+ m?: keyof Tokens['semantic']['spacing']['layout'];
11
+ mt?: keyof Tokens['semantic']['spacing']['layout'];
12
+ mr?: keyof Tokens['semantic']['spacing']['layout'];
13
+ mb?: keyof Tokens['semantic']['spacing']['layout'];
14
+ ml?: keyof Tokens['semantic']['spacing']['layout'];
15
+ mx?: keyof Tokens['semantic']['spacing']['layout'];
16
+ my?: keyof Tokens['semantic']['spacing']['layout'];
17
+ p?: keyof Tokens['semantic']['spacing']['layout'];
18
+ pt?: keyof Tokens['semantic']['spacing']['layout'];
19
+ pr?: keyof Tokens['semantic']['spacing']['layout'];
20
+ pb?: keyof Tokens['semantic']['spacing']['layout'];
21
+ pl?: keyof Tokens['semantic']['spacing']['layout'];
22
+ px?: keyof Tokens['semantic']['spacing']['layout'];
23
+ py?: keyof Tokens['semantic']['spacing']['layout'];
24
24
  width?: string;
25
25
  height?: string;
26
26
  maxWidth?: string;
@@ -32,18 +32,18 @@ export interface BoxProps {
32
32
  right?: string;
33
33
  bottom?: string;
34
34
  left?: string;
35
- borderRadius?: keyof typeof tokens.semantic.border.radius;
36
- border?: keyof typeof tokens.semantic.color.border;
37
- borderTop?: keyof typeof tokens.semantic.color.border;
38
- borderRight?: keyof typeof tokens.semantic.color.border;
39
- borderBottom?: keyof typeof tokens.semantic.color.border;
40
- borderLeft?: keyof typeof tokens.semantic.color.border;
41
- bg?: keyof typeof tokens.semantic.color.background;
42
- color?: keyof typeof tokens.semantic.color.text;
43
- shadow?: keyof typeof tokens.semantic.elevation;
35
+ borderRadius?: keyof Tokens['semantic']['border']['radius'];
36
+ border?: keyof Tokens['semantic']['color']['border'];
37
+ borderTop?: keyof Tokens['semantic']['color']['border'];
38
+ borderRight?: keyof Tokens['semantic']['color']['border'];
39
+ borderBottom?: keyof Tokens['semantic']['color']['border'];
40
+ borderLeft?: keyof Tokens['semantic']['color']['border'];
41
+ bg?: keyof Tokens['semantic']['color']['background'];
42
+ color?: keyof Tokens['semantic']['color']['text'];
43
+ shadow?: keyof Tokens['semantic']['elevation'];
44
44
  cursor?: 'auto' | 'default' | 'pointer' | 'wait' | 'text' | 'move' | 'help' | 'not-allowed';
45
45
  transition?: string;
46
- hoverShadow?: keyof typeof tokens.semantic.elevation;
46
+ hoverShadow?: keyof Tokens['semantic']['elevation'];
47
47
  hoverTransform?: string;
48
48
  overflow?: 'visible' | 'hidden' | 'scroll' | 'auto';
49
49
  overflowX?: 'visible' | 'hidden' | 'scroll' | 'auto';
package/dist/components/atoms/Chip/shared/ChipBase.d.ts CHANGED
@@ -1,6 +1,12 @@
1
1
  import { InternalStyledProps } from './types';
2
- export declare const StyledChip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, InternalStyledProps>> & string;
3
- export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
4
- export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
2
+ export declare const StyledChip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
3
+ style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
4
+ }, InternalStyledProps>> & string;
5
+ export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
6
+ style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
7
+ }> & string;
8
+ export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
9
+ style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
10
+ }, {
5
11
  $disabled?: boolean;
6
12
  }>> & string;
package/dist/components/layout/GridSystem/GridSystem.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import React from 'react';
2
- import tokens from '@/styles/tokens.json';
2
+ import type { Tokens } from '../../../types/tokens';
3
3
  interface GridProps {
4
4
  cols?: number;
5
- gap?: keyof typeof tokens.base.spacing;
6
- gapX?: keyof typeof tokens.base.spacing;
7
- gapY?: keyof typeof tokens.base.spacing;
5
+ gap?: keyof Tokens['base']['spacing'];
6
+ gapX?: keyof Tokens['base']['spacing'];
7
+ gapY?: keyof Tokens['base']['spacing'];
8
8
  className?: string;
9
9
  children: React.ReactNode;
10
10
  }
@@ -30,21 +30,21 @@ interface ResponsiveGridProps {
30
30
  colsMd?: number;
31
31
  colsLg?: number;
32
32
  colsXl?: number;
33
- gap?: keyof typeof tokens.base.spacing;
34
- gapSm?: keyof typeof tokens.base.spacing;
35
- gapMd?: keyof typeof tokens.base.spacing;
36
- gapLg?: keyof typeof tokens.base.spacing;
37
- gapXl?: keyof typeof tokens.base.spacing;
38
- gapX?: keyof typeof tokens.base.spacing;
39
- gapXSm?: keyof typeof tokens.base.spacing;
40
- gapXMd?: keyof typeof tokens.base.spacing;
41
- gapXLg?: keyof typeof tokens.base.spacing;
42
- gapXXl?: keyof typeof tokens.base.spacing;
43
- gapY?: keyof typeof tokens.base.spacing;
44
- gapYSm?: keyof typeof tokens.base.spacing;
45
- gapYMd?: keyof typeof tokens.base.spacing;
46
- gapYLg?: keyof typeof tokens.base.spacing;
47
- gapYXl?: keyof typeof tokens.base.spacing;
33
+ gap?: keyof Tokens['base']['spacing'];
34
+ gapSm?: keyof Tokens['base']['spacing'];
35
+ gapMd?: keyof Tokens['base']['spacing'];
36
+ gapLg?: keyof Tokens['base']['spacing'];
37
+ gapXl?: keyof Tokens['base']['spacing'];
38
+ gapX?: keyof Tokens['base']['spacing'];
39
+ gapXSm?: keyof Tokens['base']['spacing'];
40
+ gapXMd?: keyof Tokens['base']['spacing'];
41
+ gapXLg?: keyof Tokens['base']['spacing'];
42
+ gapXXl?: keyof Tokens['base']['spacing'];
43
+ gapY?: keyof Tokens['base']['spacing'];
44
+ gapYSm?: keyof Tokens['base']['spacing'];
45
+ gapYMd?: keyof Tokens['base']['spacing'];
46
+ gapYLg?: keyof Tokens['base']['spacing'];
47
+ gapYXl?: keyof Tokens['base']['spacing'];
48
48
  className?: string;
49
49
  children: React.ReactNode;
50
50
  }
package/dist/components/molecules/Checkbox/SelectableInputBase.d.ts CHANGED
@@ -8,25 +8,33 @@ interface StyledCheckboxInputProps {
8
8
  * Hidden native checkbox input for accessibility
9
9
  * Maintains keyboard navigation and screen reader support
10
10
  */
11
- export declare const HiddenCheckboxInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledCheckboxInputProps>> & string;
11
+ export declare const HiddenCheckboxInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
12
+ style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
13
+ }, StyledCheckboxInputProps>> & string;
12
14
  /**
13
15
  * Custom checkbox visual component
14
16
  * 24px × 24px for 8px grid alignment
15
17
  * Uses component.input.* tokens for consistency with TextField
16
18
  */
17
- export declare const StyledCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledCheckboxInputProps>> & string;
19
+ export declare const StyledCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
20
+ style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
21
+ }, StyledCheckboxInputProps>> & string;
18
22
  /**
19
23
  * Container for checkbox with proper spacing and alignment
20
24
  * 48px min-height for touch target (8px grid aligned)
21
25
  */
22
- export declare const StyledCheckboxContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
26
+ export declare const StyledCheckboxContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "style"> & {
27
+ style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
28
+ }, {
23
29
  $disabled: boolean;
24
30
  $labelPosition: "left" | "right";
25
31
  }>> & string;
26
32
  /**
27
33
  * Label text with proper typography
28
34
  */
29
- export declare const StyledCheckboxLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
35
+ export declare const StyledCheckboxLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
36
+ style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
37
+ }, {
30
38
  $disabled: boolean;
31
39
  }>> & string;
32
40
  export {};
package/dist/components/molecules/Dropdown/Dropdown.d.ts CHANGED
@@ -15,7 +15,9 @@ export interface DropdownProps {
15
15
  helperText?: string;
16
16
  error?: string;
17
17
  }
18
- declare const DropdownOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
18
+ 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
+ style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
20
+ }, {
19
21
  $isSelected: boolean;
20
22
  $isFocused: boolean;
21
23
  }>> & string;
package/dist/components/molecules/TextField/InputBase.d.ts CHANGED
@@ -10,9 +10,13 @@ interface StyledInputBaseProps {
10
10
  $hasError?: boolean;
11
11
  $disabled?: boolean;
12
12
  }
13
- export declare const StyledInputBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledInputBaseProps>> & string;
13
+ export declare const StyledInputBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
14
+ style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
15
+ }, StyledInputBaseProps>> & string;
14
16
  /**
15
17
  * Base styled textarea with shared styling
16
18
  */
17
- export declare const StyledTextAreaBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, StyledInputBaseProps>> & string;
19
+ export declare const StyledTextAreaBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "style"> & {
20
+ style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
21
+ }, StyledInputBaseProps>> & string;
18
22
  export {};