@regardio/react 0.4.7 → 0.5.5

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 (172) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +6 -8
  3. package/dist/{components/background-slideshow.js → background-slideshow/index.js} +2 -11
  4. package/dist/{components/blurry-gradient.js → blurry-gradient/index.js} +15 -9
  5. package/dist/{components/carousel.d.ts → carousel/index.d.ts} +17 -9
  6. package/dist/{components/carousel.js → carousel/index.js} +34 -30
  7. package/dist/{components/countdown.js → countdown/index.js} +2 -11
  8. package/dist/{components/generic-error.js → generic-error/index.js} +1 -1
  9. package/dist/grid/index.d.ts +1196 -0
  10. package/dist/grid/index.js +239 -0
  11. package/dist/heading/index.d.ts +24 -0
  12. package/dist/{components/heading.js → heading/index.js} +15 -34
  13. package/dist/highlight/index.d.ts +13 -0
  14. package/dist/{components/highlight.js → highlight/index.js} +9 -17
  15. package/dist/hooks/use-nonce.d.ts +1 -6
  16. package/dist/hooks/use-nonce.js +1 -6
  17. package/dist/{components/icon-button.js → icon-button/index.js} +1 -1
  18. package/dist/{components/if.js → if/index.js} +1 -1
  19. package/dist/{components/iframe.js → iframe/index.js} +2 -11
  20. package/dist/{components/link.d.ts → link/index.d.ts} +19 -13
  21. package/dist/{components/link.js → link/index.js} +31 -36
  22. package/dist/list/index.d.ts +69 -0
  23. package/dist/list/index.js +65 -0
  24. package/dist/{components/markdown-container.js → markdown-container/index.js} +3 -67
  25. package/dist/{components/password-input.js → password-input/index.js} +2 -11
  26. package/dist/{components/picture.js → picture/index.js} +2 -11
  27. package/dist/{components/protected-email.d.ts → protected-email/index.d.ts} +1 -1
  28. package/dist/{components/protected-email.js → protected-email/index.js} +1 -1
  29. package/dist/text/index.d.ts +20 -0
  30. package/dist/text/index.js +38 -0
  31. package/dist/utils/author/index.d.ts +3 -0
  32. package/dist/utils/author/index.js +33 -0
  33. package/dist/utils/text/index.d.ts +15 -0
  34. package/dist/utils/text/index.js +73 -0
  35. package/package.json +170 -187
  36. package/src/background-slideshow/background-slideshow.stories.tsx +137 -0
  37. package/src/{components → background-slideshow}/background-slideshow.tsx +3 -1
  38. package/src/background-slideshow/index.ts +2 -0
  39. package/src/{stories/BlurryGradient.stories.tsx → blurry-gradient/blurry-gradient.stories.tsx} +1 -1
  40. package/src/{components → blurry-gradient}/blurry-gradient.tsx +14 -8
  41. package/src/blurry-gradient/index.ts +2 -0
  42. package/src/carousel/carousel-content.tsx +16 -0
  43. package/src/carousel/carousel-item.tsx +23 -0
  44. package/src/carousel/carousel-next.tsx +22 -0
  45. package/src/carousel/carousel-previous.tsx +22 -0
  46. package/src/{components/carousel.tsx → carousel/carousel-root.tsx} +8 -78
  47. package/src/carousel/carousel.stories.tsx +135 -0
  48. package/src/carousel/index.parts.ts +5 -0
  49. package/src/carousel/index.ts +4 -0
  50. package/src/{stories/Countdown.stories.tsx → countdown/countdown.stories.tsx} +1 -1
  51. package/src/{components → countdown}/countdown.tsx +3 -7
  52. package/src/countdown/index.ts +1 -0
  53. package/src/{stories/GenericError.stories.tsx → generic-error/generic-error.stories.tsx} +1 -1
  54. package/src/{components → generic-error}/generic-error.tsx +2 -0
  55. package/src/generic-error/index.ts +2 -0
  56. package/src/grid/grid-item.tsx +188 -0
  57. package/src/grid/grid-root.tsx +72 -0
  58. package/src/grid/grid.stories.tsx +236 -0
  59. package/src/grid/index.parts.ts +2 -0
  60. package/src/grid/index.ts +5 -0
  61. package/src/{stories/Heading.stories.tsx → heading/heading.stories.tsx} +1 -1
  62. package/src/{components → heading}/heading.tsx +17 -25
  63. package/src/heading/index.ts +2 -0
  64. package/src/{stories/Highlight.stories.tsx → highlight/highlight.stories.tsx} +1 -1
  65. package/src/{components → highlight}/highlight.tsx +13 -9
  66. package/src/highlight/index.ts +2 -0
  67. package/src/hooks/use-nonce.ts +0 -10
  68. package/src/{stories/IconButton.stories.tsx → icon-button/icon-button.stories.tsx} +1 -1
  69. package/src/icon-button/index.ts +2 -0
  70. package/src/{stories/If.stories.tsx → if/if.stories.tsx} +1 -1
  71. package/src/if/index.ts +1 -0
  72. package/src/{stories/Iframe.stories.tsx → iframe/iframe.stories.tsx} +1 -1
  73. package/src/{components → iframe}/iframe.tsx +1 -1
  74. package/src/iframe/index.ts +2 -0
  75. package/src/link/index.ts +2 -0
  76. package/src/{stories/Link.stories.tsx → link/link.stories.tsx} +52 -1
  77. package/src/{components → link}/link.tsx +39 -28
  78. package/src/list/index.parts.ts +2 -0
  79. package/src/list/index.ts +4 -0
  80. package/src/list/list-item.tsx +63 -0
  81. package/src/list/list-root-context.ts +21 -0
  82. package/src/list/list-root.tsx +81 -0
  83. package/src/list/list.css +32 -0
  84. package/src/list/list.stories.tsx +119 -0
  85. package/src/list/list.test.tsx +168 -0
  86. package/src/markdown-container/index.ts +2 -0
  87. package/src/{stories/MarkdownContainer.stories.tsx → markdown-container/markdown-container.stories.tsx} +56 -1
  88. package/src/{components → markdown-container}/markdown-container.tsx +3 -1
  89. package/src/password-input/index.ts +2 -0
  90. package/src/{stories/PasswordInput.stories.tsx → password-input/password-input.stories.tsx} +1 -1
  91. package/src/{components → password-input}/password-input.tsx +4 -4
  92. package/src/picture/index.ts +2 -0
  93. package/src/{stories/Picture.stories.tsx → picture/picture.stories.tsx} +1 -1
  94. package/src/{components → picture}/picture.tsx +2 -4
  95. package/src/protected-email/index.ts +2 -0
  96. package/src/{stories/ProtectedEmail.stories.tsx → protected-email/protected-email.stories.tsx} +1 -1
  97. package/src/{components → protected-email}/protected-email.tsx +3 -1
  98. package/src/tailwind.css +10 -0
  99. package/src/text/index.ts +2 -0
  100. package/src/{stories/Text.stories.tsx → text/text.stories.tsx} +1 -1
  101. package/src/text/text.tsx +46 -0
  102. package/src/utils/author/author.tsx +36 -0
  103. package/src/utils/author/index.ts +1 -0
  104. package/src/utils/text/index.ts +1 -0
  105. package/src/utils/text/text.tsx +103 -0
  106. package/dist/components/box.d.ts +0 -20
  107. package/dist/components/box.js +0 -50
  108. package/dist/components/definition-list.d.ts +0 -43
  109. package/dist/components/definition-list.js +0 -89
  110. package/dist/components/heading.d.ts +0 -27
  111. package/dist/components/highlight.d.ts +0 -19
  112. package/dist/components/item.d.ts +0 -70
  113. package/dist/components/item.js +0 -512
  114. package/dist/components/leaflet-map.d.ts +0 -34
  115. package/dist/components/leaflet-map.js +0 -201
  116. package/dist/components/list-item.d.ts +0 -19
  117. package/dist/components/list-item.js +0 -37
  118. package/dist/components/maptiler-map.d.ts +0 -27
  119. package/dist/components/maptiler-map.js +0 -129
  120. package/dist/components/text.d.ts +0 -20
  121. package/dist/components/text.js +0 -45
  122. package/dist/components/unordered-list.d.ts +0 -19
  123. package/dist/components/unordered-list.js +0 -39
  124. package/dist/utils/author.d.ts +0 -9
  125. package/dist/utils/author.js +0 -55
  126. package/dist/utils/cn.d.ts +0 -9
  127. package/dist/utils/cn.js +0 -14
  128. package/dist/utils/is-route-active.d.ts +0 -19
  129. package/dist/utils/is-route-active.js +0 -56
  130. package/dist/utils/text.d.ts +0 -24
  131. package/dist/utils/text.js +0 -127
  132. package/src/components/box.tsx +0 -45
  133. package/src/components/definition-list.tsx +0 -90
  134. package/src/components/item.tsx +0 -340
  135. package/src/components/leaflet-map.tsx +0 -294
  136. package/src/components/link.test.tsx +0 -387
  137. package/src/components/list-item.tsx +0 -30
  138. package/src/components/maptiler-map.tsx +0 -181
  139. package/src/components/text.tsx +0 -38
  140. package/src/components/unordered-list.tsx +0 -32
  141. package/src/hooks/use-nonce.test.ts +0 -35
  142. package/src/stories/BackgroundSlideshow.stories.tsx +0 -68
  143. package/src/stories/Box.stories.tsx +0 -83
  144. package/src/stories/Carousel.stories.tsx +0 -95
  145. package/src/stories/DefinitionList.stories.tsx +0 -51
  146. package/src/stories/Item.stories.tsx +0 -79
  147. package/src/stories/ListItem.stories.tsx +0 -38
  148. package/src/stories/UnorderedList.stories.tsx +0 -73
  149. package/src/styles/tailwind.css +0 -7
  150. package/src/test-setup.ts +0 -1
  151. package/src/utils/author.test.ts +0 -54
  152. package/src/utils/author.tsx +0 -73
  153. package/src/utils/cn.test.ts +0 -48
  154. package/src/utils/cn.ts +0 -14
  155. package/src/utils/is-route-active.test.ts +0 -80
  156. package/src/utils/is-route-active.ts +0 -100
  157. package/src/utils/text.test.ts +0 -152
  158. package/src/utils/text.tsx +0 -209
  159. package/src/vite-env.d.ts +0 -1
  160. /package/dist/{components/background-slideshow.d.ts → background-slideshow/index.d.ts} +0 -0
  161. /package/dist/{components/blurry-gradient.d.ts → blurry-gradient/index.d.ts} +0 -0
  162. /package/dist/{components/countdown.d.ts → countdown/index.d.ts} +0 -0
  163. /package/dist/{components/generic-error.d.ts → generic-error/index.d.ts} +0 -0
  164. /package/dist/{components/icon-button.d.ts → icon-button/index.d.ts} +0 -0
  165. /package/dist/{components/if.d.ts → if/index.d.ts} +0 -0
  166. /package/dist/{components/iframe.d.ts → iframe/index.d.ts} +0 -0
  167. /package/dist/{components/markdown-container.d.ts → markdown-container/index.d.ts} +0 -0
  168. /package/dist/{components/password-input.d.ts → password-input/index.d.ts} +0 -0
  169. /package/dist/{components/picture.d.ts → picture/index.d.ts} +0 -0
  170. /package/src/{components → icon-button}/icon-button.tsx +0 -0
  171. /package/src/{components → if}/if.tsx +0 -0
  172. /package/src/{styles/storybook.css → storybook.css} +0 -0
@@ -1,56 +0,0 @@
1
- // src/utils/is-route-active.ts
2
- var ROOT_PATH = "/";
3
- function isRouteActive(path, currentPath, end) {
4
- if (path === currentPath) {
5
- return true;
6
- }
7
- if (typeof end === "function") {
8
- return !end(currentPath);
9
- }
10
- const defaultEnd = end ?? true;
11
- const oneLevelDeep = 1;
12
- const threeLevelsDeep = 3;
13
- const depth = defaultEnd ? oneLevelDeep : threeLevelsDeep;
14
- return checkIfRouteIsActive(path, currentPath, depth);
15
- }
16
- function checkIfRouteIsActive(targetLink, currentRoute, depth = 1) {
17
- const currentRoutePath = currentRoute.split("?")[0] ?? "";
18
- if (!isRoot(currentRoutePath) && isRoot(targetLink)) {
19
- return false;
20
- }
21
- if (!currentRoutePath.includes(targetLink)) {
22
- return false;
23
- }
24
- const isSameRoute = targetLink === currentRoutePath;
25
- if (isSameRoute) {
26
- return true;
27
- }
28
- return hasMatchingSegments(targetLink, currentRoutePath, depth);
29
- }
30
- function splitIntoSegments(href) {
31
- return href.split("/").filter(Boolean);
32
- }
33
- function hasMatchingSegments(targetLink, currentRoute, depth) {
34
- const segments = splitIntoSegments(targetLink);
35
- const matchingSegments = numberOfMatchingSegments(currentRoute, segments);
36
- if (targetLink === currentRoute) {
37
- return true;
38
- }
39
- return matchingSegments > segments.length - (depth - 1);
40
- }
41
- function numberOfMatchingSegments(href, segments) {
42
- let count = 0;
43
- for (const segment of splitIntoSegments(href)) {
44
- if (segments.includes(segment)) {
45
- count += 1;
46
- } else {
47
- return count;
48
- }
49
- }
50
- return count;
51
- }
52
- function isRoot(path) {
53
- return path === ROOT_PATH;
54
- }
55
-
56
- export { checkIfRouteIsActive, isRouteActive };
@@ -1,24 +0,0 @@
1
- import react__default, { ReactNode } from 'react';
2
-
3
- declare const lowerCaseSzett: (text: ReactNode | string, _returnType?: "string") => ReactNode;
4
- declare function toBoolean(value: string | boolean | null | undefined): boolean;
5
- declare function shy(input: string | ReactNode | null): string | ReactNode | null;
6
- /**
7
- * Replace straight quotes with typographically correct quotes for the given locale.
8
- *
9
- * @param text - The text containing straight quotes
10
- * @param locale - The locale to use for quote style (e.g., 'en', 'de', 'fr')
11
- * @returns Text with typographic quotes
12
- *
13
- * @example
14
- * typographicQuotes('"Hello"', 'en') // → '"Hello"'
15
- * typographicQuotes('"Hello"', 'de') // → '„Hello"'
16
- * typographicQuotes('"Hello"', 'fr') // → '« Hello »'
17
- */
18
- declare function typographicQuotes(text: string, locale: string): string;
19
- /**
20
- * @deprecated Use `typographicQuotes` for quote replacement and `shy` separately
21
- */
22
- declare function replaceSpecialChars(text: string, locale: string): react__default.ReactNode;
23
-
24
- export { lowerCaseSzett, replaceSpecialChars, shy, toBoolean, typographicQuotes };
@@ -1,127 +0,0 @@
1
- import React, { isValidElement, cloneElement } from 'react';
2
- import { jsx } from 'react/jsx-runtime';
3
-
4
- // src/utils/text.tsx
5
- var lowerCaseSzett = (text, _returnType) => {
6
- const processString = (str) => {
7
- const parts = str.split(/(ß)/g);
8
- return parts.map(
9
- (part, index) => part === "\xDF" ? /* @__PURE__ */ jsx(
10
- "span",
11
- {
12
- className: "lowercase",
13
- children: part
14
- },
15
- index.toString()
16
- ) : part
17
- );
18
- };
19
- if (typeof text === "string") {
20
- return processString(text);
21
- }
22
- if (isValidElement(text)) {
23
- const element = text;
24
- const { children, ...props } = element.props;
25
- return cloneElement(element, {
26
- ...props,
27
- children: lowerCaseSzett(children)
28
- });
29
- }
30
- if (Array.isArray(text)) {
31
- return text.map((child, index) => /* @__PURE__ */ jsx(React.Fragment, { children: lowerCaseSzett(child) }, index.toString()));
32
- }
33
- return text;
34
- };
35
- function toBoolean(value) {
36
- if (typeof value === "boolean") {
37
- return value;
38
- }
39
- return value === "true" || value === "1";
40
- }
41
- function replaceShyInString(input) {
42
- return input.replace(/­/g, "\xAD");
43
- }
44
- function replaceShyInReactNode(node) {
45
- if (typeof node === "string") {
46
- return node.replace(/\u00AD/g, "");
47
- }
48
- if (isValidElement(node)) {
49
- const element = node;
50
- const { children, ...props } = element.props;
51
- return cloneElement(element, {
52
- ...props,
53
- children: replaceShyInReactNode(children)
54
- });
55
- }
56
- if (Array.isArray(node)) {
57
- return node.map((child, index) => /* @__PURE__ */ jsx(React.Fragment, { children: replaceShyInReactNode(child) }, index.toString()));
58
- }
59
- return node;
60
- }
61
- function shy(input) {
62
- if (input === null) {
63
- return null;
64
- }
65
- if (typeof input === "string") {
66
- return replaceShyInString(input);
67
- }
68
- return replaceShyInReactNode(input);
69
- }
70
- var quoteStyles = {
71
- cs: { close: "\u201D", closeSingle: "\u2019", open: "\u201E", openSingle: "\u201A" },
72
- // Danish, Norwegian - » « › ‹
73
- da: { close: "\xAB", closeSingle: "\u203A", open: "\xBB", openSingle: "\u2039" },
74
- // German (Germany, Austria) - „ " ‚ '
75
- de: { close: "\u201D", closeSingle: "\u2019", open: "\u201E", openSingle: "\u201A" },
76
- // German (Switzerland) - « » ‹ ›
77
- "de-ch": { close: "\xBB", closeSingle: "\u203A", open: "\xAB", openSingle: "\u2039" },
78
- // English (US, UK, etc.) - " " ' '
79
- en: { close: "\u201D", closeSingle: "\u2019", open: "\u201C", openSingle: "\u2018" },
80
- // Spanish, Italian, Portuguese - « » " "
81
- es: { close: "\xBB", closeSingle: "\u201D", open: "\xAB", openSingle: "\u201C" },
82
- fi: { close: "\u201D", closeSingle: "\u2019", open: "\u201D", openSingle: "\u2019" },
83
- // French - « » ‹ › (with spaces)
84
- fr: { close: " \xBB", closeSingle: " \u203A", open: "\xAB ", openSingle: "\u2039 " },
85
- hu: { close: "\u201D", closeSingle: "\u2019", open: "\u201E", openSingle: "\u201A" },
86
- it: { close: "\xBB", closeSingle: "\u201D", open: "\xAB", openSingle: "\u201C" },
87
- // Japanese - 「 」 『 』
88
- ja: { close: "\u300D", closeSingle: "\u300F", open: "\u300C", openSingle: "\u300E" },
89
- // Dutch - ' ' ' '
90
- nl: { close: "\u2019", closeSingle: "\u2019", open: "\u2018", openSingle: "\u2018" },
91
- no: { close: "\xAB", closeSingle: "\u203A", open: "\xBB", openSingle: "\u2039" },
92
- // Polish, Czech, Hungarian - „ " ‚ '
93
- pl: { close: "\u201D", closeSingle: "\u2019", open: "\u201E", openSingle: "\u201A" },
94
- pt: { close: "\xBB", closeSingle: "\u201D", open: "\xAB", openSingle: "\u201C" },
95
- // Russian - « » ‚ '
96
- ru: { close: "\xBB", closeSingle: "\u2019", open: "\xAB", openSingle: "\u201A" },
97
- // Swedish, Finnish - " " ' '
98
- sv: { close: "\u201D", closeSingle: "\u2019", open: "\u201D", openSingle: "\u2019" },
99
- // Chinese - 「 」 『 』
100
- zh: { close: "\u300D", closeSingle: "\u300F", open: "\u300C", openSingle: "\u300E" }
101
- };
102
- function getQuoteStyle(locale) {
103
- const normalized = locale.toLowerCase();
104
- const exactMatch = quoteStyles[normalized];
105
- if (exactMatch) {
106
- return exactMatch;
107
- }
108
- const baseLanguage = normalized.split("-")[0];
109
- if (baseLanguage) {
110
- const baseMatch = quoteStyles[baseLanguage];
111
- if (baseMatch) {
112
- return baseMatch;
113
- }
114
- }
115
- return quoteStyles.en;
116
- }
117
- function typographicQuotes(text, locale) {
118
- const style = getQuoteStyle(locale);
119
- let result = text.replace(/"([^"]*)"/g, `${style.open}$1${style.close}`);
120
- result = result.replace(/'([^']*)'/g, `${style.openSingle}$1${style.closeSingle}`);
121
- return result;
122
- }
123
- function replaceSpecialChars(text, locale) {
124
- return shy(typographicQuotes(text, locale));
125
- }
126
-
127
- export { lowerCaseSzett, replaceSpecialChars, shy, toBoolean, typographicQuotes };
@@ -1,45 +0,0 @@
1
- import type { ComponentProps, ElementType } from 'react';
2
-
3
- import { cva, type VariantProps } from '../utils/cn';
4
-
5
- const box = cva({
6
- defaultVariants: {
7
- variant: 'primary',
8
- },
9
- variants: {
10
- variant: {
11
- aside: [],
12
- code: ['font-monospace', 'overflow-scroll'],
13
- container: ['u-container'],
14
- flex: ['flex'],
15
- grid: ['u-grid'],
16
- main: [],
17
- primary: [],
18
- section: ['u-grid', 'content-start'],
19
- },
20
- },
21
- });
22
-
23
- export interface BoxProps extends ComponentProps<'div'>, VariantProps<typeof box> {
24
- as?: ElementType;
25
- }
26
-
27
- export const Box = ({
28
- as: Component = 'div',
29
- children,
30
- className,
31
- variant,
32
- ...props
33
- }: BoxProps) => {
34
- return (
35
- <Component
36
- className={box({
37
- className,
38
- variant,
39
- })}
40
- {...props}
41
- >
42
- {children}
43
- </Component>
44
- );
45
- };
@@ -1,90 +0,0 @@
1
- import type { ComponentProps } from 'react';
2
- import { cva, type VariantProps } from '../utils/cn';
3
-
4
- const dl = cva({
5
- base: ['grid'],
6
- defaultVariants: {
7
- variant: 'primary',
8
- },
9
- variants: {
10
- variant: {
11
- primary: ['grid-cols-[auto,1fr]', 'gap-x-s', 'gap-y-2xs'], // Two-column grid with gap
12
- unstyled: ['list-none', 'p-0', 'grid-cols-1'], // Unstyled, single column
13
- },
14
- },
15
- });
16
-
17
- const dt = cva({
18
- base: [],
19
- defaultVariants: {
20
- variant: 'primary',
21
- },
22
- variants: {
23
- variant: {
24
- primary: ['uppercase', 'tracking-wide'],
25
- },
26
- },
27
- });
28
-
29
- const dd = cva({
30
- base: ['mb-xs'],
31
- defaultVariants: {
32
- variant: 'primary',
33
- },
34
- variants: {
35
- variant: {
36
- primary: [],
37
- },
38
- },
39
- });
40
-
41
- export interface DefinitionListProps extends ComponentProps<'dl'>, VariantProps<typeof dl> {}
42
-
43
- export interface DtProps extends ComponentProps<'dt'>, VariantProps<typeof dt> {}
44
-
45
- export interface DdProps extends ComponentProps<'dd'>, VariantProps<typeof dd> {}
46
-
47
- export const DefinitionList = (props: DefinitionListProps) => {
48
- const { children, className, variant } = props;
49
-
50
- return (
51
- <dl
52
- className={dl({
53
- className,
54
- variant,
55
- })}
56
- >
57
- {children}
58
- </dl>
59
- );
60
- };
61
-
62
- export const Dt = (props: DtProps) => {
63
- const { children, className, variant } = props;
64
-
65
- return (
66
- <dt
67
- className={dt({
68
- className,
69
- variant,
70
- })}
71
- >
72
- {children}
73
- </dt>
74
- );
75
- };
76
-
77
- export const Dd = (props: DdProps) => {
78
- const { children, className, variant } = props;
79
-
80
- return (
81
- <dd
82
- className={dd({
83
- className,
84
- variant,
85
- })}
86
- >
87
- {children}
88
- </dd>
89
- );
90
- };
@@ -1,340 +0,0 @@
1
- import type { ComponentProps, ElementType } from 'react';
2
- import { cva, type VariantProps } from '../utils/cn';
3
- import { Link } from './link';
4
-
5
- export const priorities = {
6
- high: [],
7
- low: [],
8
- medium: [],
9
- };
10
-
11
- export const paddingValues = {
12
- default: '',
13
- gutter: 'p-grid-gutter',
14
- };
15
-
16
- export const width = {
17
- full: ['col-span-12'],
18
- lg: ['col-span-12', '@xs:col-span-8', '@md:col-span-8', '@xl:col-span-8'],
19
- md: ['col-span-12', '@xs:col-span-6', '@md:col-span-6', '@xl:col-span-6'],
20
- sm: ['col-span-6', '@xs:col-span-6', '@md:col-span-4', '@xl:col-span-4'],
21
- xl: ['col-span-12', '@xs:col-span-8', '@md:col-span-9', '@xl:col-span-10'],
22
- xs: ['col-span-6', '@xs:col-span-4', '@md:col-span-3', '@xl:col-span-2'],
23
- };
24
-
25
- export const height = {
26
- 1: ['row-span-1'],
27
- 2: ['row-span-2'],
28
- 3: ['row-span-3'],
29
- 4: ['row-span-4'],
30
- 5: ['row-span-5'],
31
- 6: ['row-span-6'],
32
- };
33
-
34
- export const themeColors = {
35
- black: [],
36
- blue: [],
37
- coral: [],
38
- cyan: [],
39
- gray: [],
40
- green: [],
41
- lime: [],
42
- neutral: [],
43
- olive: [],
44
- orange: [],
45
- pink: [],
46
- purple: [],
47
- red: [],
48
- teal: [],
49
- unstyled: [],
50
- white: [],
51
- yellow: [],
52
- };
53
-
54
- const item = cva({
55
- base: ['relative'],
56
- compoundVariants: [
57
- {
58
- className: ['bg-gray-300/20', 'black:bg-black/20'],
59
- priority: 'low',
60
- themeColor: 'black',
61
- },
62
- {
63
- className: ['bg-gray-300/50', 'black:bg-black/50'],
64
- priority: 'medium',
65
- themeColor: 'black',
66
- },
67
- {
68
- className: ['bg-gray-300/90', 'black:bg-black/90'],
69
- priority: 'high',
70
- themeColor: 'black',
71
- },
72
- {
73
- className: ['bg-blue-300/20', 'black:bg-blue-500/20'],
74
- priority: 'low',
75
- themeColor: 'blue',
76
- },
77
- {
78
- className: ['bg-blue-300/50', 'black:bg-blue-500/50'],
79
- priority: 'medium',
80
- themeColor: 'blue',
81
- },
82
- {
83
- className: ['bg-blue-300/90', 'black:bg-blue-500/80'],
84
- priority: 'high',
85
- themeColor: 'blue',
86
- },
87
- {
88
- className: ['bg-coral-300/20', 'black:bg-coral-500/20'],
89
- priority: 'low',
90
- themeColor: 'coral',
91
- },
92
- {
93
- className: ['bg-coral-300/50', 'black:bg-coral-500/50'],
94
- priority: 'medium',
95
- themeColor: 'coral',
96
- },
97
- {
98
- className: ['bg-coral-300/90', 'black:bg-coral-500/80'],
99
- priority: 'high',
100
- themeColor: 'coral',
101
- },
102
- {
103
- className: ['bg-cyan-300/20', 'black:bg-cyan-500/20'],
104
- priority: 'low',
105
- themeColor: 'cyan',
106
- },
107
- {
108
- className: ['bg-cyan-300/50', 'black:bg-cyan-500/50'],
109
- priority: 'medium',
110
- themeColor: 'cyan',
111
- },
112
- {
113
- className: ['bg-cyan-300/90', 'black:bg-cyan-500/80'],
114
- priority: 'high',
115
- themeColor: 'cyan',
116
- },
117
- {
118
- className: ['bg-green-300/20', 'black:bg-green-500/20'],
119
- priority: 'low',
120
- themeColor: 'green',
121
- },
122
- {
123
- className: ['bg-green-300/50', 'black:bg-green-500/50'],
124
- priority: 'medium',
125
- themeColor: 'green',
126
- },
127
- {
128
- className: ['bg-green-300/90', 'black:bg-green-500/80'],
129
- priority: 'high',
130
- themeColor: 'green',
131
- },
132
- {
133
- className: ['bg-lime-300/20', 'black:bg-lime-500/20'],
134
- priority: 'low',
135
- themeColor: 'lime',
136
- },
137
- {
138
- className: ['bg-lime-300/50', 'black:bg-lime-500/50'],
139
- priority: 'medium',
140
- themeColor: 'lime',
141
- },
142
- {
143
- className: ['bg-lime-300/90', 'black:bg-lime-500/80'],
144
- priority: 'high',
145
- themeColor: 'lime',
146
- },
147
- {
148
- className: ['bg-gray-100/40', 'black:bg-gray-500/5'],
149
- priority: 'low',
150
- themeColor: 'neutral',
151
- },
152
- {
153
- className: ['bg-gray-200/30', 'black:bg-gray-500/20'],
154
- priority: 'medium',
155
- themeColor: 'neutral',
156
- },
157
- {
158
- className: ['bg-gray-300/70', 'black:bg-gray-500/50'],
159
- priority: 'high',
160
- themeColor: 'neutral',
161
- },
162
- {
163
- className: ['bg-olive-300/20', 'black:bg-olive-500/20'],
164
- priority: 'low',
165
- themeColor: 'olive',
166
- },
167
- {
168
- className: ['bg-olive-300/50', 'black:bg-olive-500/50'],
169
- priority: 'medium',
170
- themeColor: 'olive',
171
- },
172
- {
173
- className: ['bg-olive-300/90', 'black:bg-olive-500/80'],
174
- priority: 'high',
175
- themeColor: 'olive',
176
- },
177
- {
178
- className: ['bg-orange-300/20', 'black:bg-orange-500/20'],
179
- priority: 'low',
180
- themeColor: 'orange',
181
- },
182
- {
183
- className: ['bg-orange-300/50', 'black:bg-orange-500/50'],
184
- priority: 'medium',
185
- themeColor: 'orange',
186
- },
187
- {
188
- className: ['bg-orange-300/90', 'black:bg-orange-500/80'],
189
- priority: 'high',
190
- themeColor: 'orange',
191
- },
192
- {
193
- className: ['bg-pink-300/20', 'black:bg-pink-500/20'],
194
- priority: 'low',
195
- themeColor: 'pink',
196
- },
197
- {
198
- className: ['bg-pink-300/50', 'black:bg-pink-500/50'],
199
- priority: 'medium',
200
- themeColor: 'pink',
201
- },
202
- {
203
- className: ['bg-pink-300/90', 'black:bg-pink-500/80'],
204
- priority: 'high',
205
- themeColor: 'pink',
206
- },
207
- {
208
- className: ['bg-purple-300/20', 'black:bg-purple-500/20'],
209
- priority: 'low',
210
- themeColor: 'purple',
211
- },
212
- {
213
- className: ['bg-purple-300/50', 'black:bg-purple-500/50'],
214
- priority: 'medium',
215
- themeColor: 'purple',
216
- },
217
- {
218
- className: ['bg-purple-300/90', 'black:bg-purple-500/80'],
219
- priority: 'high',
220
- themeColor: 'purple',
221
- },
222
- {
223
- className: ['bg-red-300/20', 'black:bg-red-500/20'],
224
- priority: 'low',
225
- themeColor: 'red',
226
- },
227
- {
228
- className: ['bg-red-300/50', 'black:bg-red-500/50'],
229
- priority: 'medium',
230
- themeColor: 'red',
231
- },
232
- {
233
- className: ['bg-red-300/90', 'black:bg-red-500/80'],
234
- priority: 'high',
235
- themeColor: 'red',
236
- },
237
- {
238
- className: ['bg-teal-300/20', 'black:bg-teal-500/20'],
239
- priority: 'low',
240
- themeColor: 'teal',
241
- },
242
- {
243
- className: ['bg-teal-300/50', 'black:bg-teal-500/50'],
244
- priority: 'medium',
245
- themeColor: 'teal',
246
- },
247
- {
248
- className: ['bg-teal-300/90', 'black:bg-teal-500/80'],
249
- priority: 'high',
250
- themeColor: 'teal',
251
- },
252
- {
253
- className: ['bg-yellow-300/20', 'black:bg-yellow-500/20'],
254
- priority: 'low',
255
- themeColor: 'yellow',
256
- },
257
- {
258
- className: ['bg-yellow-300/50', 'black:bg-yellow-500/50'],
259
- priority: 'medium',
260
- themeColor: 'yellow',
261
- },
262
- {
263
- className: ['bg-yellow-300/90', 'black:bg-yellow-500/80'],
264
- priority: 'high',
265
- themeColor: 'yellow',
266
- },
267
- {
268
- className: ['bg-white/20', 'black:bg-white/20'],
269
- priority: 'low',
270
- themeColor: 'white',
271
- },
272
- {
273
- className: ['bg-white/50', 'black:bg-white/50', 'black:text-black'],
274
- priority: 'medium',
275
- themeColor: 'white',
276
- },
277
- {
278
- className: ['bg-white/90', 'black:bg-white/80', 'black:text-black'],
279
- priority: 'high',
280
- themeColor: 'white',
281
- },
282
- ],
283
- defaultVariants: {
284
- height: 1,
285
- padding: 'default',
286
- priority: 'medium',
287
- themeColor: 'unstyled',
288
- variant: 'primary',
289
- width: 'full',
290
- },
291
- variants: {
292
- height: height,
293
- padding: paddingValues,
294
- priority: priorities,
295
- themeColor: themeColors,
296
- variant: {
297
- primary: [],
298
- reset: ['bg-transparent', 'rounded-none'],
299
- spacer: ['hidden'],
300
- unstyled: [],
301
- },
302
- width: width,
303
- },
304
- });
305
-
306
- export interface ItemProps extends ComponentProps<'div'>, VariantProps<typeof item> {
307
- as?: ElementType;
308
- link?: string;
309
- }
310
-
311
- export const Item = ({
312
- as: Component = 'div',
313
- children,
314
- className,
315
- height,
316
- link,
317
- padding,
318
- priority,
319
- themeColor,
320
- variant,
321
- width,
322
- ...props
323
- }: ItemProps) => {
324
- return (
325
- <Component
326
- className={item({
327
- className,
328
- height,
329
- padding,
330
- priority,
331
- themeColor,
332
- variant,
333
- width,
334
- })}
335
- {...props}
336
- >
337
- {link ? <Link to={link}>{children}</Link> : children}
338
- </Component>
339
- );
340
- };