@szum-tech/design-system 1.4.0 → 1.5.1

package/components/Avatar/index.d.ts

@@ -0,0 +1,33 @@
+import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import * as React from 'react';
+
+declare const avatarCva: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+
+type AvatarCvaProps = VariantProps<typeof avatarCva>;
+type AvatarSizeType = NonNullable<AvatarCvaProps["size"]>;
+
+type AvatarProps = React.ComponentPropsWithoutRef<"div"> & {
+    /**
+     * Defines avatar image alt
+     */
+    alt?: string;
+    /**
+     * Defines background color
+     */
+    bg?: `bg-${string}` | `bg-${string}-${number}`;
+    /**
+     * Defines avatar size
+     * @default 'md'
+     */
+    size?: AvatarSizeType;
+    /**
+     * Defines avatar image src
+     */
+    src?: string;
+};
+declare function Avatar({ alt, bg, children, size, src, ...props }: AvatarProps): JSX.Element;
+
+export { AvatarProps, AvatarSizeType, Avatar as default };

package/components/Avatar/index.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+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})}
+
+module.exports = a;

package/components/Avatar/index.mjs

@@ -0,0 +1,6 @@
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+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})}
+
+export { a as default };

package/components/Button/index.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+
+declare const buttonCva: (props?: ({
+    color?: "neutral" | "primary" | "success" | "warning" | "error" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    variant?: "text" | "outlined" | "contained" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+
+type ButtonCvaProps = VariantProps<typeof buttonCva>;
+type ButtonSizeType = NonNullable<ButtonCvaProps["size"]>;
+type ButtonVariantType = NonNullable<ButtonCvaProps["variant"]>;
+type ButtonColorType = NonNullable<ButtonCvaProps["color"]>;
+
+type AsProp<C extends React.ElementType> = {
+    /**
+     * Defines HTML tag to be used for component
+     */
+    as?: C;
+};
+type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
+type PolymorphicComponentProp<C extends React.ElementType, Props = {}> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
+
+type ButtonProp = {
+    /**
+     * Defines button color
+     * @default 'primary'
+     */
+    color?: ButtonColorType;
+    /**
+     * Defines button variant
+     * @default 'text'
+     */
+    variant?: ButtonVariantType;
+    /**
+     * Defines button size
+     * @default 'md'
+     */
+    size?: ButtonSizeType;
+};
+declare const _default: React.ForwardRefExoticComponent<Pick<PolymorphicComponentProp<React.ElementType<any>, ButtonProp>, string | number | symbol> & React.RefAttributes<unknown>>;
+
+export { _default as default };

package/components/Button/index.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var e = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var e__namespace = /*#__PURE__*/_interopNamespace(e);
+
+var r=classVarianceAuthority.cva("border rounded font-sans font-medium leading-[1.75] tracking-[.02857em]",{variants:{color:{neutral:"",primary:"",success:"",warning:"",error:""},size:{sm:"py-1 px-2.5 text-[.8125rem]",md:"px-4 py-1.5 text-sm",lg:"px-5 py-2 text-[.9375rem]"},variant:{text:"border-transparent bg-transparent hover:text-white",outlined:"",contained:""}},compoundVariants:[{variant:"text",color:"neutral",class:["text-gray-400","hover:border-gray-400 hover:bg-gray-400","active:text-white active:border-gray-300 active:bg-gray-300","disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-gray-400"]},{variant:"text",color:"primary",class:["text-primary-500","hover:border-primary-400 hover:bg-primary-400","active:text-white active:border-primary-600 active:bg-primary-600","disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-primary-500"]},{variant:"text",color:"success",class:["text-success-500","hover:border-success-400 hover:bg-success-400","active:text-white active:border-success-600 active:bg-success-600","disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-success-500"]},{variant:"text",color:"warning",class:["text-warning-500","hover:border-warning-400 hover:bg-warning-400","active:text-white active:border-warning-600 active:bg-warning-600","disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-warning-500"]},{variant:"text",color:"error",class:["text-error-500","hover:border-error-400 hover:bg-error-400","active:text-white active:border-error-600 active:bg-error-600","disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-error-500"]},{variant:"outlined",color:"neutral",class:["text-gray-400 border-gray-400 bg-transparent","hover:bg-gray-500 hover:text-white","active:text-white active:bg-gray-300","disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-gray-400"]},{variant:"outlined",color:"primary",class:["text-primary-500 border-primary-500 bg-transparent","hover:bg-primary-400 hover:text-white","active:text-white active:bg-primary-600","disabled:cursor-not-allowed disabled:opacity-50  disabled:hover:bg-transparent disabled:hover:text-primary-500"]},{variant:"outlined",color:"success",class:["text-success-500 border-success-500 bg-transparent","hover:bg-success-400 hover:text-white","active:text-white active:bg-success-600","disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-success-500"]},{variant:"outlined",color:"warning",class:["text-warning-500 border-warning-500 bg-transparent","hover:bg-warning-400 hover:text-white","active:text-white active:bg-warning-600","disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-warning-500"]},{variant:"outlined",color:"error",class:["text-error-500 border-error-500 bg-transparent","hover:bg-error-400 hover:text-white","active:text-white active:bg-error-600","disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-error-500"]}]});var v=e__namespace.forwardRef(function({as:t,color:a="primary",children:o,size:i="md",variant:s="text",...n},d){let c=t||"button",l=r({size:i,variant:s,color:a});return jsxRuntime.jsx(c,{className:l,ref:d,...n,children:o})});
+
+module.exports = v;

package/components/Button/index.mjs

@@ -0,0 +1,7 @@
+import * as e from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var r=cva("border rounded font-sans font-medium leading-[1.75] tracking-[.02857em]",{variants:{color:{neutral:"",primary:"",success:"",warning:"",error:""},size:{sm:"py-1 px-2.5 text-[.8125rem]",md:"px-4 py-1.5 text-sm",lg:"px-5 py-2 text-[.9375rem]"},variant:{text:"border-transparent bg-transparent hover:text-white",outlined:"",contained:""}},compoundVariants:[{variant:"text",color:"neutral",class:["text-gray-400","hover:border-gray-400 hover:bg-gray-400","active:text-white active:border-gray-300 active:bg-gray-300","disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-gray-400"]},{variant:"text",color:"primary",class:["text-primary-500","hover:border-primary-400 hover:bg-primary-400","active:text-white active:border-primary-600 active:bg-primary-600","disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-primary-500"]},{variant:"text",color:"success",class:["text-success-500","hover:border-success-400 hover:bg-success-400","active:text-white active:border-success-600 active:bg-success-600","disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-success-500"]},{variant:"text",color:"warning",class:["text-warning-500","hover:border-warning-400 hover:bg-warning-400","active:text-white active:border-warning-600 active:bg-warning-600","disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-warning-500"]},{variant:"text",color:"error",class:["text-error-500","hover:border-error-400 hover:bg-error-400","active:text-white active:border-error-600 active:bg-error-600","disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-error-500"]},{variant:"outlined",color:"neutral",class:["text-gray-400 border-gray-400 bg-transparent","hover:bg-gray-500 hover:text-white","active:text-white active:bg-gray-300","disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-gray-400"]},{variant:"outlined",color:"primary",class:["text-primary-500 border-primary-500 bg-transparent","hover:bg-primary-400 hover:text-white","active:text-white active:bg-primary-600","disabled:cursor-not-allowed disabled:opacity-50  disabled:hover:bg-transparent disabled:hover:text-primary-500"]},{variant:"outlined",color:"success",class:["text-success-500 border-success-500 bg-transparent","hover:bg-success-400 hover:text-white","active:text-white active:bg-success-600","disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-success-500"]},{variant:"outlined",color:"warning",class:["text-warning-500 border-warning-500 bg-transparent","hover:bg-warning-400 hover:text-white","active:text-white active:bg-warning-600","disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-warning-500"]},{variant:"outlined",color:"error",class:["text-error-500 border-error-500 bg-transparent","hover:bg-error-400 hover:text-white","active:text-white active:bg-error-600","disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-error-500"]}]});var v=e.forwardRef(function({as:t,color:a="primary",children:o,size:i="md",variant:s="text",...n},d){let c=t||"button",l=r({size:i,variant:s,color:a});return jsx(c,{className:l,ref:d,...n,children:o})});
+
+export { v as default };

package/components/index.d.ts

@@ -0,0 +1,72 @@
+import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import * as React from 'react';
+
+declare const avatarCva: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+
+type AvatarCvaProps = VariantProps<typeof avatarCva>;
+type AvatarSizeType = NonNullable<AvatarCvaProps["size"]>;
+
+type AvatarProps = React.ComponentPropsWithoutRef<"div"> & {
+    /**
+     * Defines avatar image alt
+     */
+    alt?: string;
+    /**
+     * Defines background color
+     */
+    bg?: `bg-${string}` | `bg-${string}-${number}`;
+    /**
+     * Defines avatar size
+     * @default 'md'
+     */
+    size?: AvatarSizeType;
+    /**
+     * Defines avatar image src
+     */
+    src?: string;
+};
+declare function Avatar({ alt, bg, children, size, src, ...props }: AvatarProps): JSX.Element;
+
+declare const buttonCva: (props?: ({
+    color?: "neutral" | "primary" | "success" | "warning" | "error" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    variant?: "text" | "outlined" | "contained" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+
+type ButtonCvaProps = VariantProps<typeof buttonCva>;
+type ButtonSizeType = NonNullable<ButtonCvaProps["size"]>;
+type ButtonVariantType = NonNullable<ButtonCvaProps["variant"]>;
+type ButtonColorType = NonNullable<ButtonCvaProps["color"]>;
+
+type AsProp<C extends React.ElementType> = {
+    /**
+     * Defines HTML tag to be used for component
+     */
+    as?: C;
+};
+type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
+type PolymorphicComponentProp<C extends React.ElementType, Props = {}> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
+
+type ButtonProp = {
+    /**
+     * Defines button color
+     * @default 'primary'
+     */
+    color?: ButtonColorType;
+    /**
+     * Defines button variant
+     * @default 'text'
+     */
+    variant?: ButtonVariantType;
+    /**
+     * Defines button size
+     * @default 'md'
+     */
+    size?: ButtonSizeType;
+};
+declare const _default: React.ForwardRefExoticComponent<Pick<PolymorphicComponentProp<React.ElementType<any>, ButtonProp>, string | number | symbol> & React.RefAttributes<unknown>>;
+
+export { Avatar, AvatarProps, AvatarSizeType, _default as Button };

package/components/index.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var Avatar = require('./Avatar');
+var Button = require('./Button');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Button__default = /*#__PURE__*/_interopDefault(Button);
+
+
+
+Object.defineProperty(exports, 'Avatar', {
+	enumerable: true,
+	get: function () { return Avatar__namespace.default; }
+});
+Object.defineProperty(exports, 'Button', {
+	enumerable: true,
+	get: function () { return Button__default.default; }
+});
+Object.keys(Avatar).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Avatar[k]; }
+	});
+});

package/components/index.mjs

@@ -0,0 +1,3 @@
+export * from './Avatar';
+export { default as Avatar } from './Avatar';
+export { default as Button } from './Button';

package/contexts/index.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+
+type ThemeType = "light" | "dark";
+interface ThemeContextType {
+    theme: ThemeType;
+    setTheme: React.Dispatch<React.SetStateAction<ThemeType>>;
+}
+
+declare const ThemeContext: React.Context<ThemeContextType>;
+
+interface ThemeProviderProps {
+    /**
+     * Children Components using theming.
+     */
+    children?: React.ReactNode;
+    /**
+     * Define the default theme which is set at the beginning if neither local storage nor media is defined.
+     */
+    defaultTheme?: ThemeType;
+    /**
+     * Define theme that is always set initially.
+     */
+    theme?: ThemeType;
+}
+declare function ThemeProvider({ children, defaultTheme, theme }: ThemeProviderProps): JSX.Element;
+
+export { ThemeContext, ThemeContextType, ThemeProvider, ThemeProviderProps, ThemeType };

package/contexts/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var theme = require('./theme');
+
+
+
+Object.keys(theme).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return theme[k]; }
+	});
+});

package/contexts/index.mjs

@@ -0,0 +1 @@
+export * from './theme';

package/contexts/theme/index.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+
+type ThemeType = "light" | "dark";
+interface ThemeContextType {
+    theme: ThemeType;
+    setTheme: React.Dispatch<React.SetStateAction<ThemeType>>;
+}
+
+declare const ThemeContext: React.Context<ThemeContextType>;
+
+interface ThemeProviderProps {
+    /**
+     * Children Components using theming.
+     */
+    children?: React.ReactNode;
+    /**
+     * Define the default theme which is set at the beginning if neither local storage nor media is defined.
+     */
+    defaultTheme?: ThemeType;
+    /**
+     * Define theme that is always set initially.
+     */
+    theme?: ThemeType;
+}
+declare function ThemeProvider({ children, defaultTheme, theme }: ThemeProviderProps): JSX.Element;
+
+export { ThemeContext, ThemeContextType, ThemeProvider, ThemeProviderProps, ThemeType };

package/contexts/theme/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var a = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var a__default = /*#__PURE__*/_interopDefault(a);
+
+var n=a__default.default.createContext({});function T(t){if(typeof window<"u"&&window.localStorage){let e=window.localStorage.getItem("theme");if(e==="dark"||!e&&window.matchMedia("(prefers-color-scheme: dark)").matches)return "dark"}return t??"light"}function u({children:t,defaultTheme:e,theme:r}){let[o,i]=a__default.default.useState(r||T(e));function d(m){typeof window<"u"&&window.localStorage&&(m==="dark"?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark"),localStorage.setItem("theme",m));}return a__default.default.useEffect(()=>{d(o);},[o]),jsxRuntime.jsx(n.Provider,{value:{theme:o,setTheme:i},children:t})}
+
+exports.ThemeContext = n;
+exports.ThemeProvider = u;

package/contexts/theme/index.mjs

@@ -0,0 +1,6 @@
+import a from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var n=a.createContext({});function T(t){if(typeof window<"u"&&window.localStorage){let e=window.localStorage.getItem("theme");if(e==="dark"||!e&&window.matchMedia("(prefers-color-scheme: dark)").matches)return "dark"}return t??"light"}function u({children:t,defaultTheme:e,theme:r}){let[o,i]=a.useState(r||T(e));function d(m){typeof window<"u"&&window.localStorage&&(m==="dark"?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark"),localStorage.setItem("theme",m));}return a.useEffect(()=>{d(o);},[o]),jsx(n.Provider,{value:{theme:o,setTheme:i},children:t})}
+
+export { n as ThemeContext, u as ThemeProvider };

package/hooks/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+
+type ThemeType = "light" | "dark";
+interface ThemeContextType {
+    theme: ThemeType;
+    setTheme: React.Dispatch<React.SetStateAction<ThemeType>>;
+}
+
+declare const useTheme: () => ThemeContextType;
+
+export { useTheme };

package/hooks/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var useTheme = require('./useTheme');
+
+
+
+Object.keys(useTheme).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return useTheme[k]; }
+	});
+});

package/hooks/index.mjs

@@ -0,0 +1 @@
+export * from './useTheme';

package/hooks/useTheme/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+
+type ThemeType = "light" | "dark";
+interface ThemeContextType {
+    theme: ThemeType;
+    setTheme: React.Dispatch<React.SetStateAction<ThemeType>>;
+}
+
+declare const useTheme: () => ThemeContextType;
+
+export { useTheme };

package/hooks/useTheme/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var t = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var t__default = /*#__PURE__*/_interopDefault(t);
+
+var e=t__default.default.createContext({});var T=()=>t__default.default.useContext(e);
+
+exports.useTheme = T;

package/hooks/useTheme/index.mjs

@@ -0,0 +1,5 @@
+import t from 'react';
+
+var e=t.createContext({});var T=()=>t.useContext(e);
+
+export { T as useTheme };

package/package.json

@@ -5,8 +5,9 @@
   },
   "description": "Szum-Tech design system with tailwindcss support",
   "dependencies": {
+    "@heroicons/react": "^2.0.15",
     "class-variance-authority": "^0.4.0",
-    "tailwindcss": "^3.2.4"
+    "tailwindcss": "^3.2.7"
   },
   "devDependencies": {
     "@babel/core": "^7.19.6",
@@ -16,19 +17,17 @@
     "@semantic-release/github": "^8.0.6",
     "@semantic-release/npm": "^9.0.1",
     "@semantic-release/release-notes-generator": "^10.0.3",
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-docs": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-interactions": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addons": "^6.5.13",
-    "@storybook/builder-webpack5": "^6.5.13",
-    "@storybook/core-events": "^6.5.13",
-    "@storybook/manager-webpack5": "^6.5.13",
-    "@storybook/react": "^6.5.13",
-    "@storybook/testing-library": "^0.0.13",
-    "@storybook/theming": "^6.5.13",
+    "@storybook/addon-a11y": "^7.0.0-beta.47",
+    "@storybook/addon-actions": "^7.0.0-beta.47",
+    "@storybook/addon-docs": "^7.0.0-beta.47",
+    "@storybook/addon-essentials": "^7.0.0-beta.47",
+    "@storybook/addon-links": "^7.0.0-beta.47",
+    "@storybook/addons": "^7.0.0-beta.47",
+    "@storybook/core-common": "^6.5.16",
+    "@storybook/core-events": "^6.5.16",
+    "@storybook/react": "^7.0.0-beta.47",
+    "@storybook/react-vite": "^7.0.0-beta.47",
+    "@storybook/theming": "^7.0.0-beta.47",
     "@tailwindcss/container-queries": "^0.1.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
@@ -36,9 +35,10 @@
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
     "@types/semantic-release": "^17.2.4",
+    "@vitejs/plugin-react": "^3.1.0",
     "autoprefixer": "^10.4.13",
     "babel-loader": "^8.2.5",
-    "concurrently": "^7.5.0",
+    "concurrently": "^7.6.0",
     "cpy-cli": "^4.2.0",
     "postcss": "^8.4.18",
     "prettier": "^2.7.1",
@@ -48,13 +48,19 @@
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.2.0",
     "semantic-release": "^19.0.5",
-    "storybook-dark-mode": "^1.1.2",
-    "tailwind-scrollbar": "^2.0.1",
-    "tsup": "^6.3.0",
-    "typescript": "^4.8.4"
+    "serve": "^14.2.0",
+    "storybook": "^7.0.0-beta.47",
+    "storybook-addon-pseudo-states": "^2.0.0-next.0",
+    "storybook-addon-themes": "^6.1.0",
+    "tailwind-scrollbar": "^2.1.0",
+    "tsup": "^6.6.3",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.2"
   },
   "files": [
-    "dist/**",
+    "components/**",
+    "hooks/**",
+    "contexts/**",
     "tailwindcss/**"
   ],
   "homepage": "https://github.com/JanSzewczyk/design-system#readme",
@@ -72,9 +78,9 @@
     "semantic-release"
   ],
   "license": "MIT",
-  "main": "./dist/index.js",
+  "main": "./index.js",
   "name": "@szum-tech/design-system",
-  "module": "./dist/index.mjs",
+  "module": "./index.mjs",
   "publishConfig": {
     "access": "public"
   },
@@ -83,20 +89,21 @@
     "url": "git+https://github.com/JanSzewczyk/design-system.git"
   },
   "scripts": {
-    "build": "tsup src/index.tsx --format esm,cjs --dts --treeshake --external react,react-dom",
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
     "clean": "rm -rf node_modules && rm -rf dist",
     "dev": "concurrently \"npm run dev:css\" \"npm run dev:build\"",
     "dev:build": "tsup src/index.tsx --format esm,cjs --watch --dts --external react,react-dom",
     "dev:css": "tailwindcss -w -i tailwindcss/global.css -o src/styles/default.css",
-    "storybook": "start-storybook -p 6006",
     "semantic-release": "semantic-release",
-    "build:storybook": "build-storybook",
-    "build:storybook:docs": "build-storybook --docs",
-    "prebuild:storybook": "tailwindcss -i tailwindcss/global.css -o src/styles/default.css"
+    "storybook": "storybook dev -p 6006 -s public",
+    "storybook:prebuild": "tailwindcss -i tailwindcss/global.css -o src/styles/default.css",
+    "storybook:build": "storybook build --docs",
+    "storybook:serve": "serve storybook-static"
   },
   "sideEffects": false,
-  "types": "./dist/index.d.ts",
-  "version": "1.4.0",
+  "types": "./index.d.ts",
+  "version": "1.5.1",
   "peerDependencies": {
     "@tailwindcss/container-queries": "^0.1.0",
     "react": "^18.2.0",

package/dist/index.d.ts

@@ -1,71 +0,0 @@
-import * as React from 'react';
-import React__default from 'react';
-import { VariantProps } from 'class-variance-authority';
-import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
-
-declare const buttonCva: (props?: ({
-    color?: "neutral" | "primary" | "success" | "warning" | "error" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-    variant?: "text" | "outlined" | "contained" | null | undefined;
-} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
-
-declare type ButtonCvaProps = VariantProps<typeof buttonCva>;
-declare type ButtonSizeType = NonNullable<ButtonCvaProps["size"]>;
-declare type ButtonVariantType = NonNullable<ButtonCvaProps["variant"]>;
-declare type ButtonColorType = NonNullable<ButtonCvaProps["color"]>;
-
-declare type AsProp<C extends React.ElementType> = {
-    /**
-     * Defines HTML tag to be used for component
-     */
-    as?: C;
-};
-declare type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
-declare type PolymorphicComponentProp<C extends React.ElementType, Props = {}> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
-
-declare type ButtonProp = {
-    /**
-     * Defines button color
-     * @default 'primary'
-     */
-    color?: ButtonColorType;
-    /**
-     * Defines button variant
-     * @default 'text'
-     */
-    variant?: ButtonVariantType;
-    /**
-     * Defines button size
-     * @default 'md'
-     */
-    size?: ButtonSizeType;
-};
-declare const _default: React.ForwardRefExoticComponent<Pick<PolymorphicComponentProp<React.ElementType<any>, ButtonProp>, string | number | symbol> & React.RefAttributes<unknown>>;
-
-declare type ThemeType = "light" | "dark";
-interface ThemeContextType {
-    theme: ThemeType;
-    setTheme: React__default.Dispatch<React__default.SetStateAction<ThemeType>>;
-}
-
-declare const ThemeContext: React__default.Context<ThemeContextType>;
-
-interface ThemeProviderProps {
-    /**
-     * Children Components using theming.
-     */
-    children?: React__default.ReactNode;
-    /**
-     * Define the default theme which is set at the beginning if neither local storage nor media is defined.
-     */
-    defaultTheme?: ThemeType;
-    /**
-     * Define theme that is always set initially.
-     */
-    theme?: ThemeType;
-}
-declare function ThemeProvider({ children, defaultTheme, theme }: ThemeProviderProps): JSX.Element;
-
-declare const useTheme: () => ThemeContextType;
-
-export { _default as Button, ThemeContext, ThemeContextType, ThemeProvider, ThemeProviderProps, ThemeType, useTheme };

package/dist/index.js

@@ -1,215 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React3 = require('react');
-var classVarianceAuthority = require('class-variance-authority');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
-var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
-var React3__default = /*#__PURE__*/_interopDefaultLegacy(React3);
-
-// src/components/Button/Button.tsx
-var buttonCva = classVarianceAuthority.cva(
-  "border rounded font-sans font-medium leading-[1.75] tracking-[.02857em]",
-  {
-    variants: {
-      color: {
-        neutral: "",
-        primary: "",
-        success: "",
-        warning: "",
-        error: ""
-      },
-      size: {
-        sm: "py-1 px-2.5 text-[.8125rem]",
-        md: "px-4 py-1.5 text-sm",
-        lg: "px-5 py-2 text-[.9375rem]"
-      },
-      variant: {
-        text: "border-transparent bg-transparent hover:text-white",
-        outlined: "",
-        contained: ""
-      }
-    },
-    compoundVariants: [
-      {
-        variant: "text",
-        color: "neutral",
-        class: [
-          "text-gray-400",
-          "hover:border-gray-400 hover:bg-gray-400",
-          "active:text-white active:border-gray-300 active:bg-gray-300",
-          "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-gray-400"
-        ]
-      },
-      {
-        variant: "text",
-        color: "primary",
-        class: [
-          "text-primary-500",
-          "hover:border-primary-400 hover:bg-primary-400",
-          "active:text-white active:border-primary-600 active:bg-primary-600",
-          "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-primary-500"
-        ]
-      },
-      {
-        variant: "text",
-        color: "success",
-        class: [
-          "text-success-500",
-          "hover:border-success-400 hover:bg-success-400",
-          "active:text-white active:border-success-600 active:bg-success-600",
-          "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-success-500"
-        ]
-      },
-      {
-        variant: "text",
-        color: "warning",
-        class: [
-          "text-warning-500",
-          "hover:border-warning-400 hover:bg-warning-400",
-          "active:text-white active:border-warning-600 active:bg-warning-600",
-          "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-warning-500"
-        ]
-      },
-      {
-        variant: "text",
-        color: "error",
-        class: [
-          "text-error-500",
-          "hover:border-error-400 hover:bg-error-400",
-          "active:text-white active:border-error-600 active:bg-error-600",
-          "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-error-500"
-        ]
-      },
-      {
-        variant: "outlined",
-        color: "neutral",
-        class: [
-          "text-gray-400 border-gray-400 bg-transparent",
-          "hover:bg-gray-500 hover:text-white",
-          "active:text-white active:bg-gray-300",
-          "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-gray-400"
-        ]
-      },
-      {
-        variant: "outlined",
-        color: "primary",
-        class: [
-          "text-primary-500 border-primary-500 bg-transparent",
-          "hover:bg-primary-400 hover:text-white",
-          "active:text-white active:bg-primary-600",
-          "disabled:cursor-not-allowed disabled:opacity-50  disabled:hover:bg-transparent disabled:hover:text-primary-500"
-        ]
-      },
-      {
-        variant: "outlined",
-        color: "success",
-        class: [
-          "text-success-500 border-success-500 bg-transparent",
-          "hover:bg-success-400 hover:text-white",
-          "active:text-white active:bg-success-600",
-          "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-success-500"
-        ]
-      },
-      {
-        variant: "outlined",
-        color: "warning",
-        class: [
-          "text-warning-500 border-warning-500 bg-transparent",
-          "hover:bg-warning-400 hover:text-white",
-          "active:text-white active:bg-warning-600",
-          "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-warning-500"
-        ]
-      },
-      {
-        variant: "outlined",
-        color: "error",
-        class: [
-          "text-error-500 border-error-500 bg-transparent",
-          "hover:bg-error-400 hover:text-white",
-          "active:text-white active:bg-error-600",
-          "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-error-500"
-        ]
-      }
-    ]
-  }
-);
-var Button_default = React3__namespace.forwardRef(function({
-  as,
-  color = "primary",
-  children,
-  size = "md",
-  variant = "text",
-  ...restProps
-}, ref) {
-  const Component = as || "button";
-  const buttonRootStyles = buttonCva({ size, variant, color });
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, {
-    className: buttonRootStyles + " ",
-    ref,
-    ...restProps,
-    children
-  });
-});
-var ThemeContext = React3__default["default"].createContext({});
-function getInitialTheme(defaultTheme) {
-  if (typeof window !== "undefined" && window.localStorage) {
-    const storageTheme = window.localStorage.getItem("theme");
-    if (storageTheme === "dark" || !storageTheme && window.matchMedia("(prefers-color-scheme: dark)").matches) {
-      return "dark";
-    }
-  }
-  return defaultTheme ?? "light";
-}
-function ThemeProvider({ children, defaultTheme, theme }) {
-  const [themeState, setThemeState] = React3__default["default"].useState(
-    theme ? theme : getInitialTheme(defaultTheme)
-  );
-  function rawSetTheme(rawTheme) {
-    if (typeof window !== "undefined" && window.localStorage) {
-      if (rawTheme === "dark") {
-        document.documentElement.classList.add("dark");
-      } else {
-        document.documentElement.classList.remove("dark");
-      }
-      localStorage.setItem("theme", rawTheme);
-    }
-  }
-  React3__default["default"].useEffect(() => {
-    rawSetTheme(themeState);
-  }, [themeState]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, {
-    value: { theme: themeState, setTheme: setThemeState },
-    children
-  });
-}
-
-// src/hooks/useTheme/useTheme.tsx
-var useTheme = () => React3__default["default"].useContext(ThemeContext);
-
-exports.Button = Button_default;
-exports.ThemeContext = ThemeContext;
-exports.ThemeProvider = ThemeProvider;
-exports.useTheme = useTheme;

package/dist/index.mjs

@@ -1,186 +0,0 @@
-import * as React3 from 'react';
-import React3__default from 'react';
-import { cva } from 'class-variance-authority';
-import { jsx } from 'react/jsx-runtime';
-
-// src/components/Button/Button.tsx
-var buttonCva = cva(
-  "border rounded font-sans font-medium leading-[1.75] tracking-[.02857em]",
-  {
-    variants: {
-      color: {
-        neutral: "",
-        primary: "",
-        success: "",
-        warning: "",
-        error: ""
-      },
-      size: {
-        sm: "py-1 px-2.5 text-[.8125rem]",
-        md: "px-4 py-1.5 text-sm",
-        lg: "px-5 py-2 text-[.9375rem]"
-      },
-      variant: {
-        text: "border-transparent bg-transparent hover:text-white",
-        outlined: "",
-        contained: ""
-      }
-    },
-    compoundVariants: [
-      {
-        variant: "text",
-        color: "neutral",
-        class: [
-          "text-gray-400",
-          "hover:border-gray-400 hover:bg-gray-400",
-          "active:text-white active:border-gray-300 active:bg-gray-300",
-          "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-gray-400"
-        ]
-      },
-      {
-        variant: "text",
-        color: "primary",
-        class: [
-          "text-primary-500",
-          "hover:border-primary-400 hover:bg-primary-400",
-          "active:text-white active:border-primary-600 active:bg-primary-600",
-          "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-primary-500"
-        ]
-      },
-      {
-        variant: "text",
-        color: "success",
-        class: [
-          "text-success-500",
-          "hover:border-success-400 hover:bg-success-400",
-          "active:text-white active:border-success-600 active:bg-success-600",
-          "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-success-500"
-        ]
-      },
-      {
-        variant: "text",
-        color: "warning",
-        class: [
-          "text-warning-500",
-          "hover:border-warning-400 hover:bg-warning-400",
-          "active:text-white active:border-warning-600 active:bg-warning-600",
-          "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-warning-500"
-        ]
-      },
-      {
-        variant: "text",
-        color: "error",
-        class: [
-          "text-error-500",
-          "hover:border-error-400 hover:bg-error-400",
-          "active:text-white active:border-error-600 active:bg-error-600",
-          "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-error-500"
-        ]
-      },
-      {
-        variant: "outlined",
-        color: "neutral",
-        class: [
-          "text-gray-400 border-gray-400 bg-transparent",
-          "hover:bg-gray-500 hover:text-white",
-          "active:text-white active:bg-gray-300",
-          "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-gray-400"
-        ]
-      },
-      {
-        variant: "outlined",
-        color: "primary",
-        class: [
-          "text-primary-500 border-primary-500 bg-transparent",
-          "hover:bg-primary-400 hover:text-white",
-          "active:text-white active:bg-primary-600",
-          "disabled:cursor-not-allowed disabled:opacity-50  disabled:hover:bg-transparent disabled:hover:text-primary-500"
-        ]
-      },
-      {
-        variant: "outlined",
-        color: "success",
-        class: [
-          "text-success-500 border-success-500 bg-transparent",
-          "hover:bg-success-400 hover:text-white",
-          "active:text-white active:bg-success-600",
-          "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-success-500"
-        ]
-      },
-      {
-        variant: "outlined",
-        color: "warning",
-        class: [
-          "text-warning-500 border-warning-500 bg-transparent",
-          "hover:bg-warning-400 hover:text-white",
-          "active:text-white active:bg-warning-600",
-          "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-warning-500"
-        ]
-      },
-      {
-        variant: "outlined",
-        color: "error",
-        class: [
-          "text-error-500 border-error-500 bg-transparent",
-          "hover:bg-error-400 hover:text-white",
-          "active:text-white active:bg-error-600",
-          "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-error-500"
-        ]
-      }
-    ]
-  }
-);
-var Button_default = React3.forwardRef(function({
-  as,
-  color = "primary",
-  children,
-  size = "md",
-  variant = "text",
-  ...restProps
-}, ref) {
-  const Component = as || "button";
-  const buttonRootStyles = buttonCva({ size, variant, color });
-  return /* @__PURE__ */ jsx(Component, {
-    className: buttonRootStyles + " ",
-    ref,
-    ...restProps,
-    children
-  });
-});
-var ThemeContext = React3__default.createContext({});
-function getInitialTheme(defaultTheme) {
-  if (typeof window !== "undefined" && window.localStorage) {
-    const storageTheme = window.localStorage.getItem("theme");
-    if (storageTheme === "dark" || !storageTheme && window.matchMedia("(prefers-color-scheme: dark)").matches) {
-      return "dark";
-    }
-  }
-  return defaultTheme ?? "light";
-}
-function ThemeProvider({ children, defaultTheme, theme }) {
-  const [themeState, setThemeState] = React3__default.useState(
-    theme ? theme : getInitialTheme(defaultTheme)
-  );
-  function rawSetTheme(rawTheme) {
-    if (typeof window !== "undefined" && window.localStorage) {
-      if (rawTheme === "dark") {
-        document.documentElement.classList.add("dark");
-      } else {
-        document.documentElement.classList.remove("dark");
-      }
-      localStorage.setItem("theme", rawTheme);
-    }
-  }
-  React3__default.useEffect(() => {
-    rawSetTheme(themeState);
-  }, [themeState]);
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, {
-    value: { theme: themeState, setTheme: setThemeState },
-    children
-  });
-}
-
-// src/hooks/useTheme/useTheme.tsx
-var useTheme = () => React3__default.useContext(ThemeContext);
-
-export { Button_default as Button, ThemeContext, ThemeProvider, useTheme };