@profitliga/ui 1.0.0

package/package.json

@@ -0,0 +1,123 @@
+{
+	"name": "@profitliga/ui",
+	"version": "1.0.0",
+  "author": "Profit League<dev@pr-lg.ru>",
+	"license": "MIT",
+	"description": "Vue 3 UI component library with TypeScript and SCSS",
+	"type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "url": "https://github.com/pr-lg/ui-kit.git",
+    "type": "git"
+  },
+	"files": [
+		"dist",
+		"src/styles"
+	],
+	"exports": {
+		"./style.css": "./dist/ui-kit.css",
+		"./styles/*": "./dist/styles/*",
+		"./tailwind": "./dist/styles/tailwind.css",
+		"./components": {
+			"import": "./dist/components/index.js",
+			"types": "./dist/components/index.d.ts"
+		},
+		"./utils": {
+			"import": "./dist/utils/index.js",
+			"types": "./dist/utils/index.d.ts"
+		},
+		"./icons": {
+			"import": "./dist/icons/index.js",
+			"types": "./dist/icons/index.d.ts"
+		}
+	},
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"type-check": "vue-tsc --noEmit",
+		"lint": "eslint .",
+		"lint:fix": "eslint . --fix",
+		"format": "prettier --write \"src/**/*.{ts,tsx,vue,scss,css,json}\"",
+		"format:check": "prettier --check \"src/**/*.{ts,tsx,vue,scss,css,json}\"",
+		"check": "npm run type-check && npm run lint && npm run format:check",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build",
+		"prepare": "husky"
+	},
+	"lint-staged": {
+		"*.{ts,tsx,vue}": [
+			"eslint --fix",
+			"prettier --write"
+		],
+		"*.{scss,css,json,md}": [
+			"prettier --write"
+		]
+	},
+	"peerDependencies": {
+		"@internationalized/date": "3.10.1",
+		"@tanstack/vue-table": "8.21.3",
+		"@vueuse/core": "14.1.0",
+		"dayjs": "1.11.19",
+		"lucide-vue-next": "0.563.0",
+		"reka-ui": "2.7.0",
+		"tailwindcss": "4.1.18",
+		"vue": "3.5.26"
+	},
+	"devDependencies": {
+		"@chromatic-com/storybook": "^5.0.0",
+		"@eslint/js": "^9.39.2",
+		"@internationalized/date": "3.10.1",
+		"@storybook/addon-a11y": "^10.2.0",
+		"@storybook/addon-docs": "^10.2.0",
+		"@storybook/addon-onboarding": "^10.2.0",
+		"@storybook/addon-vitest": "^10.2.0",
+		"@storybook/vue3-vite": "^10.2.0",
+		"@tailwindcss/vite": "^4.1.18",
+		"@tanstack/vue-table": "^8.21.3",
+		"@trivago/prettier-plugin-sort-imports": "^6.0.2",
+		"@types/node": "^25.0.3",
+		"@vitejs/plugin-vue": "^6.0.3",
+		"@vitest/browser-playwright": "^4.0.16",
+		"@vitest/coverage-v8": "^4.0.16",
+		"@vueuse/core": "^14.1.0",
+		"chromatic": "^13.3.5",
+		"dayjs": "^1.11.19",
+		"eslint": "^9.39.2",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-storybook": "10.2.0",
+		"eslint-plugin-vue": "^10.7.0",
+		"globals": "^17.1.0",
+		"husky": "^9.1.7",
+		"lightningcss": "^1.31.1",
+		"lint-staged": "^16.2.7",
+		"lucide-vue-next": "^0.563.0",
+		"playwright": "^1.57.0",
+		"prettier": "^3.8.1",
+		"reka-ui": "2.7.0",
+		"sass": "^1.97.1",
+		"sonda": "^0.10.1",
+		"storybook": "^10.2.0",
+		"tailwindcss": "4.1.18",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.53.1",
+		"vite": "^7.3.0",
+		"vite-plugin-compression": "^0.5.1",
+		"vite-plugin-dts": "^4.5.4",
+		"vite-plugin-static-copy": "^3.1.6",
+		"vitest": "^4.0.16",
+		"vue": "^3.5.26",
+		"vue-eslint-parser": "^10.2.0",
+		"vue-router": "^4.6.4",
+		"vue-tsc": "^3.2.1"
+	},
+	"keywords": [
+		"vue",
+		"vue3",
+		"ui",
+		"components",
+		"typescript",
+		"scss"
+	]
+}

package/src/styles/animations.scss

@@ -0,0 +1,181 @@
+// Classes animation vue (https://vuejs.org/guide/built-ins/transition#css-based-transitions)
+// 1. v-enter-from
+// 2. v-enter-active
+// 3. v-enter-to
+// 4. v-leave-from
+// 5. v-leave-active
+// 6. v-leave-to
+
+//FADE
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity var(--animation-duration) ease-in-out;
+}
+
+//FADE-IN
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+.fadeIn-enter-from,
+.fadeIn-leave-to {
+	opacity: 0;
+}
+
+.fadeIn-enter-to,
+.fadeIn-leave-from {
+	opacity: 1;
+}
+
+.fadeIn-enter-active,
+.fadeIn-leave-active {
+	transition: opacity var(--animation-duration) ease-in-out;
+}
+
+//FADE-OUT
+@keyframes fadeOut {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}
+
+.fadeOut-enter-from,
+.fadeOut-leave-to {
+	opacity: 1;
+}
+
+.fadeOut-enter-to,
+.fadeOut-leave-from {
+	opacity: 0;
+}
+
+.fadeOut-enter-active,
+.fadeOut-leave-active {
+	transition: opacity var(--animation-duration) ease-in-out;
+}
+
+//SLIDE-RIGHT-IN
+@keyframes slideRightIn {
+	from {
+		transform: translateX(200%);
+	}
+
+	to {
+		transform: translateX(0%);
+	}
+}
+
+@keyframes slideRightOut {
+	from {
+		transform: translateX(0%);
+	}
+
+	to {
+		transform: translateX(200%);
+	}
+}
+
+@keyframes slideTopIn {
+	from {
+		transform: translateY(-200%);
+	}
+
+	to {
+		transform: translateY(0%);
+	}
+}
+
+@keyframes slideTopOut {
+	from {
+		transform: translateY(0%);
+	}
+
+	to {
+		transform: translateY(-200%);
+	}
+}
+
+@keyframes slideLeftIn {
+	from {
+		transform: translateX(-200%);
+	}
+
+	to {
+		transform: translateX(0%);
+	}
+}
+
+@keyframes slideLeftOut {
+	from {
+		transform: translateX(0%);
+	}
+
+	to {
+		transform: translateX(-200%);
+	}
+}
+
+@keyframes slideBottomIn {
+	from {
+		transform: translateY(200%);
+	}
+
+	to {
+		transform: translateY(0%);
+	}
+}
+
+@keyframes slideBottomOut {
+	from {
+		transform: translateY(0%);
+	}
+
+	to {
+		transform: translateY(200%);
+	}
+}
+
+//Удалить после перехода на reka-ui
+.slide-fade-smooth-enter-active,
+.slide-fade-smooth-leave-active {
+	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.slide-fade-smooth-enter-from {
+	transform: translateX(-30px);
+	opacity: 0;
+}
+
+.slide-fade-smooth-leave-to {
+	transform: translateX(30px);
+	opacity: 0;
+}
+
+// VERTICAL SLIDE FADE
+.slide-fade-vertical-enter-active,
+.slide-fade-vertical-leave-active {
+	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.slide-fade-vertical-enter-from {
+	transform: translateY(-20px);
+	opacity: 0;
+}
+
+.slide-fade-vertical-leave-to {
+	transform: translateY(20px);
+	opacity: 0;
+}

package/src/styles/colors.scss

@@ -0,0 +1,155 @@
+//GLOBAL
+:root {
+	--theme-color-m: #e3e9ed;
+}
+
+//NEUTRAL
+:root {
+	--theme-neutral-0: #ffffff;
+	--theme-neutral-100: #fdfdfd; //use bg main fill
+	--theme-neutral-200: #fafafa;
+	--theme-neutral-250: #ebebeb;
+	--theme-neutral-250_40: #ebebeb66; //use dissabled fill
+	--theme-neutral-300: #cecece; //use border icon,text
+	--theme-neutral-300_40: #cecece66; //use hover table fill
+	--theme-neutral-400: #bfbfbf;
+	--theme-neutral-400_40: #bfbfbf66;
+	--theme-neutral-500: #a1a1a1; //use btn icon
+	--theme-neutral-600: #525252;
+	--theme-neutral-700: #3d3d3d;
+	--theme-neutral-800: #292929;
+	--theme-neutral-850: #1f1f1f;
+	--theme-neutral-950: #0a0a0a;
+
+	--theme-neutral-surface-bg: var(--theme-neutral-100);
+	--theme-neutral-surface-default: var(--theme-neutral-0);
+	--theme-neutral-surface-subtitle: var(--theme-neutral-200);
+	--theme-neutral-surface-icon: #f1f4f5;
+	--theme-neutral-surface-disabled: var(--theme-neutral-250_40);
+
+	--theme-text-icon-body: #3b3b3b;
+	--theme-neutral-text-title: var(--theme-neutral-950);
+	--theme-neutral-text-subtitle: var(--theme-neutral-800);
+	--theme-neutral-text-body: var(--theme-neutral-700);
+	--theme-neutral-text-caption: var(--theme-neutral-600);
+	--theme-neutral-text-disabled: var(--theme-neutral-400_40);
+	--theme-neutral-text-negative: var(--theme-neutral-0);
+
+	--theme-neutral-icon-primary: #90a4ae;
+	--theme-neutral-icon-secondary: var(--theme-neutral-400);
+	--theme-neutral-icon-caption: var(--theme-neutral-500);
+	--theme-neutral-icon-disabled: var(--theme-neutral-300);
+	--theme-neutral-icon-negative: var(--theme-neutral-0);
+
+	--theme-neutral-border-default: var(--theme-neutral-300);
+	--theme-neutral-border-darker: var(--theme-neutral-400);
+	--theme-neutral-border-divider: #e3e9ed;
+	--theme-neutral-border-disabled: var(--theme-neutral-400_40);
+
+	//BOX-SHADOW
+	--theme-main-interface-shadow:
+		0 2px 8.8px 2px #0000000d, 0 0 13.4px 0 #0000000a;
+	--theme-hover-interface-shadow:
+		0 2px 8.8px 2px #0000000d, 0 1px 1px 0 #0000000a;
+}
+
+//PRIMARY
+:root {
+	--theme-primary-50: #eafef0;
+	--theme-primary-50_40: #eafef066;
+	--theme-primary-75: #caf3d5; //use hover fill
+	--theme-primary-100: #bff7cd;
+	--theme-primary-200: #aaeebc;
+	--theme-primary-200_15: #94e6aa; //use focussed stroke
+	--theme-primary-200_25: #94e6aa40; //use focussed stroke
+	--theme-primary-200_50: #94e6aa80; //use focussed stroke
+	--theme-primary-250: #caf3d5; //use hover fill
+	--theme-primary-300: #7fdd98; //use hover fill
+	--theme-primary-400: #2abc51; //use focussed fill
+	--theme-primary-500_5: #00ab2e0d; //use default fill
+	--theme-primary-500: #00ab2e; //use default fill
+	--theme-primary-600: #008925; //use pressed fill
+	--theme-primary-700: #00671c;
+	--theme-primary-800: #004412;
+	--theme-primary-900: #002209;
+
+	--theme-primary-surface-default: var(--theme-primary-500);
+	--theme-primary-surface-subtitle: var(--theme-primary-50);
+	--theme-primary-surface-darker: var(--theme-primary-600);
+	--theme-primary-surface-lighter: var(--theme-primary-200_25);
+	--theme-primary-surface-hover: var(--theme-primary-50_40);
+
+	--theme-primary-border-default: var(--theme-primary-700);
+	--theme-primary-border-subtitle: var(--theme-primary-600);
+	--theme-primary-border-darker: var(--theme-primary-800);
+	--theme-primary-border-lighter: var(--theme-primary-200);
+
+	--theme-primary-icon-default: var(--theme-primary-500);
+}
+
+//SECONDARY
+:root {
+	--theme-secondary-50: #f1f4f5;
+	--theme-secondary-100: #ebeff1;
+	--theme-secondary-150: #ecf2f4;
+	--theme-secondary-200: #d6e2e6;
+	--theme-secondary-250: #c7d9df;
+	--theme-secondary-300: #b3c9d0;
+	--theme-secondary-350: #a2c0ca;
+	--theme-secondary-400: #7da7b5;
+	--theme-secondary-450: #588ea0;
+	--theme-secondary-500: #3f7587;
+	--theme-secondary-600: #315b69;
+	--theme-secondary-700: #2a4e5a;
+	--theme-secondary-800: #23414b;
+	--theme-secondary-900: #15272d;
+}
+
+//INFO
+:root {
+	--theme-info-100: #e3eefa;
+	--theme-info-100_50: #e3eefa80; //use fill
+	--theme-info-200: #c2d9f5; //use stroke
+	--theme-info-300: #6ea6e7; //hover
+	--theme-info-400: #2674ce; //use link (подчеркивание при наведении)
+	--theme-info-500: #235fa4; //use icon
+	--theme-info-600: #02538f;
+	--theme-info-700: #134a73;
+	--theme-info-800: #152d4f;
+	--theme-info-900: #161e33;
+}
+
+//WARN
+:root {
+	--theme-warn-50: #faf4ee;
+	--theme-warn-100: #fdf4ea;
+	--theme-warn-200: #fadfc1;
+	--theme-warn-300: #f4c083;
+	--theme-warn-400: #f1ab5a;
+	--theme-warn-500: #ed9631;
+	--theme-warn-600: #d47d16;
+	--theme-warn-700: #ac6410;
+	--theme-warn-800: #814a09;
+	--theme-warn-900: #492c0a;
+}
+
+//ERROR
+:root {
+	--theme-error-100: #fceaea;
+	--theme-error-100_50: #fceaea80; //use fill
+	--theme-error-200_50: #fceaea; //use stroke
+	--theme-error-200: #ffd4d4; //use stroke
+	--theme-error-300: #f4a6a6; //hover
+	--theme-error-400: #df575c;
+	--theme-error-500: #de292f; //use icon
+	--theme-error-600: #bd2429;
+	--theme-error-700: #921d21;
+	--theme-error-800: #6e1820;
+	--theme-error-900: #4e1012;
+}
+
+//SHADOW
+:root {
+	--theme-shadow-button:
+		0px 2px 8.8px 2px #0000000d, 0px 1px 1px 0px #0000000a;
+}

package/src/styles/fonts.scss

@@ -0,0 +1,10 @@
+@use './mixins.scss' as mixins;
+
+@include mixins.font-face(
+	'Roboto',
+	(100, 200, 300, 400, 500, 600, 700, 800, 900)
+);
+@include mixins.font-face(
+	'Inter',
+	(100, 200, 300, 400, 500, 600, 700, 800, 900)
+);

package/src/styles/global.scss

@@ -0,0 +1,53 @@
+@use './mixins.scss' as *;
+
+.overlay {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+
+	width: 100dvw;
+	height: 100dvh;
+
+	background-color: rgba(#000, 0.3);
+	z-index: 1000;
+
+	&[data-state='open'] {
+		animation: fadeIn var(--animation-duration) ease-in-out;
+	}
+
+	&[data-state='closed'] {
+		animation: fadeOut var(--animation-duration) ease-in-out;
+	}
+}
+
+.container {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 10px;
+	max-width: 768px; // Базовая ширина для мобильных
+
+	@include respond(lg) {
+		max-width: 991px;
+	}
+
+	@include respond(xl) {
+		max-width: 1200px;
+	}
+
+	@include respond(xxl) {
+		max-width: 1400px;
+	}
+
+	@include respond(xxxl) {
+		max-width: 1600px;
+	}
+}
+
+.page-title {
+	font-weight: 600;
+	font-size: 24px;
+	line-height: 120%;
+	color: var(--theme-neutral-text-title);
+}

package/src/styles/index.scss

@@ -0,0 +1,9 @@
+@use './vars.scss';
+@use './colors.scss';
+@use './animations.scss';
+@use './mixins.scss';
+@use './fonts.scss';
+@use './reset.css';
+@use './typography.css';
+
+@use './global.scss';

package/src/styles/mixins.scss

@@ -0,0 +1,152 @@
+@use 'sass:map';
+
+/**
+ * Миксин для подключения шрифтов
+ * @param {string} $font-family - Название семейства шрифтов
+ * @param {list} $weights - Список весов шрифта (100-900)
+ * 
+ * Пример использования:
+ * $weights: (100, 200, 300, 400, 500, 600, 700, 800, 900);
+ * $styles: (normal, italic);
+ * @include font-face('Roboto', $weights);
+ * 
+ * Структура файлов шрифтов должна быть следующей:
+ * fonts/
+ *   Roboto/
+ *     Roboto-Thin.woff2
+ *     Roboto-Thin.woff
+ *     ...
+ */
+
+@mixin font-face($font-family, $weights) {
+	$weight-names: (
+		100: 'Thin',
+		200: 'ExtraLight',
+		300: 'Light',
+		400: 'Regular',
+		500: 'Medium',
+		600: 'SemiBold',
+		700: 'Bold',
+		800: 'ExtraBold',
+		900: 'Black'
+	);
+
+	@each $weight in $weights {
+		// Используем новый синтаксис map.get()
+		$weight-name: map.get($weight-names, $weight);
+
+		@font-face {
+			font-family: '#{$font-family}';
+			font-weight: #{$weight};
+			src:
+				url('/fonts/#{$font-family}/#{$font-family}-#{$weight-name}.woff2')
+					format('woff2'),
+				url('/fonts/#{$font-family}/#{$font-family}-#{$weight-name}.woff')
+					format('woff');
+		}
+	}
+}
+
+/**
+ * Миксин для создания медиа-запросов с минимальной шириной
+ * 
+ * @param {number} $width - Минимальная ширина в пикселях
+ * 
+ * Пример использования:
+ * @include media-min-width(768px) {
+ *   .container {
+ *     padding: 20px;
+ *   }
+ * }
+ * 
+ * Применит стили для экранов шириной от 768px и больше
+ */
+
+@mixin media-min-width($width) {
+	@media screen and (min-width: $width) {
+		@content;
+	}
+}
+
+/// Миксин для обрезки многострочного текста с троеточием
+///
+/// @param {Number} $lines - Количество отображаемых строк (по умолчанию: 2)
+///
+/// Используется для ограничения текста по количеству строк с добавлением "..."
+/// Работает на основе -webkit-line-clamp и поддерживается в современных браузерах.
+///
+/// 🔁 Пример использования:
+/// .text {
+///   @include ellipsis-multiline(3);
+/// }
+@mixin ellipsis-multiline($lines: 2) {
+	display: -webkit-box;
+	-webkit-line-clamp: $lines;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+// 📱 Адаптив
+@mixin respond($breakpoint) {
+	@if $breakpoint == sm {
+		@media (min-width: 640px) {
+			@content;
+		}
+	} @else if $breakpoint == md {
+		@media (min-width: 768px) {
+			@content;
+		}
+	} @else if $breakpoint == lg {
+		@media (min-width: 1010px) {
+			@content;
+		}
+	} @else if $breakpoint == xl {
+		@media (min-width: 1220px) {
+			@content;
+		}
+	} @else if $breakpoint == xxl {
+		@media (min-width: 1420px) {
+			@content;
+		}
+	} @else if $breakpoint == xxxl {
+		@media (min-width: 1620px) {
+			@content;
+		}
+	}
+}
+
+// ✨ Кастомный скроллбар
+@mixin custom-scrollbar($direction) {
+	box-sizing: content-box;
+
+	scrollbar-width: thin;
+	scrollbar-color: var(--theme-neutral-border-default) transparent;
+
+	// WebKit scrollbar
+	&::-webkit-scrollbar {
+		@if $direction == 'right' {
+			width: 8px;
+			height: 0;
+		} @else if $direction == 'bottom' {
+			width: 0;
+			height: 8px;
+		} @else if $direction == 'both' {
+			width: 8px;
+			height: 8px;
+		}
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background-color: var(--theme-neutral-border-default);
+		border-radius: 4px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-corner {
+		background: transparent;
+	}
+}