From 154cfcfae1acfd158b2b6d24f532e39bf9e84203 Mon Sep 17 00:00:00 2001
From: AntoXa PRO <info@antoxa.pro>
Date: Thu, 27 Jul 2023 15:36:52 +0300
Subject: [PATCH] big update

---
 src/colors.ts                        | 14 +++++
 src/components/Alert.vue             | 17 +++++-
 src/components/Btn.vue               | 18 ++++--
 src/components/Card.vue              | 19 ++++++
 src/components/Field.vue             | 17 ++++--
 src/components/FieldCheckbox.vue     |  4 ++
 src/components/FieldSelect.vue       | 13 +++--
 src/components/FieldSelectGender.vue |  7 +--
 src/components/Icon.vue              | 83 ++-------------------------
 src/components/IconVisibility.vue    | 28 +++++++++
 src/components/PickerDays.vue        | 50 ++++++++++++++++
 src/components/Table.vue             |  5 ++
 src/components/index.ts              |  4 ++
 src/css/common.sass                  | 52 ++++++++++++++---
 src/css/theme.sass                   | 19 +++---
 src/icons.ts                         | 86 ++++++++++++++++++++++++++++
 src/index.ts                         |  2 +
 17 files changed, 319 insertions(+), 119 deletions(-)
 create mode 100644 src/colors.ts
 create mode 100644 src/components/Card.vue
 create mode 100644 src/components/IconVisibility.vue
 create mode 100644 src/components/PickerDays.vue
 create mode 100644 src/components/Table.vue
 create mode 100644 src/icons.ts

diff --git a/src/colors.ts b/src/colors.ts
new file mode 100644
index 0000000..6cbdcfd
--- /dev/null
+++ b/src/colors.ts
@@ -0,0 +1,14 @@
+export enum ColorEnum {
+	primary = 'primary',
+	accent = 'accent',
+	info = 'info',
+	success = 'success',
+	warning = 'warning',
+	error = 'error',
+	dark = 'dark',
+	light = 'light'
+}
+
+export type TColor = keyof typeof ColorEnum
+
+export const colors = Object.keys(ColorEnum)
diff --git a/src/components/Alert.vue b/src/components/Alert.vue
index bfe1082..f92ce56 100644
--- a/src/components/Alert.vue
+++ b/src/components/Alert.vue
@@ -1,13 +1,24 @@
 <script setup lang="ts">
+import type { TColor } from '../colors'
+
+// Props.
 const props = defineProps<{
-	color?: 'primary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+	color?: TColor
 	value?: string
+	close?: boolean
 }>()
+
+const emit = defineEmits<{ (e: 'close'): void }>()
 </script>
 
 <template>
 	<div class="ui-alert" :class="props.color">
-		{{ props.value }}
-		<slot v-if="$slots.default" name="default" />
+		<div v-if="props.close" class="ui-alert-close">
+			<ui-icon name="close" @click="emit('close')" />
+		</div>
+		<div v-if="props.value || $slots.default" class="ui-alert-content">
+			{{ props.value }}
+			<slot v-if="$slots.default" name="default" />
+		</div>
 	</div>
 </template>
diff --git a/src/components/Btn.vue b/src/components/Btn.vue
index ee75a99..7d68d61 100644
--- a/src/components/Btn.vue
+++ b/src/components/Btn.vue
@@ -1,19 +1,29 @@
 <script setup lang="ts">
+import type { TColor } from '../colors'
+import type { TUiIcon } from '../icons'
+
 import UiIcon from './Icon.vue'
 
 // Props.
 const props = defineProps<{
 	label?: string
 	type?: 'button' | 'submit'
-	color?: string
-	icon?: any
+	color?: TColor
+	icon?: TUiIcon
+	to?: string
 }>()
 </script>
 
 <template>
-	<button class="ui-btn" :class="props.color" :type="props.type">
+	<component
+		class="ui-btn"
+		:is="props.to ? 'router-link' : 'button'"
+		:to="props.to"
+		:class="props.color"
+		:type="props.type"
+	>
 		<ui-icon v-if="props.icon" :name="props.icon" />
 		<div v-if="props.label" class="label">{{ props.label }}</div>
 		<slot v-if="$slots.default" name="default" />
-	</button>
+	</component>
 </template>
diff --git a/src/components/Card.vue b/src/components/Card.vue
new file mode 100644
index 0000000..1b5ef59
--- /dev/null
+++ b/src/components/Card.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = defineProps<{
+	title?: string
+}>()
+</script>
+
+<template>
+	<div class="ui-card">
+		<div v-if="props.title" class="ui-card-head">
+			<h3 class="ui-card-title">{{ props.title }}</h3>
+		</div>
+		<div v-if="$slots.default" class="ui-card-body">
+			<slot name="default" />
+		</div>
+		<div v-if="$slots.actions" class="ui-card-actions">
+			<slot name="actions" />
+		</div>
+	</div>
+</template>
diff --git a/src/components/Field.vue b/src/components/Field.vue
index 7f6d326..271a7bc 100644
--- a/src/components/Field.vue
+++ b/src/components/Field.vue
@@ -6,8 +6,10 @@ const props = defineProps<{
 	error?: string
 	readonly?: boolean
 	disabled?: boolean
-	checked?: boolean
+	placeholder?: string
 	tag?: 'input' | 'textarea' | 'select'
+	checked?: boolean
+	options?: { text: string, value: any }[]
 }>()
 
 // Emits.
@@ -57,29 +59,34 @@ const inputHandler = (val: any) => {
 			v-if="!tag || tag === 'input'"	
 			:type="props.type"
 			:value="props.modelValue"
-			:reatonly="props.readonly"
+			:readonly="props.readonly"
 			:disabled="props.disabled"
 			:checked="checked"
+			:placeholder="props.placeholder"
 			@input="inputHandler"
 			class="input"
 		/>
 		<textarea
 			v-if="tag === 'textarea'"
 			:value="props.modelValue"
-			:reatonly="props.readonly"
+			:readonly="props.readonly"
 			:disabled="props.disabled"
+			:placeholder="props.placeholder"
 			@input="inputHandler"
 			class="input"
 		/>
 		<select
 			v-if="tag === 'select'"
 			:value="props.modelValue"
-			:reatonly="props.readonly"
+			:readonly="props.readonly"
 			:disabled="props.disabled"
+			:placeholder="props.placeholder"
 			@input="inputHandler"
 			class="input"
 		>
-			<!-- <slot v-if="$slots.default" name="default" /> -->
+			<option v-for="item in props.options" :value="item.value">
+				{{ item.text }}
+			</option>
 		</select>
 		<div v-if="props.error" class="message">{{ props.error }}</div>
 	</div>
diff --git a/src/components/FieldCheckbox.vue b/src/components/FieldCheckbox.vue
index a306d57..ca40b15 100644
--- a/src/components/FieldCheckbox.vue
+++ b/src/components/FieldCheckbox.vue
@@ -5,6 +5,8 @@ import { computed } from 'vue'
 // Props.
 const props = defineProps<{
 	modelValue?: boolean
+	disabled?: boolean
+	readonly?: boolean
 }>()
 
 // Emits.
@@ -22,6 +24,8 @@ const updateHandler = () => emit('update:modelValue', !props.modelValue)
 		type="checkbox"
 		class="ui-field-checkbox"
 		:checked="value"
+		:disabled="props.disabled"
+		:readonly="props.readonly"
 		@input="updateHandler"
 	/>
 </template>
diff --git a/src/components/FieldSelect.vue b/src/components/FieldSelect.vue
index 31248c9..9c73e63 100644
--- a/src/components/FieldSelect.vue
+++ b/src/components/FieldSelect.vue
@@ -4,7 +4,7 @@ import UiField from './Field.vue'
 
 const props = defineProps<{
 	modelValue?: string | number,
-	options: { value: string, text: string }[]
+	options: { text: string, value: any }[]
 }>()
 
 const emit = defineEmits<{ (e: 'update:modelValue', v?: any): void }>()
@@ -16,9 +16,10 @@ const displayValue = computed({
 </script>
 
 <template>
-	<ui-field tag="select" class="ui-field-select">
-		<option v-for="opt in props.options" :value="opt.value">
-			{{opt.text}}
-		</option>
-	</ui-field>
+	<ui-field
+		tag="select"
+		class="ui-field-select"
+		:options="props.options"
+		v-model="displayValue"
+	/>
 </template>
diff --git a/src/components/FieldSelectGender.vue b/src/components/FieldSelectGender.vue
index d06f095..da09d66 100644
--- a/src/components/FieldSelectGender.vue
+++ b/src/components/FieldSelectGender.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { GenderEnum } from 'axp-ts'
+import { GenderEnum, TGender } from 'axp-ts'
 import UiFieldSelect from './FieldSelect.vue'
 
-const options: any[] = [
+const options: { text: string, value: TGender }[] = [
 	{
 		text: 'Мужской',
 		value: GenderEnum.man
@@ -15,6 +15,5 @@ const options: any[] = [
 </script>
 
 <template>
-	<p>Select gender</p>
-	<ui-field-select :options="options" class="ui-field-select-gender" />
+	<ui-field-select class="ui-field-select-gender" :options="options" />
 </template>
diff --git a/src/components/Icon.vue b/src/components/Icon.vue
index 150959c..a03859f 100644
--- a/src/components/Icon.vue
+++ b/src/components/Icon.vue
@@ -1,87 +1,12 @@
-<script lang="ts">
-export const icons = {
-	account: `
-			<circle cx="12" cy="7" r="4" />
-			<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
-		`,
-	doc: `
-			<path d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
-		`,
-	vk: `
-			<path d="M21.579 6.855c.14-.465 0-.806-.662-.806h-2.193c-.558 0-.813.295-.953.619 0 0-1.115 2.719-2.695 4.482-.51.513-.743.675-1.021.675-.139 0-.341-.162-.341-.627V6.855c0-.558-.161-.806-.626-.806H9.642c-.348 0-.558.258-.558.504 0 .528.79.65.871 2.138v3.228c0 .707-.127.836-.407.836-.743 0-2.551-2.729-3.624-5.853-.209-.607-.42-.852-.98-.852H2.752c-.627 0-.752.295-.752.619 0 .582.743 3.462 3.461 7.271 1.812 2.601 4.363 4.011 6.687 4.011 1.393 0 1.565-.313 1.565-.853v-1.966c0-.626.133-.752.574-.752.324 0 .882.164 2.183 1.417 1.486 1.486 1.732 2.153 2.567 2.153h2.192c.626 0 .939-.313.759-.931-.197-.615-.907-1.51-1.849-2.569-.512-.604-1.277-1.254-1.51-1.579-.325-.419-.231-.604 0-.976.001.001 2.672-3.761 2.95-5.04z"/>
-		`,
-	youtube: `
-			<path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z" />
-			<polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" />
-		`,
-	video: `
-			<polygon points="23 7 16 12 23 17 23 7" />
-			<rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
-		`,
-	yandex: `
-			<path d="m10 24v-7.786l-5.2-13.964h2.616l3.834 10.767 4.41-13.018h2.405l-5.658 16.303v7.697z"/>
-		`,
-	menu: `
-			<path stroke="none" d="M0 0h24v24H0z"/>
-			<line x1="4" y1="6" x2="20" y2="6" />
-			<line x1="4" y1="12" x2="20" y2="12" />
-			<line x1="4" y1="18" x2="20" y2="18" />
-		`,
-	close: `
-			<line x1="18" y1="6" x2="6" y2="18" />
-			<line x1="6" y1="6" x2="18" y2="18" />
-		`,
-	'arrow-down': `
-			<path stroke="none" d="M0 0h24v24H0z"/>
-			<polyline points="6 9 12 15 18 9" />
-		`,
-	car: `
-			<path stroke="none" d="M0 0h24v24H0z"/>
-			<circle cx="7" cy="17" r="2" />
-			<circle cx="17" cy="17" r="2" />
-			<path d="M5 17h-2v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6 -6h15m-6 0v-5" />
-		`,
-	review: `
-			<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-		`,
-	phone: `
-			<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
-		`,
-	circle: `
-			<circle cx="12" cy="12" r="10"></circle>
-			<path d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-		`,
-	dzen: `
-			<path d="M 11.659994,0.01953125 C 5.2952996,0.20519926 0.20563242,5.2947457 0.01953125,11.659552 4.8820049,11.598767 7.6163326,11.265345 9.4411321,9.4406121 11.265931,7.6159232 11.59921,4.8819566 11.659994,0.01953125 Z m 0.719931,0 c 0.06078,4.86242535 0.393207,7.59634815 2.218006,9.42108085 1.824686,1.8245759 4.559692,2.1581249 9.4216,2.2189399 C 23.83343,5.2948697 18.744448,0.20538037 12.379925,0.01953125 Z M 0.01953125,12.37951 C 0.20581298,18.744149 5.2954188,23.833867 11.659994,24.019531 11.59921,19.156885 11.265931,16.422327 9.4411321,14.597594 7.6163326,12.772905 4.8820049,12.440295 0.01953125,12.37951 Z m 23.99999975,0 c -4.861908,0.06081 -7.596914,0.393508 -9.4216,2.218084 -1.8248,1.824733 -2.157222,4.559291 -2.218006,9.421937 6.364403,-0.185846 11.453324,-5.275505 11.639606,-11.640021 z" />
-		`,
-	instagram: `
-			<path d="m 18.374816,4.4184098 c -0.80327,0 -1.405723,0.6025075 -1.405723,1.4058562 0,0.8033487 0.602453,1.4058562 1.405723,1.4058562 0.803271,0 1.405724,-0.6025075 1.405724,-1.4058562 0,-0.8033487 -0.602453,-1.4058562 -1.405724,-1.4058562 z" />
-			<path d="m 12.049062,6.2259403 c -3.3134909,0 -5.9241249,2.7112998 -5.9241249,5.9246867 0,3.213387 2.7110426,5.924686 5.9241249,5.924686 3.213082,0 5.924119,-2.711299 5.924119,-5.924686 0,-3.2133869 -2.610629,-5.9246867 -5.924119,-5.9246867 z m 0,9.7405887 c -2.1085854,0 -3.815535,-1.707118 -3.815535,-3.815902 0,-2.108784 1.7069496,-3.8159024 3.815535,-3.8159024 2.108585,0 3.815534,1.7071184 3.815534,3.8159024 0,2.108784 -1.706949,3.815902 -3.815534,3.815902 z" />
-			<path d="M 16.868685,0 H 7.3298474 C 3.2130851,0 0,3.2133868 0,7.2301222 V 16.769878 C 0,20.786613 3.2130851,24 7.2294388,24 h 9.5388362 c 4.016353,0 7.229434,-3.213387 7.229434,-7.230122 V 7.2301222 C 24.098119,3.2133868 20.885037,0 16.868685,0 Z m 4.92003,16.87029 c 0,2.7113 -2.208993,5.020926 -5.02044,5.020926 H 7.2294388 c -2.711045,0 -5.0204482,-2.209205 -5.0204482,-5.020926 V 7.3305428 c 0,-2.7112998 2.2089985,-5.0209173 5.0204482,-5.0209173 h 9.5388362 c 2.711038,0 5.02044,2.2092048 5.02044,5.0209173 z" />
-		`,
-	moon: `
-			<path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-		`,
-	sun: `
-		<circle cx="12" cy="12" r="5" />
-		<line x1="12" y1="1" x2="12" y2="3" />
-		<line x1="12" y1="21" x2="12" y2="23" />
-		<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
-		<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
-		<line x1="1" y1="12" x2="3" y2="12" />
-		<line x1="21" y1="12" x2="23" y2="12" />
-		<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
-		<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
-	`
-}
-</script>
-
 <script setup lang="ts">
+import type { TUiIcon } from '../icons'
+
 import { computed } from 'vue'
+import { icons } from '../icons'
 
 // Props.
 const props = defineProps<{
-	name: keyof typeof icons
+	name: TUiIcon
 	fill?: boolean
 }>()
 
diff --git a/src/components/IconVisibility.vue b/src/components/IconVisibility.vue
new file mode 100644
index 0000000..850521d
--- /dev/null
+++ b/src/components/IconVisibility.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import UiIcon from './Icon.vue'
+
+// Props.
+const props = defineProps<{
+	modelValue?: boolean,
+	color?: boolean,
+	cursor?: boolean
+}>()
+
+// Emits.
+const emit = defineEmits<{ (e: 'update:modelValue', v: boolean): void }>()
+</script>
+
+<template>
+	<ui-icon
+		v-if="props.modelValue"
+		name="visibility"
+		:class="{ 'text-success': props.color, 'cursor-pointer': props.cursor }"
+		@click="emit('update:modelValue', false)"
+	/>
+	<ui-icon
+		v-else
+		name="visibility_off"
+		:class="{ 'cursor-pointer': props.cursor }"
+		@click="emit('update:modelValue', true)"
+	/>
+</template>
diff --git a/src/components/PickerDays.vue b/src/components/PickerDays.vue
new file mode 100644
index 0000000..887fde1
--- /dev/null
+++ b/src/components/PickerDays.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import UiFieldCheckbox from './FieldCheckbox.vue'
+
+// Props.
+const props = defineProps<{
+	modelValue?: number[]
+	label?: string
+	error?: string
+	readonly?: boolean
+	disabled?: boolean
+}>()
+
+// Emits.
+const emit = defineEmits<{ (e: 'update:modelValue', v: number[]): void }>()
+
+// Init data.
+const days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']
+
+// Handlers.
+const inputHandler = (index: number) => {
+	const number = index + 1
+	let result: number[] = props.modelValue || []
+	if (result.includes(number)) {
+		result = result.filter(e => e !== number)
+	} else {
+		result.push(number)
+	}
+	emit('update:modelValue', result.sort())
+}
+</script>
+
+<template>
+	<div class="ui-picker-days">
+		<div v-if="props.label" class="label mb-2">
+			<span>{{props.label}}:</span>
+		</div>
+		<div class="flex items-center">
+			<ui-field-checkbox
+				v-for="(item, index) in days"
+				class="mr-4"
+				:modelValue="props.modelValue?.includes(index + 1)"
+				:label="item"
+				:disabled="props.disabled"
+				:readonly="props.readonly"
+				@input="inputHandler(index)"
+			/>
+		</div>
+		<div v-if="error" class="mt-2 text-error">{{ error }}</div>
+	</div>
+</template>
diff --git a/src/components/Table.vue b/src/components/Table.vue
new file mode 100644
index 0000000..16ed6ff
--- /dev/null
+++ b/src/components/Table.vue
@@ -0,0 +1,5 @@
+<template>
+	<table class="ui-table">
+		<slot />
+	</table>
+</template>
diff --git a/src/components/index.ts b/src/components/index.ts
index da20440..46edf80 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -10,5 +10,9 @@ export { default as UiFieldDate } from './FieldDate.vue'
 export { default as UiFieldCheckbox } from './FieldCheckbox.vue'
 export { default as UiFieldSelect } from './FieldSelect.vue'
 export { default as UiFieldSelectGender } from './FieldSelectGender.vue'
+export { default as UiPickerDays } from './PickerDays.vue'
 export { default as UiIcon } from './Icon.vue'
+export { default as UiIconVisibility } from './IconVisibility.vue'
 export { default as UiForm } from './Form.vue'
+export { default as UiCard } from './Card.vue'
+export { default as UiTable } from './Table.vue'
diff --git a/src/css/common.sass b/src/css/common.sass
index feb9614..a077d61 100644
--- a/src/css/common.sass
+++ b/src/css/common.sass
@@ -28,38 +28,58 @@ p
   &-btn
     @apply px-4 border
     @apply flex justify-center items-center
-    > *:not(:last-child)
-      @apply mr-1
-    > .ui-icon:first-child
-      @apply ml-[-5px]
+    // > *:not(:last-child)
+    //   @apply mr-1
+    // > .ui-icon:first-child
+    //   @apply ml-[-5px]
 
   &-field
     .label
       @apply mb-1
     .input
       @apply block w-full border px-2 py-2
-      outline: none
     .message
       @apply mt-1 text-sm
 
     &-checkbox
       @apply flex items-center justify-start
+      .label
+        @apply mb-0
       .input
-        @apply w-max order-first mr-4
-        @apply w-[24px] h-[24px] border rounded
+        @apply w-max order-first mr-2
+        @apply w-[24px] h-[24px] min-w-[24px] min-h-[24px]
+        @apply border rounded
 
     &-textarea
       .input
         @apply min-h-[80px]
 
   &-alert
-    @apply border p-2
+    @apply relative border
     &:not(:last-child)
       @apply mb-2
+    &-close
+      @apply absolute top-0 right-0 p-2
+      .ui-icon
+        @apply cursor-pointer
+    &-content
+      @apply p-3
 
   &-icon
     @apply block w-[24px]
 
+  &-card
+    @apply flex flex-col
+    @apply border bg-white
+    &-head
+      @apply pt-3 px-3
+    &-body
+      @apply p-3
+      @apply flex-1
+    &-actions
+      @apply pb-3 px-3
+      @apply flex gap-2
+
   &-form
     &-header
       @apply pb-4
@@ -74,3 +94,19 @@ p
       @apply flex items-center pt-4
       > *:not(:last-child)
         @apply mr-2
+
+  &-table
+    @apply w-full
+    thead
+      tr
+        th
+          @apply py-2 px-3
+          @apply text-sm text-left
+    tbody
+      tr
+        &:hover
+          @apply bg-light
+        &:not(:first-child)
+          @apply border-t
+        td
+          @apply p-2
diff --git a/src/css/theme.sass b/src/css/theme.sass
index 16d29a5..add8ce9 100644
--- a/src/css/theme.sass
+++ b/src/css/theme.sass
@@ -1,9 +1,4 @@
 .ui
-  &-btn
-    @apply outline-none
-    &:hover:not(:active)
-      @apply bg-opacity-80
-
   &-btn,
   &-alert
     @apply bg-white
@@ -27,19 +22,23 @@
       @apply text-white bg-light border-light
 
   &-field
+    .input
+      @apply bg-white text-dark
     &.error
       .label,
       .input,
       .message
         @apply text-error border-error
-    &.disabled
+    &:disabled
       .input
         @apply bg-light/10 text-dark/60
-  &-field .input
-    @apply bg-white dark:bg-white/10
+  &-btn
+    @apply outline-none
+    &:hover:not(:active)
+      @apply bg-opacity-80
 
   &-btn,
   &-alert,
-  &-field .input
+  &-field .input,
+  &-card
       @apply rounded
-
diff --git a/src/icons.ts b/src/icons.ts
new file mode 100644
index 0000000..8c90f49
--- /dev/null
+++ b/src/icons.ts
@@ -0,0 +1,86 @@
+export const icons = {
+	account: `
+			<circle cx="12" cy="7" r="4" />
+			<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
+		`,
+	doc: `
+			<path d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
+		`,
+	vk: `
+			<path d="M21.579 6.855c.14-.465 0-.806-.662-.806h-2.193c-.558 0-.813.295-.953.619 0 0-1.115 2.719-2.695 4.482-.51.513-.743.675-1.021.675-.139 0-.341-.162-.341-.627V6.855c0-.558-.161-.806-.626-.806H9.642c-.348 0-.558.258-.558.504 0 .528.79.65.871 2.138v3.228c0 .707-.127.836-.407.836-.743 0-2.551-2.729-3.624-5.853-.209-.607-.42-.852-.98-.852H2.752c-.627 0-.752.295-.752.619 0 .582.743 3.462 3.461 7.271 1.812 2.601 4.363 4.011 6.687 4.011 1.393 0 1.565-.313 1.565-.853v-1.966c0-.626.133-.752.574-.752.324 0 .882.164 2.183 1.417 1.486 1.486 1.732 2.153 2.567 2.153h2.192c.626 0 .939-.313.759-.931-.197-.615-.907-1.51-1.849-2.569-.512-.604-1.277-1.254-1.51-1.579-.325-.419-.231-.604 0-.976.001.001 2.672-3.761 2.95-5.04z"/>
+		`,
+	youtube: `
+			<path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z" />
+			<polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" />
+		`,
+	video: `
+			<polygon points="23 7 16 12 23 17 23 7" />
+			<rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
+		`,
+	yandex: `
+			<path d="m10 24v-7.786l-5.2-13.964h2.616l3.834 10.767 4.41-13.018h2.405l-5.658 16.303v7.697z"/>
+		`,
+	menu: `
+			<path stroke="none" d="M0 0h24v24H0z"/>
+			<line x1="4" y1="6" x2="20" y2="6" />
+			<line x1="4" y1="12" x2="20" y2="12" />
+			<line x1="4" y1="18" x2="20" y2="18" />
+		`,
+	close: `
+			<line x1="18" y1="6" x2="6" y2="18" />
+			<line x1="6" y1="6" x2="18" y2="18" />
+		`,
+	'arrow-down': `
+			<path stroke="none" d="M0 0h24v24H0z"/>
+			<polyline points="6 9 12 15 18 9" />
+		`,
+	car: `
+			<path stroke="none" d="M0 0h24v24H0z"/>
+			<circle cx="7" cy="17" r="2" />
+			<circle cx="17" cy="17" r="2" />
+			<path d="M5 17h-2v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6 -6h15m-6 0v-5" />
+		`,
+	review: `
+			<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+		`,
+	phone: `
+			<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
+		`,
+	circle: `
+			<circle cx="12" cy="12" r="10"></circle>
+		`,
+	dzen: `
+			<path d="M 11.659994,0.01953125 C 5.2952996,0.20519926 0.20563242,5.2947457 0.01953125,11.659552 4.8820049,11.598767 7.6163326,11.265345 9.4411321,9.4406121 11.265931,7.6159232 11.59921,4.8819566 11.659994,0.01953125 Z m 0.719931,0 c 0.06078,4.86242535 0.393207,7.59634815 2.218006,9.42108085 1.824686,1.8245759 4.559692,2.1581249 9.4216,2.2189399 C 23.83343,5.2948697 18.744448,0.20538037 12.379925,0.01953125 Z M 0.01953125,12.37951 C 0.20581298,18.744149 5.2954188,23.833867 11.659994,24.019531 11.59921,19.156885 11.265931,16.422327 9.4411321,14.597594 7.6163326,12.772905 4.8820049,12.440295 0.01953125,12.37951 Z m 23.99999975,0 c -4.861908,0.06081 -7.596914,0.393508 -9.4216,2.218084 -1.8248,1.824733 -2.157222,4.559291 -2.218006,9.421937 6.364403,-0.185846 11.453324,-5.275505 11.639606,-11.640021 z" />
+		`,
+	instagram: `
+			<path d="m 18.374816,4.4184098 c -0.80327,0 -1.405723,0.6025075 -1.405723,1.4058562 0,0.8033487 0.602453,1.4058562 1.405723,1.4058562 0.803271,0 1.405724,-0.6025075 1.405724,-1.4058562 0,-0.8033487 -0.602453,-1.4058562 -1.405724,-1.4058562 z" />
+			<path d="m 12.049062,6.2259403 c -3.3134909,0 -5.9241249,2.7112998 -5.9241249,5.9246867 0,3.213387 2.7110426,5.924686 5.9241249,5.924686 3.213082,0 5.924119,-2.711299 5.924119,-5.924686 0,-3.2133869 -2.610629,-5.9246867 -5.924119,-5.9246867 z m 0,9.7405887 c -2.1085854,0 -3.815535,-1.707118 -3.815535,-3.815902 0,-2.108784 1.7069496,-3.8159024 3.815535,-3.8159024 2.108585,0 3.815534,1.7071184 3.815534,3.8159024 0,2.108784 -1.706949,3.815902 -3.815534,3.815902 z" />
+			<path d="M 16.868685,0 H 7.3298474 C 3.2130851,0 0,3.2133868 0,7.2301222 V 16.769878 C 0,20.786613 3.2130851,24 7.2294388,24 h 9.5388362 c 4.016353,0 7.229434,-3.213387 7.229434,-7.230122 V 7.2301222 C 24.098119,3.2133868 20.885037,0 16.868685,0 Z m 4.92003,16.87029 c 0,2.7113 -2.208993,5.020926 -5.02044,5.020926 H 7.2294388 c -2.711045,0 -5.0204482,-2.209205 -5.0204482,-5.020926 V 7.3305428 c 0,-2.7112998 2.2089985,-5.0209173 5.0204482,-5.0209173 h 9.5388362 c 2.711038,0 5.02044,2.2092048 5.02044,5.0209173 z" />
+		`,
+	moon: `
+			<path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+		`,
+	sun: `
+		<circle cx="12" cy="12" r="5" />
+		<line x1="12" y1="1" x2="12" y2="3" />
+		<line x1="12" y1="21" x2="12" y2="23" />
+		<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+		<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+		<line x1="1" y1="12" x2="3" y2="12" />
+		<line x1="21" y1="12" x2="23" y2="12" />
+		<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+		<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+	`,
+	edit: `
+  	<path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+	`,
+	visibility: `
+		<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+		<circle cx="12" cy="12" r="3" />
+	`,
+	visibility_off: `
+  	<path d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+	`
+}
+
+export type TUiIcon = keyof typeof icons
diff --git a/src/index.ts b/src/index.ts
index cb64ac1..d1c5e15 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1 +1,3 @@
 export * from './components'
+export * from './icons'
+export * from './colors'