@cocso-ui/react 0.1.10 → 0.1.12

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 (149) hide show
  1. package/dist/cjs/accordion/Accordion.d.ts +15 -0
  2. package/dist/cjs/accordion/Accordion.js +71 -0
  3. package/dist/cjs/accordion/Accordion.module.css.js +9 -0
  4. package/dist/cjs/button/Button.d.ts +23 -0
  5. package/dist/cjs/button/Button.js +115 -0
  6. package/dist/cjs/button/Button.module.css.js +9 -0
  7. package/dist/cjs/checkbox/Checkbox.d.ts +18 -0
  8. package/dist/cjs/checkbox/Checkbox.js +115 -0
  9. package/dist/cjs/checkbox/Checkbox.module.css.js +9 -0
  10. package/dist/cjs/dropdown/Dropdown.d.ts +11 -0
  11. package/dist/cjs/dropdown/Dropdown.js +55 -0
  12. package/dist/cjs/dropdown/Dropdown.module.css.js +9 -0
  13. package/dist/cjs/index.d.ts +19 -0
  14. package/dist/cjs/index.js +53 -0
  15. package/dist/cjs/link/Link.d.ts +16 -0
  16. package/dist/cjs/link/Link.js +35 -0
  17. package/dist/cjs/link/Link.module.css.js +9 -0
  18. package/dist/cjs/modal/Modal.d.ts +12 -0
  19. package/dist/cjs/modal/Modal.js +103 -0
  20. package/dist/cjs/modal/Modal.module.css.js +9 -0
  21. package/dist/cjs/node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js +28 -0
  22. package/dist/cjs/one-time-password-field/OneTimePasswordField.d.ts +8 -0
  23. package/dist/cjs/one-time-password-field/OneTimePasswordField.js +52 -0
  24. package/dist/cjs/one-time-password-field/OneTimePasswordField.module.css.js +9 -0
  25. package/dist/cjs/pagination/Pagination.d.ts +13 -0
  26. package/dist/cjs/pagination/Pagination.js +83 -0
  27. package/dist/cjs/pagination/Pagination.module.css.js +9 -0
  28. package/dist/cjs/popover/Popover.d.ts +10 -0
  29. package/dist/cjs/popover/Popover.js +44 -0
  30. package/dist/cjs/popover/Popover.module.css.js +9 -0
  31. package/dist/cjs/select/Select.d.ts +12 -0
  32. package/dist/cjs/select/Select.js +84 -0
  33. package/dist/cjs/select/Select.module.css.js +9 -0
  34. package/dist/cjs/spinner/Spinner.d.ts +14 -0
  35. package/dist/cjs/spinner/Spinner.js +40 -0
  36. package/dist/cjs/spinner/Spinner.module.css.js +9 -0
  37. package/dist/cjs/stock-quantity-status/StockQuantityStatus.d.ts +12 -0
  38. package/dist/cjs/stock-quantity-status/StockQuantityStatus.js +105 -0
  39. package/dist/cjs/stock-quantity-status/StockQuantityStatus.module.css.js +9 -0
  40. package/dist/cjs/switch/Switch.d.ts +16 -0
  41. package/dist/cjs/switch/Switch.js +89 -0
  42. package/dist/cjs/switch/Switch.module.css.js +9 -0
  43. package/dist/cjs/tab/Tab.d.ts +10 -0
  44. package/dist/cjs/tab/Tab.js +64 -0
  45. package/dist/{token → cjs/token}/color.d.ts +3 -1
  46. package/dist/cjs/token/color.js +84 -0
  47. package/dist/{token → cjs/token}/spacing.d.ts +3 -1
  48. package/dist/cjs/token/spacing.js +29 -0
  49. package/dist/{token → cjs/token}/typography.d.ts +10 -7
  50. package/dist/cjs/token/typography.js +50 -0
  51. package/dist/cjs/typography/Typography.d.ts +33 -0
  52. package/dist/cjs/typography/Typography.js +90 -0
  53. package/dist/cjs/typography/Typography.module.css.js +9 -0
  54. package/dist/esm/accordion/Accordion.d.mts +15 -0
  55. package/dist/esm/accordion/Accordion.mjs +50 -0
  56. package/dist/esm/accordion/Accordion.module.css.mjs +3 -0
  57. package/dist/esm/button/Button.d.mts +23 -0
  58. package/dist/esm/button/Button.mjs +113 -0
  59. package/dist/esm/button/Button.module.css.mjs +3 -0
  60. package/dist/esm/checkbox/Checkbox.d.mts +18 -0
  61. package/dist/esm/checkbox/Checkbox.mjs +94 -0
  62. package/dist/esm/checkbox/Checkbox.module.css.mjs +3 -0
  63. package/dist/esm/dropdown/Dropdown.d.mts +11 -0
  64. package/dist/esm/dropdown/Dropdown.mjs +34 -0
  65. package/dist/esm/dropdown/Dropdown.module.css.mjs +3 -0
  66. package/dist/esm/index.css +1 -0
  67. package/dist/esm/index.d.mts +19 -0
  68. package/dist/esm/index.mjs +19 -0
  69. package/dist/esm/link/Link.d.mts +16 -0
  70. package/dist/esm/link/Link.mjs +33 -0
  71. package/dist/esm/link/Link.module.css.mjs +3 -0
  72. package/dist/esm/modal/Modal.d.mts +12 -0
  73. package/dist/esm/modal/Modal.mjs +82 -0
  74. package/dist/esm/modal/Modal.module.css.mjs +3 -0
  75. package/dist/esm/one-time-password-field/OneTimePasswordField.d.mts +8 -0
  76. package/dist/esm/one-time-password-field/OneTimePasswordField.mjs +31 -0
  77. package/dist/esm/one-time-password-field/OneTimePasswordField.module.css.mjs +3 -0
  78. package/dist/esm/pagination/Pagination.d.mts +13 -0
  79. package/dist/esm/pagination/Pagination.mjs +81 -0
  80. package/dist/esm/pagination/Pagination.module.css.mjs +3 -0
  81. package/dist/esm/popover/Popover.d.mts +10 -0
  82. package/dist/esm/popover/Popover.mjs +23 -0
  83. package/dist/esm/popover/Popover.module.css.mjs +3 -0
  84. package/dist/esm/select/Select.d.mts +12 -0
  85. package/dist/esm/select/Select.mjs +82 -0
  86. package/dist/esm/select/Select.module.css.mjs +3 -0
  87. package/dist/esm/spinner/Spinner.d.mts +14 -0
  88. package/dist/esm/spinner/Spinner.mjs +38 -0
  89. package/dist/esm/spinner/Spinner.module.css.mjs +3 -0
  90. package/dist/esm/stock-quantity-status/StockQuantityStatus.d.mts +12 -0
  91. package/dist/esm/stock-quantity-status/StockQuantityStatus.mjs +102 -0
  92. package/dist/esm/stock-quantity-status/StockQuantityStatus.module.css.mjs +3 -0
  93. package/dist/esm/switch/Switch.d.mts +16 -0
  94. package/dist/esm/switch/Switch.mjs +68 -0
  95. package/dist/esm/switch/Switch.module.css.mjs +3 -0
  96. package/dist/esm/tab/Tab.d.mts +10 -0
  97. package/dist/esm/tab/Tab.mjs +43 -0
  98. package/dist/esm/token/color.d.mts +82 -0
  99. package/dist/esm/token/color.mjs +82 -0
  100. package/dist/esm/token/spacing.d.mts +27 -0
  101. package/dist/esm/token/spacing.mjs +27 -0
  102. package/dist/esm/token/typography.d.mts +47 -0
  103. package/dist/esm/token/typography.mjs +46 -0
  104. package/dist/esm/typography/Typography.d.mts +33 -0
  105. package/dist/esm/typography/Typography.mjs +88 -0
  106. package/dist/esm/typography/Typography.module.css.mjs +3 -0
  107. package/package.json +36 -27
  108. package/dist/accordion/Accordion.d.ts +0 -12
  109. package/dist/accordion/index.d.ts +0 -1
  110. package/dist/body/Body.d.ts +0 -11
  111. package/dist/body/index.d.ts +0 -1
  112. package/dist/button/Button.d.ts +0 -18
  113. package/dist/button/index.d.ts +0 -1
  114. package/dist/checkbox/Checkbox.d.ts +0 -13
  115. package/dist/checkbox/index.d.ts +0 -1
  116. package/dist/display/Display.d.ts +0 -11
  117. package/dist/display/index.d.ts +0 -1
  118. package/dist/dropdown/Dropdown.d.ts +0 -7
  119. package/dist/dropdown/index.d.ts +0 -1
  120. package/dist/heading/Heading.d.ts +0 -10
  121. package/dist/heading/index.d.ts +0 -1
  122. package/dist/index.cjs +0 -1
  123. package/dist/index.css +0 -1
  124. package/dist/index.d.ts +0 -20
  125. package/dist/index.js +0 -1
  126. package/dist/link/Link.d.ts +0 -11
  127. package/dist/link/index.d.ts +0 -1
  128. package/dist/modal/Modal.d.ts +0 -8
  129. package/dist/modal/index.d.ts +0 -1
  130. package/dist/one-time-password-field/OneTimePasswordField.d.ts +0 -4
  131. package/dist/one-time-password-field/index.d.ts +0 -1
  132. package/dist/pagination/Pagination.d.ts +0 -8
  133. package/dist/pagination/index.d.ts +0 -1
  134. package/dist/popover/Popover.d.ts +0 -6
  135. package/dist/popover/index.d.ts +0 -1
  136. package/dist/select/Select.d.ts +0 -8
  137. package/dist/select/index.d.ts +0 -1
  138. package/dist/spinner/Spinner.d.ts +0 -9
  139. package/dist/spinner/index.d.ts +0 -1
  140. package/dist/stock-quantity-status/StockQuantityStatus.d.ts +0 -7
  141. package/dist/stock-quantity-status/index.d.ts +0 -1
  142. package/dist/switch/Switch.d.ts +0 -11
  143. package/dist/switch/index.d.ts +0 -1
  144. package/dist/tab/Tab.d.ts +0 -6
  145. package/dist/tab/index.d.ts +0 -1
  146. package/dist/toast/index.d.ts +0 -1
  147. package/dist/token/index.d.ts +0 -3
  148. package/dist/typography/Typography.d.ts +0 -9
  149. package/dist/typography/index.d.ts +0 -1
@@ -0,0 +1,82 @@
1
+ declare const colors: {
2
+ transparent: string;
3
+ white: string;
4
+ whiteAlpha5: string;
5
+ whiteAlpha10: string;
6
+ whiteAlpha20: string;
7
+ whiteAlpha30: string;
8
+ whiteAlpha40: string;
9
+ whiteAlpha50: string;
10
+ whiteAlpha60: string;
11
+ whiteAlpha70: string;
12
+ whiteAlpha80: string;
13
+ whiteAlpha90: string;
14
+ black: string;
15
+ blackAlpha5: string;
16
+ blackAlpha10: string;
17
+ blackAlpha20: string;
18
+ blackAlpha30: string;
19
+ blackAlpha40: string;
20
+ blackAlpha50: string;
21
+ blackAlpha60: string;
22
+ blackAlpha70: string;
23
+ blackAlpha80: string;
24
+ blackAlpha90: string;
25
+ neutral50: string;
26
+ neutral100: string;
27
+ neutral200: string;
28
+ neutral300: string;
29
+ neutral400: string;
30
+ neutral500: string;
31
+ neutral600: string;
32
+ neutral700: string;
33
+ neutral800: string;
34
+ neutral900: string;
35
+ neutral950: string;
36
+ primary50: string;
37
+ primary100: string;
38
+ primary200: string;
39
+ primary300: string;
40
+ primary400: string;
41
+ primary500: string;
42
+ primary600: string;
43
+ primary700: string;
44
+ primary800: string;
45
+ primary900: string;
46
+ primary950: string;
47
+ danger50: string;
48
+ danger100: string;
49
+ danger200: string;
50
+ danger300: string;
51
+ danger400: string;
52
+ danger500: string;
53
+ danger600: string;
54
+ danger700: string;
55
+ danger800: string;
56
+ danger900: string;
57
+ danger950: string;
58
+ warning50: string;
59
+ warning100: string;
60
+ warning200: string;
61
+ warning300: string;
62
+ warning400: string;
63
+ warning500: string;
64
+ warning600: string;
65
+ warning700: string;
66
+ warning800: string;
67
+ warning900: string;
68
+ warning950: string;
69
+ success50: string;
70
+ success100: string;
71
+ success200: string;
72
+ success300: string;
73
+ success400: string;
74
+ success500: string;
75
+ success600: string;
76
+ success700: string;
77
+ success800: string;
78
+ success900: string;
79
+ success950: string;
80
+ };
81
+
82
+ export { colors };
@@ -0,0 +1,82 @@
1
+ const colors = {
2
+ transparent: 'var(--ds-color-transparent)',
3
+ white: 'var(--ds-color-white)',
4
+ whiteAlpha5: 'var(--ds-color-white-alpha-5)',
5
+ whiteAlpha10: 'var(--ds-color-white-alpha-10)',
6
+ whiteAlpha20: 'var(--ds-color-white-alpha-20)',
7
+ whiteAlpha30: 'var(--ds-color-white-alpha-30)',
8
+ whiteAlpha40: 'var(--ds-color-white-alpha-40)',
9
+ whiteAlpha50: 'var(--ds-color-white-alpha-50)',
10
+ whiteAlpha60: 'var(--ds-color-white-alpha-60)',
11
+ whiteAlpha70: 'var(--ds-color-white-alpha-70)',
12
+ whiteAlpha80: 'var(--ds-color-white-alpha-80)',
13
+ whiteAlpha90: 'var(--ds-color-white-alpha-90)',
14
+ black: 'var(--ds-color-black)',
15
+ blackAlpha5: 'var(--ds-color-black-alpha-5)',
16
+ blackAlpha10: 'var(--ds-color-black-alpha-10)',
17
+ blackAlpha20: 'var(--ds-color-black-alpha-20)',
18
+ blackAlpha30: 'var(--ds-color-black-alpha-30)',
19
+ blackAlpha40: 'var(--ds-color-black-alpha-40)',
20
+ blackAlpha50: 'var(--ds-color-black-alpha-50)',
21
+ blackAlpha60: 'var(--ds-color-black-alpha-60)',
22
+ blackAlpha70: 'var(--ds-color-black-alpha-70)',
23
+ blackAlpha80: 'var(--ds-color-black-alpha-80)',
24
+ blackAlpha90: 'var(--ds-color-black-alpha-90)',
25
+ neutral50: 'var(--ds-color-neutral-50)',
26
+ neutral100: 'var(--ds-color-neutral-100)',
27
+ neutral200: 'var(--ds-color-neutral-200)',
28
+ neutral300: 'var(--ds-color-neutral-300)',
29
+ neutral400: 'var(--ds-color-neutral-400)',
30
+ neutral500: 'var(--ds-color-neutral-500)',
31
+ neutral600: 'var(--ds-color-neutral-600)',
32
+ neutral700: 'var(--ds-color-neutral-700)',
33
+ neutral800: 'var(--ds-color-neutral-800)',
34
+ neutral900: 'var(--ds-color-neutral-900)',
35
+ neutral950: 'var(--ds-color-neutral-950)',
36
+ primary50: 'var(--ds-color-primary-50)',
37
+ primary100: 'var(--ds-color-primary-100)',
38
+ primary200: 'var(--ds-color-primary-200)',
39
+ primary300: 'var(--ds-color-primary-300)',
40
+ primary400: 'var(--ds-color-primary-400)',
41
+ primary500: 'var(--ds-color-primary-500)',
42
+ primary600: 'var(--ds-color-primary-600)',
43
+ primary700: 'var(--ds-color-primary-700)',
44
+ primary800: 'var(--ds-color-primary-800)',
45
+ primary900: 'var(--ds-color-primary-900)',
46
+ primary950: 'var(--ds-color-primary-950)',
47
+ danger50: 'var(--ds-color-danger-50)',
48
+ danger100: 'var(--ds-color-danger-100)',
49
+ danger200: 'var(--ds-color-danger-200)',
50
+ danger300: 'var(--ds-color-danger-300)',
51
+ danger400: 'var(--ds-color-danger-400)',
52
+ danger500: 'var(--ds-color-danger-500)',
53
+ danger600: 'var(--ds-color-danger-600)',
54
+ danger700: 'var(--ds-color-danger-700)',
55
+ danger800: 'var(--ds-color-danger-800)',
56
+ danger900: 'var(--ds-color-danger-900)',
57
+ danger950: 'var(--ds-color-danger-950)',
58
+ warning50: 'var(--ds-color-warning-50)',
59
+ warning100: 'var(--ds-color-warning-100)',
60
+ warning200: 'var(--ds-color-warning-200)',
61
+ warning300: 'var(--ds-color-warning-300)',
62
+ warning400: 'var(--ds-color-warning-400)',
63
+ warning500: 'var(--ds-color-warning-500)',
64
+ warning600: 'var(--ds-color-warning-600)',
65
+ warning700: 'var(--ds-color-warning-700)',
66
+ warning800: 'var(--ds-color-warning-800)',
67
+ warning900: 'var(--ds-color-warning-900)',
68
+ warning950: 'var(--ds-color-warning-950)',
69
+ success50: 'var(--ds-color-success-50)',
70
+ success100: 'var(--ds-color-success-100)',
71
+ success200: 'var(--ds-color-success-200)',
72
+ success300: 'var(--ds-color-success-300)',
73
+ success400: 'var(--ds-color-success-400)',
74
+ success500: 'var(--ds-color-success-500)',
75
+ success600: 'var(--ds-color-success-600)',
76
+ success700: 'var(--ds-color-success-700)',
77
+ success800: 'var(--ds-color-success-800)',
78
+ success900: 'var(--ds-color-success-900)',
79
+ success950: 'var(--ds-color-success-950)'
80
+ };
81
+
82
+ export { colors };
@@ -0,0 +1,27 @@
1
+ declare const spacing: {
2
+ readonly s0: "var(--ds-spacing-0)";
3
+ readonly s1: "var(--ds-spacing-1)";
4
+ readonly s2: "var(--ds-spacing-2)";
5
+ readonly s3: "var(--ds-spacing-3)";
6
+ readonly s4: "var(--ds-spacing-4)";
7
+ readonly s5: "var(--ds-spacing-5)";
8
+ readonly s6: "var(--ds-spacing-6)";
9
+ readonly s7: "var(--ds-spacing-7)";
10
+ readonly s8: "var(--ds-spacing-8)";
11
+ readonly s9: "var(--ds-spacing-9)";
12
+ readonly s10: "var(--ds-spacing-10)";
13
+ readonly s11: "var(--ds-spacing-11)";
14
+ readonly s12: "var(--ds-spacing-12)";
15
+ readonly s13: "var(--ds-spacing-13)";
16
+ readonly s14: "var(--ds-spacing-14)";
17
+ readonly s15: "var(--ds-spacing-15)";
18
+ readonly s16: "var(--ds-spacing-16)";
19
+ readonly s17: "var(--ds-spacing-17)";
20
+ readonly s18: "var(--ds-spacing-18)";
21
+ readonly s19: "var(--ds-spacing-19)";
22
+ readonly s20: "var(--ds-spacing-20)";
23
+ readonly s21: "var(--ds-spacing-21)";
24
+ readonly max: "var(--ds-spacing-max)";
25
+ };
26
+
27
+ export { spacing };
@@ -0,0 +1,27 @@
1
+ const spacing = {
2
+ s0: 'var(--ds-spacing-0)',
3
+ s1: 'var(--ds-spacing-1)',
4
+ s2: 'var(--ds-spacing-2)',
5
+ s3: 'var(--ds-spacing-3)',
6
+ s4: 'var(--ds-spacing-4)',
7
+ s5: 'var(--ds-spacing-5)',
8
+ s6: 'var(--ds-spacing-6)',
9
+ s7: 'var(--ds-spacing-7)',
10
+ s8: 'var(--ds-spacing-8)',
11
+ s9: 'var(--ds-spacing-9)',
12
+ s10: 'var(--ds-spacing-10)',
13
+ s11: 'var(--ds-spacing-11)',
14
+ s12: 'var(--ds-spacing-12)',
15
+ s13: 'var(--ds-spacing-13)',
16
+ s14: 'var(--ds-spacing-14)',
17
+ s15: 'var(--ds-spacing-15)',
18
+ s16: 'var(--ds-spacing-16)',
19
+ s17: 'var(--ds-spacing-17)',
20
+ s18: 'var(--ds-spacing-18)',
21
+ s19: 'var(--ds-spacing-19)',
22
+ s20: 'var(--ds-spacing-20)',
23
+ s21: 'var(--ds-spacing-21)',
24
+ max: 'var(--ds-spacing-max)'
25
+ };
26
+
27
+ export { spacing };
@@ -0,0 +1,47 @@
1
+ declare const fontSize: {
2
+ readonly 10: 10;
3
+ readonly 11: 11;
4
+ readonly 12: 12;
5
+ readonly 13: 13;
6
+ readonly 14: 14;
7
+ readonly 15: 15;
8
+ readonly 16: 16;
9
+ readonly 18: 18;
10
+ readonly 20: 20;
11
+ readonly 24: 24;
12
+ readonly 28: 28;
13
+ readonly 32: 32;
14
+ readonly 36: 36;
15
+ readonly 44: 44;
16
+ readonly 60: 60;
17
+ };
18
+ type FontSize = keyof typeof fontSize;
19
+ type ResponsiveFontSize = FontSize | [FontSize, FontSize?, FontSize?] | {
20
+ base: FontSize;
21
+ tablet?: FontSize;
22
+ desktop?: FontSize;
23
+ };
24
+ declare const fontWeight: {
25
+ readonly thin: 100;
26
+ readonly extralight: 200;
27
+ readonly light: 300;
28
+ readonly normal: 400;
29
+ readonly medium: 500;
30
+ readonly semibold: 600;
31
+ readonly bold: 700;
32
+ readonly extrabold: 800;
33
+ readonly black: 900;
34
+ };
35
+ type FontWeight = keyof typeof fontWeight;
36
+ declare const lineHeight: {
37
+ readonly none: 1;
38
+ readonly tight: 1.25;
39
+ readonly snug: 1.375;
40
+ readonly normal: 1.5;
41
+ readonly relaxed: 1.625;
42
+ readonly loose: 2;
43
+ };
44
+ type LineHeight = keyof typeof lineHeight;
45
+
46
+ export { fontSize, fontWeight, lineHeight };
47
+ export type { FontSize, FontWeight, LineHeight, ResponsiveFontSize };
@@ -0,0 +1,46 @@
1
+ const fontSize = {
2
+ 10: 10,
3
+ 11: 11,
4
+ 12: 12,
5
+ 13: 13,
6
+ 14: 14,
7
+ 15: 15,
8
+ 16: 16,
9
+ 18: 18,
10
+ 20: 20,
11
+ 24: 24,
12
+ 28: 28,
13
+ 32: 32,
14
+ 36: 36,
15
+ 44: 44,
16
+ 60: 60
17
+ };
18
+ /*
19
+ Font weights as defined in the CSS specification.
20
+ @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
21
+ */
22
+ const fontWeight = {
23
+ thin: 100,
24
+ extralight: 200,
25
+ light: 300,
26
+ normal: 400,
27
+ medium: 500,
28
+ semibold: 600,
29
+ bold: 700,
30
+ extrabold: 800,
31
+ black: 900
32
+ };
33
+ /*
34
+ Line heights as defined in the tailwindcss documentation.
35
+ @see https://v3.tailwindcss.com/docs/line-height
36
+ */
37
+ const lineHeight = {
38
+ none: 1,
39
+ tight: 1.25,
40
+ snug: 1.375,
41
+ normal: 1.5,
42
+ relaxed: 1.625,
43
+ loose: 2
44
+ };
45
+
46
+ export { fontSize, fontWeight, lineHeight };
@@ -0,0 +1,33 @@
1
+ import * as react from 'react';
2
+ import { ComponentPropsWithoutRef } from 'react';
3
+ import { FontWeight, LineHeight, ResponsiveFontSize } from '../token/typography.mjs';
4
+
5
+ type BodySize = 'lg' | 'md' | 'sm' | 'xs';
6
+ type DisplaySize = 'lg' | 'md' | 'sm';
7
+ type HeadingSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
8
+ type TypographyPropsBase = {
9
+ asChild?: boolean;
10
+ weight?: FontWeight;
11
+ lineHeight?: LineHeight;
12
+ } & ComponentPropsWithoutRef<'p'>;
13
+ type CustomTypographyProps = TypographyPropsBase & {
14
+ type?: 'custom';
15
+ size?: ResponsiveFontSize;
16
+ };
17
+ type BodyTypographyProps = TypographyPropsBase & {
18
+ type: 'body';
19
+ size?: BodySize;
20
+ };
21
+ type DisplayTypographyProps = TypographyPropsBase & {
22
+ type: 'display';
23
+ size?: DisplaySize;
24
+ };
25
+ type HeadingTypographyProps = TypographyPropsBase & {
26
+ type: 'heading';
27
+ size?: HeadingSize;
28
+ };
29
+ type TypographyProps = CustomTypographyProps | BodyTypographyProps | DisplayTypographyProps | HeadingTypographyProps;
30
+ declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<HTMLElement>>;
31
+
32
+ export { Typography };
33
+ export type { BodySize, DisplaySize, HeadingSize, TypographyProps };
@@ -0,0 +1,88 @@
1
+ import { Primitive } from '@radix-ui/react-primitive';
2
+ import { Slot } from '@radix-ui/react-slot';
3
+ import { clsx } from 'clsx';
4
+ import { forwardRef } from 'react';
5
+ import { match } from 'ts-pattern';
6
+ import styles from './Typography.module.css.mjs';
7
+ import { jsx } from 'react/jsx-runtime';
8
+ import { lineHeight, fontWeight, fontSize } from '../token/typography.mjs';
9
+
10
+ const Typography = /*#__PURE__*/forwardRef(({
11
+ asChild,
12
+ className,
13
+ style: _style,
14
+ color,
15
+ type = 'custom',
16
+ weight = type === 'heading' ? 'bold' : 'normal',
17
+ lineHeight: lineHeight$1 = 'normal',
18
+ ...props
19
+ }, ref) => {
20
+ const Comp = match({
21
+ asChild,
22
+ type
23
+ }).with({
24
+ asChild: true
25
+ }, () => Slot).with({
26
+ type: 'display'
27
+ }, () => 'h1').with({
28
+ type: 'heading'
29
+ }, () => Primitive.h2).otherwise(() => Primitive.p);
30
+ const fontSize$1 = match(type).with('custom', () => props.size ?? 16).with('body', () => match(props.size ?? 'md').with('lg', () => 18).with('md', () => 16).with('sm', () => 14).with('xs', () => 12).exhaustive()).with('display', () => match(props.size ?? 'md').with('lg', () => ({
31
+ base: 44,
32
+ tablet: 60
33
+ })).with('md', () => ({
34
+ base: 32,
35
+ tablet: 44
36
+ })).with('sm', () => ({
37
+ base: 28,
38
+ tablet: 36
39
+ })).exhaustive()).with('heading', () => match(props.size ?? 'md').with('xl', () => ({
40
+ base: 28,
41
+ tablet: 36
42
+ })).with('lg', () => ({
43
+ base: 24,
44
+ tablet: 32
45
+ })).with('md', () => ({
46
+ base: 20,
47
+ tablet: 24
48
+ })).with('sm', () => 18).with('xs', () => 16).exhaustive()).otherwise(() => 16);
49
+ let base;
50
+ let tablet;
51
+ let desktop;
52
+ if (Array.isArray(fontSize$1)) {
53
+ [base, tablet, desktop] = fontSize$1;
54
+ } else if (typeof fontSize$1 === 'object') {
55
+ ({
56
+ base,
57
+ tablet,
58
+ desktop
59
+ } = fontSize$1);
60
+ } else {
61
+ base = fontSize$1;
62
+ }
63
+ const style = {
64
+ ..._style,
65
+ '--cocso-typography-font-color': color,
66
+ '--cocso-typography-font-size': `${fontSize[base]}px`,
67
+ ...(tablet !== undefined && {
68
+ '--cocso-tablet-typography-font-size': `${fontSize[tablet]}px`
69
+ }),
70
+ ...(desktop !== undefined && {
71
+ '--cocso-desktop-typography-font-size': `${fontSize[desktop]}px`
72
+ }),
73
+ '--cocso-typography-font-weight': fontWeight[weight],
74
+ '--cocso-typography-line-height': lineHeight[lineHeight$1]
75
+ };
76
+ return /*#__PURE__*/jsx(Comp
77
+ // biome-ignore lint/suspicious/noExplicitAny: Polymorphic component with multiple element types (h1, h2, p, Slot) requires type assertion for ref compatibility
78
+ , {
79
+ ...(ref && {
80
+ ref: ref
81
+ }),
82
+ className: clsx(styles.typography, className),
83
+ style: style,
84
+ ...props
85
+ });
86
+ });
87
+
88
+ export { Typography };
@@ -0,0 +1,3 @@
1
+ var styles = {"typography":"Typography-module_typography__45lnt"};
2
+
3
+ export { styles as default };
package/package.json CHANGED
@@ -1,37 +1,31 @@
1
1
  {
2
2
  "name": "@cocso-ui/react",
3
- "version": "0.1.10",
3
+ "version": "0.1.12",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/cocso/cocso-ui.git",
7
7
  "directory": "packages/react"
8
8
  },
9
- "scripts": {
10
- "build": "rm -rf dist && bun run build.js && bun x tsc",
11
- "dev": "bun run build.js --watch",
12
- "lint": "biome lint .",
13
- "lint:fix": "biome lint . --fix"
14
- },
15
- "type": "module",
16
- "main": "./dist/index.cjs",
17
- "module": "./dist/index.js",
18
- "types": "./dist/index.d.ts",
9
+ "sideEffects": [
10
+ "*.css"
11
+ ],
19
12
  "exports": {
20
13
  ".": {
21
- "types": "./dist/index.d.ts",
22
- "import": "./dist/index.js",
23
- "require": "./dist/index.cjs"
14
+ "require": {
15
+ "types": "./dist/cjs/index.d.ts",
16
+ "default": "./dist/cjs/index.js"
17
+ },
18
+ "import": {
19
+ "types": "./dist/esm/index.d.mts",
20
+ "default": "./dist/esm/index.mjs"
21
+ }
24
22
  },
25
- "./styles.css": {
26
- "import": "./dist/index.css",
27
- "require": "./dist/index.css"
28
- }
23
+ "./styles.css": "./dist/esm/index.css"
29
24
  },
30
25
  "files": [
31
26
  "dist"
32
27
  ],
33
28
  "dependencies": {
34
- "@cocso-ui/react-icons": "^0.0.13",
35
29
  "@radix-ui/react-accordion": "^1.2.12",
36
30
  "@radix-ui/react-checkbox": "^1.3.3",
37
31
  "@radix-ui/react-dialog": "^1.1.15",
@@ -44,19 +38,34 @@
44
38
  "@radix-ui/react-tabs": "^1.1.13",
45
39
  "clsx": "^2.1.1",
46
40
  "sonner": "^2.0.7",
47
- "ts-pattern": "^5.8.0"
48
- },
49
- "peerDependencies": {
50
- "react": "^19.1.1",
51
- "react-dom": "^19.1.1"
41
+ "ts-pattern": "^5.8.0",
42
+ "@cocso-ui/react-icons": "^0.0.15"
52
43
  },
53
44
  "devDependencies": {
45
+ "@babel/preset-react": "^7.27.1",
46
+ "@babel/preset-typescript": "^7.27.1",
47
+ "@rollup/plugin-babel": "^6.0.4",
48
+ "@rollup/plugin-commonjs": "^28.0.6",
49
+ "@rollup/plugin-node-resolve": "^16.0.1",
54
50
  "@types/react": "^19.1.12",
55
- "@types/react-dom": "^19.1.8",
56
- "esbuild": "^0.25.9",
51
+ "@types/react-dom": "^19.1.9",
52
+ "react": "^19.1.1",
53
+ "rollup": "^4.50.0",
54
+ "rollup-plugin-dts": "^6.2.3",
55
+ "rollup-plugin-postcss": "^4.0.2",
57
56
  "typescript": "^5.9.2"
58
57
  },
58
+ "peerDependencies": {
59
+ "react": "^19.1.1",
60
+ "react-dom": "^19.1.1"
61
+ },
59
62
  "publishConfig": {
60
63
  "access": "public"
64
+ },
65
+ "scripts": {
66
+ "prebuild": "rm -rf dist",
67
+ "build": "rollup -c rollup.config.cjs",
68
+ "lint": "biome lint .",
69
+ "lint:fix": "biome lint . --fix"
61
70
  }
62
- }
71
+ }
@@ -1,12 +0,0 @@
1
- import * as AccordionPrimitive from '@radix-ui/react-accordion';
2
- import { type ComponentPropsWithoutRef } from 'react';
3
- interface TriggerProps extends ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
4
- chevron?: boolean;
5
- }
6
- export declare const Accordion: import("react").ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & import("react").RefAttributes<HTMLDivElement>> & {
7
- Item: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
8
- Header: import("react").ForwardRefExoticComponent<AccordionPrimitive.AccordionHeaderProps & import("react").RefAttributes<HTMLHeadingElement>>;
9
- Trigger: import("react").ForwardRefExoticComponent<TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
10
- Content: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
11
- };
12
- export {};
@@ -1 +0,0 @@
1
- export * from './Accordion';
@@ -1,11 +0,0 @@
1
- import { type ComponentPropsWithoutRef } from 'react';
2
- import type { FontWeight, LineHeight } from '../token';
3
- export type BodySize = 'lg' | 'md' | 'sm' | 'xs';
4
- export interface BodyProps extends ComponentPropsWithoutRef<'p'> {
5
- asChild?: boolean;
6
- color?: string;
7
- size?: BodySize;
8
- weight?: FontWeight;
9
- lineHeight?: LineHeight;
10
- }
11
- export declare const Body: import("react").ForwardRefExoticComponent<BodyProps & import("react").RefAttributes<HTMLParagraphElement>>;
@@ -1 +0,0 @@
1
- export * from './Body';
@@ -1,18 +0,0 @@
1
- import type { ComponentPropsWithoutRef, ReactNode } from 'react';
2
- import { type FontWeight } from '../token';
3
- export type ButtonSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
4
- export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'success' | 'error' | 'warning' | 'neutral';
5
- export type ButtonShape = 'square' | 'circle' | 'rounded';
6
- export interface ButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'prefix'> {
7
- asChild?: boolean;
8
- size?: ButtonSize;
9
- variant?: ButtonVariant;
10
- weight?: FontWeight;
11
- shape?: ButtonShape;
12
- prefix?: ReactNode;
13
- suffix?: ReactNode;
14
- svgOnly?: boolean;
15
- disabled?: boolean;
16
- loading?: boolean;
17
- }
18
- export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
@@ -1 +0,0 @@
1
- export * from './Button';
@@ -1,13 +0,0 @@
1
- import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
2
- import { type ComponentPropsWithoutRef } from 'react';
3
- export type CheckboxSize = 'lg' | 'md' | 'sm';
4
- export type CheckboxStatus = 'on' | 'off' | 'intermediate';
5
- export interface CheckboxProps extends Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, 'checked' | 'onCheckedChange' | 'onChange'> {
6
- id?: string;
7
- size?: CheckboxSize;
8
- status: CheckboxStatus;
9
- onChange: (status: CheckboxStatus) => void;
10
- label?: string;
11
- disabled?: boolean;
12
- }
13
- export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLButtonElement>>;
@@ -1 +0,0 @@
1
- export * from './Checkbox';
@@ -1,11 +0,0 @@
1
- import { type ComponentPropsWithoutRef } from 'react';
2
- import type { FontWeight, LineHeight } from '../token';
3
- export type DisplaySize = 'lg' | 'md' | 'sm';
4
- export interface DisplayProps extends ComponentPropsWithoutRef<'h1'> {
5
- asChild?: boolean;
6
- color?: string;
7
- size?: DisplaySize;
8
- weight?: FontWeight;
9
- lineHeight?: LineHeight;
10
- }
11
- export declare const Display: import("react").ForwardRefExoticComponent<DisplayProps & import("react").RefAttributes<HTMLHeadingElement>>;
@@ -1 +0,0 @@
1
- export * from './Display';
@@ -1,7 +0,0 @@
1
- import * as DropdownPrimitive from '@radix-ui/react-dropdown-menu';
2
- export declare const Dropdown: import("react").FC<DropdownPrimitive.DropdownMenuProps> & {
3
- Trigger: import("react").ForwardRefExoticComponent<DropdownPrimitive.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
4
- Portal: import("react").FC<DropdownPrimitive.DropdownMenuPortalProps>;
5
- Content: import("react").ForwardRefExoticComponent<Omit<DropdownPrimitive.DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
6
- Item: import("react").ForwardRefExoticComponent<Omit<DropdownPrimitive.DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
7
- };
@@ -1 +0,0 @@
1
- export * from './Dropdown';
@@ -1,10 +0,0 @@
1
- import { type ComponentPropsWithoutRef } from 'react';
2
- import type { FontWeight, LineHeight } from '../token';
3
- export type HeadingSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
4
- export interface HeadingProps extends ComponentPropsWithoutRef<'h2'> {
5
- asChild?: boolean;
6
- size?: HeadingSize;
7
- weight?: FontWeight;
8
- lineHeight?: LineHeight;
9
- }
10
- export declare const Heading: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
@@ -1 +0,0 @@
1
- export * from './Heading';