@szum-tech/design-system 1.6.1 → 1.6.2

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 (10) hide show
  1. package/README.md +1 -0
  2. package/components/Avatar/index.d.ts +4 -0
  3. package/components/Avatar/index.js +2 -2
  4. package/components/Avatar/index.mjs +2 -2
  5. package/components/Button/index.d.ts +6 -2
  6. package/components/index.d.ts +10 -2
  7. package/index.d.ts +10 -2
  8. package/package.json +36 -33
  9. package/theme/global.css +1 -1
  10. package/theme/main-preset.js +8 -8
package/README.md CHANGED
@@ -78,6 +78,7 @@ Here is an example of a basic app using `ThemeProvider` component:
78
78
 
79
79
  ```jsx
80
80
  import * as React from "react";
81
+
81
82
  import { ThemeProvider } from "@szum-tech/design-system";
82
83
 
83
84
  function Providers({ children }) {
package/components/Avatar/index.d.ts CHANGED
@@ -27,6 +27,10 @@ type AvatarProps = React.ComponentPropsWithoutRef<"div"> & {
27
27
  * Defines avatar image src
28
28
  */
29
29
  src?: string;
30
+ /**
31
+ * Defines avatar children
32
+ */
33
+ children?: React.ReactNode;
30
34
  };
31
35
  declare function Avatar({ alt, bg, children, size, src, ...props }: AvatarProps): JSX.Element;
32
36
 
package/components/Avatar/index.js CHANGED
@@ -3,6 +3,6 @@
3
3
  var classVarianceAuthority = require('class-variance-authority');
4
4
  var jsxRuntime = require('react/jsx-runtime');
5
5
 
6
- var e=classVarianceAuthority.cva("select-none rounded font-semibold leading-none justify-center flex items-center bg-gray-500 text-white dark:text-black",{variants:{size:{sm:"h-6 w-6 text-lg",md:"h-10 w-10 text-xl",lg:"h-14 w-14 text-2xl"}},defaultVariants:{size:"md"}});function a({alt:o,bg:s,children:i,size:n="md",src:t,...l}){let m=e({size:n,className:s});return jsxRuntime.jsx("div",{className:m,...l,children:t?jsxRuntime.jsx("img",{className:"h-full w-full rounded object-cover object-center",alt:o,src:t}):i})}
6
+ var e=classVarianceAuthority.cva("select-none rounded font-semibold leading-none justify-center flex items-center bg-gray-500 text-white dark:text-black",{variants:{size:{sm:"h-6 w-6 text-lg",md:"h-10 w-10 text-xl",lg:"h-14 w-14 text-2xl"}},defaultVariants:{size:"md"}});function r({alt:o,bg:s,children:i,size:n="md",src:t,...l}){let m=e({size:n,className:s});return jsxRuntime.jsx("div",{className:m,...l,children:t?jsxRuntime.jsx("img",{className:"h-full w-full rounded object-cover object-center",alt:o,src:t}):i})}
7
7
 
8
- module.exports = a;
8
+ module.exports = r;
package/components/Avatar/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import { cva } from 'class-variance-authority';
2
2
  import { jsx } from 'react/jsx-runtime';
3
3
 
4
- var e=cva("select-none rounded font-semibold leading-none justify-center flex items-center bg-gray-500 text-white dark:text-black",{variants:{size:{sm:"h-6 w-6 text-lg",md:"h-10 w-10 text-xl",lg:"h-14 w-14 text-2xl"}},defaultVariants:{size:"md"}});function a({alt:o,bg:s,children:i,size:n="md",src:t,...l}){let m=e({size:n,className:s});return jsx("div",{className:m,...l,children:t?jsx("img",{className:"h-full w-full rounded object-cover object-center",alt:o,src:t}):i})}
4
+ var e=cva("select-none rounded font-semibold leading-none justify-center flex items-center bg-gray-500 text-white dark:text-black",{variants:{size:{sm:"h-6 w-6 text-lg",md:"h-10 w-10 text-xl",lg:"h-14 w-14 text-2xl"}},defaultVariants:{size:"md"}});function r({alt:o,bg:s,children:i,size:n="md",src:t,...l}){let m=e({size:n,className:s});return jsx("div",{className:m,...l,children:t?jsx("img",{className:"h-full w-full rounded object-cover object-center",alt:o,src:t}):i})}
5
5
 
6
- export { a as default };
6
+ export { r as default };
package/components/Button/index.d.ts CHANGED
@@ -20,7 +20,7 @@ type AsProp<C extends React.ElementType> = {
20
20
  as?: C;
21
21
  };
22
22
  type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
23
- type PolymorphicComponentProp<C extends React.ElementType, Props = {}> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
23
+ type PolymorphicComponentProp<C extends React.ElementType, Props = {}> = Props & AsProp<C> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
24
24
 
25
25
  type ButtonProp = {
26
26
  /**
@@ -38,7 +38,11 @@ type ButtonProp = {
38
38
  * @default 'md'
39
39
  */
40
40
  size?: ButtonSizeType;
41
+ /**
42
+ * Defines avatar children
43
+ */
44
+ children?: React.ReactNode;
41
45
  };
42
- declare const _default: React.ForwardRefExoticComponent<Pick<PolymorphicComponentProp<React.ElementType<any>, ButtonProp>, string | number | symbol> & React.RefAttributes<unknown>>;
46
+ declare const _default: React.ForwardRefExoticComponent<Omit<PolymorphicComponentProp<React.ElementType<any>, ButtonProp>, "ref"> & React.RefAttributes<unknown>>;
43
47
 
44
48
  export { _default as default };
package/components/index.d.ts CHANGED
@@ -27,6 +27,10 @@ type AvatarProps = React.ComponentPropsWithoutRef<"div"> & {
27
27
  * Defines avatar image src
28
28
  */
29
29
  src?: string;
30
+ /**
31
+ * Defines avatar children
32
+ */
33
+ children?: React.ReactNode;
30
34
  };
31
35
  declare function Avatar({ alt, bg, children, size, src, ...props }: AvatarProps): JSX.Element;
32
36
 
@@ -48,7 +52,7 @@ type AsProp<C extends React.ElementType> = {
48
52
  as?: C;
49
53
  };
50
54
  type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
51
- type PolymorphicComponentProp<C extends React.ElementType, Props = {}> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
55
+ type PolymorphicComponentProp<C extends React.ElementType, Props = {}> = Props & AsProp<C> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
52
56
 
53
57
  type ButtonProp = {
54
58
  /**
@@ -66,7 +70,11 @@ type ButtonProp = {
66
70
  * @default 'md'
67
71
  */
68
72
  size?: ButtonSizeType;
73
+ /**
74
+ * Defines avatar children
75
+ */
76
+ children?: React.ReactNode;
69
77
  };
70
- declare const _default: React.ForwardRefExoticComponent<Pick<PolymorphicComponentProp<React.ElementType<any>, ButtonProp>, string | number | symbol> & React.RefAttributes<unknown>>;
78
+ declare const _default: React.ForwardRefExoticComponent<Omit<PolymorphicComponentProp<React.ElementType<any>, ButtonProp>, "ref"> & React.RefAttributes<unknown>>;
71
79
 
72
80
  export { Avatar, AvatarProps, AvatarSizeType, _default as Button };
package/index.d.ts CHANGED
@@ -28,6 +28,10 @@ type AvatarProps = React.ComponentPropsWithoutRef<"div"> & {
28
28
  * Defines avatar image src
29
29
  */
30
30
  src?: string;
31
+ /**
32
+ * Defines avatar children
33
+ */
34
+ children?: React.ReactNode;
31
35
  };
32
36
  declare function Avatar({ alt, bg, children, size, src, ...props }: AvatarProps): JSX.Element;
33
37
 
@@ -49,7 +53,7 @@ type AsProp<C extends React.ElementType> = {
49
53
  as?: C;
50
54
  };
51
55
  type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
52
- type PolymorphicComponentProp<C extends React.ElementType, Props = {}> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
56
+ type PolymorphicComponentProp<C extends React.ElementType, Props = {}> = Props & AsProp<C> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
53
57
 
54
58
  type ButtonProp = {
55
59
  /**
@@ -67,8 +71,12 @@ type ButtonProp = {
67
71
  * @default 'md'
68
72
  */
69
73
  size?: ButtonSizeType;
74
+ /**
75
+ * Defines avatar children
76
+ */
77
+ children?: React.ReactNode;
70
78
  };
71
- declare const _default: React.ForwardRefExoticComponent<Pick<PolymorphicComponentProp<React.ElementType<any>, ButtonProp>, string | number | symbol> & React.RefAttributes<unknown>>;
79
+ declare const _default: React.ForwardRefExoticComponent<Omit<PolymorphicComponentProp<React.ElementType<any>, ButtonProp>, "ref"> & React.RefAttributes<unknown>>;
72
80
 
73
81
  type ThemeType = "light" | "dark";
74
82
  interface ThemeContextType {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@szum-tech/design-system",
3
- "version": "1.6.1",
3
+ "version": "1.6.2",
4
4
  "description": "Szum-Tech design system with tailwindcss support",
5
5
  "keywords": [
6
6
  "szum-tech",
@@ -54,55 +54,58 @@
54
54
  },
55
55
  "dependencies": {
56
56
  "@tailwindcss/container-queries": "^0.1.0",
57
- "class-variance-authority": "^0.4.0",
58
- "tailwind-scrollbar": "^3.0.0",
59
- "tailwindcss": "^3.2.7"
57
+ "class-variance-authority": "^0.5.1",
58
+ "tailwind-scrollbar": "^3.0.0"
60
59
  },
61
60
  "devDependencies": {
62
- "@babel/core": "^7.19.6",
63
- "@heroicons/react": "^2.0.16",
64
- "@storybook/addon-a11y": "^7.0.0-beta.47",
65
- "@storybook/addon-actions": "^7.0.0-beta.47",
66
- "@storybook/addon-docs": "^7.0.0-beta.47",
67
- "@storybook/addon-essentials": "^7.0.0-beta.47",
68
- "@storybook/addon-links": "^7.0.0-beta.47",
69
- "@storybook/addons": "^7.0.0-beta.47",
61
+ "@babel/core": "^7.21.4",
62
+ "@heroicons/react": "^2.0.17",
63
+ "@storybook/addon-a11y": "^7.0.0",
64
+ "@storybook/addon-actions": "^7.0.0",
65
+ "@storybook/addon-docs": "^7.0.0",
66
+ "@storybook/addon-essentials": "^7.0.0",
67
+ "@storybook/addon-interactions": "^7.0.0",
68
+ "@storybook/addon-links": "^7.0.0",
69
+ "@storybook/addon-mdx-gfm": "^7.0.0",
70
+ "@storybook/addons": "^7.0.0",
70
71
  "@storybook/core-common": "^6.5.16",
71
72
  "@storybook/core-events": "^6.5.16",
72
- "@storybook/react": "^7.0.0-beta.47",
73
- "@storybook/react-vite": "^7.0.0-beta.47",
74
- "@storybook/theming": "^7.0.0-beta.47",
75
- "@szum-tech/prettier-config": "^1.1.1",
76
- "@szum-tech/semantic-release-preset": "^1.3.0",
77
- "@testing-library/react": "^13.4.0",
73
+ "@storybook/react": "^7.0.0",
74
+ "@storybook/react-vite": "^7.0.0",
75
+ "@storybook/theming": "^7.0.0",
76
+ "@szum-tech/prettier-config": "^1.2.0",
77
+ "@szum-tech/semantic-release-preset": "^1.5.0",
78
+ "@testing-library/react": "^14.0.0",
78
79
  "@testing-library/user-event": "^14.4.3",
79
- "@types/react": "^18.0.24",
80
- "@types/react-dom": "^18.0.8",
81
- "@types/semantic-release": "^17.2.4",
80
+ "@types/react": "^18.0.32",
81
+ "@types/react-dom": "^18.0.11",
82
+ "@types/semantic-release": "^20.0.1",
82
83
  "@vitejs/plugin-react": "^3.1.0",
83
- "autoprefixer": "^10.4.13",
84
- "babel-loader": "^8.2.5",
85
- "concurrently": "^7.6.0",
84
+ "autoprefixer": "^10.4.14",
85
+ "babel-loader": "^9.1.2",
86
+ "concurrently": "^8.0.1",
86
87
  "cpy-cli": "^4.2.0",
87
- "postcss": "^8.4.18",
88
+ "postcss": "^8.4.21",
88
89
  "prettier": "^2.8.7",
89
- "prettier-plugin-tailwindcss": "^0.1.13",
90
+ "prettier-plugin-tailwindcss": "^0.2.6",
90
91
  "react": "^18.2.0",
91
92
  "react-docgen": "^5.4.3",
92
93
  "react-docgen-typescript": "^2.2.2",
93
94
  "react-dom": "^18.2.0",
94
- "semantic-release": "^20.1.0",
95
+ "semantic-release": "^21.0.1",
95
96
  "serve": "^14.2.0",
96
- "storybook": "^7.0.0-beta.47",
97
- "storybook-addon-pseudo-states": "^2.0.0-next.0",
97
+ "storybook": "^7.0.0",
98
+ "storybook-addon-pseudo-states": "^2.0.0-next.1",
98
99
  "storybook-addon-themes": "^6.1.0",
99
- "tsup": "^6.6.3",
100
- "typescript": "^4.9.5",
101
- "vite": "^4.1.2"
100
+ "tailwindcss": "^3.3.1",
101
+ "tsup": "^6.7.0",
102
+ "typescript": "^5.0.3",
103
+ "vite": "^4.2.1"
102
104
  },
103
105
  "peerDependencies": {
104
106
  "react": "^18.2.0",
105
- "tailwindcss": "^3.2.7"
107
+ "react-dom": "^18.2.0",
108
+ "tailwindcss": "^3.3.1"
106
109
  },
107
110
  "publishConfig": {
108
111
  "access": "public"
package/theme/global.css CHANGED
@@ -121,6 +121,6 @@
121
121
  }
122
122
 
123
123
  body {
124
- @apply scroll bg-gray-900 font-poppins text-typography-primary antialiased;
124
+ @apply bg-gray-900 font-poppins text-typography-primary antialiased scroll;
125
125
  }
126
126
  }
package/theme/main-preset.js CHANGED
@@ -4,13 +4,13 @@ var __commonJS = (cb, mod) => function __require() {
4
4
  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
5
5
  };
6
6
 
7
- // src/theme/plugins/components/scroll.js
7
+ // src/theme/plugins/utilities/scroll.js
8
8
  var require_scroll = __commonJS({
9
- "src/theme/plugins/components/scroll.js"(exports2, module2) {
9
+ "src/theme/plugins/utilities/scroll.js"(exports2, module2) {
10
10
  "use strict";
11
11
  var plugin = require("tailwindcss/plugin");
12
- module2.exports = plugin(function({ addComponents }) {
13
- addComponents({
12
+ module2.exports = plugin(function({ addUtilities }) {
13
+ addUtilities({
14
14
  ".scroll": {
15
15
  "@apply scrollbar scrollbar-thin scrollbar-thumb-gray-600/100 hover:scrollbar-thumb-gray-600/80": {}
16
16
  }
@@ -19,13 +19,13 @@ var require_scroll = __commonJS({
19
19
  }
20
20
  });
21
21
 
22
- // src/theme/plugins/components/typography.js
22
+ // src/theme/plugins/utilities/typography.js
23
23
  var require_typography = __commonJS({
24
- "src/theme/plugins/components/typography.js"(exports2, module2) {
24
+ "src/theme/plugins/utilities/typography.js"(exports2, module2) {
25
25
  "use strict";
26
26
  var plugin = require("tailwindcss/plugin");
27
- module2.exports = plugin(function({ addComponents }) {
28
- addComponents({
27
+ module2.exports = plugin(function({ addUtilities }) {
28
+ addUtilities({
29
29
  ".typography-heading-1": {
30
30
  "@apply font-poppins text-6xl font-light leading-relaxed -tracking-[.01562em]": {}
31
31
  },