@1ry/basic-react-primitive-components 0.1.5 → 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.
Files changed (21) hide show
  1. package/lib/components/Box.js +18 -1
  2. package/lib/components/Box.js.map +1 -1
  3. package/lib/components/Box.mjs +18 -1
  4. package/lib/components/Box.mjs.map +1 -1
  5. package/lib/components/ErrorMessage.js +11 -4
  6. package/lib/components/ErrorMessage.js.map +1 -1
  7. package/lib/components/ErrorMessage.mjs +11 -4
  8. package/lib/components/ErrorMessage.mjs.map +1 -1
  9. package/lib/index.css +1 -1
  10. package/lib/index.d.ts +2 -2
  11. package/lib/styles/Backgrounds.module.scss.js +8 -0
  12. package/lib/styles/Backgrounds.module.scss.js.map +1 -0
  13. package/lib/styles/Backgrounds.module.scss.mjs +4 -0
  14. package/lib/styles/Backgrounds.module.scss.mjs.map +1 -0
  15. package/lib/styles/Button.module.scss.js +1 -1
  16. package/lib/styles/Button.module.scss.mjs +1 -1
  17. package/lib/types/TextVariant.js +1 -0
  18. package/lib/types/TextVariant.js.map +1 -1
  19. package/lib/types/TextVariant.mjs +1 -0
  20. package/lib/types/TextVariant.mjs.map +1 -1
  21. 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
 
package/lib/components/Box.js.map CHANGED
@@ -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}: 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\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","useMemo","generateShortId","Children","React"],"mappings":";;;;;;;;;;AAKA,MAAM,SAAS,GAAGA,mBAAE,CAAC;AACpB,IAAA,IAAI,EAAE,6BAA6B;AACnC,IAAA,QAAQ,EAAE;AACT,QAAA,OAAO,EAAE;AACR,YAAA,OAAO,EAAE,EAAE;AACX,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,IAAI,EAAE,MAAM;AACZ,SAAA;AACD,QAAA,WAAW,EAAE;AACZ,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,UAAU,EAAE,eAAe;AAC3B,YAAA,QAAQ,EAAE,eAAe;AACzB,SAAA;AACD,QAAA,KAAK,EAAE;AACN,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,IAAI,EAAE,uBAAuB;AAC7B,YAAA,MAAM,EAAE,0BAA0B;AAClC,YAAA,KAAK,EACJ,kJAAkJ;AACnJ,SAAA;AACD,QAAA,OAAO,EAAE;AACR,YAAA,IAAI,EAAE,cAAc;AACpB,YAAA,KAAK,EAAE,eAAe;AACtB,YAAA,GAAG,EAAE,aAAa;AAClB,YAAA,MAAM,EAAE,gBAAgB;AACxB,YAAA,MAAM,EAAE,gBAAgB;AACxB,YAAA,YAAY,EAAE,iBAAiB;AAC/B,SAAA;AACD,QAAA,OAAO,EAAE;AACR,YAAA,IAAI,EAAE,SAAS;AACf,SAAA;AACD,KAAA;AACD,IAAA,eAAe,EAAE;AAChB,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,WAAW,EAAE,MAAM;AACnB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,OAAO,EAAE,MAAM;AACf,KAAA;AACD,CAAA,CAAC;SASc,GAAG,CAAC,EACnB,OAAO,GAAG,SAAS,EACnB,EAAE,EACF,SAAS,EACT,WAAW,GAAG,MAAM,EACpB,KAAK,GAAG,MAAM,EACd,OAAO,GAAG,MAAM,EAChB,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,EAAE,EAAE,QAAQ,EACZ,GAAG,GAAG,CAAC,EACP,GAAG,KAAK,EACE,EAAA;AACV,IAAA,MAAM,EAAE,GAAGC,aAAO,CAAC,MAAM,QAAQ,IAAIC,uBAAe,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AACpE,IAAA,MAAM,SAAS,GAAG,OAAO,KAAK,QAAQ,IAAI,CAAC,EAAE,GAAG,KAAK,GAAG,EAAE,IAAI,KAAK;IAC7CD,aAAO,CAAC,MAAME,cAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC;AAC9E,IAAA,MAAM,QAAQ,GAAG,GAAG,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,IAAI,CAAA,GAAA,CAAK,EAAE,GAAG,SAAS;AAC9D,IAAA,QACCC,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACT,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,EAAE,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,kBACxB,GAAG,GAAG,CAAC,GAAG,MAAM,GAAG,SAAS,EAC1C,SAAS,EAAE,SAAS,CAAC;YACpB,OAAO;YACP,WAAW;YACX,KAAK;YACL,OAAO;YACP,OAAO;YACP,SAAS;AACT,SAAA,CAAC,KACE,KAAK,EAAA,EAER,QAAQ,CACE;AAEd;;;;"}
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
 
package/lib/components/Box.mjs.map CHANGED
@@ -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}: 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\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":";;;;AAKA,MAAM,SAAS,GAAG,EAAE,CAAC;AACpB,IAAA,IAAI,EAAE,6BAA6B;AACnC,IAAA,QAAQ,EAAE;AACT,QAAA,OAAO,EAAE;AACR,YAAA,OAAO,EAAE,EAAE;AACX,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,IAAI,EAAE,MAAM;AACZ,SAAA;AACD,QAAA,WAAW,EAAE;AACZ,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,UAAU,EAAE,eAAe;AAC3B,YAAA,QAAQ,EAAE,eAAe;AACzB,SAAA;AACD,QAAA,KAAK,EAAE;AACN,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,IAAI,EAAE,uBAAuB;AAC7B,YAAA,MAAM,EAAE,0BAA0B;AAClC,YAAA,KAAK,EACJ,kJAAkJ;AACnJ,SAAA;AACD,QAAA,OAAO,EAAE;AACR,YAAA,IAAI,EAAE,cAAc;AACpB,YAAA,KAAK,EAAE,eAAe;AACtB,YAAA,GAAG,EAAE,aAAa;AAClB,YAAA,MAAM,EAAE,gBAAgB;AACxB,YAAA,MAAM,EAAE,gBAAgB;AACxB,YAAA,YAAY,EAAE,iBAAiB;AAC/B,SAAA;AACD,QAAA,OAAO,EAAE;AACR,YAAA,IAAI,EAAE,SAAS;AACf,SAAA;AACD,KAAA;AACD,IAAA,eAAe,EAAE;AAChB,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,WAAW,EAAE,MAAM;AACnB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,OAAO,EAAE,MAAM;AACf,KAAA;AACD,CAAA,CAAC;SASc,GAAG,CAAC,EACnB,OAAO,GAAG,SAAS,EACnB,EAAE,EACF,SAAS,EACT,WAAW,GAAG,MAAM,EACpB,KAAK,GAAG,MAAM,EACd,OAAO,GAAG,MAAM,EAChB,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,EAAE,EAAE,QAAQ,EACZ,GAAG,GAAG,CAAC,EACP,GAAG,KAAK,EACE,EAAA;AACV,IAAA,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,QAAQ,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AACpE,IAAA,MAAM,SAAS,GAAG,OAAO,KAAK,QAAQ,IAAI,CAAC,EAAE,GAAG,KAAK,GAAG,EAAE,IAAI,KAAK;IAC7C,OAAO,CAAC,MAAM,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC;AAC9E,IAAA,MAAM,QAAQ,GAAG,GAAG,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,IAAI,CAAA,GAAA,CAAK,EAAE,GAAG,SAAS;AAC9D,IAAA,QACC,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACT,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,EAAE,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,kBACxB,GAAG,GAAG,CAAC,GAAG,MAAM,GAAG,SAAS,EAC1C,SAAS,EAAE,SAAS,CAAC;YACpB,OAAO;YACP,WAAW;YACX,KAAK;YACL,OAAO;YACP,OAAO;YACP,SAAS;AACT,SAAA,CAAC,KACE,KAAK,EAAA,EAER,QAAQ,CACE;AAEd;;;;"}
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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"}
package/lib/components/ErrorMessage.js CHANGED
@@ -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: ErrorMessage_module.default.critical,
18
- warning: ErrorMessage_module.default.warning,
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
 
package/lib/components/ErrorMessage.js.map CHANGED
@@ -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":";;;;;;;;;;;;AAOA,MAAM,kBAAkB,GAAGA,mBAAE,CAAC;IAC7B,IAAI,EAAEC,2BAAM,CAAC,gBAAgB;AAC7B,IAAA,QAAQ,EAAE;AACT,QAAA,OAAO,EAAE;YACR,QAAQ,EAAEA,2BAAM,CAAC,QAAQ;YACzB,OAAO,EAAEA,2BAAM,CAAC,OAAO;AACvB,SAAA;AACD,KAAA;AACD,IAAA,eAAe,EAAE;AAChB,QAAA,OAAO,EAAE,UAAU;AACnB,KAAA;AACD,CAAA,CAAC;AAOI,SAAU,YAAY,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAqB,EAAA;IAClE,QACCC,qCAACC,OAAG,EAAA,EAAA,GAAK,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,EAAA;QAC9CD,sBAAA,CAAA,aAAA,CAACE,SAAI,QAAE,KAAK,CAAC,OAAO,CAAQ,CACvB;AAER;;;;"}
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;;;;"}
package/lib/components/ErrorMessage.mjs CHANGED
@@ -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: styles.critical,
12
- warning: styles.warning,
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
 
package/lib/components/ErrorMessage.mjs.map CHANGED
@@ -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":";;;;;;AAOA,MAAM,kBAAkB,GAAG,EAAE,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC,gBAAgB;AAC7B,IAAA,QAAQ,EAAE;AACT,QAAA,OAAO,EAAE;YACR,QAAQ,EAAE,MAAM,CAAC,QAAQ;YACzB,OAAO,EAAE,MAAM,CAAC,OAAO;AACvB,SAAA;AACD,KAAA;AACD,IAAA,eAAe,EAAE;AAChB,QAAA,OAAO,EAAE,UAAU;AACnB,KAAA;AACD,CAAA,CAAC;AAOI,SAAU,YAAY,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAqB,EAAA;IAClE,QACC,oBAAC,GAAG,EAAA,EAAA,GAAK,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,EAAA;QAC9C,KAAA,CAAA,aAAA,CAAC,IAAI,QAAE,KAAK,CAAC,OAAO,CAAQ,CACvB;AAER;;;;"}
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;;;;"}
package/lib/index.css CHANGED
@@ -1 +1 @@
1
- .Button-module_RyButton__nV7MM{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_RyButton__nV7MM{border-color:#fff;color:#fff}}.Button-module_RyButton__nV7MM:hover{transform:translateY(-2px)}.Button-module_RyButton__nV7MM:active{box-shadow:0 3px 8px rgba(0,0,0,.1);transform:translateY(0)}@media (prefers-color-scheme:dark){.Button-module_RyButton__nV7MM:active{box-shadow:0 3px 8px rgba(0,0,0,.5)}}.Button-module_RyButton__nV7MM:focus-visible{outline:2px solid currentColor;outline-offset:3px}.Button-module_RyButton__nV7MM.Button-module_glow__kLSOA:hover{background:linear-gradient(135deg,#ff8c00,#ff3c00);box-shadow:0 0 20px rgba(255,140,0,.8)}.Button-module_RyButton__nV7MM.Button-module_no-border__GJIXW{border:none}.Button-module_RyButton__nV7MM.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)}
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,7 +8,7 @@ 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 }: BoxProps): React.JSX.Element;
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> & {
@@ -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> & {
package/lib/styles/Backgrounds.module.scss.js ADDED
@@ -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
package/lib/styles/Backgrounds.module.scss.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Backgrounds.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
package/lib/styles/Backgrounds.module.scss.mjs ADDED
@@ -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
package/lib/styles/Backgrounds.module.scss.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Backgrounds.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
package/lib/styles/Button.module.scss.js CHANGED
@@ -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
package/lib/styles/Button.module.scss.mjs CHANGED
@@ -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
@@ -4,6 +4,7 @@ const VARIANT_MAP = {
4
4
  default: 'text-sm text-neutral-600',
5
5
  title: 'text-2xl font-medium text-amber-900',
6
6
  wavy: 'text-sm text-neutral-600 decoration-wavy',
7
+ muted: 'text-sm text-neutral-400',
7
8
  };
8
9
 
9
10
  exports.VARIANT_MAP = VARIANT_MAP;
package/lib/types/TextVariant.js.map 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;;;;;"}
package/lib/types/TextVariant.mjs CHANGED
@@ -2,6 +2,7 @@ const VARIANT_MAP = {
2
2
  default: 'text-sm text-neutral-600',
3
3
  title: 'text-2xl font-medium text-amber-900',
4
4
  wavy: 'text-sm text-neutral-600 decoration-wavy',
5
+ muted: 'text-sm text-neutral-400',
5
6
  };
6
7
 
7
8
  export { VARIANT_MAP };
package/lib/types/TextVariant.mjs.map CHANGED
@@ -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.5",
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
- "typed-scss-modules": "^8.1.1"
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
  }