bonkers-ui 1.0.54 → 1.0.55

package/.eslintrc.js

@@ -1,51 +1,92 @@
 module.exports = {
-	"root": true,
-	"env": {
-		"browser": true,
-		"es2021": true,
-		"node": true
+	root: true,
+	env: {
+		browser: true,
+		es2021: true,
+		node: true,
 	},
-	"extends": ["plugin:vue/vue3-recommended", "eslint:recommended", "@vue/typescript/recommended", "plugin:storybook/recommended"],
-	"parserOptions": {
-		"ecmaVersion": 2021
+	extends: [
+		"plugin:vue/vue3-recommended",
+		"eslint:recommended",
+		"@vue/typescript/recommended",
+		"plugin:storybook/recommended",
+		"plugin:tailwindcss/recommended"
+	],
+	parserOptions: {
+		ecmaVersion: 2021,
 	},
-	"parser": "vue-eslint-parser",
-	"plugins": [],
-	"overrides": [{
-		"files": ["*.vue"],
-		"rules": {
-			"indent": "off"
-		}
-	}],
-	"rules": {
-		"indent": ["error", "tab", {
-			"VariableDeclarator": "first",
-			"MemberExpression": 1,
-			"ObjectExpression": 1
-		}],
-		"vue/html-indent": ["error", "tab", {
-			"attribute": 1,
-			"baseIndent": 1,
-			"closeBracket": 0,
-			"alignAttributesVertically": true
-		}],
-		"vue/script-indent": ["error", "tab", {
-			"baseIndent": 1,
-			"switchCase": 1
-		}],
+	parser: "vue-eslint-parser",
+	plugins: [
+		"tailwindcss",
+	],
+	overrides: [
+		{
+			files: ["*.vue"],
+			rules: {
+				indent: "off",
+			},
+		},
+	],
+	rules: {
+		indent: [
+			"error",
+			"tab",
+			{
+				VariableDeclarator: "first",
+				MemberExpression: 1,
+				ObjectExpression: 1,
+			},
+		],
+		"vue/html-indent": [
+			"error",
+			"tab",
+			{
+				attribute: 1,
+				baseIndent: 1,
+				closeBracket: 0,
+				alignAttributesVertically: true,
+			},
+		],
+		"vue/script-indent": [
+			"error",
+			"tab",
+			{
+				baseIndent: 1,
+				switchCase: 1,
+			},
+		],
 		"eol-last": ["error", "always"],
 		"no-console": "warn",
 		"no-debugger": "warn",
 		"vue/multi-word-component-names": 0,
 		"object-curly-spacing": ["error", "always"],
-		"quotes": ["error", "double", {
-			"avoidEscape": true,
-			"allowTemplateLiterals": true
+		quotes: [
+			"error",
+			"double",
+			{
+				avoidEscape: true,
+				allowTemplateLiterals: true,
+			},
+		],
+		"no-multiple-empty-lines": [
+			"error",
+			{
+				max: 1,
+				maxEOF: 0,
+			},
+		],
+		semi: ["error", "always"],
+		"max-len": ["error", {
+			"code": 120,
+			"tabWidth": 4,
+			"ignoreStrings": true,
+			"ignoreTemplateLiterals": true,
+			"ignoreRegExpLiterals": true,
+			"ignoreUrls": true,
+			"ignoreComments": true,
+			"ignoreTrailingComments": true,
+			ignorePattern: 'd="([\\s\\S]*?)"',
 		}],
-		"no-multiple-empty-lines": ["error", {
-			"max": 1,
-			"maxEOF": 0
-		}],
-		semi: ["error", "always"]
-	}
+		"tailwindcss/no-custom-classname": "off",
+	},
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bonkers-ui",
-    "version": "v1.0.54",
+    "version": "v1.0.55",
     "private": false,
     "scripts": {
         "storybook": "storybook dev -p 6006",
@@ -19,50 +19,51 @@
         "@fortawesome/free-regular-svg-icons": "^6.4.0",
         "@fortawesome/free-solid-svg-icons": "^6.4.0",
         "@fortawesome/vue-fontawesome": "^3.0.3",
+        "eslint-plugin-tailwindcss": "^3.13.0",
         "storybook-addon-designs": "^6.3.1",
         "vue": "^3.3.4",
-        "vue-router": "^4.2.2"
+        "vue-router": "^4.2.4"
     },
     "devDependencies": {
-        "@storybook/addon-essentials": "^7.0.20",
-        "@storybook/addon-links": "^7.0.20",
-        "@storybook/addon-mdx-gfm": "^7.0.20",
-        "@storybook/vue3": "^7.0.20",
-        "@storybook/vue3-vite": "^7.0.20",
+        "@storybook/addon-essentials": "^7.0.27",
+        "@storybook/addon-links": "^7.0.27",
+        "@storybook/addon-mdx-gfm": "^7.0.27",
+        "@storybook/vue3": "^7.0.27",
+        "@storybook/vue3-vite": "^7.0.27",
         "@typescript-eslint/eslint-plugin": "^5.59.9",
         "@typescript-eslint/parser": "^5.59.9",
         "@vitejs/plugin-vue": "^4.2.3",
         "@vue/eslint-config-typescript": "^11.0.3",
-        "@vue/test-utils": "^2.3.2",
-        "eslint": "8.42.0",
+        "@vue/test-utils": "^2.4.0",
+        "eslint": "8.44.0",
         "eslint-plugin-storybook": "^0.6.12",
-        "eslint-plugin-vue": "^9.14.1",
+        "eslint-plugin-vue": "^9.15.1",
         "gh-pages": "^5.0.0",
         "husky": "4.3.8",
         "jsdom": "^22.1.0",
-        "lint-staged": "^13.2.2",
-        "postcss": "^8.4.24",
+        "lint-staged": "^13.2.3",
+        "postcss": "^8.4.26",
         "postcss-html": "^1.4.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "storybook": "^7.0.20",
+        "storybook": "^7.0.27",
         "storybook-tailwind-dark-mode": "^1.0.22",
-        "stylelint": "^15.7.0",
-        "stylelint-config-recommended": "^12.0.0",
-        "stylelint-config-recommended-vue": "^1.4.0",
-        "stylelint-config-standard": "^33.0.0",
-        "tailwindcss": "^3.3.2",
+        "stylelint": "^15.10.1",
+        "stylelint-config-recommended": "^13.0.0",
+        "stylelint-config-recommended-vue": "^1.5.0",
+        "stylelint-config-standard": "^34.0.0",
+        "tailwindcss": "^3.3.3",
         "ts-node": "^10.9.1",
-        "typescript": "^5.1.3",
-        "vite": "^4.3.9",
-        "vitest": "^0.32.0",
-        "vue-eslint-parser": "^9.3.0",
+        "typescript": "^5.1.6",
+        "vite": "^4.4.4",
+        "vitest": "^0.33.0",
+        "vue-eslint-parser": "^9.3.1",
         "vue-loader": "^17.2.2",
-        "vue-tsc": "^1.6.5"
+        "vue-tsc": "^1.8.4"
     },
     "lint-staged": {
         "*.{ts,tsx,vue}": [
-            "eslint --fix",
+            "yarn eslint --fix",
             "bash -c 'yarn typecheck'"
         ],
         "*.{css,vue,tsx}": "stylelint --fix"

package/src/components/ui-alert/ui-alert.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="ui-alert flex gap-sm p-sm border rounded-lg bg-white"
+		class="ui-alert flex gap-sm rounded-lg border bg-white p-sm"
 		:class="[
 			(!kind || kind === EAlertTypes.PRIMARY) && 'border-primary',
 			kind === EAlertTypes.WARNING && 'border-warning',

package/src/components/ui-badge/ui-badge.vue

@@ -1,8 +1,8 @@
 <template>
 	<div
-		class="ui-badge relative text-white overflow-hidden"
+		class="ui-badge relative overflow-hidden text-white"
 	>
-		<div class="relative z-[1] flex items-center content-center gap-xxs px-xs py-xxs">
+		<div class="relative z-[1] flex content-center items-center gap-xxs px-xs py-xxs">
 			<ui-icon
 				v-if="icon"
 				:size="ESize.XS"
@@ -16,7 +16,7 @@
 				class="whitespace-nowrap"
 				line-height
 				:class="[
-					elipsis && 'overflow-hidden overflow-ellipsis',
+					elipsis && 'overflow-hidden text-ellipsis',
 				]"
 			>
 				<slot />
@@ -24,7 +24,7 @@
 		</div>
 
 		<div
-			class="absolute rounded-full top-0 left-0 w-full h-full"
+			class="absolute left-0 top-0 h-full w-full rounded-full"
 			:class="[
 				(!kind || kind === EBadgeKind.PRIMARY) && 'bg-primary-600',
 

package/src/components/ui-ber-rank/ui-ber-rank.vue

@@ -22,7 +22,7 @@
 				:weight="ETextWeight.BOLD"
 				:size="textSize"
 				:text-transform="ETextTransform.UPPERCASE"
-				class="absolute top-0 left-0 w-full h-full flex justify-center items-center"
+				class="absolute left-0 top-0 flex h-full w-full items-center justify-center"
 			>
 				ber
 			</ui-typography>
@@ -52,7 +52,7 @@
 				:weight="ETextWeight.BOLD"
 				:size="textSize"
 				:text-transform="ETextTransform.UPPERCASE"
-				class="absolute top-0 left-0 w-full h-full flex justify-center items-center"
+				class="absolute left-0 top-0 flex h-full w-full items-center justify-center"
 			>
 				{{ berRankDictionary[+rank]?.text || berRankDictionary[0].text }}
 			</ui-typography>

package/src/components/ui-button/ui-button.test.ts

@@ -4,6 +4,6 @@ import UiButton from "./ui-button.vue";
 test("VButton.test.ts", () => {
 	expect(UiButton).toBeTruthy();
 
-	const container = mount(UiButton as any);
+	const container = mount(UiButton);
 	expect(container).toBeTruthy();
 });

package/src/components/ui-button/ui-button.vue

@@ -1,26 +1,48 @@
 <template>
 	<button
-		class="ui-button grid justify-center items-center grid-flow-col text-base rounded-lg whitespace-nowrap font-bold leading-none touch-manipulation "
+		class="ui-button
+			text-base
+			grid
+			touch-manipulation
+			grid-flow-col
+			items-center
+			justify-center
+			whitespace-nowrap
+			rounded-lg
+			font-bold
+			leading-none
+			"
 		:disabled="disabled"
 		:class="[
 			(!kind || kind === EButtonTypes.PRIMARY) && [primaryColor, primaryColorHover, primaryColorActive].join(' '),
 			kind === EButtonTypes.SECONDARY
-				&& 'text-white bg-secondary hover:bg-secondary-600 active:bg-secondary-700 disabled:bg-secondary-300',
-			kind === EButtonTypes.WARNING && 'text-white bg-warning hover:bg-warning-600 active:bg-warning-700 disabled:bg-warning-300',
-			kind === EButtonTypes.ERROR && 'text-white bg-error hover:bg-error-600 active:bg-error-700 disabled:bg-error-300',
+				&& 'bg-secondary text-white hover:bg-secondary-600 active:bg-secondary-700 disabled:bg-secondary-300',
+			kind === EButtonTypes.WARNING
+				&& 'bg-warning text-white hover:bg-warning-600 active:bg-warning-700 disabled:bg-warning-300',
+			kind === EButtonTypes.ERROR
+				&& 'bg-error text-white hover:bg-error-600 active:bg-error-700 disabled:bg-error-300',
 			kind === EButtonTypes.PRIMARY_OVERLAY
-				&& 'text-primary border border-primary hover:bg-primary-600 hover:border-transparent hover:text-white active:bg-primary-700 active:border-transparent active:text-white disabled:text-primary-300 disabled:border-primary-300',
+				&& 'border border-primary text-primary hover:border-transparent hover:bg-primary-600'
+					+ 'hover:text-white active:border-transparent active:bg-primary-700'
+					+ 'active:text-white disabled:border-primary-300 disabled:text-primary-300',
 			kind === EButtonTypes.SECONDARY_OVERLAY
-				&& 'text-secondary border border-secondary hover:bg-secondary-600 hover:border-transparent hover:text-white active:bg-secondary-700 active:border-transparent active:text-white disabled:text-secondary-300 disabled:border-secondary-300',
+				&& 'border border-secondary text-secondary hover:border-transparent hover:bg-secondary-600'
+					+ 'hover:text-white active:border-transparent active:bg-secondary-700'
+					+ 'active:text-white disabled:border-secondary-300 disabled:text-secondary-300',
 			kind === EButtonTypes.WARNING_OVERLAY
-				&& 'text-warning border border-warning hover:bg-warning-600 hover:border-transparent hover:text-white active:bg-warning-700 active:border-transparent active:text-white disabled:text-warning-300 disabled:border-warning-300',
+				&& 'border border-warning text-warning hover:border-transparent hover:bg-warning-600'
+					+ 'hover:text-white active:border-transparent active:bg-warning-700'
+					+ 'active:text-white disabled:border-warning-300 disabled:text-warning-300',
 			kind === EButtonTypes.ERROR_OVERLAY
-				&& 'text-error border border-error hover:bg-error-600 hover:border-transparent hover:text-white active:bg-error-700 active:border-transparent active:text-white disabled:text-error-300 disabled:border-error-300',
-			kind === EButtonTypes.LINK && 'text-accent-alt hover:text-accent-alt-600 active:text-accent-alt-700 disabled:text-accent-alt-300',
-			(!size || size === EButtonSizes.DEFAULT) && 'py-sm px-md',
-			size === EButtonSizes.SMALL && 'py-xs px-md',
-			size === EButtonSizes.MEDIUM && 'py-sm px-sm',
-			size === EButtonSizes.LARGE && 'py-md px-md',
+				&& 'border border-error text-error hover:border-transparent hover:bg-error-600'
+					+'hover:text-white active:border-transparent active:bg-error-700'
+					+'active:text-white disabled:border-error-300 disabled:text-error-300',
+			kind === EButtonTypes.LINK && 'hover:text-accent-alt-600 active:text-accent-alt-700'
+				+'disabled:text-accent-alt-300 text-accent-alt',
+			(!size || size === EButtonSizes.DEFAULT) && 'px-md py-sm',
+			size === EButtonSizes.SMALL && 'px-md py-xs',
+			size === EButtonSizes.MEDIUM && 'p-sm',
+			size === EButtonSizes.LARGE && 'p-md',
 			($slots.default || $slots.postfix) && 'gap-sm',
 			fullWidth && 'w-full',
 			disabled && 'pointer-events-none',

package/src/components/ui-card-cta/ui-card-cta.vue

@@ -3,22 +3,22 @@
 		class="
 			ui-card-cta
 			w-full
-			outline-0
+			rounded-2xl
 			border
 			border-secondary-alt-500
-			rounded-2xl
+			bg-white
 			p-sm
 			shadow-md
-			bg-white
+			outline-0
 			hover:border-secondary-700
 			focus:shadow-border-primary
 			active:bg-secondary-alt-200
-			disabled:bg-secondary-alt-200
-			disabled:pointer-events-none"
+			disabled:pointer-events-none
+			disabled:bg-secondary-alt-200"
 		:disabled="disabled"
 	>
 		<span
-			class="ui-card-cta__wrapper w-full grid gap-sm items-center"
+			class="ui-card-cta__wrapper grid w-full items-center gap-sm"
 			:class="[
 				invertOrder && 'ui-card-cta_inverted',
 			]"

package/src/components/ui-card-result/ui-card-result.vue

@@ -2,7 +2,7 @@
 	<div class="ui-card-result">
 		<div
 			v-if="exclusiveText"
-			class="bg-primary rounded-2xl px-sm pb-lg -mb-lg"
+			class="-mb-lg rounded-2xl bg-primary px-sm pb-lg"
 			@click="exclusiveClickAction"
 		>
 			<ui-typography
@@ -11,18 +11,31 @@
 				:size="ETypographySizes.XXS"
 				:kind="EColors.WHITE"
 				:align="ETextAlign.CENTER"
-				:weight="ETextWeight.SEMI_BOLD"
+				:weight="ETextWeight.BOLD"
 			>
 				{{ exclusiveText }}
 			</ui-typography>
 		</div>
 
-		<div class="grid relative border border-secondary-alt-400 rounded-2xl overflow-hidden bg-white">
-			<div class="ui-card-result__header grid gap-xs justify-between items-center rounded-lg bg-secondary-alt-200 p-xs m-xs mb-sm">
+		<div class="relative grid overflow-hidden rounded-2xl border border-secondary-alt-400 bg-white">
+			<div
+				class="
+				ui-card-result__header
+				m-xs
+				mb-sm
+				grid
+				items-center
+				justify-between
+				gap-xs
+				rounded-lg
+				bg-secondary-alt-200
+				p-xs
+			"
+			>
 				<ui-typography
 					v-if="header"
 					line-height
-					class="flex-1 line-clamp"
+					class="line-clamp flex-1"
 					:size="ETypographySizes.SM"
 					:weight="ETextWeight.SEMI_BOLD"
 					:kind="EColors.SECONDARY"
@@ -33,14 +46,14 @@
 				<slot name="sidebar" />
 			</div>
 
-			<main class="p-sm pt-0 w-full overflow-hidden bg-white">
+			<main class="w-full overflow-hidden bg-white p-sm pt-0">
 				<slot />
 			</main>
 		</div>
 
 		<div
 			v-if="exclusiveTextBottom"
-			class="bg-secondary-alt-200 rounded-2xl px-sm pt-lg -mt-lg border border-secondary-alt-400"
+			class="-mt-lg rounded-2xl border border-secondary-alt-400 bg-secondary-alt-200 px-sm pt-lg"
 			@click="exclusiveBottomClickAction"
 		>
 			<ui-typography

package/src/components/ui-card-simple/ui-card-simple.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="ui-card-simple rounded-3xl shadow-md py-md px-sm bg-white"
+		class="ui-card-simple rounded-3xl bg-white px-sm py-md shadow-md"
 	>
 		<ui-typography
 			v-if="slots.title"

package/src/components/ui-checkbox/ui-checkbox.vue

@@ -14,13 +14,25 @@
 	>
 		<input
 			v-model="checkboxModel"
-			class="appearance-none absolute"
+			class="absolute appearance-none"
 			type="checkbox"
 			:value="value"
 			:disabled="disabled"
 		>
 		<span
-			class="ui-checkbox_custom w-md h-md flex items-center justify-center border border-secondary-alt-500 rounded relative hover:border-secondary-alt-700"
+			class="
+				ui-checkbox_custom
+				relative
+				flex
+				h-md
+				w-md
+				items-center
+				justify-center
+				rounded
+				border
+				border-secondary-alt-500
+				hover:border-secondary-alt-700
+				"
 			:class="invertOrder && 'order-last'"
 		>
 			<svg
@@ -64,7 +76,7 @@
 	}>();
 
 	const emit = defineEmits<{
-		(e: "update:modelValue", state: unknown): void
+		(e: "update:modelValue", state: typeof props.modelValue): void
 	}>();
 
 	const checkboxModel = computed({

package/src/components/ui-icon-wrapper/ui-icon-wrapper.vue

@@ -1,15 +1,15 @@
 <template>
 	<div
-		class="icon-wrapper w-fit h-fit grid place-items-center relative rounded-2xl"
+		class="icon-wrapper relative grid h-fit w-fit place-items-center rounded-2xl"
 		:class="[
-			kind === EIconWrapperTypes.PRIMARY && 'text-white bg-primary',
-			kind === EIconWrapperTypes.SECONDARY && 'text-black bg-secondary-alt-200',
-			kind === EIconWrapperTypes.DEFAULT && 'text-primary bg-white border-2 border-primary ',
+			kind === EIconWrapperTypes.PRIMARY && 'bg-primary text-white',
+			kind === EIconWrapperTypes.SECONDARY && 'bg-secondary-alt-200 text-black',
+			kind === EIconWrapperTypes.DEFAULT && 'border-2 border-primary bg-white text-primary ',
 
-			size === EIconWrapperSizes.DEFAULT && 'py-sm px-sm',
-			size === EIconWrapperSizes.SMALL && 'py-xs px-xs',
-			size === EIconWrapperSizes.MEDIUM && 'py-md px-md icon-wrapper_offset-md',
-			size === EIconWrapperSizes.LARGE && 'py-lg px-lg icon-wrapper_offset-lg',
+			size === EIconWrapperSizes.DEFAULT && 'p-sm',
+			size === EIconWrapperSizes.SMALL && 'p-xs',
+			size === EIconWrapperSizes.MEDIUM && 'icon-wrapper_offset-md p-md',
+			size === EIconWrapperSizes.LARGE && 'icon-wrapper_offset-lg p-lg',
 		]"
 	>
 		<slot />

package/src/components/ui-input/ui-input.vue

@@ -10,7 +10,7 @@
 			</ui-typography>
 		</slot>
 		<label
-			class="ui-input__wrapper flex w-full rounded-lg border bg-white items-center p-sm gap-xs"
+			class="ui-input__wrapper flex w-full items-center gap-xs rounded-lg border bg-white p-sm"
 			:class="[
 				kind === EInputKinds.SECONDARY && 'border-secondary-alt-500 hover:border-secondary-alt-700',
 				kind === EInputKinds.PRIMARY && 'border-primary',
@@ -25,7 +25,7 @@
 				:autocomplete="getAutoComplete()"
 				:value="modelValue"
 				:pattern="pattern"
-				class="bg-transparent border-0 outline-none w-full placeholder:text-secondary-alt placeholder:italic"
+				class="w-full border-0 bg-transparent outline-none placeholder:italic placeholder:text-secondary-alt"
 				:type="type"
 				:placeholder="placeholder"
 				:maxlength="maxlength"

package/src/components/ui-input-range/ui-input-range.vue

@@ -1,11 +1,11 @@
 <template>
 	<div
-		class="ui-input-range relative h-lg py-xs box-content"
+		class="ui-input-range relative box-content h-lg py-xs"
 	>
 		<input
 			ref="track"
 			v-model.number="rangeModel"
-			class="appearance-none absolute top-0 left-0 cursor-pointer bg-transparent w-full h-full"
+			class="absolute left-0 top-0 h-full w-full cursor-pointer appearance-none bg-transparent"
 			type="range"
 			:min="min"
 			:max="max"
@@ -14,11 +14,11 @@
 		>
 
 		<div
-			class="h-xs w-full bg-secondary-alt rounded absolute top-1/2 left-0 -translate-y-1/2 pointer-events-none"
+			class="pointer-events-none absolute left-0 top-1/2 h-xs w-full -translate-y-1/2 rounded bg-secondary-alt"
 		/>
 
 		<div
-			class="h-xs bg-primary rounded absolute top-1/2 left-0 -translate-y-1/2 pointer-events-none"
+			class="pointer-events-none absolute left-0 top-1/2 h-xs -translate-y-1/2 rounded bg-primary"
 			:style="{
 				width: getPercentage + '%',
 			}"
@@ -27,16 +27,16 @@
 		<div
 			class="
 				ui-input-range__thumb
-				w-xs
-				h-xs
-				bg-primary
+				pointer-events-none
 				absolute
-				border-white
-				rounded-full
 				box-content
-				-translate-y-1/2
+				h-xs
+				w-xs
 				-translate-x-1/2
-				pointer-events-none
+				-translate-y-1/2
+				rounded-full
+				border-white
+				bg-primary
 			"
 			:style="{left: getPercentage + '%'}"
 		/>

package/src/components/ui-list-item/ui-list-item.vue

@@ -1,7 +1,7 @@
 
 <template>
 	<li
-		class="ui-list-item grid grid-flow-col justify-start gap-xs relative group text-secondary"
+		class="ui-list-item group relative grid grid-flow-col justify-start gap-xs text-secondary"
 		:class="[
 			size === EListItemSize.SM && 'text-sm',
 			size === EListItemSize.MD && 'text-md',
@@ -11,7 +11,17 @@
 	>
 		<div
 			v-if="kind === EListItemTypes.PROGRESS"
-			class="ui-list-item__line bg-primary-300 h-full absolute w-xxs left-xs -translate-x-2/4 top-sm group-last:hidden"
+			class="
+				ui-list-item__line
+				absolute
+				left-xs
+				top-sm
+				h-full
+				w-xxs
+				-translate-x-2/4
+				bg-primary-300
+				group-last:hidden
+			"
 		/>
 
 		<slot name="icon">
@@ -48,6 +58,7 @@
 	import UiTypography, { ETextWeight } from "../ui-typography";
 	import { ESize } from "../../_types/sizing";
 	import { EListItemTypes, EListItemSpacing, EListItemSize } from "./_types";
+	import { HTMLAttributes } from "vue";
 
 	withDefaults(defineProps<{
 		icon?: TIconName
@@ -55,7 +66,7 @@
 		kind?: EListItemTypes
 		size?: EListItemSize
 		spacing?: EListItemSpacing
-		iconClass?: string
+		iconClass?: HTMLAttributes["class"]
 	}>(), {
 		kind: EListItemTypes.DEFAULT,
 		size: EListItemSize.SM,

package/src/components/ui-modal/ui-backdrop/ui-backdrop.vue

@@ -4,10 +4,10 @@
 			class="
 				backdrop-color
 				fixed
-				backdrop-blur-sm
-				transition-all
 				inset-0
 				z-0
+				backdrop-blur-sm
+				transition-all
 				"
 		/>
 

package/src/components/ui-modal/ui-modal.vue

@@ -2,18 +2,18 @@
 	<div
 		class="
 				ui-modal
-				flex flex-col
-				items-center
-				w-full
-				z-10
+				max-height max-width
 				inset-0
+				z-10
+				flex
+				w-full
+				flex-col
+				items-center
+				overflow-y-scroll
 				rounded-2xl
-				shadow-md
-				p-md
 				bg-white
-				overflow-y-scroll
-				max-height
-				max-width
+				p-md
+				shadow-md
 			"
 		:class="[
 			modalSize === EModalSizes.SM &&'h-fit max-w-[24rem]',
@@ -24,7 +24,7 @@
 	>
 		<div
 			v-if="$slots.icon"
-			class="mt-md mb-sm"
+			class="mb-sm mt-md"
 		>
 			<slot name="icon" />
 		</div>
@@ -47,14 +47,14 @@
 			:weight="ETextWeight.REGULAR"
 			:align="ETextAlign.CENTER"
 			line-height
-			class="w-full text-secondary mb-md overflow-y-auto"
+			class="mb-md w-full overflow-y-auto text-secondary"
 		>
 			<slot />
 		</ui-typography>
 
 		<div
 			v-if="$slots.footer"
-			class="w-full mt-auto"
+			class="mt-auto w-full"
 		>
 			<slot name="footer" />
 		</div>

package/src/components/ui-notification-badge/ui-notification-badge.vue

@@ -1,9 +1,23 @@
 <template>
 	<div
-		class="notification-badge absolute min-w-sm h-sm font-bold text-xxs rounded-full border border-white text-white bg-error text-center leading-none"
+		class="
+			notification-badge
+			absolute
+			h-sm
+			min-w-sm
+			rounded-full
+			border
+			border-white
+			bg-error
+			text-center
+			text-xxs
+			font-bold
+			leading-none
+			text-white
+		"
 		:class="[
-			origin === EBadgeOrigin.DEFAULT && 'top-0 right-0',
-			origin === EBadgeOrigin.OFFSET_TOP_RIGHT && '-top-xxs -right-xxs',
+			origin === EBadgeOrigin.DEFAULT && 'right-0 top-0',
+			origin === EBadgeOrigin.OFFSET_TOP_RIGHT && '-right-xxs -top-xxs',
 		]"
 	>
 		<slot />

package/src/components/ui-order-card/ui-order-card.vue

@@ -1,15 +1,15 @@
 <template>
 	<div
-		class="ui-order-card relative text-center rounded-md pt-md mt-sm"
+		class="ui-order-card relative mt-sm rounded-md pt-md text-center"
 		:class="[
-			kind === EOrderCardTypes.DEFAULT && 'text-white bg-primary-300',
+			kind === EOrderCardTypes.DEFAULT && 'bg-primary-300 text-white',
 			kind === EOrderCardTypes.WARNING && 'bg-warning-300 text-warning-700'
 		]"
 	>
 		<ui-icon
 			:icon-name="iconName"
 			:size="ESize.LG"
-			class="absolute top-0 left-1/2 bg-primary-300 rounded-full -translate-x-1/2 -translate-y-1/2"
+			class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-300"
 			:class="[
 				kind === EOrderCardTypes.DEFAULT && 'text-white',
 				kind === EOrderCardTypes.WARNING && 'bg-warning-300 text-white'
@@ -44,7 +44,7 @@
 
 		<ui-typography
 			v-if="$slots.footer"
-			class="py-sm text-white rounded-b-lg"
+			class="rounded-b-lg py-sm text-white"
 			:class="[
 				kind === EOrderCardTypes.DEFAULT && 'bg-primary-700',
 				kind === EOrderCardTypes.WARNING && 'bg-warning-700'

package/src/components/ui-plain-radio/ui-plain-radio.vue

@@ -11,54 +11,53 @@
 			name="ui-plain-radio"
 			type="radio"
 			:disabled="disabled"
-			class="appearance-none absolute peer"
+			class="peer absolute appearance-none"
 		>
 
 		<div
 			class="ui-plain-radio__content
+				box-border
 				grid
+				h-full
+				w-full
+				cursor-pointer
 				grid-flow-col
-				justify-start
 				items-center
-				gap-sm
-				box-border
-				w-full
-				h-full
-				py-sm px-sm
+				justify-start
+				gap-sm rounded-xl
 				border
 				border-secondary-alt-500
 				bg-white
-				hover:border-secondary-alt-700
-				cursor-pointer
-				rounded-xl
-
+				p-sm
 				before:absolute
 				before:-z-10
+
 				before:box-border
 				before:rounded-[16px]
 				before:bg-primary-300
-
+				hover:border-secondary-alt-700
 				peer-checked:border-transparent
+
+				peer-checked:shadow-selected-shadow
+				peer-checked:hover:shadow-border-selected
 				peer-checked:active:shadow-border-primary
-				peer-checked:active:before:-top-xs
 				peer-checked:active:before:-bottom-xs
 				peer-checked:active:before:-left-xs
 				peer-checked:active:before:-right-xs
 
-				peer-checked:hover:shadow-border-selected
-				peer-checked:shadow-selected-shadow
+				peer-checked:active:before:-top-xs
+				peer-focus:before:-bottom-xs
 
-				peer-active:before:-top-xxs
+				peer-focus:before:-left-xs
+				peer-focus:before:-right-xs
+				peer-focus:before:-top-xs
 				peer-active:before:-bottom-xxs
+
 				peer-active:before:-left-xxs
 				peer-active:before:-right-xxs
-
-				peer-focus:before:-top-xs
-				peer-focus:before:-bottom-xs
-				peer-focus:before:-left-xs
-				peer-focus:before:-right-xs
-			"
-			:class="disabled && 'pointer-events-none border-secondary-alt-400 peer-checked:shadow-border-primary-disabled'"
+				peer-active:before:-top-xxs"
+			:class="disabled
+				&& 'pointer-events-none border-secondary-alt-400 peer-checked:shadow-border-primary-disabled'"
 		>
 			<ui-radio
 				v-model="radioModel"

package/src/components/ui-progress/index.ts

@@ -0,0 +1 @@
+export { default } from "./ui-progress.vue";

package/src/components/ui-progress/ui-progress.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta } from "@storybook/vue3";
+import UiProgress from ".";
+
+export default {
+	title: "Components/ui-progress",
+	component: UiProgress,
+
+	argTypes: {
+		// kind: {
+		// 	control: { type: "select" },
+		// 	options: Object.values(EAlertTypes),
+		// 	description: "The button kinds",
+		// },
+		min: {
+			control: { type: "number" },
+			description: "The minimum value",
+		},
+		max: {
+			control: { type: "number" },
+			description: "The maximum value",
+		},
+		current: {
+			control: { type: "number" },
+		}
+	},
+} satisfies Meta<typeof UiProgress>;
+
+export const Default = {
+	args: {
+		min: 0,
+		max: 10,
+		current: 3,
+	},
+};

package/src/components/ui-progress/ui-progress.vue

@@ -0,0 +1,43 @@
+<template>
+	<div class="ui-progress">
+		<div
+			class="relative h-xs w-full overflow-hidden rounded-lg bg-primary-alt-300"
+		>
+			<div
+				class="
+					ui-progress__bar-fill
+					absolute
+					left-0
+					top-0
+					z-10
+					h-full
+					rounded-lg
+					bg-primary-alt-700
+					transition-all
+					duration-300
+				"
+				:style="{
+					width: filler + '%'
+				}"
+			/>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+	import { computed } from "vue";
+
+	const props = withDefaults(defineProps<{
+		min: number
+		max: number
+		current: number
+	}>(),{
+		min: 0,
+		max: 100,
+		current: 0
+	});
+
+	const filler = computed(() => {
+		return ((props.current - props.min) / (props.max - props.min)) * 100;
+	});
+</script>

package/src/components/ui-radio/ui-radio.vue

@@ -1,6 +1,6 @@
 <template>
 	<label
-		class="ui-radio grid cursor-pointer group grid-flow-col"
+		class="ui-radio group grid cursor-pointer grid-flow-col"
 		:class="[
 			slots.default && 'items-center gap-xs',
 			(!justify || justify === EJustify.START) && 'justify-start',
@@ -19,40 +19,40 @@
 			:name="name.toString()"
 			:value="value"
 			:disabled="disabled"
-			class="appearance-none absolute peer"
+			class="peer absolute appearance-none"
 		>
 		<span
 			class="
 				ui-radio_custom
 				relative
 				block
-				w-md
 				h-md
+				w-md
+				rounded-full
 				border
 				border-secondary-alt
-				rounded-full
 				bg-white
-				peer-disabled:border-secondary-alt-400
-				peer-disabled:bg-secondary-alt-200
-				peer-checked:border-primary
+				group-hover:border-secondary-alt-700
+				group-focus:border-secondary-alt-700
 				peer-checked:border-2
+				peer-checked:border-primary
 				peer-checked:hover:border-primary-600
 				peer-focus:shadow-border-primary
-				group-hover:border-secondary-alt-700
-				group-focus:border-secondary-alt-700"
+				peer-disabled:border-secondary-alt-400
+				peer-disabled:bg-secondary-alt-200"
 			:class="invertOrder && 'order-last'"
 		>
 			<span
 				class="
 						ui-radio__dot
 						absolute
-						top-2/4
 						left-2/4
-						w-xs
-						h-xs
+						top-2/4
 						block
-						bg-primary
-						rounded-full"
+						h-xs
+						w-xs
+						rounded-full
+						bg-primary"
 			/>
 		</span>
 		<slot />

package/src/components/ui-radio-fancy/ui-radio-fancy.vue

@@ -12,52 +12,54 @@
 			type="radio"
 			:name="name"
 			:value="value"
-			class="peer group appearance-none absolute"
+			class="group peer absolute appearance-none"
 			:disabled="disabled"
 		>
 		<div
 			class="
 				ui-radio-fancy__content
 				box-border
-				w-full
 				h-full
-				py-sm px-sm
+				w-full
+				cursor-pointer rounded-xl
 				border
 				border-secondary-alt-500
 				bg-white
-				hover:border-secondary-alt-700
-				cursor-pointer
-				rounded-xl
-
+				p-sm
 				before:absolute
 				before:-z-10
+
 				before:box-border
 				before:rounded-[16px]
 				before:bg-primary-300
-
+				hover:border-secondary-alt-700
 				peer-checked:border-transparent
+
+				peer-checked:shadow-selected-shadow
+				peer-checked:hover:shadow-border-selected
 				peer-checked:active:shadow-border-primary
-				peer-checked:active:before:-top-xs
 				peer-checked:active:before:-bottom-xs
 				peer-checked:active:before:-left-xs
 				peer-checked:active:before:-right-xs
 
-				peer-checked:hover:shadow-border-selected
-				peer-checked:shadow-selected-shadow
+				peer-checked:active:before:-top-xs
+				peer-focus:before:-bottom-xs
 
-				peer-active:before:-top-xxs
+				peer-focus:before:-left-xs
+				peer-focus:before:-right-xs
+				peer-focus:before:-top-xs
 				peer-active:before:-bottom-xxs
+
 				peer-active:before:-left-xxs
 				peer-active:before:-right-xxs
-
-				peer-focus:before:-top-xs
-				peer-focus:before:-bottom-xs
-				peer-focus:before:-left-xs
-				peer-focus:before:-right-xs
+				peer-active:before:-top-xxs
 			"
-			:class="[disabled && 'pointer-events-none border-secondary-alt-400 peer-checked:shadow-border-primary-disabled',
+			:class="[
+				disabled
+					&& 'pointer-events-none border-secondary-alt-400 peer-checked:shadow-border-primary-disabled',
 				radioSize === ERadioSizes.DEFAULT && 'default',
-				radioSize === ERadioSizes.MINIMAL && 'flex gap-sm align-middle']"
+				radioSize === ERadioSizes.MINIMAL && 'flex gap-sm align-middle'
+			]"
 		>
 			<div
 				v-if="radioSize === ERadioSizes.DEFAULT"
@@ -96,7 +98,7 @@
 
 <script lang="ts" setup>
 	import { computed } from "vue";
-	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
+	import UiTypography, { ETypographySizes } from "../ui-typography";
 	import type { TIconName } from "../ui-icon";
 	import { ESize } from "../../_types/sizing";
 	import { EColors } from "../../_types/colors";

package/src/components/ui-result-card-range/ui-result-card-range.vue

@@ -2,15 +2,15 @@
 	<div
 		class="
 			ui-result-card-range
-			w-full
 			flex
+			w-full
 			flex-col
 			items-center
+			rounded-3xl
 			border-4
 			border-secondary-alt-300
 			bg-secondary-alt-200
-			rounded-3xl
-			text-secondary-500 p-md"
+			p-md text-secondary-500"
 	>
 		<ui-icon
 			v-if="iconName"

package/src/components/ui-select/ui-select.vue

@@ -10,12 +10,23 @@
 			</ui-typography>
 		</slot>
 		<div
-			class="relative rounded-lg border bg-white border-secondary-alt-500 hover:border-secondary-alt-700"
-			:class="[disabled && 'pointer-events-none bg-secondary-alt-200 border-secondary-alt-300']"
+			class="relative rounded-lg border border-secondary-alt-500 bg-white hover:border-secondary-alt-700"
+			:class="[disabled && 'pointer-events-none border-secondary-alt-300 bg-secondary-alt-200']"
 		>
 			<select
 				v-model="radioModel"
-				class="appearance-none bg-transparent border-0 m-0 outline-0 w-full p-sm cursor-pointer italic text-secondary-alt"
+				class="
+					m-0
+					w-full
+					cursor-pointer
+					appearance-none
+					border-0
+					bg-transparent
+					p-sm
+					italic
+					text-secondary-alt
+					outline-0
+				"
 			>
 				<slot />
 			</select>

package/src/components/ui-snackbar/ui-snackbar.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="ui-snackbar flex shadow-md rounded-lg w-full p-sm justify-between"
+		class="ui-snackbar flex w-full justify-between rounded-lg p-sm shadow-md"
 		:class="[
 			kind === ESnackbarTypes.DEFAULT && 'bg-white',
 			kind === ESnackbarTypes.PRIMARY && 'bg-primary text-white',

package/src/components/ui-table/index.ts

@@ -1,3 +1,5 @@
 export { ETextAlign, ETextWeight } from "../ui-typography";
 export { default as UiTableCell } from "./ui-table-cell";
 export { default as UiTableRow, ERowKind } from "./ui-table-row";
+export { default as UiTable } from "./ui-table.vue";
+export { ETableKind } from "./_types";

package/src/components/ui-table/ui-table.vue

@@ -1,7 +1,7 @@
 <template>
 	<table
 		:class="[
-			'ui-table',
+			'ui-table rounded-lg',
 			kind === ETableKind.SECONDARY && 'ui-table__secondary',
 			kind === ETableKind.SECONDARY_INVERTED && 'ui-table__secondary-inverted',
 		]"
@@ -21,13 +21,11 @@
 </script>
 
 <style scoped>
-	.ui-table__secondary::v-deep tr:nth-child(odd){
+	.ui-table__secondary::v-deep(tr:nth-child(odd)){
 		background-color: var(--color-secondary-alt-200);
-		border-radius: var(--xs);
 	}
 
-	.ui-table__secondary-inverted::v-deep tr:nth-child(even){
+	.ui-table__secondary-inverted::v-deep(tr:nth-child(even)){
 		background-color: var(--color-secondary-alt-200);
-		border-radius: var(--xs);
 	}
 </style>

package/src/components/ui-tabs/ui-tabs.vue

@@ -1,16 +1,16 @@
 <template>
-	<ul class="ui-tabs bg-secondary-alt-200 rounded-full grid grid-flow-col">
+	<ul class="ui-tabs grid grid-flow-col rounded-full bg-secondary-alt-200">
 		<li
 			v-for="tab in tabs"
 			:key="tab"
 			class="rounded-full text-center"
 			:class="[tabsModel === tab && 'bg-white']"
 		>
-			<label class="block cursor-pointer py-xs px-md">
+			<label class="block cursor-pointer px-md py-xs">
 				<input
 					v-model="tabsModel"
 					type="radio"
-					class="appearance-none absolute"
+					class="absolute appearance-none"
 					:value="tab"
 					:name="name"
 				>

package/src/components/ui-toggle/ui-toggle.vue

@@ -12,26 +12,26 @@
 		</slot>
 
 		<label
-			class="rounded-full cursor-pointer flex gap-sm"
+			class="flex cursor-pointer gap-sm rounded-full"
 			:class="[
-				disabled && 'pointer-events-none ui-toggle_disabled',
+				disabled && 'ui-toggle_disabled pointer-events-none',
 				invertOrder && 'flex-row-reverse',
 				alignCenter && 'items-center'
 			]"
 		>
 			<span
-				class="ui-input__input-wrapper block relative h-md"
+				class="ui-input__input-wrapper relative block h-md"
 			>
 				<input
 					v-model="checkboxModel"
 					type="checkbox"
-					class="appearance-none absolute w-0 h-0 border-0"
+					class="absolute h-0 w-0 appearance-none border-0"
 					:value="value"
 				>
 
-				<span class="ui-toggle__bg-block w-lg h-md bg-secondary-alt block rounded-full" />
+				<span class="ui-toggle__bg-block block h-md w-lg rounded-full bg-secondary-alt" />
 
-				<span class="ui-toggle__dot block bg-white absolute top-0 rounded-full">
+				<span class="ui-toggle__dot absolute top-0 block rounded-full bg-white">
 					<svg
 						class="ui-toggle__check-icon absolute"
 						:class="disabled ? 'text-primary-300' : 'text-primary'"
@@ -65,7 +65,7 @@
 </template>
 
 <script lang="ts" setup>
-	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
+	import UiTypography, { ETypographySizes } from "../ui-typography";
 	import { computed } from "vue";
 
 	const props = defineProps<{

package/src/stories/colors/ui-colors.vue

@@ -23,7 +23,7 @@
 						class="grid"
 					>
 						<span
-							class="block h-xxl w-xxl rounded-full relative"
+							class="relative block h-xxl w-xxl rounded-full"
 							:style="{
 								backgroundColor: value2
 							}"
@@ -42,7 +42,7 @@
 			</div>
 			<div v-else>
 				<span
-					class="block h-xxl w-xxl rounded-full relative"
+					class="relative block h-xxl w-xxl rounded-full"
 					:style="{
 						backgroundColor: value
 					}"