torgbox-ui 1.0.6 → 1.0.8

package/dist/src/app/routes/AppRouter.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { BrowserRouter, Routes, Route, Navigate, Link, } from 'react-router-dom';
+import { selectUserData } from '../../entities/user';
+import { RegisterPage, LoginPage, EmailConfirmationPage, CreatePasswordPage, StartPage, } from '../../Pages';
+import { useAppSelector } from '../store';
+export const AppRouter = () => {
+    const { user, emailIsVerified } = useAppSelector(selectUserData);
+    const routes = [
+        {
+            path: '/signin',
+            element: user ? _jsx(Navigate, { to: '/' }) : _jsx(LoginPage, {}),
+        },
+        {
+            path: '/signup',
+            element: user ? (_jsx(Navigate, { to: '/email-verify' })) : (_jsx(RegisterPage, {})),
+        },
+        {
+            path: '/email-verify',
+            element: user && !emailIsVerified ? (_jsx(EmailConfirmationPage, { email: user.email })) : (_jsx(Navigate, { to: '/reset-password' })),
+        },
+        {
+            path: '/reset-password',
+            element: user ? _jsx(CreatePasswordPage, {}) : _jsx(Navigate, { to: '/' }),
+        },
+        {
+            path: '*',
+            element: user ? (_jsx(StartPage, { email: user.email })) : (_jsxs(_Fragment, { children: [_jsx(Link, { className: 'btn', to: '/signup', children: "\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044F" }), _jsx(Link, { className: 'btn', to: '/signin', children: "\u0412\u0445\u043E\u0434" })] })),
+        },
+    ];
+    return (_jsx(BrowserRouter, { children: _jsx(Routes, { children: routes.map((route) => (_jsx(Route, { path: route.path, element: route.element }, route.path))) }) }));
+};

package/dist/src/app/routes/index.js

@@ -0,0 +1 @@
+export { AppRouter } from './AppRouter';

package/dist/src/app/store/index.js

@@ -0,0 +1 @@
+export { store, useAppDispatch, useAppSelector } from './store';

package/dist/src/app/store/store.js

@@ -0,0 +1,13 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { useSelector, useDispatch, } from 'react-redux';
+import { authSlice } from '../../entities/user';
+import { baseApi } from '../../Utils/api';
+export const store = configureStore({
+    reducer: {
+        [baseApi.reducerPath]: baseApi.reducer,
+        [authSlice.name]: authSlice.reducer,
+    },
+    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(baseApi.middleware),
+});
+export const useAppDispatch = () => useDispatch();
+export const useAppSelector = useSelector;

package/dist/src/assets/scss/index.scss

@@ -0,0 +1,5 @@
+@forward './settings/variables';
+// @forward './settings/fonts';
+@forward './settings/helpers';
+@forward './settings/globals';
+@forward './settings/reset';

package/dist/src/assets/scss/settings/fonts.scss

@@ -0,0 +1,29 @@
+@font-face {
+  font-family: 'Roboto Thin';
+  font-display: block;
+  src: url('/src/assets/fonts/Roboto-Thin.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Roboto Light';
+  font-display: block;
+  src: url('/src/assets/fonts/Roboto-Light.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Roboto Regular';
+  font-display: block;
+  src: url('/src/assets/fonts/Roboto-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Roboto Medium';
+  font-display: block;
+  src: url('/src/assets/fonts/Roboto-Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Roboto Bold';
+  font-display: block;
+  src: url('/src/assets/fonts/Roboto-Bold.woff2') format('woff2');
+}

package/dist/src/assets/scss/settings/globals.scss

@@ -0,0 +1,5 @@
+:root {
+  font-family: 'Roboto Regular', sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+}

package/dist/src/assets/scss/settings/helpers.scss

@@ -0,0 +1,3 @@
+.cursor-pointer {
+  cursor: pointer !important;
+}

package/dist/src/assets/scss/settings/reset.scss

@@ -0,0 +1,8 @@
+p {
+    margin: 0;
+}
+
+a {
+    margin: 0;
+    text-decoration: none;
+}

package/dist/src/assets/scss/settings/variables.scss

@@ -0,0 +1,91 @@
+@use 'sass:color';
+
+// Global
+$global-color-brand-40:    hsla(270, 60%, 48%, 1);
+ 
+$global-color-primary-40:  hsla(207, 100%, 48%, 1);
+$global-color-primary-60:  hsla(207, 100%, 68%, 1);
+$global-color-primary-80:  hsla(207, 100%, 86%, 1);
+
+$global-color-positive-40: hsla(137, 75%, 40%, 1);
+
+$global-color-warning-40:  hsla(44, 100%, 45%, 1);
+
+$global-color-error-40:    hsla(0, 75%, 42%, 1);
+$global-color-error-70:    hsla(6, 100%, 75%, 1);
+$global-color-error-90:    hsla(6, 100%, 93%, 1);
+
+$global-color-neutral-20:  hsla(220, 12%, 20%, 1);
+$global-color-neutral-40:  hsla(220, 12%, 39%, 1);
+$global-color-neutral-60:  hsla(220, 12%, 52%, 1);
+$global-color-neutral-70:  hsla(220, 12%, 74%, 1);
+$global-color-neutral-80:  hsla(220, 12%, 85%, 1);
+$global-color-neutral-100: hsla(0, 0%, 100%, 1);
+
+$global-color-inverse-100: hsla(0, 0%, 100%, 1);
+
+
+// Semantic
+
+    //Surface
+$surface-bright: $global-color-neutral-100;
+
+    // Primary
+$primary-high:   $global-color-primary-40;
+$primary-middle: $global-color-primary-60;
+$primary-low:    $global-color-primary-80;
+
+    // Primary-border
+$primary-border-high: $global-color-primary-40;
+$primary-border-low:  $global-color-primary-80;
+
+
+    // Primary with alfa-channel
+$primary-A92: color.change($global-color-primary-40, $alpha: 0.92);
+$primary-A88: color.change($global-color-primary-40, $alpha: 0.88);
+$primary-A12: color.change($global-color-primary-40, $alpha: 0.12);
+$primary-A8:  color.change($global-color-primary-40, $alpha: 0.08);
+
+    // Inverse
+$inverse: $global-color-inverse-100;
+
+    // Neutral
+$neutral-high:   $global-color-neutral-20;
+$neutral-middle: $global-color-neutral-40;
+$neutral-low:    $global-color-neutral-60;
+
+    // Neutral-border
+$neutral-border-middle: $global-color-neutral-70;
+$neutral-border-low:    $global-color-neutral-80;
+
+
+    // Neutral with alfa-channel
+$neutral-A92: color.change($global-color-neutral-40, $alpha: 0.92);
+$neutral-A88: color.change($global-color-neutral-40, $alpha: 0.88);
+$neutral-A48: color.change($global-color-neutral-40, $alpha: 0.48);
+$neutral-A16: color.change($global-color-neutral-40, $alpha: 0.16);
+$neutral-A12: color.change($global-color-neutral-40, $alpha: 0.12);
+$neutral-A8:  color.change($global-color-neutral-40, $alpha: 0.08);
+
+    // Error
+$error-high: $global-color-error-40;
+
+    // Error-border
+$error-border-high:   $global-color-error-40;
+$error-border-middle: $global-color-error-70;
+
+    //Error-container
+$error-border-low: $global-color-error-90;
+
+// TODO: Заменить на цвет из фигмы, когда его туда добавят
+$color-neutral-gray: hsla(220, 12%, 98%, 1); 
+
+// Breakpoints
+$xs: 400px;
+$sm: 576px;
+$md: 768px;
+$lg: 992px;
+$xl: 1200px;
+
+//  Sizing
+$header-height: 60px;

package/dist/src/entities/user/api/api.js

@@ -0,0 +1,41 @@
+import { apiMap } from '@/shared/model';
+import { baseApi } from '@/Utils/api';
+export const authApi = baseApi.injectEndpoints({
+    endpoints: (builder) => ({
+        Login: builder.mutation({
+            query: (credentials) => ({
+                url: apiMap.login,
+                method: 'POST',
+                body: credentials,
+            }),
+            transformResponse: (response) => {
+                return response.user;
+            },
+        }),
+        Register: builder.mutation({
+            query: (credentials) => ({
+                url: apiMap.register,
+                method: 'POST',
+                body: credentials,
+            }),
+            transformResponse: (response) => {
+                return response.user;
+            },
+        }),
+        VerifyEmail: builder.mutation({
+            query: (credentials) => ({
+                url: apiMap.verifyEmail,
+                method: 'POST',
+                body: credentials,
+            }),
+        }),
+        CreatePassword: builder.mutation({
+            query: (credentials) => ({
+                url: apiMap.createPassword,
+                method: 'POST',
+                body: credentials,
+            }),
+        }),
+    }),
+});
+export const { useLoginMutation, useRegisterMutation, useVerifyEmailMutation, useCreatePasswordMutation, } = authApi;

package/dist/src/entities/user/api/index.js

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

package/dist/src/entities/user/index.js

@@ -0,0 +1,2 @@
+export { authSlice, logout, selectUserData, selectEmail, } from './model';
+export * from './api';

package/dist/src/entities/user/model/index.js

@@ -0,0 +1,2 @@
+export { authSlice, logout } from './slice';
+export * from './selectors';

package/dist/src/entities/user/model/selectors.js

@@ -0,0 +1,2 @@
+export const selectUserData = (state) => state.auth;
+export const selectEmail = (state) => state.auth.user?.email;

package/dist/src/entities/user/model/slice.js

@@ -0,0 +1,31 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { authApi } from '../api/api';
+const initialState = {
+    user: null,
+    emailIsVerified: false,
+    passwordIsVerified: false,
+};
+export const authSlice = createSlice({
+    name: 'auth',
+    initialState,
+    reducers: {
+        logout: () => initialState
+    },
+    extraReducers: (builder) => {
+        builder.addMatcher(authApi.endpoints.Register.matchFulfilled, (state, action) => {
+            state.user = action.payload;
+        });
+        builder.addMatcher(authApi.endpoints.Login.matchFulfilled, (state, action) => {
+            state.user = action.payload;
+            state.emailIsVerified = true;
+            state.passwordIsVerified = true;
+        });
+        builder.addMatcher(authApi.endpoints.VerifyEmail.matchFulfilled, (state) => {
+            state.emailIsVerified = true;
+        });
+        builder.addMatcher(authApi.endpoints.CreatePassword.matchFulfilled, (state, action) => {
+            state.passwordIsVerified = true;
+        });
+    },
+});
+export const { logout } = authSlice.actions;

package/dist/src/entities/user/model/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/index.js

@@ -0,0 +1,3 @@
+export * from './Inputs';
+export * from './Pages';
+export * from './Widgets';

package/dist/src/index.scss

@@ -0,0 +1,6 @@
+@import './assets/scss/index';
+@import './Utils/index';
+@import './Inputs/index';
+@import './Pages/index';
+@import './Widgets/index';
+@import './shared/ui/index';

package/dist/src/shared/model/api.js

@@ -0,0 +1,6 @@
+export const apiMap = {
+    login: 'auth/login',
+    register: 'auth/register',
+    verifyEmail: 'auth/email-verify',
+    createPassword: 'auth/create-password',
+};

package/dist/src/shared/model/constants.js

@@ -0,0 +1 @@
+export const BASE_URL = 'http://localhost:4000';

package/dist/src/shared/model/index.js

@@ -0,0 +1,2 @@
+export { apiMap } from './api';
+export { BASE_URL } from './constants';

package/dist/src/shared/ui/Avatar/Avatar.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+export const Avatar = (props) => {
+    const { label, size = 'md', onClickAvatar } = props;
+    return (_jsx("button", { type: 'button', onClick: onClickAvatar, className: cn('user-avatar', `user-avatar--${size}`), children: label }));
+};

package/dist/src/shared/ui/Avatar/Avatar.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Avatar } from './Avatar';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+export declare const AvatarDefault: Story;

package/dist/src/shared/ui/Avatar/Avatar.stories.js

@@ -0,0 +1,17 @@
+import { Avatar } from './Avatar';
+const meta = {
+    args: {
+        label: 'ИФ',
+    },
+    component: Avatar,
+    title: 'Shared/Avatar',
+};
+export default meta;
+export const AvatarDefault = {
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?node-id=12717-16075&t=2d9HP9mu3C3jM25a-4',
+        },
+    },
+};

package/dist/src/shared/ui/Avatar/avatar.scss

@@ -0,0 +1,62 @@
+@use 'sass:color';
+
+$background-avatar: $global-color-brand-40;
+$text-color-avatar: $global-color-neutral-100;
+
+$avatar-size-xs:    24px;
+$avatar-size-sm:    28px;
+$avatar-size-md:    32px;
+$avatar-size-lg:    36px;
+$avatar-size-xl:    40px;
+$avatar-size-xxl:   44px;
+
+.user-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: none;
+  background-color: $background-avatar;
+  color: $text-color-avatar;
+  font-weight: 500;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &--xs {
+    width: $avatar-size-xs;
+    height: $avatar-size-xs;
+    font-size: 13px;
+  }
+
+  &--sm {
+    width: $avatar-size-sm;
+    height: $avatar-size-sm;
+    font-size: 13px;
+  }
+
+  &--md {
+    width: $avatar-size-md;
+    height: $avatar-size-md;
+    font-size: 15px;
+  }
+
+  &--lg {
+    width: $avatar-size-lg;
+    height: $avatar-size-lg;
+    font-size: 17px;
+  }
+
+  &--xl {
+    width: $avatar-size-xl;
+    height: $avatar-size-xl;
+    font-size: 19px;
+  }
+
+  &--xxl {
+    width: $avatar-size-xxl;
+    height: $avatar-size-xxl;
+    font-size: 20px;
+  }
+}

package/dist/src/shared/ui/index.d.ts

@@ -0,0 +1 @@
+export { Avatar } from './Avatar';

package/dist/src/shared/ui/index.js

@@ -0,0 +1 @@
+export { Avatar } from './Avatar';

package/dist/src/shared/ui/index.scss

@@ -0,0 +1 @@
+@import './Avatar/avatar';

package/dist/src/tools/customValidators.js

@@ -0,0 +1,19 @@
+import { regExpEmail, regExpName, regExpPhoneNumber, regExpPassword, regExpInn } from './regExp';
+export const emailValidator = (value) => {
+    return regExpEmail.test(String(value));
+};
+export const nameValidator = (value) => {
+    if (Array.isArray(value)) {
+        return value.length > 1 && value.every((v) => regExpName.test(String(v)));
+    }
+    return regExpName.test(String(value));
+};
+export const phoneValidator = (value) => {
+    return regExpPhoneNumber.test(String(value));
+};
+export const passwordValidator = (value) => {
+    return regExpPassword.test(String(value));
+};
+export const innValidator = (value) => {
+    return regExpInn.test(String(value));
+};

package/dist/src/tools/getCoords.js

@@ -0,0 +1,18 @@
+export const getCoords = (ref) => {
+    const coordsOfRef = ref?.current?.getBoundingClientRect();
+    const scrollTop = window?.scrollY || 0;
+    const scrollLeft = window?.scrollX || 0;
+    if (coordsOfRef) {
+        return {
+            leftViewport: coordsOfRef.left,
+            topViewport: coordsOfRef.top,
+            bottomViewport: coordsOfRef.bottom,
+            leftDocument: coordsOfRef.left + scrollLeft,
+            topDocument: coordsOfRef.top + scrollTop,
+            bottomDocument: coordsOfRef.bottom + scrollTop,
+            width: coordsOfRef.width,
+            height: coordsOfRef.height,
+        };
+    }
+    return null;
+};

package/dist/src/tools/regExp.js

@@ -0,0 +1,5 @@
+export const regExpEmail = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+export const regExpName = /^[a-zA-Zа-яА-ЯёЁ][a-zA-Z-а-яА-ЯёЁ ]+[a-zA-Zа-яА-ЯёЁ]?$/;
+export const regExpPhoneNumber = /^(\s*)?(\+)?([- _():=+]?\d[- _():=+]?){11,14}(\s*)?$/;
+export const regExpPassword = /^.{6,}$/;
+export const regExpInn = /^(\d{10}|\d{12})$/;

package/dist/src/ui.js

@@ -0,0 +1,3 @@
+export * from './Inputs';
+export * from './Utils';
+export * from './shared/ui';

package/dist/src/ui.scss

@@ -0,0 +1,4 @@
+@import './assets/scss/index';
+@import './Utils/index';
+@import './Inputs/index';
+@import './shared/ui/index';

package/dist/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/Globals.d.ts","../src/index.ts","../src/ui.ts","../src/Inputs/index.ts","../src/Inputs/Button/Button.stories.tsx","../src/Inputs/Button/Button.tsx","../src/Inputs/Button/Icon.stories.tsx","../src/Inputs/Button/index.ts","../src/Inputs/Checkbox/Checkbox.stories.tsx","../src/Inputs/Checkbox/Checkbox.tsx","../src/Inputs/Checkbox/index.ts","../src/Inputs/EmailField/EmailField.stories.ts","../src/Inputs/EmailField/EmailField.tsx","../src/Inputs/EmailField/ErrorMessages.ts","../src/Inputs/EmailField/index.ts","../src/Inputs/InnField/ErrorMessages.ts","../src/Inputs/InnField/InnField.stories.ts","../src/Inputs/InnField/InnField.tsx","../src/Inputs/InnField/index.ts","../src/Inputs/NameField/ErrorMessages.ts","../src/Inputs/NameField/NameField.stories.ts","../src/Inputs/NameField/NameField.tsx","../src/Inputs/NameField/index.ts","../src/Inputs/OtpInput/ErrorMessages.ts","../src/Inputs/OtpInput/OtpInput.stories.ts","../src/Inputs/OtpInput/OtpInput.tsx","../src/Inputs/OtpInput/index.ts","../src/Inputs/PasswordField/ErrorMessages.ts","../src/Inputs/PasswordField/PasswordField.stories.ts","../src/Inputs/PasswordField/PasswordField.tsx","../src/Inputs/PasswordField/index.ts","../src/Inputs/PhoneField/ErrorMessages.ts","../src/Inputs/PhoneField/PhoneField.stories.ts","../src/Inputs/PhoneField/PhoneField.tsx","../src/Inputs/PhoneField/index.ts","../src/Inputs/RepeatPasswordField/ErrorMessages.ts","../src/Inputs/RepeatPasswordField/RepeatPasswordField.tsx","../src/Inputs/RepeatPasswordField/index.ts","../src/Inputs/Selector/Collapse.stories.tsx","../src/Inputs/Selector/Collapse.tsx","../src/Inputs/Selector/Dropdown.stories.tsx","../src/Inputs/Selector/Dropdown.tsx","../src/Inputs/Selector/index.ts","../src/Inputs/Selector/Option/Option.stories.tsx","../src/Inputs/Selector/Option/Option.tsx","../src/Inputs/TextField/TextField.stories.ts","../src/Inputs/TextField/TextField.tsx","../src/Inputs/TextField/index.ts","../src/Pages/index.ts","../src/Pages/ContentPage/ContentPage.stories.ts","../src/Pages/ContentPage/ContentPage.tsx","../src/Pages/ContentPage/index.ts","../src/Pages/CreatePasswordPage/CreatePasswordPage.stories.ts","../src/Pages/CreatePasswordPage/CreatePasswordPage.tsx","../src/Pages/CreatePasswordPage/index.ts","../src/Pages/CreateTeamPage/CreateTeamPage.stories.ts","../src/Pages/CreateTeamPage/CreateTeamPage.tsx","../src/Pages/CreateTeamPage/index.ts","../src/Pages/EmailConfirmationPage/EmailConfirmationPage.stories.ts","../src/Pages/EmailConfirmationPage/EmailConfirmationPage.tsx","../src/Pages/EmailConfirmationPage/index.ts","../src/Pages/JoinTeamPage/JoinTeamPage.stories.ts","../src/Pages/JoinTeamPage/JoinTeamPage.tsx","../src/Pages/JoinTeamPage/index.ts","../src/Pages/LoginPage/LoginPage.stories.ts","../src/Pages/LoginPage/LoginPage.tsx","../src/Pages/LoginPage/index.ts","../src/Pages/RegisterPage/RegisterPage.stories.ts","../src/Pages/RegisterPage/RegisterPage.tsx","../src/Pages/RegisterPage/index.ts","../src/Pages/ResetPasswordPage/ResetPasswordPage.stories.ts","../src/Pages/ResetPasswordPage/ResetPasswordPage.tsx","../src/Pages/ResetPasswordPage/index.ts","../src/Pages/StartPage/StartPage.stories.ts","../src/Pages/StartPage/StartPage.tsx","../src/Pages/StartPage/index.ts","../src/Utils/api.ts","../src/Utils/index.ts","../src/Utils/Divider/Divider.tsx","../src/Utils/ErrorBanner/ErrorBanner.tsx","../src/Utils/ErrorBanner/index.ts","../src/Utils/Link/Link.stories.tsx","../src/Utils/Link/Link.tsx","../src/Utils/Link/index.ts","../src/Utils/Modal/Modal.stories.tsx","../src/Utils/Modal/Modal.tsx","../src/Utils/Modal/index.ts","../src/Utils/Portal/Portal.tsx","../src/Utils/SectionPlaceholder/SectionPlaceholder.tsx","../src/Utils/Spinner/Spinner.tsx","../src/Widgets/index.ts","../src/Widgets/Header/Header.stories.ts","../src/Widgets/Header/Header.tsx","../src/Widgets/Header/index.ts","../src/Widgets/Sidebar/Sidebar.stories.tsx","../src/Widgets/Sidebar/Sidebar.tsx","../src/Widgets/Sidebar/index.ts","../src/app/main.tsx","../src/app/routes/AppRouter.tsx","../src/app/routes/index.ts","../src/app/store/index.ts","../src/app/store/store.ts","../src/entities/user/index.ts","../src/entities/user/api/api.ts","../src/entities/user/api/index.ts","../src/entities/user/model/index.ts","../src/entities/user/model/selectors.ts","../src/entities/user/model/slice.ts","../src/entities/user/model/types.ts","../src/shared/model/api.ts","../src/shared/model/constants.ts","../src/shared/model/index.ts","../src/shared/ui/index.ts","../src/shared/ui/Avatar/Avatar.stories.ts","../src/shared/ui/Avatar/Avatar.tsx","../src/shared/ui/Avatar/index.ts","../src/tools/customValidators.ts","../src/tools/getCoords.ts","../src/tools/regExp.ts"],"version":"5.8.2"}

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "torgbox-ui",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "readme": "README.md",
   "description": "UI-Kit команды проекта Torgbox",
   "keywords": [
     "ui"
   ],
-  "main": "dist/torgbox-ui.cjs.js",
-  "module": "dist/torgbox-ui.es.js",
-  "types": "dist/types/ui.d.ts",
+  "main": "dist/src/ui.js",
+  "module": "dist/src/ui.js",
+  "types": "dist/src/ui.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/types/ui.d.ts",
-      "import": "./dist/torgbox-ui.es.js",
-      "require": "./dist/torgbox-ui.cjs.js"
+      "import": "./dist/src/ui.js",
+      "require": "./dist/src/ui.js",
+      "types": "./dist/src/ui.d.ts"
     }
   },
   "files": [
@@ -26,7 +26,8 @@
     "build:scss": "sass --no-source-map ./src:./dist",
     "build:types": "tsc -p tsconfig.build.json",
     "build:vite": "vite build",
-    "build": "rm -rf dist && npm run build:vite && npm run build:types",
+    "copy:scss": "rsync -av --include='*/' --include='*.scss' --exclude='*' src/ dist/src",
+    "build": "rm -rf dist && npm run build:ts && npm run copy:scss",
     "prepack": "npm run build",
     "clean": "tsc --build --clean",
     "typecheck": "tsc --noEmit",