vueless 0.0.51 → 0.0.52

package/adatper.locale/locales/en.js

@@ -8,6 +8,7 @@ import calendarConfig from "../../ui.form-calendar/configs/default.config";
 import datepickerConfig from "../../ui.form-date-picker/configs/default.config";
 import datepickerRangeConfig from "../../ui.form-date-picker-range/configs/default.config";
 import dataListConfig from "../../ui.data-list/configs/default.config";
+import notifyDefaultConfig from "../../ui.notify/configs/default.config";
 
 export default {
   USelect: selectConfig.i18n,
@@ -20,4 +21,5 @@ export default {
   UDatePicker: datepickerConfig.i18n,
   UDatePickerRange: datepickerRangeConfig.i18n,
   UDataList: dataListConfig.i18n,
+  UNotify: notifyDefaultConfig.i18n,
 };

package/index.js

@@ -2,6 +2,15 @@ import { createLocale, LocaleSymbol } from "./composable.locale";
 
 export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n";
 export { default as defaultEnLocale } from "./adatper.locale/locales/en";
+export {
+  notify,
+  notifySuccess,
+  notifyWarning,
+  notifyError,
+  clearAllNotifications,
+  setDelayedNotify,
+  getDelayedNotify,
+} from "./ui.notify/services";
 
 export function createVueless(options = {}) {
   const locale = createLocale(options.locale);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.51",
+  "version": "0.0.52",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -11,8 +11,8 @@
     "access": "public"
   },
   "scripts": {
-    "lint": "eslint --ext .vue,.js,.ts --no-fix --ignore-path .eslintignore src/ .storybook/ tests/",
-    "lint:fix": "eslint --ext .vue,.js,.ts --fix --ignore-path .eslintignore src/ .storybook/ tests/",
+    "lint": "eslint --ext .vue,.js,.ts --no-fix --ignore-path .eslintignore src/ .storybook/",
+    "lint:fix": "eslint --ext .vue,.js,.ts --fix --ignore-path .eslintignore src/ .storybook/",
     "lint:ci": "eslint --ext .vue,.js,.ts --no-fix --ignore-path .eslintignore --max-warnings=0",
     "release:patch": "release-it patch --ci --npm.publish",
     "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",
@@ -24,7 +24,6 @@
     "package:prepare": "node src/gen.web-types && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE web-types.json README.md dist/ && rm -rf dist/assets && node dist.prepare"
   },
   "dependencies": {
-    "@kyvg/vue3-notification": "^3.2.1",
     "@material-symbols/svg-500": "^0.17.3",
     "@tailwindcss/forms": "^0.5.7",
     "@uppy/core": "^3.10.1",
@@ -35,8 +34,7 @@
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.3",
     "vue-tippy": "^6.0.0-beta.0",
-    "vuedraggable": "^4.1.0",
-    "vuex": "^4.1.0"
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@release-it/bumper": "^6.0.1",

package/service.ui/index.js

@@ -102,6 +102,7 @@ export default class UIServiceDefault {
     return color.length === 6 || color.length === 3 ? `${r}, ${g}, ${b}` : "";
   }
 
+  // TODO: This should be rewrote to support all set of brand colors (not only one).
   setBrandColor(brandColor) {
     function getBrandColor(color, grayColor, brandColors) {
       if (color === "grayscale") {

package/ui.button/composables/attrs.composable.js

@@ -6,7 +6,7 @@ import defaultConfig from "../configs/default.config";
 
 export function useAttrs(props) {
   const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
-  const { button } = config.value;
+  const { button, text } = config.value;
 
   const cvaButton = cva({
     base: button.base,
@@ -14,6 +14,12 @@ export function useAttrs(props) {
     compoundVariants: button.compoundVariants,
   });
 
+  const cvaText = cva({
+    base: text.base,
+    variants: text.variants,
+    compoundVariants: text.compoundVariants,
+  });
+
   const buttonClasses = computed(() =>
     setColor(
       cvaButton({
@@ -31,8 +37,9 @@ export function useAttrs(props) {
     ),
   );
 
+  const textClasses = computed(() => setColor(cvaText({ color: props.color }), props.color));
   const buttonAttrs = getAttrs("button", { classes: buttonClasses });
-  const textAttrs = getAttrs("text");
+  const textAttrs = getAttrs("text", { classes: textClasses });
 
   return {
     textAttrs,

package/ui.button-link/composables/attrs.composable.js

@@ -9,7 +9,7 @@ export function useAttrs(props) {
   const slots = useSlots();
 
   const { config, getAttrs, hasSlotContent, setColor } = useUI(defaultConfig, () => props.config);
-  const { wrapper, link, text } = config.value;
+  const { wrapper, link, text, rightSlot, leftSlot } = config.value;
 
   const cvaWrapper = cva({
     base: wrapper.base,
@@ -29,6 +29,18 @@ export function useAttrs(props) {
     compoundVariants: text.compoundVariants,
   });
 
+  const cvaRightSlot = cva({
+    base: rightSlot.base,
+    variants: rightSlot.variants,
+    compoundVariants: rightSlot.compoundVariants,
+  });
+
+  const cvaLeftSlot = cva({
+    base: leftSlot.base,
+    variants: leftSlot.variants,
+    compoundVariants: leftSlot.compoundVariants,
+  });
+
   const wrapperClasses = computed(() =>
     setColor(
       cvaWrapper({
@@ -56,6 +68,14 @@ export function useAttrs(props) {
 
   const textClasses = computed(() => setColor(cvaText({ color: props.color }), props.color));
 
+  const rightSlotClasses = computed(() =>
+    setColor(cvaRightSlot({ color: props.color }), props.color),
+  );
+
+  const leftSlotClasses = computed(() =>
+    setColor(cvaLeftSlot({ color: props.color }), props.color),
+  );
+
   const wrapperAttrsRaw = getAttrs("wrapper", { classes: wrapperClasses });
 
   const wrapperAttrs = computed(() => {
@@ -83,8 +103,8 @@ export function useAttrs(props) {
     };
   });
 
-  const rightSlotAttrs = getAttrs("rightSlot");
-  const leftSlotAttrs = getAttrs("leftSlot");
+  const rightSlotAttrs = getAttrs("rightSlot", { classes: rightSlotClasses });
+  const leftSlotAttrs = getAttrs("leftSlot", { classes: leftSlotClasses });
   const textAttrs = getAttrs("text", { classes: textClasses });
 
   return {

package/ui.button-toggle/configs/default.config.js

@@ -4,6 +4,7 @@ export default /*tw*/ {
     [&>*:first-child]:rounded-l-lg [&>*:first-child]:rounded-r-none [&>*:first-child]:overflow-hidden
     [&>*:last-child]:rounded-r-lg [&>*:last-child]:rounded-l-none [&>*:last-child]:overflow-hidden
   `,
+  toggleItem: "",
   defaultVariants: {
     size: "md",
     block: false,

package/ui.container-modal-confirm/composable/attrs.composable.js

@@ -1,13 +1,63 @@
 import useUI from "../../composable.ui";
 import defaultConfig from "../configs/default.config";
+import { cva } from "../../service.ui/index.js";
+import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, hasSlotContent, setColor } = useUI(defaultConfig, () => props.config);
+  const { modal, footerLeftFallback, confirmButton, cancelButton } = config.value;
 
-  const modalAttrs = getAttrs("modal", { isComponent: true });
-  const footerLeftFallbackAttrs = getAttrs("footerLeftFallback");
-  const confirmButtonAttrs = getAttrs("confirmButton", { isComponent: true });
-  const cancelButtonAttrs = getAttrs("cancelButton", { isComponent: true });
+  const cvaModal = cva({
+    base: modal.base,
+    variants: modal.variants,
+    compoundVariants: modal.compoundVariants,
+  });
+
+  const cvaFooterLeftFallback = cva({
+    base: footerLeftFallback.base,
+    variants: footerLeftFallback.variants,
+    compoundVariants: footerLeftFallback.compoundVariants,
+  });
+
+  const cvaConfirmButton = cva({
+    base: confirmButton.base,
+    variants: confirmButton.variants,
+    compoundVariants: confirmButton.compoundVariants,
+  });
+
+  const cvaCancelButton = cva({
+    base: cancelButton.base,
+    variants: cancelButton.variants,
+    compoundVariants: cancelButton.compoundVariants,
+  });
+
+  const modalClasses = computed(() => setColor(cvaModal({ color: props.color }), props.color));
+
+  const footerLeftFallbackClasses = computed(() =>
+    setColor(cvaFooterLeftFallback({ color: props.color }), props.color),
+  );
+
+  const confirmButtonClasses = computed(() => cvaConfirmButton({ color: props.color }));
+
+  const cancelButtonClasses = computed(() => cvaCancelButton({ color: props.color }));
+
+  const modalAttrsRaw = getAttrs("modal", { isComponent: true, classes: modalClasses });
+  const footerLeftFallbackAttrs = getAttrs("footerLeftFallback", {
+    classes: footerLeftFallbackClasses,
+  });
+  const confirmButtonAttrs = getAttrs("confirmButton", {
+    isComponent: true,
+    classes: confirmButtonClasses,
+  });
+  const cancelButtonAttrs = getAttrs("cancelButton", {
+    isComponent: true,
+    classes: cancelButtonClasses,
+  });
+
+  const modalAttrs = computed(() => ({
+    ...modalAttrsRaw.value,
+    class: setColor(modalAttrsRaw.value.class, props.color),
+  }));
 
   return {
     config,

package/ui.form-calendar/configs/default.config.js

@@ -1,9 +1,9 @@
 export default /*tw*/ {
-  wrapper: "w-fit overflow-hidden rounded-lg border focus:outline-none border-gray-300 bg-white px-1 pb-4 shadow",
+  wrapper: "w-fit overflow-hidden rounded-lg border focus:outline-none border-brand-300 bg-white px-1 pb-4 shadow",
   navigation: "flex items-center justify-between px-3 pt-2",
   navigationSwitchViewButton: "",
   dayViewSwitchLabel: "flex gap-1",
-  dayViewSwitchLabelMonth: "text-gray-900",
+  dayViewSwitchLabelMonth: "text-brand-900",
   dayViewSwitchLabelIcon: "",
   dayViewSwitchLabelIconName: "keyboard_arrow_right",
   nextPrevWrapper: {
@@ -21,35 +21,35 @@ export default /*tw*/ {
   prevIconName: "keyboard_arrow_left",
   dayViewWrapper: "w-64 px-3 pt-2",
   weekDaysWrapper: "grid grid-cols-7",
-  weekDay: "flex size-8 items-center justify-center text-xs uppercase text-gray-500",
+  weekDay: "flex size-8 items-center justify-center text-xs uppercase text-brand-500",
   daysWrapper: "grid grid-cols-7",
-  day: "mx-auto size-8 rounded-lg text-sm hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed",
-  activeDay: "bg-gray-100 hover:bg-gray-100",
-  inRangeFirstDay: "rounded-none rounded-l-lg bg-gray-200 text-gray-900 hover:bg-gray-200",
-  inRangeLastDay: "rounded-none rounded-r-lg bg-gray-200 text-gray-900 hover:bg-gray-200",
-  inRangeDay: "bg-gray-100 text-gray-900 hover:!bg-gray-200 rounded-none",
-  selectedDay: "bg-gray-900 text-white hover:bg-gray-900",
-  currentDay: "hover:bg-gray-100 border-2 border-gray-900",
-  anotherMonthDay: "hover:bg-gray-100 text-gray-400",
+  day: "mx-auto size-8 rounded-lg text-sm hover:bg-brand-100 disabled:opacity-50 disabled:cursor-not-allowed",
+  activeDay: "bg-brand-100 hover:bg-brand-100",
+  inRangeFirstDay: "rounded-none rounded-l-lg bg-brand-200 text-brand-900 hover:bg-brand-200",
+  inRangeLastDay: "rounded-none rounded-r-lg bg-brand-200 text-brand-900 hover:bg-brand-200",
+  inRangeDay: "bg-brand-100 text-brand-900 hover:!bg-brand-200 rounded-none",
+  selectedDay: "bg-brand-900 text-white hover:bg-brand-900",
+  currentDay: "hover:bg-brand-100 border-2 border-brand-900",
+  anotherMonthDay: "hover:bg-brand-100 text-brand-400",
   monthViewWrapper: "grid w-64 grid-cols-4 items-center justify-center px-3 pt-2",
   month: `
-    mx-auto flex h-12 w-full items-center justify-center rounded-lg text-sm hover:cursor-pointer hover:bg-gray-100
+    mx-auto flex h-12 w-full items-center justify-center rounded-lg text-sm hover:cursor-pointer hover:bg-brand-100
     disabled:opacity-50 disabled:cursor-not-allowed
   `,
-  selectedMonth: "bg-gray-900 hover:bg-gray-900 text-white",
-  activeMonth: "bg-gray-100",
+  selectedMonth: "bg-brand-900 hover:bg-brand-900 text-white",
+  activeMonth: "bg-brand-100",
   yearViewWrapper: "grid w-64 grid-cols-4 items-center justify-center px-3 pt-2",
   year: `
-    mx-auto flex h-12 w-full items-center justify-center rounded-lg text-sm hover:cursor-pointer hover:bg-gray-100
+    mx-auto flex h-12 w-full items-center justify-center rounded-lg text-sm hover:cursor-pointer hover:bg-brand-100
     disabled:opacity-50 disabled:cursor-not-allowed
   `,
-  selectedYear: "bg-gray-900 hover:bg-gray-900 text-white",
-  activeYear: "bg-gray-100",
+  selectedYear: "bg-brand-900 hover:bg-brand-900 text-white",
+  activeYear: "bg-brand-100",
   timepickerWrapper: `
-  mx-2 -mb-1 mt-2 flex items-center justify-between gap-2 border-t border-gray-200 pl-2 pr-1 pt-3 text-sm
+    mx-2 -mb-1 mt-2 flex items-center justify-between gap-2 border-t border-brand-200 pl-2 pr-1 pt-3 text-sm
   `,
   timepickerLabel: "w-full",
-  timepickerInputWrapper: "flex items-center gap-px rounded-lg border border-gray-300",
+  timepickerInputWrapper: "flex items-center gap-px rounded-lg border border-brand-300",
   timepickerLeftInput: `
     w-11 rounded-l-lg border-none px-2.5 py-1.5 text-center text-sm focus:border-none focus:outline-none
   `,
@@ -57,8 +57,8 @@ export default /*tw*/ {
     w-11 rounded-r-lg border-none px-2.5 py-1.5 text-center text-sm focus:border-none focus:outline-none
   `,
   submitButton: `
-    rounded-lg border-none bg-gray-900/10 px-2.5 py-1.5 text-sm font-normal text-gray-900 outline-none
-    focus:ring-0 hover:bg-gray-900/10
+    rounded-lg border-none bg-brand-900/10 px-2.5 py-1.5 text-sm font-normal text-brand-900 outline-none
+    focus:ring-0 hover:bg-brand-900/10
   `,
   i18n: {
     weekdays: {

package/ui.form-color-picker/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import { cva } from "../../service.ui";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
   const { radio } = config.value;
 
   const cvaRadio = cva({
@@ -14,14 +14,7 @@ export function useAttrs(props) {
     compoundVariants: radio.compoundVariants,
   });
 
-  const radioClasses = computed(() =>
-    setColor(
-      cvaRadio({
-        color: props.color,
-      }),
-      props.color,
-    ),
-  );
+  const radioClasses = computed(() => cvaRadio({ color: props.color }));
 
   const wrapperAttrs = getAttrs("wrapper");
   const listAttrs = getAttrs("listAttrs");

package/ui.form-date-picker/configs/default.config.js

@@ -2,7 +2,7 @@ export default /*tw*/ {
   input: "",
   inputActive: {
     block: {
-      base: "ring-4 ring-gray-600/[.15] border-gray-500 hover:border-gray-500",
+      base: "ring-4 ring-brand-600/[.15] border-brand-500 hover:border-brand-500",
     },
   },
   calendar: "absolute z-40 mt-2",

package/ui.form-date-picker-range/configs/default.config.js

@@ -2,23 +2,23 @@ export default /*tw*/ {
   input: "",
   inputActive: {
     block: {
-      base: "ring-4 ring-gray-600/[.15] border-gray-500 hover:border-gray-500",
+      base: "ring-4 ring-brand-600/[.15] border-brand-500 hover:border-brand-500",
     },
   },
-  buttonWrapper: "flex h-full rounded-lg focus-within:ring-4 focus-within:ring-gray-600/[.15] max-md:justify-between",
+  buttonWrapper: "flex h-full rounded-lg focus-within:ring-4 focus-within:ring-brand-600/[.15] max-md:justify-between",
   button: `
     shrink-0 grow rounded-none border-0 bg-zinc-100 py-2 text-base font-medium text-gray-900 shadow-none
-  hover:bg-zinc-200 hover:ring-gray-600/[.15] focus:border-0 focus:bg-zinc-200 focus:ring-0 focus:ring-gray-600/[.15]
-  active:bg-zinc-200 disabled:cursor-not-allowed
+    hover:bg-zinc-200 hover:ring-brand-600/[.15] focus:border-0 focus:bg-zinc-200 focus:ring-0 focus:ring-brand-600/[.15]
+    active:bg-zinc-200 disabled:cursor-not-allowed
   `,
-  buttonActive: "border-0 hover:bg-zinc-200 ring-0 ring-gray-600/[.15] bg-zinc-200",
-  buttonWrapperActive: "ring-4 ring-gray-600/[.15]",
+  buttonActive: "border-0 hover:bg-zinc-200 ring-0 ring-brand-600/[.15] bg-zinc-200",
+  buttonWrapperActive: "ring-4 ring-brand-600/[.15]",
   shiftRangeButton: `
     focus:bg-bg-zinc-200 flex items-center border-0 bg-zinc-100 py-[0.71875rem] shadow-none
-    hover:bg-zinc-200 hover:ring-gray-600/[.15] focus:border-0 focus:ring-0 focus:ring-gray-600/[.15] active:bg-zinc-200
+    hover:bg-zinc-200 hover:ring-brand-600/[.15] focus:border-0 focus:ring-0 focus:ring-brand-600/[.15] active:bg-zinc-200
     disabled:cursor-not-allowed last:rounded-l-none last:rounded-r-lg first:rounded-l-lg first:rounded-r-none
   `,
-  menu: "absolute z-40 mt-2 w-80 overflow-hidden rounded-lg border border-gray-300 bg-white p-2 shadow focus:outline-none",
+  menu: "absolute z-40 mt-2 w-80 overflow-hidden rounded-lg border border-brand-300 bg-white p-2 shadow focus:outline-none",
   menuTransition: {
     enterFromClass: "opacity-0 scale-95",
     enterActiveClass: "transition transform ease-out duration-100",
@@ -30,8 +30,8 @@ export default /*tw*/ {
   periodsRow: "mb-1 flex min-w-64 gap-1",
   periodButton: `
     flex h-[3.125rem] w-full cursor-pointer flex-col items-center justify-center rounded-lg bg-zinc-100
-    px-1.5 py-2.5 text-center text-xs font-medium text-gray-900 hover:bg-gray-200
-    [&_span]:block [&_span]:font-normal [&_span]:text-gray-500
+    px-1.5 py-2.5 text-center text-xs font-medium text-brand-900 hover:bg-brand-200
+    [&_span]:block [&_span]:font-normal [&_span]:text-brand-500
   `,
   periodButtonActive: "bg-zinc-200",
   rangeSwitchWrapper: "mb-2.5 mt-4 flex items-center justify-between py-2",
@@ -46,7 +46,7 @@ export default /*tw*/ {
   periodDateYearList: "grid grid-cols-3 grid-rows-1 gap-0.5",
   periodDateQuarterList: "",
   periodDate: `
-    cursor-pointer block w-full rounded-lg py-3 text-center text-sm font-medium text-gray-900 hover:rounded-lg hover:bg-gray-50
+    cursor-pointer block w-full rounded-lg py-3 text-center text-sm font-medium text-gray-900 hover:rounded-lg hover:bg-brand-50
     disabled:opacity-50 disabled:cursor-not-allowed
   `,
   periodDateActive: "bg-zinc-100",
@@ -58,7 +58,7 @@ export default /*tw*/ {
       description: "hidden",
     },
     input: {
-      base: "text-sm border-gray-100 px-4 py-2.5",
+      base: "text-sm border-brand-100 px-4 py-2.5",
       variants: {
         size: {
           md: "pt-2.5 pb-2.5",
@@ -72,7 +72,7 @@ export default /*tw*/ {
     dayViewWrapper: "p-0 w-full",
     monthViewWrapper: "p-0 w-full",
     yearViewWrapper: "p-0 w-full",
-    dayViewSwitchLabel: "font-medium text-gray-900",
+    dayViewSwitchLabel: "font-medium text-brand-900",
     nextPrevButton: "p-0 py-2 hover:bg-transparent",
     navigation: "px-0 w-full",
     nextIcon: {
@@ -88,12 +88,12 @@ export default /*tw*/ {
       },
     },
     day: "font-medium w-full h-10 text-sm mb-0.5",
-    currentDay: "text-white bg-gray-900 hover:bg-gray-900 hover:text-white",
+    currentDay: "text-white bg-brand-900 hover:bg-brand-900 hover:text-white",
     weekDay: "text-sm size-10",
     month: "font-medium",
-    selectedMonth: "bg-zinc-100 text-gray-900 hover:text-white",
+    selectedMonth: "bg-zinc-100 text-brand-900 hover:text-white",
     year: "font-medium",
-    selectedYear: "bg-zinc-100 text-gray-900 hover:text-white",
+    selectedYear: "bg-zinc-100 text-brand-900 hover:text-white",
   },
   i18n: {
     lastThirtyDays: "Last 30 days <span> and 2 next two weeks </span>",

package/ui.form-input/configs/default.config.js

@@ -10,8 +10,8 @@ export default /*tw*/ {
     base: `
       rounded-lg border border-solid border-gray-300 bg-white !opacity-100 relative flex
       transition duration-100 ease-in-out
-      hover:border-gray-400 hover:focus-within:border-gray-500
-      focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15]
+      hover:border-gray-400 hover:focus-within:border-brand-500
+      focus-within:border-brand-500 focus-within:ring-4 focus-within:ring-brand-600/[.15]
     `,
     variants: {
       disabled: {

package/ui.form-radio-card/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
   const { radio } = config.value;
 
   const cvaRadio = cva({
@@ -14,7 +14,7 @@ export function useAttrs(props) {
     compoundVariants: radio.compoundVariants,
   });
 
-  const radioClasses = computed(() => setColor(cvaRadio({ color: props.color }), props.color));
+  const radioClasses = computed(() => cvaRadio({ color: props.color }));
 
   const wrapperAttrsRaw = getAttrs("wrapper");
   const itemsAttrs = getAttrs("items");

package/ui.form-select/configs/default.config.js

@@ -4,8 +4,8 @@ export default /*tw*/ {
     base: `
       pb-2 pt-2 flex flex-row-reverse justify-between w-full min-h-full box-border relative
       rounded-lg border border-gray-300 bg-white
-      hover:border-gray-400 hover:transition hover:duration-100 hover:ease-in-out hover:focus-within:border-gray-500
-      focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15] focus-within:outline-none
+      hover:border-gray-400 hover:transition hover:duration-100 hover:ease-in-out hover:focus-within:border-brand-500
+      focus-within:border-brand-500 focus-within:ring-4 focus-within:ring-brand-600/[.15] focus-within:outline-none
     `,
     variants: {
       error: {

package/ui.form-textarea/configs/default.config.js

@@ -21,7 +21,7 @@ export default /*tw*/ {
         true: "cursor-not-allowed border-none focus-within:ring-0 bg-gray-100",
       },
       readonly: {
-        true: "ring-0 border-gray-300 focus-within:ring-0 focus-within:border-gray-300",
+        true: "ring-0 border-gray-300 focus-within:ring-0 focus-within:border-brand-300",
       },
       size: {
         sm: "pb-2 pr-4 pt-6",

package/ui.loader-rendering/composables/useLoaderRendering.js

@@ -0,0 +1,19 @@
+import { readonly, ref } from "vue";
+
+const isRenderingPage = ref(true);
+
+function setRenderingStarted() {
+  isRenderingPage.value = true;
+}
+
+function setRenderingFinished() {
+  isRenderingPage.value = false;
+}
+
+export default function useLoaderRendering() {
+  return {
+    isRenderingPage: readonly(isRenderingPage),
+    setRenderingStarted,
+    setRenderingFinished,
+  };
+}

package/ui.loader-rendering/index.vue

@@ -9,27 +9,26 @@
   </transition>
 </template>
 
-<script>
-import { mapState } from "vuex";
+<script setup>
+import { computed } from "vue";
 
-export default {
-  name: "ULoaderRendering",
+import useLoaderRendering from "./composables/useLoaderRendering";
 
-  props: {
-    loading: {
-      type: Boolean,
-      default: false,
-    },
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "ULoaderRendering", inheritAttrs: false });
+
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false,
   },
+});
 
-  computed: {
-    ...mapState("loader", ["isRenderingPage"]),
+const { isRenderingPage } = useLoaderRendering();
 
-    showLoader() {
-      return this.loading || this.isRenderingPage;
-    },
-  },
-};
+const showLoader = computed(() => {
+  return props.loading || isRenderingPage.value;
+});
 </script>
 
 <style lang="postcss" scoped>

package/ui.navigation-pagination/configs/default.config.js

@@ -5,8 +5,8 @@ export default /*tw*/ {
   navigationButton: "size-full rounded font-normal disabled:hover:bg-transparent",
   pageButton: "size-full rounded font-normal disabled:hover:bg-transparent",
   pageButtonActive: `
-    rounded !bg-gray-900/15
-    hover:!text-gray-900 !hover:bg-gray-900/15 disabled:hover:bg-gray-900/15
+    rounded !bg-brand-900/15
+    hover:!text-brand-900 !hover:bg-brand-900/15 disabled:hover:bg-brand-900/15
     focus:outline-none
   `,
   defaultVariants: {

package/ui.notify/Docs.mdx

@@ -0,0 +1,84 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source, Markdown } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />
+
+## Trigger notifications
+You can trigger notification using *notify* method. Use *notifySuccess, notifyWarning, notifyError* methods to trigger notification of specific type.
+
+<Source code={`
+import {
+    notify,
+    notifySuccess,
+    notifyWarning,
+    notifyError,
+} from "vueless";
+
+notify({
+    type: "success" // success, warning, error
+    title: "" // Some label
+    text: "" // Some text content
+    duration: 1000 // Duration in milliseconds
+    delayDuplicates: false // Delay notifications with same text
+});
+
+const durationInMilliseconds = 1000;
+
+notifySuccess("Some success text", durationInMilliseconds);
+notifyWarning("Some warning text", durationInMilliseconds);
+notifyError("Some error text", durationInMilliseconds);
+`} language="jsx" dark />
+
+## Clear active notifications
+Use *clearAllNotifications* method to clear all active notifications.
+
+<Source code={`
+import { clearAllNotifications, notifySuccess } from "vueless";
+
+const durationInMilliseconds = 1000;
+notifySuccess("Some success text", durationInMilliseconds);
+
+clearAllNotifications();
+`} language="jsx" dark />
+
+## Trigger notifications
+You can create delayed notification which you can trigger any time later.
+
+<Source code={`
+import { setDelayedNotify, getDelayedNotify } from "vueless";
+
+setDelayedNotify({
+    type: "success" // success, warning, error
+    title: "" // Some label
+    text: "" // Some text content
+    duration: 1000 // Duration in milliseconds
+    delayDuplicates: false // Delay notifications with same text
+});
+
+setTimeout(getDelayedNotify, 10_000);
+`} language="jsx" dark />
+
+## Place notification relatively to navigation elements
+Provide *positionClasses* key for UNotify config to take navigation elements offset into account. 
+By default, it will be looking for UNotifyPage and UNotifyAside classes.
+
+<Source code={`
+const notifyConfig = {
+    positionClasses: {
+        page: "UNotifyPage",
+        aside: "UNotifyAside",
+    },
+}
+`} language="jsx" dark />