@1ry/basic-react-primitive-components 0.1.4 → 0.1.6
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/lib/components/Box.js +18 -1
- package/lib/components/Box.js.map +1 -1
- package/lib/components/Box.mjs +18 -1
- package/lib/components/Box.mjs.map +1 -1
- package/lib/components/Button.js.map +1 -1
- package/lib/components/Button.mjs.map +1 -1
- package/lib/components/ErrorMessage.js +11 -4
- package/lib/components/ErrorMessage.js.map +1 -1
- package/lib/components/ErrorMessage.mjs +11 -4
- package/lib/components/ErrorMessage.mjs.map +1 -1
- package/lib/components/IconButton.js.map +1 -1
- package/lib/components/IconButton.mjs.map +1 -1
- package/lib/components/Input.js.map +1 -1
- package/lib/components/Input.mjs.map +1 -1
- package/lib/components/Text.js +1 -1
- package/lib/components/Text.js.map +1 -1
- package/lib/components/Text.mjs +1 -1
- package/lib/components/Text.mjs.map +1 -1
- package/lib/index.css +1 -1
- package/lib/index.d.ts +6 -6
- package/lib/styles/Backgrounds.module.scss.js +8 -0
- package/lib/styles/Backgrounds.module.scss.js.map +1 -0
- package/lib/styles/Backgrounds.module.scss.mjs +4 -0
- package/lib/styles/Backgrounds.module.scss.mjs.map +1 -0
- package/lib/styles/Button.module.scss.js +1 -1
- package/lib/styles/Button.module.scss.mjs +1 -1
- package/lib/types/TextVariant.js +1 -0
- package/lib/types/TextVariant.js.map +1 -1
- package/lib/types/TextVariant.mjs +1 -0
- package/lib/types/TextVariant.mjs.map +1 -1
- package/package.json +27 -3
package/lib/components/Box.js
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
var shortId = require('@1ry/short-id');
|
|
4
4
|
var tailwindVariants = require('tailwind-variants');
|
|
5
5
|
var React = require('react');
|
|
6
|
+
var Backgrounds_module = require('../styles/Backgrounds.module.scss.js');
|
|
6
7
|
|
|
7
8
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
8
9
|
|
|
@@ -21,6 +22,21 @@ const boxStyles = tailwindVariants.tv({
|
|
|
21
22
|
horizontal: 'flex flex-row',
|
|
22
23
|
vertical: 'flex flex-col',
|
|
23
24
|
},
|
|
25
|
+
background: {
|
|
26
|
+
teal: Backgrounds_module.default.bgTeal,
|
|
27
|
+
yellow: Backgrounds_module.default.bgYellow,
|
|
28
|
+
gray: Backgrounds_module.default.bgGray,
|
|
29
|
+
transparent: 'bg-transparent',
|
|
30
|
+
magenta: Backgrounds_module.default.bgMagenta,
|
|
31
|
+
cyan: Backgrounds_module.default.bgCyan,
|
|
32
|
+
amber: Backgrounds_module.default.bgAmber,
|
|
33
|
+
lime: Backgrounds_module.default.bgLime,
|
|
34
|
+
indigo: Backgrounds_module.default.bgIndigo,
|
|
35
|
+
rose: Backgrounds_module.default.bgRose,
|
|
36
|
+
slate: Backgrounds_module.default.bgSlate,
|
|
37
|
+
violet: Backgrounds_module.default.bgViolet,
|
|
38
|
+
orange: Backgrounds_module.default.bgOrange,
|
|
39
|
+
},
|
|
24
40
|
align: {
|
|
25
41
|
none: '',
|
|
26
42
|
left: 'items-start text-left',
|
|
@@ -46,7 +62,7 @@ const boxStyles = tailwindVariants.tv({
|
|
|
46
62
|
justify: 'none',
|
|
47
63
|
},
|
|
48
64
|
});
|
|
49
|
-
function Box({ variant = 'default', as, className, orientation = 'none', align = 'none', justify = 'none', children, isolate = false, id: customId, gap = 0, ...props }) {
|
|
65
|
+
function Box({ variant = 'default', as, className, orientation = 'none', align = 'none', justify = 'none', background = 'transparent', children, isolate = false, id: customId, gap = 0, ...props }) {
|
|
50
66
|
const id = React.useMemo(() => customId ?? shortId.generateShortId(7), [customId]);
|
|
51
67
|
const Component = variant === 'navbar' && !as ? 'nav' : as || 'div';
|
|
52
68
|
React.useMemo(() => React.Children.count(children) ?? [], [children]);
|
|
@@ -58,6 +74,7 @@ function Box({ variant = 'default', as, className, orientation = 'none', align =
|
|
|
58
74
|
justify,
|
|
59
75
|
isolate,
|
|
60
76
|
className,
|
|
77
|
+
background,
|
|
61
78
|
}), ...props }, children));
|
|
62
79
|
}
|
|
63
80
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.js","sources":["../../src/components/Box.tsx"],"sourcesContent":["import { generateShortId } from '@1ry/short-id'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\nimport React, { Children, HTMLAttributes, ReactNode, useMemo } from 'react'\n\nconst boxStyles = tv({\n\tbase: 'transition-all duration-200',\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: '',\n\t\t\tnavbar: 'navbar',\n\t\t\tdock: 'dock',\n\t\t},\n\t\torientation: {\n\t\t\tnone: '',\n\t\t\thorizontal: 'flex flex-row',\n\t\t\tvertical: 'flex flex-col',\n\t\t},\n\t\talign: {\n\t\t\tnone: '',\n\t\t\tleft: 'items-start text-left',\n\t\t\tcenter: 'items-center text-center',\n\t\t\tright:\n\t\t\t\t'items-end text-right data-[has-gap=true]:place-self-end-safe data-[has-gap=true]:place-content-end-safe data-[has-gap=true]:place-items-end-safe',\n\t\t},\n\t\tjustify: {\n\t\t\tnone: 'justify-none',\n\t\t\tstart: 'justify-start',\n\t\t\tend: 'justify-end',\n\t\t\tcenter: 'justify-center',\n\t\t\tevenly: 'justify-evenly',\n\t\t\tspaceBetween: 'justify-between',\n\t\t},\n\t\tisolate: {\n\t\t\ttrue: 'isolate',\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: 'default',\n\t\torientation: 'none',\n\t\talign: 'none',\n\t\tjustify: 'none',\n\t},\n})\n\nexport type BoxProps = HTMLAttributes<HTMLDivElement> &\n\tVariantProps<typeof boxStyles> & {\n\t\tas?: 'div' | 'nav' | 'footer' | 'main' | 'article' | 'aside' | 'section' | 'header'\n\t\tchildren?: ReactNode\n\t\tgap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16\n\t}\n\nexport function Box({\n\tvariant = 'default',\n\tas,\n\tclassName,\n\torientation = 'none',\n\talign = 'none',\n\tjustify = 'none',\n\tchildren,\n\tisolate = false,\n\tid: customId,\n\tgap = 0,\n\t...props\n}:
|
|
1
|
+
{"version":3,"file":"Box.js","sources":["../../src/components/Box.tsx"],"sourcesContent":["import { generateShortId } from '@1ry/short-id'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\nimport React, { Children, HTMLAttributes, ReactNode, useMemo } from 'react'\nimport backgroundStyles from '$styles/Backgrounds.module.scss'\n\nconst boxStyles = tv({\n\tbase: 'transition-all duration-200',\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: '',\n\t\t\tnavbar: 'navbar',\n\t\t\tdock: 'dock',\n\t\t},\n\t\torientation: {\n\t\t\tnone: '',\n\t\t\thorizontal: 'flex flex-row',\n\t\t\tvertical: 'flex flex-col',\n\t\t},\n background: {\n teal: backgroundStyles.bgTeal,\n yellow: backgroundStyles.bgYellow,\n gray: backgroundStyles.bgGray,\n transparent: 'bg-transparent',\n magenta: backgroundStyles.bgMagenta,\n cyan: backgroundStyles.bgCyan,\n amber: backgroundStyles.bgAmber,\n lime: backgroundStyles.bgLime,\n indigo: backgroundStyles.bgIndigo,\n rose: backgroundStyles.bgRose,\n slate: backgroundStyles.bgSlate,\n violet: backgroundStyles.bgViolet,\n orange: backgroundStyles.bgOrange,\n },\n\t\talign: {\n\t\t\tnone: '',\n\t\t\tleft: 'items-start text-left',\n\t\t\tcenter: 'items-center text-center',\n\t\t\tright:\n\t\t\t\t'items-end text-right data-[has-gap=true]:place-self-end-safe data-[has-gap=true]:place-content-end-safe data-[has-gap=true]:place-items-end-safe',\n\t\t},\n\t\tjustify: {\n\t\t\tnone: 'justify-none',\n\t\t\tstart: 'justify-start',\n\t\t\tend: 'justify-end',\n\t\t\tcenter: 'justify-center',\n\t\t\tevenly: 'justify-evenly',\n\t\t\tspaceBetween: 'justify-between',\n\t\t},\n\t\tisolate: {\n\t\t\ttrue: 'isolate',\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: 'default',\n\t\torientation: 'none',\n\t\talign: 'none',\n\t\tjustify: 'none',\n\t},\n})\n\nexport type BoxProps = HTMLAttributes<HTMLDivElement> &\n\tVariantProps<typeof boxStyles> & {\n\t\tas?: 'div' | 'nav' | 'footer' | 'main' | 'article' | 'aside' | 'section' | 'header'\n\t\tchildren?: ReactNode\n\t\tgap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16\n\t}\n\nexport function Box({\n\tvariant = 'default',\n\tas,\n\tclassName,\n\torientation = 'none',\n\talign = 'none',\n\tjustify = 'none',\n background = 'transparent',\n\tchildren,\n\tisolate = false,\n\tid: customId,\n\tgap = 0,\n\t...props\n}: BoxProps) {\n\tconst id = useMemo(() => customId ?? generateShortId(7), [customId])\n\tconst Component = variant === 'navbar' && !as ? 'nav' : as || 'div'\n\tconst childrenCount = useMemo(() => Children.count(children) ?? [], [children])\n\tconst gapStyle = gap ? { gap: `${gap * 0.25}rem` } : undefined\n\treturn (\n\t\t<Component\n\t\t\tid={id}\n\t\t\tstyle={{ ...gapStyle, ...props.style }}\n\t\t\tdata-has-gap={gap > 0 ? 'true' : undefined}\n\t\t\tclassName={boxStyles({\n\t\t\t\tvariant,\n\t\t\t\torientation,\n\t\t\t\talign,\n\t\t\t\tjustify,\n\t\t\t\tisolate,\n\t\t\t\tclassName,\n background,\n\t\t\t})}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Component>\n\t)\n}\n"],"names":["tv","backgroundStyles","useMemo","generateShortId","Children","React"],"mappings":"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"}
|
package/lib/components/Box.mjs
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { generateShortId } from '@1ry/short-id';
|
|
2
2
|
import { tv } from 'tailwind-variants';
|
|
3
3
|
import React, { useMemo, Children } from 'react';
|
|
4
|
+
import backgroundStyles from '../styles/Backgrounds.module.scss.mjs';
|
|
4
5
|
|
|
5
6
|
const boxStyles = tv({
|
|
6
7
|
base: 'transition-all duration-200',
|
|
@@ -15,6 +16,21 @@ const boxStyles = tv({
|
|
|
15
16
|
horizontal: 'flex flex-row',
|
|
16
17
|
vertical: 'flex flex-col',
|
|
17
18
|
},
|
|
19
|
+
background: {
|
|
20
|
+
teal: backgroundStyles.bgTeal,
|
|
21
|
+
yellow: backgroundStyles.bgYellow,
|
|
22
|
+
gray: backgroundStyles.bgGray,
|
|
23
|
+
transparent: 'bg-transparent',
|
|
24
|
+
magenta: backgroundStyles.bgMagenta,
|
|
25
|
+
cyan: backgroundStyles.bgCyan,
|
|
26
|
+
amber: backgroundStyles.bgAmber,
|
|
27
|
+
lime: backgroundStyles.bgLime,
|
|
28
|
+
indigo: backgroundStyles.bgIndigo,
|
|
29
|
+
rose: backgroundStyles.bgRose,
|
|
30
|
+
slate: backgroundStyles.bgSlate,
|
|
31
|
+
violet: backgroundStyles.bgViolet,
|
|
32
|
+
orange: backgroundStyles.bgOrange,
|
|
33
|
+
},
|
|
18
34
|
align: {
|
|
19
35
|
none: '',
|
|
20
36
|
left: 'items-start text-left',
|
|
@@ -40,7 +56,7 @@ const boxStyles = tv({
|
|
|
40
56
|
justify: 'none',
|
|
41
57
|
},
|
|
42
58
|
});
|
|
43
|
-
function Box({ variant = 'default', as, className, orientation = 'none', align = 'none', justify = 'none', children, isolate = false, id: customId, gap = 0, ...props }) {
|
|
59
|
+
function Box({ variant = 'default', as, className, orientation = 'none', align = 'none', justify = 'none', background = 'transparent', children, isolate = false, id: customId, gap = 0, ...props }) {
|
|
44
60
|
const id = useMemo(() => customId ?? generateShortId(7), [customId]);
|
|
45
61
|
const Component = variant === 'navbar' && !as ? 'nav' : as || 'div';
|
|
46
62
|
useMemo(() => Children.count(children) ?? [], [children]);
|
|
@@ -52,6 +68,7 @@ function Box({ variant = 'default', as, className, orientation = 'none', align =
|
|
|
52
68
|
justify,
|
|
53
69
|
isolate,
|
|
54
70
|
className,
|
|
71
|
+
background,
|
|
55
72
|
}), ...props }, children));
|
|
56
73
|
}
|
|
57
74
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.mjs","sources":["../../src/components/Box.tsx"],"sourcesContent":["import { generateShortId } from '@1ry/short-id'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\nimport React, { Children, HTMLAttributes, ReactNode, useMemo } from 'react'\n\nconst boxStyles = tv({\n\tbase: 'transition-all duration-200',\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: '',\n\t\t\tnavbar: 'navbar',\n\t\t\tdock: 'dock',\n\t\t},\n\t\torientation: {\n\t\t\tnone: '',\n\t\t\thorizontal: 'flex flex-row',\n\t\t\tvertical: 'flex flex-col',\n\t\t},\n\t\talign: {\n\t\t\tnone: '',\n\t\t\tleft: 'items-start text-left',\n\t\t\tcenter: 'items-center text-center',\n\t\t\tright:\n\t\t\t\t'items-end text-right data-[has-gap=true]:place-self-end-safe data-[has-gap=true]:place-content-end-safe data-[has-gap=true]:place-items-end-safe',\n\t\t},\n\t\tjustify: {\n\t\t\tnone: 'justify-none',\n\t\t\tstart: 'justify-start',\n\t\t\tend: 'justify-end',\n\t\t\tcenter: 'justify-center',\n\t\t\tevenly: 'justify-evenly',\n\t\t\tspaceBetween: 'justify-between',\n\t\t},\n\t\tisolate: {\n\t\t\ttrue: 'isolate',\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: 'default',\n\t\torientation: 'none',\n\t\talign: 'none',\n\t\tjustify: 'none',\n\t},\n})\n\nexport type BoxProps = HTMLAttributes<HTMLDivElement> &\n\tVariantProps<typeof boxStyles> & {\n\t\tas?: 'div' | 'nav' | 'footer' | 'main' | 'article' | 'aside' | 'section' | 'header'\n\t\tchildren?: ReactNode\n\t\tgap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16\n\t}\n\nexport function Box({\n\tvariant = 'default',\n\tas,\n\tclassName,\n\torientation = 'none',\n\talign = 'none',\n\tjustify = 'none',\n\tchildren,\n\tisolate = false,\n\tid: customId,\n\tgap = 0,\n\t...props\n}:
|
|
1
|
+
{"version":3,"file":"Box.mjs","sources":["../../src/components/Box.tsx"],"sourcesContent":["import { generateShortId } from '@1ry/short-id'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\nimport React, { Children, HTMLAttributes, ReactNode, useMemo } from 'react'\nimport backgroundStyles from '$styles/Backgrounds.module.scss'\n\nconst boxStyles = tv({\n\tbase: 'transition-all duration-200',\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: '',\n\t\t\tnavbar: 'navbar',\n\t\t\tdock: 'dock',\n\t\t},\n\t\torientation: {\n\t\t\tnone: '',\n\t\t\thorizontal: 'flex flex-row',\n\t\t\tvertical: 'flex flex-col',\n\t\t},\n background: {\n teal: backgroundStyles.bgTeal,\n yellow: backgroundStyles.bgYellow,\n gray: backgroundStyles.bgGray,\n transparent: 'bg-transparent',\n magenta: backgroundStyles.bgMagenta,\n cyan: backgroundStyles.bgCyan,\n amber: backgroundStyles.bgAmber,\n lime: backgroundStyles.bgLime,\n indigo: backgroundStyles.bgIndigo,\n rose: backgroundStyles.bgRose,\n slate: backgroundStyles.bgSlate,\n violet: backgroundStyles.bgViolet,\n orange: backgroundStyles.bgOrange,\n },\n\t\talign: {\n\t\t\tnone: '',\n\t\t\tleft: 'items-start text-left',\n\t\t\tcenter: 'items-center text-center',\n\t\t\tright:\n\t\t\t\t'items-end text-right data-[has-gap=true]:place-self-end-safe data-[has-gap=true]:place-content-end-safe data-[has-gap=true]:place-items-end-safe',\n\t\t},\n\t\tjustify: {\n\t\t\tnone: 'justify-none',\n\t\t\tstart: 'justify-start',\n\t\t\tend: 'justify-end',\n\t\t\tcenter: 'justify-center',\n\t\t\tevenly: 'justify-evenly',\n\t\t\tspaceBetween: 'justify-between',\n\t\t},\n\t\tisolate: {\n\t\t\ttrue: 'isolate',\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: 'default',\n\t\torientation: 'none',\n\t\talign: 'none',\n\t\tjustify: 'none',\n\t},\n})\n\nexport type BoxProps = HTMLAttributes<HTMLDivElement> &\n\tVariantProps<typeof boxStyles> & {\n\t\tas?: 'div' | 'nav' | 'footer' | 'main' | 'article' | 'aside' | 'section' | 'header'\n\t\tchildren?: ReactNode\n\t\tgap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16\n\t}\n\nexport function Box({\n\tvariant = 'default',\n\tas,\n\tclassName,\n\torientation = 'none',\n\talign = 'none',\n\tjustify = 'none',\n background = 'transparent',\n\tchildren,\n\tisolate = false,\n\tid: customId,\n\tgap = 0,\n\t...props\n}: BoxProps) {\n\tconst id = useMemo(() => customId ?? generateShortId(7), [customId])\n\tconst Component = variant === 'navbar' && !as ? 'nav' : as || 'div'\n\tconst childrenCount = useMemo(() => Children.count(children) ?? [], [children])\n\tconst gapStyle = gap ? { gap: `${gap * 0.25}rem` } : undefined\n\treturn (\n\t\t<Component\n\t\t\tid={id}\n\t\t\tstyle={{ ...gapStyle, ...props.style }}\n\t\t\tdata-has-gap={gap > 0 ? 'true' : undefined}\n\t\t\tclassName={boxStyles({\n\t\t\t\tvariant,\n\t\t\t\torientation,\n\t\t\t\talign,\n\t\t\t\tjustify,\n\t\t\t\tisolate,\n\t\t\t\tclassName,\n background,\n\t\t\t})}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Component>\n\t)\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../src/components/Button.tsx"],"sourcesContent":["import styles from '$styles/Button.module.scss'\nimport { generateShortId } from '@1ry/short-id'\nimport type { ButtonHTMLAttributes } from 'react'\nimport React, { useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\nconst buttonStyles = tv({\n\tbase: styles.buttonBase,\n\tvariants: {\n\t\tglowing: {\n\t\t\ttrue: styles.glow,\n\t\t},\n\t\ttransparent: {\n\t\t\ttrue: styles.transparent,\n\t\t},\n\t\tnoBorder: {\n\t\t\ttrue: styles.noBorder,\n\t\t},\n\t},\n})\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n\tVariantProps<typeof buttonStyles> & {\n\t\tasSubmit?: boolean\n\t}\n\nexport function Button({\n\tclassName,\n\tchildren,\n\tglowing = false,\n\tnoBorder = true,\n\ttransparent = true,\n\tasSubmit = false,\n\ttitle,\n\tid: customId,\n\t...props\n}:
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../src/components/Button.tsx"],"sourcesContent":["import styles from '$styles/Button.module.scss'\nimport { generateShortId } from '@1ry/short-id'\nimport type { ButtonHTMLAttributes } from 'react'\nimport React, { useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\nconst buttonStyles = tv({\n\tbase: styles.buttonBase,\n\tvariants: {\n\t\tglowing: {\n\t\t\ttrue: styles.glow,\n\t\t},\n\t\ttransparent: {\n\t\t\ttrue: styles.transparent,\n\t\t},\n\t\tnoBorder: {\n\t\t\ttrue: styles.noBorder,\n\t\t},\n\t},\n})\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n\tVariantProps<typeof buttonStyles> & {\n\t\tasSubmit?: boolean\n\t}\n\nexport function Button({\n\tclassName,\n\tchildren,\n\tglowing = false,\n\tnoBorder = true,\n\ttransparent = true,\n\tasSubmit = false,\n\ttitle,\n\tid: customId,\n\t...props\n}: ButtonProps) {\n\tconst id = useMemo(() => customId ?? generateShortId(7), [customId])\n\tif (!title) {\n\t\tconsole.warn('button title is missing')\n\t}\n\tconst cname = buttonStyles({\n\t\tglowing,\n\t\tnoBorder,\n\t\ttransparent,\n\t\tclassName,\n\t})\n\tif (asSubmit) {\n\t\treturn (\n\t\t\t<button type=\"submit\" className={cname} title={title} id={id} {...props}>\n\t\t\t\t{children}\n\t\t\t</button>\n\t\t)\n\t}\n\treturn (\n\t\t<button className={cname} title={title} id={id} {...props}>\n\t\t\t{children}\n\t\t</button>\n\t)\n}\n"],"names":["tv","styles","useMemo","generateShortId","React"],"mappings":";;;;;;;;;;;AAOA,MAAM,YAAY,GAAGA,mBAAE,CAAC;IACvB,IAAI,EAAEC,qBAAM,CAAC,UAAU;AACvB,IAAA,QAAQ,EAAE;AACT,QAAA,OAAO,EAAE;YACR,IAAI,EAAEA,qBAAM,CAAC,IAAI;AACjB,SAAA;AACD,QAAA,WAAW,EAAE;YACZ,IAAI,EAAEA,qBAAM,CAAC,WAAW;AACxB,SAAA;AACD,QAAA,QAAQ,EAAE;YACT,IAAI,EAAEA,qBAAM,CAAC,QAAQ;AACrB,SAAA;AACD,KAAA;AACD,CAAA,CAAC;AAOI,SAAU,MAAM,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,IAAI,EACf,WAAW,GAAG,IAAI,EAClB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,EAAE,EAAE,QAAQ,EACZ,GAAG,KAAK,EACK,EAAA;AACb,IAAA,MAAM,EAAE,GAAGC,aAAO,CAAC,MAAM,QAAQ,IAAIC,uBAAe,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IACpE,IAAI,CAAC,KAAK,EAAE;AACX,QAAA,OAAO,CAAC,IAAI,CAAC,yBAAyB,CAAC;AACvC,IAAA;IACD,MAAM,KAAK,GAAG,YAAY,CAAC;QAC1B,OAAO;QACP,QAAQ;QACR,WAAW;QACX,SAAS;AACT,KAAA,CAAC;AACF,IAAA,IAAI,QAAQ,EAAE;QACb,QACCC,iDAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAA,GAAM,KAAK,EAAA,EACrE,QAAQ,CACD;AAEV,IAAA;AACD,IAAA,QACCA,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAA,GAAM,KAAK,IACvD,QAAQ,CACD;AAEX;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.mjs","sources":["../../src/components/Button.tsx"],"sourcesContent":["import styles from '$styles/Button.module.scss'\nimport { generateShortId } from '@1ry/short-id'\nimport type { ButtonHTMLAttributes } from 'react'\nimport React, { useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\nconst buttonStyles = tv({\n\tbase: styles.buttonBase,\n\tvariants: {\n\t\tglowing: {\n\t\t\ttrue: styles.glow,\n\t\t},\n\t\ttransparent: {\n\t\t\ttrue: styles.transparent,\n\t\t},\n\t\tnoBorder: {\n\t\t\ttrue: styles.noBorder,\n\t\t},\n\t},\n})\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n\tVariantProps<typeof buttonStyles> & {\n\t\tasSubmit?: boolean\n\t}\n\nexport function Button({\n\tclassName,\n\tchildren,\n\tglowing = false,\n\tnoBorder = true,\n\ttransparent = true,\n\tasSubmit = false,\n\ttitle,\n\tid: customId,\n\t...props\n}:
|
|
1
|
+
{"version":3,"file":"Button.mjs","sources":["../../src/components/Button.tsx"],"sourcesContent":["import styles from '$styles/Button.module.scss'\nimport { generateShortId } from '@1ry/short-id'\nimport type { ButtonHTMLAttributes } from 'react'\nimport React, { useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\nconst buttonStyles = tv({\n\tbase: styles.buttonBase,\n\tvariants: {\n\t\tglowing: {\n\t\t\ttrue: styles.glow,\n\t\t},\n\t\ttransparent: {\n\t\t\ttrue: styles.transparent,\n\t\t},\n\t\tnoBorder: {\n\t\t\ttrue: styles.noBorder,\n\t\t},\n\t},\n})\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n\tVariantProps<typeof buttonStyles> & {\n\t\tasSubmit?: boolean\n\t}\n\nexport function Button({\n\tclassName,\n\tchildren,\n\tglowing = false,\n\tnoBorder = true,\n\ttransparent = true,\n\tasSubmit = false,\n\ttitle,\n\tid: customId,\n\t...props\n}: ButtonProps) {\n\tconst id = useMemo(() => customId ?? generateShortId(7), [customId])\n\tif (!title) {\n\t\tconsole.warn('button title is missing')\n\t}\n\tconst cname = buttonStyles({\n\t\tglowing,\n\t\tnoBorder,\n\t\ttransparent,\n\t\tclassName,\n\t})\n\tif (asSubmit) {\n\t\treturn (\n\t\t\t<button type=\"submit\" className={cname} title={title} id={id} {...props}>\n\t\t\t\t{children}\n\t\t\t</button>\n\t\t)\n\t}\n\treturn (\n\t\t<button className={cname} title={title} id={id} {...props}>\n\t\t\t{children}\n\t\t</button>\n\t)\n}\n"],"names":[],"mappings":";;;;;AAOA,MAAM,YAAY,GAAG,EAAE,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC,UAAU;AACvB,IAAA,QAAQ,EAAE;AACT,QAAA,OAAO,EAAE;YACR,IAAI,EAAE,MAAM,CAAC,IAAI;AACjB,SAAA;AACD,QAAA,WAAW,EAAE;YACZ,IAAI,EAAE,MAAM,CAAC,WAAW;AACxB,SAAA;AACD,QAAA,QAAQ,EAAE;YACT,IAAI,EAAE,MAAM,CAAC,QAAQ;AACrB,SAAA;AACD,KAAA;AACD,CAAA,CAAC;AAOI,SAAU,MAAM,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,IAAI,EACf,WAAW,GAAG,IAAI,EAClB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,EAAE,EAAE,QAAQ,EACZ,GAAG,KAAK,EACK,EAAA;AACb,IAAA,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,QAAQ,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IACpE,IAAI,CAAC,KAAK,EAAE;AACX,QAAA,OAAO,CAAC,IAAI,CAAC,yBAAyB,CAAC;AACvC,IAAA;IACD,MAAM,KAAK,GAAG,YAAY,CAAC;QAC1B,OAAO;QACP,QAAQ;QACR,WAAW;QACX,SAAS;AACT,KAAA,CAAC;AACF,IAAA,IAAI,QAAQ,EAAE;QACb,QACC,gCAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAA,GAAM,KAAK,EAAA,EACrE,QAAQ,CACD;AAEV,IAAA;AACD,IAAA,QACC,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAA,GAAM,KAAK,IACvD,QAAQ,CACD;AAEX;;;;"}
|
|
@@ -4,6 +4,7 @@ var Box = require('./Box.js');
|
|
|
4
4
|
var Text = require('./Text.js');
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var ErrorMessage_module = require('../styles/ErrorMessage.module.scss.js');
|
|
7
|
+
var Backgrounds_module = require('../styles/Backgrounds.module.scss.js');
|
|
7
8
|
var tailwindVariants = require('tailwind-variants');
|
|
8
9
|
|
|
9
10
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -14,16 +15,22 @@ const errorMessageStyles = tailwindVariants.tv({
|
|
|
14
15
|
base: ErrorMessage_module.default.errorMessageBase,
|
|
15
16
|
variants: {
|
|
16
17
|
variant: {
|
|
17
|
-
critical:
|
|
18
|
-
|
|
18
|
+
critical: [
|
|
19
|
+
ErrorMessage_module.default.critical,
|
|
20
|
+
Backgrounds_module.default.bgRed
|
|
21
|
+
],
|
|
22
|
+
warning: [
|
|
23
|
+
ErrorMessage_module.default.warning,
|
|
24
|
+
Backgrounds_module.default.bgYellow
|
|
25
|
+
],
|
|
19
26
|
},
|
|
20
27
|
},
|
|
21
28
|
defaultVariants: {
|
|
22
29
|
variant: 'critical',
|
|
23
30
|
},
|
|
24
31
|
});
|
|
25
|
-
function ErrorMessage({ error, ...props }) {
|
|
26
|
-
return (React__default.default.createElement(Box.Box, { ...props, className: errorMessageStyles() },
|
|
32
|
+
function ErrorMessage({ error, variant, ...props }) {
|
|
33
|
+
return (React__default.default.createElement(Box.Box, { ...props, className: errorMessageStyles({ variant }) },
|
|
27
34
|
React__default.default.createElement(Text.Text, null, error.message)));
|
|
28
35
|
}
|
|
29
36
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorMessage.js","sources":["../../src/components/ErrorMessage.tsx"],"sourcesContent":["import { Box, BoxProps } from '$components/Box'\nimport { Text } from '$components/Text'\nimport React from 'react'\nimport styles from '$styles/ErrorMessage.module.scss'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\nconst errorMessageStyles = tv({\n\tbase: styles.errorMessageBase,\n\tvariants: {\n\t\tvariant: {\n\t\t\tcritical: styles.critical,\n\t\t\twarning: styles.warning,\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: 'critical',\n\t},\n})\n\nexport type ErrorMessageProps = BoxProps &\n\tVariantProps<typeof errorMessageStyles> & {\n\t\terror: Error\n\t}\n\nexport function ErrorMessage({ error, ...props }: ErrorMessageProps) {\n\treturn (\n\t\t<Box {...props} className={errorMessageStyles()}>\n\t\t\t<Text>{error.message}</Text>\n\t\t</Box>\n\t)\n}\n"],"names":["tv","styles","React","Box","Text"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ErrorMessage.js","sources":["../../src/components/ErrorMessage.tsx"],"sourcesContent":["import { Box, BoxProps } from '$components/Box'\nimport { Text } from '$components/Text'\nimport React from 'react'\nimport styles from '$styles/ErrorMessage.module.scss'\nimport backgroundStyles from '$styles/Backgrounds.module.scss'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\nconst errorMessageStyles = tv({\n\tbase: styles.errorMessageBase,\n\tvariants: {\n\t\tvariant: {\n\t\t\tcritical: [\n styles.critical,\n backgroundStyles.bgRed\n ],\n\t\t\twarning: [\n styles.warning,\n backgroundStyles.bgYellow\n ],\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: 'critical',\n\t},\n})\n\nexport type ErrorMessageProps = BoxProps &\n\tVariantProps<typeof errorMessageStyles> & {\n\t\terror: Error\n\t}\n\nexport function ErrorMessage({ error, variant, ...props }: ErrorMessageProps) {\n\treturn (\n\t\t<Box {...props} className={errorMessageStyles({ variant })}>\n\t\t\t<Text>{error.message}</Text>\n\t\t</Box>\n\t)\n}\n"],"names":["tv","styles","backgroundStyles","React","Box","Text"],"mappings":";;;;;;;;;;;;;AAQA,MAAM,kBAAkB,GAAGA,mBAAE,CAAC;IAC7B,IAAI,EAAEC,2BAAM,CAAC,gBAAgB;AAC7B,IAAA,QAAQ,EAAE;AACT,QAAA,OAAO,EAAE;AACR,YAAA,QAAQ,EAAE;AACG,gBAAAA,2BAAM,CAAC,QAAQ;AACf,gBAAAC,0BAAgB,CAAC;AACpB,aAAA;AACV,YAAA,OAAO,EAAE;AACI,gBAAAD,2BAAM,CAAC,OAAO;AACd,gBAAAC,0BAAgB,CAAC;AACpB,aAAA;AACV,SAAA;AACD,KAAA;AACD,IAAA,eAAe,EAAE;AAChB,QAAA,OAAO,EAAE,UAAU;AACnB,KAAA;AACD,CAAA,CAAC;AAOI,SAAU,YAAY,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,EAAqB,EAAA;AAC3E,IAAA,QACCC,sBAAA,CAAA,aAAA,CAACC,OAAG,EAAA,EAAA,GAAK,KAAK,EAAE,SAAS,EAAE,kBAAkB,CAAC,EAAE,OAAO,EAAE,CAAC,EAAA;QACzDD,sBAAA,CAAA,aAAA,CAACE,SAAI,QAAE,KAAK,CAAC,OAAO,CAAQ,CACvB;AAER;;;;"}
|
|
@@ -2,22 +2,29 @@ import { Box } from './Box.mjs';
|
|
|
2
2
|
import { Text } from './Text.mjs';
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import styles from '../styles/ErrorMessage.module.scss.mjs';
|
|
5
|
+
import backgroundStyles from '../styles/Backgrounds.module.scss.mjs';
|
|
5
6
|
import { tv } from 'tailwind-variants';
|
|
6
7
|
|
|
7
8
|
const errorMessageStyles = tv({
|
|
8
9
|
base: styles.errorMessageBase,
|
|
9
10
|
variants: {
|
|
10
11
|
variant: {
|
|
11
|
-
critical:
|
|
12
|
-
|
|
12
|
+
critical: [
|
|
13
|
+
styles.critical,
|
|
14
|
+
backgroundStyles.bgRed
|
|
15
|
+
],
|
|
16
|
+
warning: [
|
|
17
|
+
styles.warning,
|
|
18
|
+
backgroundStyles.bgYellow
|
|
19
|
+
],
|
|
13
20
|
},
|
|
14
21
|
},
|
|
15
22
|
defaultVariants: {
|
|
16
23
|
variant: 'critical',
|
|
17
24
|
},
|
|
18
25
|
});
|
|
19
|
-
function ErrorMessage({ error, ...props }) {
|
|
20
|
-
return (React.createElement(Box, { ...props, className: errorMessageStyles() },
|
|
26
|
+
function ErrorMessage({ error, variant, ...props }) {
|
|
27
|
+
return (React.createElement(Box, { ...props, className: errorMessageStyles({ variant }) },
|
|
21
28
|
React.createElement(Text, null, error.message)));
|
|
22
29
|
}
|
|
23
30
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorMessage.mjs","sources":["../../src/components/ErrorMessage.tsx"],"sourcesContent":["import { Box, BoxProps } from '$components/Box'\nimport { Text } from '$components/Text'\nimport React from 'react'\nimport styles from '$styles/ErrorMessage.module.scss'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\nconst errorMessageStyles = tv({\n\tbase: styles.errorMessageBase,\n\tvariants: {\n\t\tvariant: {\n\t\t\tcritical: styles.critical,\n\t\t\twarning: styles.warning,\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: 'critical',\n\t},\n})\n\nexport type ErrorMessageProps = BoxProps &\n\tVariantProps<typeof errorMessageStyles> & {\n\t\terror: Error\n\t}\n\nexport function ErrorMessage({ error, ...props }: ErrorMessageProps) {\n\treturn (\n\t\t<Box {...props} className={errorMessageStyles()}>\n\t\t\t<Text>{error.message}</Text>\n\t\t</Box>\n\t)\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ErrorMessage.mjs","sources":["../../src/components/ErrorMessage.tsx"],"sourcesContent":["import { Box, BoxProps } from '$components/Box'\nimport { Text } from '$components/Text'\nimport React from 'react'\nimport styles from '$styles/ErrorMessage.module.scss'\nimport backgroundStyles from '$styles/Backgrounds.module.scss'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\nconst errorMessageStyles = tv({\n\tbase: styles.errorMessageBase,\n\tvariants: {\n\t\tvariant: {\n\t\t\tcritical: [\n styles.critical,\n backgroundStyles.bgRed\n ],\n\t\t\twarning: [\n styles.warning,\n backgroundStyles.bgYellow\n ],\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: 'critical',\n\t},\n})\n\nexport type ErrorMessageProps = BoxProps &\n\tVariantProps<typeof errorMessageStyles> & {\n\t\terror: Error\n\t}\n\nexport function ErrorMessage({ error, variant, ...props }: ErrorMessageProps) {\n\treturn (\n\t\t<Box {...props} className={errorMessageStyles({ variant })}>\n\t\t\t<Text>{error.message}</Text>\n\t\t</Box>\n\t)\n}\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,kBAAkB,GAAG,EAAE,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC,gBAAgB;AAC7B,IAAA,QAAQ,EAAE;AACT,QAAA,OAAO,EAAE;AACR,YAAA,QAAQ,EAAE;AACG,gBAAA,MAAM,CAAC,QAAQ;AACf,gBAAA,gBAAgB,CAAC;AACpB,aAAA;AACV,YAAA,OAAO,EAAE;AACI,gBAAA,MAAM,CAAC,OAAO;AACd,gBAAA,gBAAgB,CAAC;AACpB,aAAA;AACV,SAAA;AACD,KAAA;AACD,IAAA,eAAe,EAAE;AAChB,QAAA,OAAO,EAAE,UAAU;AACnB,KAAA;AACD,CAAA,CAAC;AAOI,SAAU,YAAY,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,EAAqB,EAAA;AAC3E,IAAA,QACC,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAA,GAAK,KAAK,EAAE,SAAS,EAAE,kBAAkB,CAAC,EAAE,OAAO,EAAE,CAAC,EAAA;QACzD,KAAA,CAAA,aAAA,CAAC,IAAI,QAAE,KAAK,CAAC,OAAO,CAAQ,CACvB;AAER;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import { Button, ButtonProps } from '$components/Button'\nimport { Text } from '$components/Text'\nimport { generateShortId } from '@1ry/short-id'\nimport React, { ReactNode, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\nimport ibStyles from '$styles/IconButton.module.scss'\n\nconst inputButtonStyles = tv({\n\tbase: [ibStyles.iconButtonBase],\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: '',\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: 'default',\n\t},\n})\n\nexport type IconButtonProps = ButtonProps &\n\tVariantProps<typeof inputButtonStyles> & {\n\t\tclassName?: string\n\t\tchildren?: ReactNode\n\t\tlabel?: string\n\t}\n\nexport function IconButton({\n\tclassName,\n\tchildren,\n\tlabel,\n\tid: customId,\n\t...props\n}:
|
|
1
|
+
{"version":3,"file":"IconButton.js","sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import { Button, ButtonProps } from '$components/Button'\nimport { Text } from '$components/Text'\nimport { generateShortId } from '@1ry/short-id'\nimport React, { ReactNode, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\nimport ibStyles from '$styles/IconButton.module.scss'\n\nconst inputButtonStyles = tv({\n\tbase: [ibStyles.iconButtonBase],\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: '',\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: 'default',\n\t},\n})\n\nexport type IconButtonProps = ButtonProps &\n\tVariantProps<typeof inputButtonStyles> & {\n\t\tclassName?: string\n\t\tchildren?: ReactNode\n\t\tlabel?: string\n\t}\n\nexport function IconButton({\n\tclassName,\n\tchildren,\n\tlabel,\n\tid: customId,\n\t...props\n}: IconButtonProps) {\n\tconst id = useMemo(() => customId ?? generateShortId(7), [customId])\n\treturn (\n\t\t<Button name={id} className={inputButtonStyles({ variant: 'default' })} {...props}>\n\t\t\t{children}\n\t\t\t{label && (\n\t\t\t\t<Text htmlFor={id} paddingBefore=\"10\" as=\"label\" variant=\"wavy\">\n\t\t\t\t\t{' '}\n\t\t\t\t\t{label}\n\t\t\t\t</Text>\n\t\t\t)}\n\t\t</Button>\n\t)\n}\n"],"names":["tv","ibStyles","useMemo","generateShortId","React","Button","Text"],"mappings":";;;;;;;;;;;;;AAQA,MAAM,iBAAiB,GAAGA,mBAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,CAACC,yBAAQ,CAAC,cAAc,CAAC;AAC/B,IAAA,QAAQ,EAAE;AACT,QAAA,OAAO,EAAE;AACR,YAAA,OAAO,EAAE,EAAE;AACX,SAAA;AACD,KAAA;AACD,IAAA,eAAe,EAAE;AAChB,QAAA,OAAO,EAAE,SAAS;AAClB,KAAA;AACD,CAAA,CAAC;SASc,UAAU,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,KAAK,EACL,EAAE,EAAE,QAAQ,EACZ,GAAG,KAAK,EACS,EAAA;AACjB,IAAA,MAAM,EAAE,GAAGC,aAAO,CAAC,MAAM,QAAQ,IAAIC,uBAAe,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AACpE,IAAA,QACCC,sBAAA,CAAA,aAAA,CAACC,aAAM,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,iBAAiB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,KAAM,KAAK,EAAA;QAC/E,QAAQ;AACR,QAAA,KAAK,KACLD,sBAAA,CAAA,aAAA,CAACE,SAAI,EAAA,EAAC,OAAO,EAAE,EAAE,EAAE,aAAa,EAAC,IAAI,EAAC,EAAE,EAAC,OAAO,EAAC,OAAO,EAAC,MAAM,EAAA;YAC7D,GAAG;AACH,YAAA,KAAK,CACA,CACP,CACO;AAEX;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.mjs","sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import { Button, ButtonProps } from '$components/Button'\nimport { Text } from '$components/Text'\nimport { generateShortId } from '@1ry/short-id'\nimport React, { ReactNode, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\nimport ibStyles from '$styles/IconButton.module.scss'\n\nconst inputButtonStyles = tv({\n\tbase: [ibStyles.iconButtonBase],\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: '',\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: 'default',\n\t},\n})\n\nexport type IconButtonProps = ButtonProps &\n\tVariantProps<typeof inputButtonStyles> & {\n\t\tclassName?: string\n\t\tchildren?: ReactNode\n\t\tlabel?: string\n\t}\n\nexport function IconButton({\n\tclassName,\n\tchildren,\n\tlabel,\n\tid: customId,\n\t...props\n}:
|
|
1
|
+
{"version":3,"file":"IconButton.mjs","sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import { Button, ButtonProps } from '$components/Button'\nimport { Text } from '$components/Text'\nimport { generateShortId } from '@1ry/short-id'\nimport React, { ReactNode, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\nimport ibStyles from '$styles/IconButton.module.scss'\n\nconst inputButtonStyles = tv({\n\tbase: [ibStyles.iconButtonBase],\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: '',\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: 'default',\n\t},\n})\n\nexport type IconButtonProps = ButtonProps &\n\tVariantProps<typeof inputButtonStyles> & {\n\t\tclassName?: string\n\t\tchildren?: ReactNode\n\t\tlabel?: string\n\t}\n\nexport function IconButton({\n\tclassName,\n\tchildren,\n\tlabel,\n\tid: customId,\n\t...props\n}: IconButtonProps) {\n\tconst id = useMemo(() => customId ?? generateShortId(7), [customId])\n\treturn (\n\t\t<Button name={id} className={inputButtonStyles({ variant: 'default' })} {...props}>\n\t\t\t{children}\n\t\t\t{label && (\n\t\t\t\t<Text htmlFor={id} paddingBefore=\"10\" as=\"label\" variant=\"wavy\">\n\t\t\t\t\t{' '}\n\t\t\t\t\t{label}\n\t\t\t\t</Text>\n\t\t\t)}\n\t\t</Button>\n\t)\n}\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,iBAAiB,GAAG,EAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC;AAC/B,IAAA,QAAQ,EAAE;AACT,QAAA,OAAO,EAAE;AACR,YAAA,OAAO,EAAE,EAAE;AACX,SAAA;AACD,KAAA;AACD,IAAA,eAAe,EAAE;AAChB,QAAA,OAAO,EAAE,SAAS;AAClB,KAAA;AACD,CAAA,CAAC;SASc,UAAU,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,KAAK,EACL,EAAE,EAAE,QAAQ,EACZ,GAAG,KAAK,EACS,EAAA;AACjB,IAAA,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,QAAQ,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AACpE,IAAA,QACC,KAAA,CAAA,aAAA,CAAC,MAAM,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,iBAAiB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,KAAM,KAAK,EAAA;QAC/E,QAAQ;AACR,QAAA,KAAK,KACL,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAE,EAAE,EAAE,aAAa,EAAC,IAAI,EAAC,EAAE,EAAC,OAAO,EAAC,OAAO,EAAC,MAAM,EAAA;YAC7D,GAAG;AACH,YAAA,KAAK,CACA,CACP,CACO;AAEX;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../src/components/Input.tsx"],"sourcesContent":["import { Box } from '$components/Box'\nimport { Button } from '$components/Button'\nimport { Text } from '$components/Text'\nimport { generateShortId } from '@1ry/short-id'\nimport React, { HTMLProps, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\nconst InputStyles = tv({\n\tbase: 'w-full bg-transparent outline-none text-sm text-zinc-900 placeholder:text-zinc-400',\n})\n\n/**\n * Props for the Input component.\n */\nexport type InputProps = HTMLProps<HTMLInputElement> &\n\tVariantProps<typeof InputStyles> & {\n\t\tlabel?: string\n\t\tglowing?: boolean\n\t}\n\nexport function Input({\n\tlabel,\n\tname: customName,\n\tplaceholder,\n\twidth = 'auto',\n\tglowing = false,\n\ttype,\n\tid: customId,\n\t...props\n}:
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../src/components/Input.tsx"],"sourcesContent":["import { Box } from '$components/Box'\nimport { Button } from '$components/Button'\nimport { Text } from '$components/Text'\nimport { generateShortId } from '@1ry/short-id'\nimport React, { HTMLProps, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\nconst InputStyles = tv({\n\tbase: 'w-full bg-transparent outline-none text-sm text-zinc-900 placeholder:text-zinc-400',\n})\n\n/**\n * Props for the Input component.\n */\nexport type InputProps = HTMLProps<HTMLInputElement> &\n\tVariantProps<typeof InputStyles> & {\n\t\tlabel?: string\n\t\tglowing?: boolean\n\t}\n\nexport function Input({\n\tlabel,\n\tname: customName,\n\tplaceholder,\n\twidth = 'auto',\n\tglowing = false,\n\ttype,\n\tid: customId,\n\t...props\n}: InputProps) {\n\tconst id = useMemo(() => customId ?? generateShortId(7), [customId])\n\tconst name = useMemo(() => customName ?? id, [customName, id])\n\tconst cname = 'w-full bg-transparent outline-none text-sm text-zinc-900 placeholder:text-zinc-400'\n\treturn (\n\t\t<Box orientation=\"none\" justify=\"evenly\">\n\t\t\t{label && (\n\t\t\t\t<Text as=\"label\" className=\"text-sm font-medium text-zinc-700 mt-1.5\">\n\t\t\t\t\t{label}\n\t\t\t\t</Text>\n\t\t\t)}\n\n\t\t\t{type === 'submit' && <Button id={id} asSubmit={true} glowing={glowing} className={cname} />}\n\t\t\t{type !== 'submit' && (\n\t\t\t\t<input\n\t\t\t\t\tname={name}\n\t\t\t\t\tclassName={cname}\n\t\t\t\t\tplaceholder={placeholder ?? 'meow abc meow'}\n\t\t\t\t\twidth={width ?? 400}\n\t\t\t\t\ttype={type}\n\t\t\t\t\tid={id}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</Box>\n\t)\n}\n"],"names":["tv","useMemo","generateShortId","React","Box","Text","Button"],"mappings":";;;;;;;;;;;;;AAQoBA,mBAAE,CAAC;AACtB,IAAA,IAAI,EAAE,oFAAoF;AAC1F,CAAA;AAWK,SAAU,KAAK,CAAC,EACrB,KAAK,EACL,IAAI,EAAE,UAAU,EAChB,WAAW,EACX,KAAK,GAAG,MAAM,EACd,OAAO,GAAG,KAAK,EACf,IAAI,EACJ,EAAE,EAAE,QAAQ,EACZ,GAAG,KAAK,EACI,EAAA;AACZ,IAAA,MAAM,EAAE,GAAGC,aAAO,CAAC,MAAM,QAAQ,IAAIC,uBAAe,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AACpE,IAAA,MAAM,IAAI,GAAGD,aAAO,CAAC,MAAM,UAAU,IAAI,EAAE,EAAE,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;IAC9D,MAAM,KAAK,GAAG,oFAAoF;IAClG,QACCE,sBAAA,CAAA,aAAA,CAACC,OAAG,EAAA,EAAC,WAAW,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,EAAA;AACtC,QAAA,KAAK,KACLD,sBAAA,CAAA,aAAA,CAACE,SAAI,IAAC,EAAE,EAAC,OAAO,EAAC,SAAS,EAAC,0CAA0C,EAAA,EACnE,KAAK,CACA,CACP;QAEA,IAAI,KAAK,QAAQ,IAAIF,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EAAC,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAA,CAAI;AAC3F,QAAA,IAAI,KAAK,QAAQ,KACjBH,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACC,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,KAAK,EAChB,WAAW,EAAE,WAAW,IAAI,eAAe,EAC3C,KAAK,EAAE,KAAK,IAAI,GAAG,EACnB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EAAA,GACF,KAAK,GACR,CACF,CACI;AAER;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.mjs","sources":["../../src/components/Input.tsx"],"sourcesContent":["import { Box } from '$components/Box'\nimport { Button } from '$components/Button'\nimport { Text } from '$components/Text'\nimport { generateShortId } from '@1ry/short-id'\nimport React, { HTMLProps, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\nconst InputStyles = tv({\n\tbase: 'w-full bg-transparent outline-none text-sm text-zinc-900 placeholder:text-zinc-400',\n})\n\n/**\n * Props for the Input component.\n */\nexport type InputProps = HTMLProps<HTMLInputElement> &\n\tVariantProps<typeof InputStyles> & {\n\t\tlabel?: string\n\t\tglowing?: boolean\n\t}\n\nexport function Input({\n\tlabel,\n\tname: customName,\n\tplaceholder,\n\twidth = 'auto',\n\tglowing = false,\n\ttype,\n\tid: customId,\n\t...props\n}:
|
|
1
|
+
{"version":3,"file":"Input.mjs","sources":["../../src/components/Input.tsx"],"sourcesContent":["import { Box } from '$components/Box'\nimport { Button } from '$components/Button'\nimport { Text } from '$components/Text'\nimport { generateShortId } from '@1ry/short-id'\nimport React, { HTMLProps, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\nconst InputStyles = tv({\n\tbase: 'w-full bg-transparent outline-none text-sm text-zinc-900 placeholder:text-zinc-400',\n})\n\n/**\n * Props for the Input component.\n */\nexport type InputProps = HTMLProps<HTMLInputElement> &\n\tVariantProps<typeof InputStyles> & {\n\t\tlabel?: string\n\t\tglowing?: boolean\n\t}\n\nexport function Input({\n\tlabel,\n\tname: customName,\n\tplaceholder,\n\twidth = 'auto',\n\tglowing = false,\n\ttype,\n\tid: customId,\n\t...props\n}: InputProps) {\n\tconst id = useMemo(() => customId ?? generateShortId(7), [customId])\n\tconst name = useMemo(() => customName ?? id, [customName, id])\n\tconst cname = 'w-full bg-transparent outline-none text-sm text-zinc-900 placeholder:text-zinc-400'\n\treturn (\n\t\t<Box orientation=\"none\" justify=\"evenly\">\n\t\t\t{label && (\n\t\t\t\t<Text as=\"label\" className=\"text-sm font-medium text-zinc-700 mt-1.5\">\n\t\t\t\t\t{label}\n\t\t\t\t</Text>\n\t\t\t)}\n\n\t\t\t{type === 'submit' && <Button id={id} asSubmit={true} glowing={glowing} className={cname} />}\n\t\t\t{type !== 'submit' && (\n\t\t\t\t<input\n\t\t\t\t\tname={name}\n\t\t\t\t\tclassName={cname}\n\t\t\t\t\tplaceholder={placeholder ?? 'meow abc meow'}\n\t\t\t\t\twidth={width ?? 400}\n\t\t\t\t\ttype={type}\n\t\t\t\t\tid={id}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</Box>\n\t)\n}\n"],"names":[],"mappings":";;;;;;;AAQoB,EAAE,CAAC;AACtB,IAAA,IAAI,EAAE,oFAAoF;AAC1F,CAAA;AAWK,SAAU,KAAK,CAAC,EACrB,KAAK,EACL,IAAI,EAAE,UAAU,EAChB,WAAW,EACX,KAAK,GAAG,MAAM,EACd,OAAO,GAAG,KAAK,EACf,IAAI,EACJ,EAAE,EAAE,QAAQ,EACZ,GAAG,KAAK,EACI,EAAA;AACZ,IAAA,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,QAAQ,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AACpE,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,MAAM,UAAU,IAAI,EAAE,EAAE,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;IAC9D,MAAM,KAAK,GAAG,oFAAoF;IAClG,QACC,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,WAAW,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,EAAA;AACtC,QAAA,KAAK,KACL,KAAA,CAAA,aAAA,CAAC,IAAI,IAAC,EAAE,EAAC,OAAO,EAAC,SAAS,EAAC,0CAA0C,EAAA,EACnE,KAAK,CACA,CACP;QAEA,IAAI,KAAK,QAAQ,IAAI,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAA,CAAI;AAC3F,QAAA,IAAI,KAAK,QAAQ,KACjB,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACC,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,KAAK,EAChB,WAAW,EAAE,WAAW,IAAI,eAAe,EAC3C,KAAK,EAAE,KAAK,IAAI,GAAG,EACnB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EAAA,GACF,KAAK,GACR,CACF,CACI;AAER;;;;"}
|
package/lib/components/Text.js
CHANGED
|
@@ -22,7 +22,7 @@ const textStyles = tailwindVariants.tv({
|
|
|
22
22
|
size: TextSizing.SIZE_MAP,
|
|
23
23
|
},
|
|
24
24
|
});
|
|
25
|
-
function Text({ variant = 'default', as
|
|
25
|
+
function Text({ variant = 'default', as, className, children, paddingBefore = 'none', font = 'medium', size, ...props }) {
|
|
26
26
|
const Component = (as || 'span');
|
|
27
27
|
return (React__default.default.createElement(Component, { className: tailwindMerge.twMerge(textStyles({
|
|
28
28
|
variant,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sources":["../../src/components/Text.tsx"],"sourcesContent":["import { FONT_MAP } from '$types/TextFont'\n\nimport styles from '$styles/Text.module.scss'\nimport React, { ComponentPropsWithoutRef, ElementType } from 'react'\nimport { twMerge } from 'tailwind-merge'\nimport { VARIANT_MAP } from '$types/TextVariant'\nimport { PADDING_MAP, PaddingSize } from '$types/Padding'\nimport { SIZE_MAP } from '$types/TextSizing'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\ntype AllowedElements = 'p' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\nconst textStyles = tv({\n\tbase: [styles.TextComponent],\n\tvariants: {\n\t\tvariant: VARIANT_MAP,\n\t\tpaddingBefore: PADDING_MAP,\n\t\tfont: FONT_MAP,\n\t\tsize: SIZE_MAP,\n\t},\n})\n\nexport type TextProps<T extends AllowedElements> = VariantProps<typeof textStyles> & {\n\tas?: T\n\tpaddingBefore?: PaddingSize\n\t/**\n\t * if you set it to as=label\n\t */\n\thtmlFor?: string\n} & Omit<ComponentPropsWithoutRef<T>, 'as' | 'variant' | 'paddingBefore' | 'font' | 'size'>\n\nexport function Text<T extends AllowedElements = 'span'>({\n\tvariant = 'default',\n\tas
|
|
1
|
+
{"version":3,"file":"Text.js","sources":["../../src/components/Text.tsx"],"sourcesContent":["import { FONT_MAP } from '$types/TextFont'\n\nimport styles from '$styles/Text.module.scss'\nimport React, { ComponentPropsWithoutRef, ElementType } from 'react'\nimport { twMerge } from 'tailwind-merge'\nimport { VARIANT_MAP } from '$types/TextVariant'\nimport { PADDING_MAP, PaddingSize } from '$types/Padding'\nimport { SIZE_MAP } from '$types/TextSizing'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\ntype AllowedElements = 'p' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\nconst textStyles = tv({\n\tbase: [styles.TextComponent],\n\tvariants: {\n\t\tvariant: VARIANT_MAP,\n\t\tpaddingBefore: PADDING_MAP,\n\t\tfont: FONT_MAP,\n\t\tsize: SIZE_MAP,\n\t},\n})\n\nexport type TextProps<T extends AllowedElements> = VariantProps<typeof textStyles> & {\n\tas?: T\n\tpaddingBefore?: PaddingSize\n\t/**\n\t * if you set it to as=label\n\t */\n\thtmlFor?: string\n} & Omit<ComponentPropsWithoutRef<T>, 'as' | 'variant' | 'paddingBefore' | 'font' | 'size'>\n\nexport function Text<T extends AllowedElements = 'span'>({\n\tvariant = 'default',\n\tas,\n\tclassName,\n\tchildren,\n\tpaddingBefore = 'none',\n\tfont = 'medium',\n\tsize,\n\t...props\n}: TextProps<T>) {\n\tconst Component = (as || 'span') as ElementType\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={twMerge(\n\t\t\t\ttextStyles({\n\t\t\t\t\tvariant,\n\t\t\t\t\tpaddingBefore,\n\t\t\t\t\tfont,\n\t\t\t\t\tsize,\n\t\t\t\t\tclassName,\n\t\t\t\t}),\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Component>\n\t)\n}\n"],"names":["tv","styles","VARIANT_MAP","PADDING_MAP","FONT_MAP","SIZE_MAP","React","twMerge"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAM,UAAU,GAAGA,mBAAE,CAAC;AACrB,IAAA,IAAI,EAAE,CAACC,mBAAM,CAAC,aAAa,CAAC;AAC5B,IAAA,QAAQ,EAAE;AACT,QAAA,OAAO,EAAEC,uBAAW;AACpB,QAAA,aAAa,EAAEC,mBAAW;AAC1B,QAAA,IAAI,EAAEC,iBAAQ;AACd,QAAA,IAAI,EAAEC,mBAAQ;AACd,KAAA;AACD,CAAA,CAAC;AAWI,SAAU,IAAI,CAAqC,EACxD,OAAO,GAAG,SAAS,EACnB,EAAE,EACF,SAAS,EACT,QAAQ,EACR,aAAa,GAAG,MAAM,EACtB,IAAI,GAAG,QAAQ,EACf,IAAI,EACJ,GAAG,KAAK,EACM,EAAA;AACd,IAAA,MAAM,SAAS,IAAI,EAAE,IAAI,MAAM,CAAgB;IAE/C,QACCC,qCAAC,SAAS,EAAA,EACT,SAAS,EAAEC,qBAAO,CACjB,UAAU,CAAC;YACV,OAAO;YACP,aAAa;YACb,IAAI;YACJ,IAAI;YACJ,SAAS;AACT,SAAA,CAAC,CACF,EAAA,GACG,KAAK,IAER,QAAQ,CACE;AAEd;;;;"}
|
package/lib/components/Text.mjs
CHANGED
|
@@ -16,7 +16,7 @@ const textStyles = tv({
|
|
|
16
16
|
size: SIZE_MAP,
|
|
17
17
|
},
|
|
18
18
|
});
|
|
19
|
-
function Text({ variant = 'default', as
|
|
19
|
+
function Text({ variant = 'default', as, className, children, paddingBefore = 'none', font = 'medium', size, ...props }) {
|
|
20
20
|
const Component = (as || 'span');
|
|
21
21
|
return (React.createElement(Component, { className: twMerge(textStyles({
|
|
22
22
|
variant,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.mjs","sources":["../../src/components/Text.tsx"],"sourcesContent":["import { FONT_MAP } from '$types/TextFont'\n\nimport styles from '$styles/Text.module.scss'\nimport React, { ComponentPropsWithoutRef, ElementType } from 'react'\nimport { twMerge } from 'tailwind-merge'\nimport { VARIANT_MAP } from '$types/TextVariant'\nimport { PADDING_MAP, PaddingSize } from '$types/Padding'\nimport { SIZE_MAP } from '$types/TextSizing'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\ntype AllowedElements = 'p' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\nconst textStyles = tv({\n\tbase: [styles.TextComponent],\n\tvariants: {\n\t\tvariant: VARIANT_MAP,\n\t\tpaddingBefore: PADDING_MAP,\n\t\tfont: FONT_MAP,\n\t\tsize: SIZE_MAP,\n\t},\n})\n\nexport type TextProps<T extends AllowedElements> = VariantProps<typeof textStyles> & {\n\tas?: T\n\tpaddingBefore?: PaddingSize\n\t/**\n\t * if you set it to as=label\n\t */\n\thtmlFor?: string\n} & Omit<ComponentPropsWithoutRef<T>, 'as' | 'variant' | 'paddingBefore' | 'font' | 'size'>\n\nexport function Text<T extends AllowedElements = 'span'>({\n\tvariant = 'default',\n\tas
|
|
1
|
+
{"version":3,"file":"Text.mjs","sources":["../../src/components/Text.tsx"],"sourcesContent":["import { FONT_MAP } from '$types/TextFont'\n\nimport styles from '$styles/Text.module.scss'\nimport React, { ComponentPropsWithoutRef, ElementType } from 'react'\nimport { twMerge } from 'tailwind-merge'\nimport { VARIANT_MAP } from '$types/TextVariant'\nimport { PADDING_MAP, PaddingSize } from '$types/Padding'\nimport { SIZE_MAP } from '$types/TextSizing'\nimport { tv } from 'tailwind-variants'\nimport { VariantProps } from '$utils/tv'\n\ntype AllowedElements = 'p' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\nconst textStyles = tv({\n\tbase: [styles.TextComponent],\n\tvariants: {\n\t\tvariant: VARIANT_MAP,\n\t\tpaddingBefore: PADDING_MAP,\n\t\tfont: FONT_MAP,\n\t\tsize: SIZE_MAP,\n\t},\n})\n\nexport type TextProps<T extends AllowedElements> = VariantProps<typeof textStyles> & {\n\tas?: T\n\tpaddingBefore?: PaddingSize\n\t/**\n\t * if you set it to as=label\n\t */\n\thtmlFor?: string\n} & Omit<ComponentPropsWithoutRef<T>, 'as' | 'variant' | 'paddingBefore' | 'font' | 'size'>\n\nexport function Text<T extends AllowedElements = 'span'>({\n\tvariant = 'default',\n\tas,\n\tclassName,\n\tchildren,\n\tpaddingBefore = 'none',\n\tfont = 'medium',\n\tsize,\n\t...props\n}: TextProps<T>) {\n\tconst Component = (as || 'span') as ElementType\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={twMerge(\n\t\t\t\ttextStyles({\n\t\t\t\t\tvariant,\n\t\t\t\t\tpaddingBefore,\n\t\t\t\t\tfont,\n\t\t\t\t\tsize,\n\t\t\t\t\tclassName,\n\t\t\t\t}),\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Component>\n\t)\n}\n"],"names":[],"mappings":";;;;;;;;;AAaA,MAAM,UAAU,GAAG,EAAE,CAAC;AACrB,IAAA,IAAI,EAAE,CAAC,MAAM,CAAC,aAAa,CAAC;AAC5B,IAAA,QAAQ,EAAE;AACT,QAAA,OAAO,EAAE,WAAW;AACpB,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,IAAI,EAAE,QAAQ;AACd,KAAA;AACD,CAAA,CAAC;AAWI,SAAU,IAAI,CAAqC,EACxD,OAAO,GAAG,SAAS,EACnB,EAAE,EACF,SAAS,EACT,QAAQ,EACR,aAAa,GAAG,MAAM,EACtB,IAAI,GAAG,QAAQ,EACf,IAAI,EACJ,GAAG,KAAK,EACM,EAAA;AACd,IAAA,MAAM,SAAS,IAAI,EAAE,IAAI,MAAM,CAAgB;IAE/C,QACC,oBAAC,SAAS,EAAA,EACT,SAAS,EAAE,OAAO,CACjB,UAAU,CAAC;YACV,OAAO;YACP,aAAa;YACb,IAAI;YACJ,IAAI;YACJ,SAAS;AACT,SAAA,CAAC,CACF,EAAA,GACG,KAAK,IAER,QAAQ,CACE;AAEd;;;;"}
|
package/lib/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.Button-
|
|
1
|
+
.Backgrounds-module_bgTeal__-b2A6{background-color:teal}.Backgrounds-module_bgYellow__LYBKS{background-color:#ff0}.Backgrounds-module_bgGray__hOBtP{background-color:gray}.Backgrounds-module_bgWhite__8Iv4x{background-color:#fff}.Backgrounds-module_bgMagenta__hUHh4{background-color:#f0f}.Backgrounds-module_bgCyan__5gPxi{background-color:cyan}@media (prefers-color-scheme:dark){.Backgrounds-module_bgCyan__5gPxi{background-color:#0ff}}.Backgrounds-module_bgAmber__29AIP{background-color:#ffbf00}@media (prefers-color-scheme:dark){.Backgrounds-module_bgAmber__29AIP{background-color:#ffbf00}}.Backgrounds-module_bgLime__ZKwRN{background-color:lime}@media (prefers-color-scheme:dark){.Backgrounds-module_bgLime__ZKwRN{background-color:#32cd32}}.Backgrounds-module_bgOrange__3MoKr{background-color:orange}@media (prefers-color-scheme:dark){.Backgrounds-module_bgOrange__3MoKr{background-color:#ff8c00}}.Backgrounds-module_bgIndigo__CT8Mf{background-color:indigo}@media (prefers-color-scheme:dark){.Backgrounds-module_bgIndigo__CT8Mf{background-color:indigo}}.Backgrounds-module_bgRose__1OC0R{background-color:#ff007f}@media (prefers-color-scheme:dark){.Backgrounds-module_bgRose__1OC0R{background-color:#ff1493}}.Backgrounds-module_bgSlate__6iOlV{background-color:#708090}@media (prefers-color-scheme:dark){.Backgrounds-module_bgSlate__6iOlV{background-color:#2f4f4f}}.Backgrounds-module_bgViolet__V5xJI{background-color:purple}@media (prefers-color-scheme:dark){.Backgrounds-module_bgViolet__V5xJI{background-color:indigo}}.Backgrounds-module_bgTransparent__YKjzW{background-color:transparent}.Backgrounds-module_bgRed__f22o2{background-color:red}@media (prefers-color-scheme:dark){.Backgrounds-module_bgRed__f22o2{background-color:#8b0000}}.Button-module_buttonBase__Xd1Us{align-items:center;border-color:#000;border-style:groove;color:#000;cursor:pointer;display:inline-flex;justify-content:center;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}@media (prefers-color-scheme:dark){.Button-module_buttonBase__Xd1Us{border-color:#fff;color:#fff}}.Button-module_buttonBase__Xd1Us:hover{transform:translateY(-2px)}.Button-module_buttonBase__Xd1Us:active{box-shadow:0 3px 8px rgba(0,0,0,.1);transform:translateY(0)}@media (prefers-color-scheme:dark){.Button-module_buttonBase__Xd1Us:active{box-shadow:0 3px 8px rgba(0,0,0,.5)}}.Button-module_buttonBase__Xd1Us:focus-visible{outline:2px solid currentColor;outline-offset:3px}.Button-module_buttonBase__Xd1Us.Button-module_glow__kLSOA:hover{background:linear-gradient(135deg,#ff8c00,#ff3c00);box-shadow:0 0 20px rgba(255,140,0,.8)}.Button-module_buttonBase__Xd1Us.Button-module_no-border__GJIXW{border:none}.Button-module_buttonBase__Xd1Us.Button-module_transparent__2-Nvv{background:transparent}.Card-module_cardBase__Ci80k{border:1px solid #000;border-radius:2;box-sizing:1}.Card-module_cardBase__Ci80k.Card-module_noBorder__TpVru{border:none}.Text-module_TextComponent__VMcCh{color:#000;font-family:Roboto,sans-serif}@media (prefers-color-scheme:dark){.Text-module_TextComponent__VMcCh{color:#fff}}.ErrorMessage-module_errorMessageBase__nhkCL{color:red;font-size:.8rem;margin-top:.25rem}.ErrorMessage-module_errorMessageBase__nhkCL.ErrorMessage-module_critical__YZit5{font-weight:700}.ErrorMessage-module_errorMessageBase__nhkCL.ErrorMessage-module_warning__Lzf8G{font-style:italic}.IconButton-module_iconButtonBase__gqXri{align-items:center;background:transparent;border:none;color:#000;cursor:pointer;display:inline-flex;justify-content:center;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}@media (prefers-color-scheme:dark){.IconButton-module_iconButtonBase__gqXri{color:#fff}}.IconButton-module_iconButtonBase__gqXri:hover{transform:translateY(-2px)}.IconButton-module_iconButtonBase__gqXri:active{box-shadow:0 3px 8px rgba(0,0,0,.1);transform:translateY(0)}@media (prefers-color-scheme:dark){.IconButton-module_iconButtonBase__gqXri:active{box-shadow:0 3px 8px rgba(0,0,0,.5)}}.IconButton-module_iconButtonBase__gqXri:focus-visible{outline:2px solid currentColor;outline-offset:3px}.IconButton-module_iconButtonBase__gqXri.IconButton-module_glow__86Wik:hover{background:linear-gradient(135deg,#ff8c00,#ff3c00);box-shadow:0 0 20px rgba(255,140,0,.8)}
|
package/lib/index.d.ts
CHANGED
|
@@ -8,13 +8,13 @@ type BoxProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof boxStyles>
|
|
|
8
8
|
children?: ReactNode;
|
|
9
9
|
gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
|
|
10
10
|
};
|
|
11
|
-
declare function Box({ variant, as, className, orientation, align, justify, children, isolate, id: customId, gap, ...props }:
|
|
11
|
+
declare function Box({ variant, as, className, orientation, align, justify, background, children, isolate, id: customId, gap, ...props }: BoxProps): React.JSX.Element;
|
|
12
12
|
|
|
13
13
|
declare const buttonStyles: any;
|
|
14
14
|
type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonStyles> & {
|
|
15
15
|
asSubmit?: boolean;
|
|
16
16
|
};
|
|
17
|
-
declare function Button({ className, children, glowing, noBorder, transparent, asSubmit, title, id: customId, ...props }:
|
|
17
|
+
declare function Button({ className, children, glowing, noBorder, transparent, asSubmit, title, id: customId, ...props }: ButtonProps): React.JSX.Element;
|
|
18
18
|
|
|
19
19
|
declare const cardStyles: any;
|
|
20
20
|
type CardProps = BoxProps & VariantProps<typeof cardStyles> & {};
|
|
@@ -24,7 +24,7 @@ declare const errorMessageStyles: any;
|
|
|
24
24
|
type ErrorMessageProps = BoxProps & VariantProps<typeof errorMessageStyles> & {
|
|
25
25
|
error: Error;
|
|
26
26
|
};
|
|
27
|
-
declare function ErrorMessage({ error, ...props }: ErrorMessageProps): React.JSX.Element;
|
|
27
|
+
declare function ErrorMessage({ error, variant, ...props }: ErrorMessageProps): React.JSX.Element;
|
|
28
28
|
|
|
29
29
|
declare const inputButtonStyles: any;
|
|
30
30
|
type IconButtonProps = ButtonProps & VariantProps<typeof inputButtonStyles> & {
|
|
@@ -32,7 +32,7 @@ type IconButtonProps = ButtonProps & VariantProps<typeof inputButtonStyles> & {
|
|
|
32
32
|
children?: ReactNode;
|
|
33
33
|
label?: string;
|
|
34
34
|
};
|
|
35
|
-
declare function IconButton({ className, children, label, id: customId, ...props }:
|
|
35
|
+
declare function IconButton({ className, children, label, id: customId, ...props }: IconButtonProps): React.JSX.Element;
|
|
36
36
|
|
|
37
37
|
/**
|
|
38
38
|
* Defines the allowed padding sizes for the Text component.
|
|
@@ -57,7 +57,7 @@ type TextProps<T extends AllowedElements> = VariantProps<typeof textStyles> & {
|
|
|
57
57
|
*/
|
|
58
58
|
htmlFor?: string;
|
|
59
59
|
} & Omit<ComponentPropsWithoutRef<T>, 'as' | 'variant' | 'paddingBefore' | 'font' | 'size'>;
|
|
60
|
-
declare function Text<T extends AllowedElements = 'span'>({ variant, as, className, children, paddingBefore, font, size, ...props }:
|
|
60
|
+
declare function Text<T extends AllowedElements = 'span'>({ variant, as, className, children, paddingBefore, font, size, ...props }: TextProps<T>): React.JSX.Element;
|
|
61
61
|
|
|
62
62
|
declare const InputStyles: any;
|
|
63
63
|
/**
|
|
@@ -67,7 +67,7 @@ type InputProps = HTMLProps<HTMLInputElement> & VariantProps<typeof InputStyles>
|
|
|
67
67
|
label?: string;
|
|
68
68
|
glowing?: boolean;
|
|
69
69
|
};
|
|
70
|
-
declare function Input({ label, name: customName, placeholder, width, glowing, type, id: customId, ...props }:
|
|
70
|
+
declare function Input({ label, name: customName, placeholder, width, glowing, type, id: customId, ...props }: InputProps): React.JSX.Element;
|
|
71
71
|
|
|
72
72
|
declare const modalStyles: any;
|
|
73
73
|
type ModalProps = BoxProps & VariantProps<typeof modalStyles> & {
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var backgroundStyles = {"bgTeal":"Backgrounds-module_bgTeal__-b2A6","bgYellow":"Backgrounds-module_bgYellow__LYBKS","bgGray":"Backgrounds-module_bgGray__hOBtP","bgMagenta":"Backgrounds-module_bgMagenta__hUHh4","bgCyan":"Backgrounds-module_bgCyan__5gPxi","bgAmber":"Backgrounds-module_bgAmber__29AIP","bgLime":"Backgrounds-module_bgLime__ZKwRN","bgOrange":"Backgrounds-module_bgOrange__3MoKr","bgIndigo":"Backgrounds-module_bgIndigo__CT8Mf","bgRose":"Backgrounds-module_bgRose__1OC0R","bgSlate":"Backgrounds-module_bgSlate__6iOlV","bgViolet":"Backgrounds-module_bgViolet__V5xJI","bgRed":"Backgrounds-module_bgRed__f22o2"};
|
|
6
|
+
|
|
7
|
+
exports.default = backgroundStyles;
|
|
8
|
+
//# sourceMappingURL=Backgrounds.module.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Backgrounds.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var backgroundStyles = {"bgTeal":"Backgrounds-module_bgTeal__-b2A6","bgYellow":"Backgrounds-module_bgYellow__LYBKS","bgGray":"Backgrounds-module_bgGray__hOBtP","bgMagenta":"Backgrounds-module_bgMagenta__hUHh4","bgCyan":"Backgrounds-module_bgCyan__5gPxi","bgAmber":"Backgrounds-module_bgAmber__29AIP","bgLime":"Backgrounds-module_bgLime__ZKwRN","bgOrange":"Backgrounds-module_bgOrange__3MoKr","bgIndigo":"Backgrounds-module_bgIndigo__CT8Mf","bgRose":"Backgrounds-module_bgRose__1OC0R","bgSlate":"Backgrounds-module_bgSlate__6iOlV","bgViolet":"Backgrounds-module_bgViolet__V5xJI","bgRed":"Backgrounds-module_bgRed__f22o2"};
|
|
2
|
+
|
|
3
|
+
export { backgroundStyles as default };
|
|
4
|
+
//# sourceMappingURL=Backgrounds.module.scss.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Backgrounds.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var styles = {"glow":"Button-module_glow__kLSOA","transparent":"Button-module_transparent__2-Nvv"};
|
|
5
|
+
var styles = {"buttonBase":"Button-module_buttonBase__Xd1Us","glow":"Button-module_glow__kLSOA","transparent":"Button-module_transparent__2-Nvv"};
|
|
6
6
|
|
|
7
7
|
exports.default = styles;
|
|
8
8
|
//# sourceMappingURL=Button.module.scss.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var styles = {"glow":"Button-module_glow__kLSOA","transparent":"Button-module_transparent__2-Nvv"};
|
|
1
|
+
var styles = {"buttonBase":"Button-module_buttonBase__Xd1Us","glow":"Button-module_glow__kLSOA","transparent":"Button-module_transparent__2-Nvv"};
|
|
2
2
|
|
|
3
3
|
export { styles as default };
|
|
4
4
|
//# sourceMappingURL=Button.module.scss.mjs.map
|
package/lib/types/TextVariant.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextVariant.js","sources":["../../src/types/TextVariant.ts"],"sourcesContent":["export type TextVariant = 'default' | 'title' | 'wavy'\nexport const VARIANT_MAP: Record<TextVariant, string> = {\n\tdefault: 'text-sm text-neutral-600',\n\ttitle: 'text-2xl font-medium text-amber-900',\n\twavy: 'text-sm text-neutral-600 decoration-wavy',\n}\n"],"names":[],"mappings":";;AACO,MAAM,WAAW,GAAgC;AACvD,IAAA,OAAO,EAAE,0BAA0B;AACnC,IAAA,KAAK,EAAE,qCAAqC;AAC5C,IAAA,IAAI,EAAE,0CAA0C;;;;;"}
|
|
1
|
+
{"version":3,"file":"TextVariant.js","sources":["../../src/types/TextVariant.ts"],"sourcesContent":["export type TextVariant = 'default' | 'title' | 'wavy'\nexport const VARIANT_MAP: Record<TextVariant, string> = {\n\tdefault: 'text-sm text-neutral-600',\n\ttitle: 'text-2xl font-medium text-amber-900',\n\twavy: 'text-sm text-neutral-600 decoration-wavy',\n muted: 'text-sm text-neutral-400',\n}\n"],"names":[],"mappings":";;AACO,MAAM,WAAW,GAAgC;AACvD,IAAA,OAAO,EAAE,0BAA0B;AACnC,IAAA,KAAK,EAAE,qCAAqC;AAC5C,IAAA,IAAI,EAAE,0CAA0C;AAC7C,IAAA,KAAK,EAAE,0BAA0B;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextVariant.mjs","sources":["../../src/types/TextVariant.ts"],"sourcesContent":["export type TextVariant = 'default' | 'title' | 'wavy'\nexport const VARIANT_MAP: Record<TextVariant, string> = {\n\tdefault: 'text-sm text-neutral-600',\n\ttitle: 'text-2xl font-medium text-amber-900',\n\twavy: 'text-sm text-neutral-600 decoration-wavy',\n}\n"],"names":[],"mappings":"AACO,MAAM,WAAW,GAAgC;AACvD,IAAA,OAAO,EAAE,0BAA0B;AACnC,IAAA,KAAK,EAAE,qCAAqC;AAC5C,IAAA,IAAI,EAAE,0CAA0C;;;;;"}
|
|
1
|
+
{"version":3,"file":"TextVariant.mjs","sources":["../../src/types/TextVariant.ts"],"sourcesContent":["export type TextVariant = 'default' | 'title' | 'wavy'\nexport const VARIANT_MAP: Record<TextVariant, string> = {\n\tdefault: 'text-sm text-neutral-600',\n\ttitle: 'text-2xl font-medium text-amber-900',\n\twavy: 'text-sm text-neutral-600 decoration-wavy',\n muted: 'text-sm text-neutral-400',\n}\n"],"names":[],"mappings":"AACO,MAAM,WAAW,GAAgC;AACvD,IAAA,OAAO,EAAE,0BAA0B;AACnC,IAAA,KAAK,EAAE,qCAAqC;AAC5C,IAAA,IAAI,EAAE,0CAA0C;AAC7C,IAAA,KAAK,EAAE,0BAA0B;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@1ry/basic-react-primitive-components",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.6",
|
|
4
4
|
"description": "some basic react primitive components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"components",
|
|
@@ -51,31 +51,46 @@
|
|
|
51
51
|
"lint": "eslint ./src/ --fix",
|
|
52
52
|
"semantic-release": "semantic-release",
|
|
53
53
|
"fmt": "oxfmt",
|
|
54
|
-
"typecheck": "tsc --noEmit"
|
|
54
|
+
"typecheck": "tsc --noEmit",
|
|
55
|
+
"storybook": "storybook dev -p 6006",
|
|
56
|
+
"build-storybook": "storybook build"
|
|
55
57
|
},
|
|
56
58
|
"dependencies": {
|
|
57
59
|
"@1ry/short-id": "^0.1.0",
|
|
58
60
|
"tailwind-variants": "^3.2.2"
|
|
59
61
|
},
|
|
60
62
|
"devDependencies": {
|
|
63
|
+
"@chromatic-com/storybook": "^5.2.1",
|
|
61
64
|
"@rollup/plugin-alias": "^6.0.0",
|
|
62
65
|
"@rollup/plugin-commonjs": "^29.0.3",
|
|
63
66
|
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
64
67
|
"@rollup/plugin-typescript": "^12.3.0",
|
|
65
68
|
"@ryansonshine/commitizen": "^4.2.8",
|
|
66
69
|
"@ryansonshine/cz-conventional-changelog": "^3.3.4",
|
|
70
|
+
"@storybook/addon-a11y": "^10.4.6",
|
|
71
|
+
"@storybook/addon-docs": "^10.4.6",
|
|
72
|
+
"@storybook/addon-onboarding": "^10.4.6",
|
|
73
|
+
"@storybook/addon-vitest": "^10.4.6",
|
|
74
|
+
"@storybook/react": "^10.4.6",
|
|
75
|
+
"@storybook/react-vite": "^10.4.6",
|
|
76
|
+
"@tailwindcss/vite": "^4.3.1",
|
|
67
77
|
"@types/react": "^19.2.17",
|
|
68
78
|
"@typescript-eslint/eslint-plugin": "^4.33.0",
|
|
69
79
|
"@typescript-eslint/parser": "^4.33.0",
|
|
80
|
+
"@vitest/browser-playwright": "^4.1.9",
|
|
81
|
+
"@vitest/coverage-v8": "^4.1.9",
|
|
70
82
|
"conventional-changelog-conventionalcommits": "^5.0.0",
|
|
71
83
|
"eslint": "^7.32.0",
|
|
72
84
|
"eslint-config-prettier": "^8.10.2",
|
|
73
85
|
"eslint-plugin-node": "^11.1.0",
|
|
74
86
|
"eslint-plugin-prettier": "^3.4.1",
|
|
87
|
+
"eslint-plugin-storybook": "^10.4.6",
|
|
75
88
|
"lint-staged": "^13.3.0",
|
|
76
89
|
"oxfmt": "^0.56.0",
|
|
90
|
+
"playwright": "^1.61.1",
|
|
77
91
|
"postcss": "^8.5.15",
|
|
78
92
|
"prettier": "^2.8.8",
|
|
93
|
+
"prop-types": "^15.8.1",
|
|
79
94
|
"rollup": "^4.62.2",
|
|
80
95
|
"rollup-plugin-dts": "^6.4.1",
|
|
81
96
|
"rollup-plugin-postcss": "^4.0.2",
|
|
@@ -83,7 +98,11 @@
|
|
|
83
98
|
"rollup-plugin-tsconfig-paths": "^1.5.2",
|
|
84
99
|
"sass": "^1.101.0",
|
|
85
100
|
"semantic-release": "^21.1.2",
|
|
86
|
-
"
|
|
101
|
+
"storybook": "^10.4.6",
|
|
102
|
+
"tailwindcss": "^4.3.1",
|
|
103
|
+
"typed-scss-modules": "^8.1.1",
|
|
104
|
+
"vite-tsconfig-paths": "^6.1.1",
|
|
105
|
+
"vitest": "^4.1.9"
|
|
87
106
|
},
|
|
88
107
|
"peerDependencies": {
|
|
89
108
|
"react": "^19.0.0",
|
|
@@ -146,5 +165,10 @@
|
|
|
146
165
|
},
|
|
147
166
|
"engines": {
|
|
148
167
|
"node": ">=12.0"
|
|
168
|
+
},
|
|
169
|
+
"eslintConfig": {
|
|
170
|
+
"extends": [
|
|
171
|
+
"plugin:storybook/recommended"
|
|
172
|
+
]
|
|
149
173
|
}
|
|
150
174
|
}
|