@avakhula/ui 0.0.11 → 0.0.12

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",
   "source": "src/index.js",
+  "type": "module",
+  "private": false,
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -27,16 +29,16 @@
     "@babel/core": "^7.20.7",
     "@babel/preset-env": "^7.21.4",
     "@rushstack/eslint-patch": "^1.1.4",
-    "@storybook/addon-a11y": "^7.0.1",
-    "@storybook/addon-actions": "^7.0.1",
-    "@storybook/addon-docs": "^7.0.1",
-    "@storybook/addon-essentials": "^7.0.1",
-    "@storybook/addon-interactions": "^7.0.1",
-    "@storybook/addon-links": "^7.0.1",
-    "@storybook/addon-mdx-gfm": "^7.0.2",
-    "@storybook/testing-library": "^0.0.14-next.2",
-    "@storybook/vue3": "^7.0.1",
-    "@storybook/vue3-vite": "^7.0.2",
+    "@storybook/addon-a11y": "^7.0.9",
+    "@storybook/addon-actions": "^7.0.9",
+    "@storybook/addon-docs": "^7.0.9",
+    "@storybook/addon-essentials": "^7.0.9",
+    "@storybook/addon-interactions": "^7.0.9",
+    "@storybook/addon-links": "^7.0.9",
+    "@storybook/addon-mdx-gfm": "^7.0.9",
+    "@storybook/testing-library": "^0.1.0",
+    "@storybook/vue3": "^7.0.9",
+    "@storybook/vue3-vite": "^7.0.9",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitest/coverage-c8": "^0.28.4",
     "@vue/eslint-config-prettier": "^7.0.0",
@@ -54,7 +56,7 @@
     "react-dom": "^18.2.0",
     "sass": "^1.57.1",
     "sass-loader": "^13.2.0",
-    "storybook": "^7.0.2",
+    "storybook": "^7.0.9",
     "vite": "^4.0.0",
     "vitest": "^0.28.4",
     "vue-loader": "^16.8.3",

package/src/App.vue

@@ -1,37 +1,40 @@
 <template>
-  <button @click="onClick">
-    test
-  </button>
 
-  <ib-modal :active="active" @close="onClose" :class-list="'test'">
+  <button @click="active = !active">test</button>
+  <ib-modal :active="active" @close="onClose">
     <template #body>
       test
     </template>
   </ib-modal>
-
 </template>
 
 <script>
-import IbModal from "./components/Modal/Modal.vue"
+import IbModal from "./components/Modal/Modal.vue";
 
 export default {
-  components: {
-    IbModal,
-  },
+  components: { IbModal },
   data() {
     return {
-      active: true,
+      active: false
     };
   },
   methods: {
-    onClick() {
-      this.active = true;
-    },
-
     onClose() {
-      console.log("close");
-      this.active = false;
+      console.log('called OnClose')
+      this.active = !this.active
     }
   },
-};
-</script>
+  watch: {
+    active(val, oldVal) {
+      console.log("active has ben changet")
+    
+      if(val) {
+        setTimeout(() => {
+          this.active = false
+        }, 5000)
+      }
+    }
+  }
+}
+
+</script>

package/src/assets/scss/variables/colors.json

@@ -0,0 +1,418 @@
+[
+  {
+    "name": "$blue-900",
+    "value": "#0057C2"
+  },
+  {
+    "name": "$blue-800",
+    "value": "#0060D6"
+  },
+  {
+    "name": "$blue-700",
+    "value": "#0369E8"
+  },
+  {
+    "name": "$blue-600",
+    "value": "#0085FC"
+  },
+  {
+    "name": "$blue-500",
+    "value": "#0093FF"
+  },
+  {
+    "name": "$blue-400",
+    "value": "#23A3FF"
+  },
+  {
+    "name": "$blue-300",
+    "value": "#A6CEFF"
+  },
+  {
+    "name": "$blue-200",
+    "value": "#D9EAFF"
+  },
+  {
+    "name": "$blue-100",
+    "value": "#ECF4FF"
+  },
+  {
+    "name": "$blue-50",
+    "value": "#F2F5FE"
+  },
+  {
+    "name": "$gray-900",
+    "value": "#3B424B"
+  },
+  {
+    "name": "$gray-800",
+    "value": "#4A5561"
+  },
+  {
+    "name": "$gray-700",
+    "value": "#5A6877"
+  },
+  {
+    "name": "$gray-600",
+    "value": "#677788"
+  },
+  {
+    "name": "$gray-500",
+    "value": "#8296AB"
+  },
+  {
+    "name": "$gray-400",
+    "value": "#B3C2D3"
+  },
+  {
+    "name": "$gray-300",
+    "value": "#CFD5E7"
+  },
+  {
+    "name": "$gray-200",
+    "value": "#E7EAF3"
+  },
+  {
+    "name": "$gray-100",
+    "value": "#F2F3F5"
+  },
+  {
+    "name": "$gray-50",
+    "value": "#F8F9FC"
+  },
+  {
+    "name": "$white",
+    "value": "#FFFFFF"
+  },
+  {
+    "name": "$white-t20",
+    "value": "rgba(255, 255, 255, 0.20)"
+  },
+  {
+    "name": "$black",
+    "value": "#000000"
+  },
+  {
+    "name": "$black-t20",
+    "value": "rgba(0, 0, 0, 0.20)"
+  },
+  {
+    "name": "$neutral-900",
+    "value": "#1A1A1A"
+  },
+  {
+    "name": "$neutral-800",
+    "value": "#3A3A3A"
+  },
+  {
+    "name": "$neutral-700",
+    "value": "#595959"
+  },
+  {
+    "name": "$neutral-600",
+    "value": "#606060"
+  },
+  {
+    "name": "$neutral-500",
+    "value": "#B2B2B2"
+  },
+  {
+    "name": "$neutral-400",
+    "value": "#B4B4B4"
+  },
+  {
+    "name": "$neutral-300",
+    "value": "#D8D8D8"
+  },
+  {
+    "name": "$neutral-200",
+    "value": "#E8E8E8"
+  },
+  {
+    "name": "$neutral-100",
+    "value": "#F2F2F2"
+  },
+  {
+    "name": "$neutral-50",
+    "value": "#F9F9F9"
+  },
+  {
+    "name": "$red-900",
+    "value": "#B9091F"
+  },
+  {
+    "name": "$red-800",
+    "value": "#C8182E"
+  },
+  {
+    "name": "$red-700",
+    "value": "#D91A33"
+  },
+  {
+    "name": "$red-600",
+    "value": "#E72C3A"
+  },
+  {
+    "name": "$red-500",
+    "value": "#F6363B"
+  },
+  {
+    "name": "$red-400",
+    "value": "#F04B55"
+  },
+  {
+    "name": "$red-300",
+    "value": "#E66F76"
+  },
+  {
+    "name": "$red-200",
+    "value": "#EF989C"
+  },
+  {
+    "name": "$red-100",
+    "value": "#FFE9E9"
+  },
+  {
+    "name": "$red-50",
+    "value": "#FFF5F2"
+  },
+  {
+    "name": "$purple-900",
+    "value": "#2D00B9"
+  },
+  {
+    "name": "$purple-800",
+    "value": "#4A00C2"
+  },
+  {
+    "name": "$purple-700",
+    "value": "#5A0CC8"
+  },
+  {
+    "name": "$purple-600",
+    "value": "#6919D0"
+  },
+  {
+    "name": "$purple-500",
+    "value": "#7800D6"
+  },
+  {
+    "name": "$purple-400",
+    "value": "#990BF0"
+  },
+  {
+    "name": "$purple-300",
+    "value": "#A06CE4"
+  },
+  {
+    "name": "$purple-200",
+    "value": "#BB98EB"
+  },
+  {
+    "name": "$purple-100",
+    "value": "#D6C1F3"
+  },
+  {
+    "name": "$purple-50",
+    "value": "#F0E6FA"
+  },
+  {
+    "name": "$yellow-900",
+    "value": "#ED7A00"
+  },
+  {
+    "name": "$yellow-800",
+    "value": "#F0A30C"
+  },
+  {
+    "name": "$yellow-700",
+    "value": "#F1BC19"
+  },
+  {
+    "name": "$yellow-600",
+    "value": "#F2D323"
+  },
+  {
+    "name": "$yellow-500",
+    "value": "#F0E327"
+  },
+  {
+    "name": "$yellow-400",
+    "value": "#F3E84C"
+  },
+  {
+    "name": "$yellow-300",
+    "value": "#F6ED6E"
+  },
+  {
+    "name": "$yellow-200",
+    "value": "#F8F298"
+  },
+  {
+    "name": "$yellow-100",
+    "value": "#FBF7C1"
+  },
+  {
+    "name": "$yellow-50",
+    "value": "#FFFEEB"
+  },
+  {
+    "name": "$brown-900",
+    "value": "#582422"
+  },
+  {
+    "name": "$brown-800",
+    "value": "#69322C"
+  },
+  {
+    "name": "$brown-700",
+    "value": "#783F33"
+  },
+  {
+    "name": "$brown-600",
+    "value": "#894B3D"
+  },
+  {
+    "name": "$brown-500",
+    "value": "#965544"
+  },
+  {
+    "name": "$brown-400",
+    "value": "#C27C69"
+  },
+  {
+    "name": "$brown-300",
+    "value": "#BF8778"
+  },
+  {
+    "name": "$brown-200",
+    "value": "#DBA79A"
+  },
+  {
+    "name": "$brown-100",
+    "value": "#F5C7BB"
+  },
+  {
+    "name": "$brown-50",
+    "value": "#FFE5D6"
+  },
+  {
+    "name": "$green-900",
+    "value": "#006025"
+  },
+  {
+    "name": "$green-800",
+    "value": "#0D7F39"
+  },
+  {
+    "name": "$green-700",
+    "value": "#199044"
+  },
+  {
+    "name": "$green-600",
+    "value": "#25A24F"
+  },
+  {
+    "name": "$green-500",
+    "value": "#2EB159"
+  },
+  {
+    "name": "$green-400",
+    "value": "#53BD72"
+  },
+  {
+    "name": "$green-300",
+    "value": "#73C98A"
+  },
+  {
+    "name": "$green-200",
+    "value": "#9DD8AC"
+  },
+  {
+    "name": "$green-100",
+    "value": "#DCF9D2"
+  },
+  {
+    "name": "$green-50",
+    "value": "#F5FFF2"
+  },
+  {
+    "name": "$indigo-900",
+    "value": "#362D5E"
+  },
+  {
+    "name": "$indigo-800",
+    "value": "#443E71"
+  },
+  {
+    "name": "$indigo-700",
+    "value": "#4C477E"
+  },
+  {
+    "name": "$indigo-600",
+    "value": "#54518A"
+  },
+  {
+    "name": "$indigo-500",
+    "value": "#5B5993"
+  },
+  {
+    "name": "$indigo-400",
+    "value": "#7172A2"
+  },
+  {
+    "name": "$indigo-300",
+    "value": "#898CB2"
+  },
+  {
+    "name": "$indigo-200",
+    "value": "#A9ACC9"
+  },
+  {
+    "name": "$indigo-100",
+    "value": "#CACCDF"
+  },
+  {
+    "name": "$indigo-50",
+    "value": "#EAEBF2"
+  },
+  {
+    "name": "$navy-900",
+    "value": "#36497C"
+  },
+  {
+    "name": "$navy-800",
+    "value": "#45659C"
+  },
+  {
+    "name": "$navy-700",
+    "value": "#4D75AF"
+  },
+  {
+    "name": "$navy-600",
+    "value": "#4E79AD"
+  },
+  {
+    "name": "$navy-500",
+    "value": "#5786C1"
+  },
+  {
+    "name": "$navy-400",
+    "value": "#6EA3D5"
+  },
+  {
+    "name": "$navy-300",
+    "value": "#81B3DC"
+  },
+  {
+    "name": "$navy-200",
+    "value": "#A0C8E7"
+  },
+  {
+    "name": "$navy-100",
+    "value": "#C3DDF1"
+  },
+  {
+    "name": "$navy-50",
+    "value": "#E6F1F9"
+  }
+]

package/src/assets/scss/variables/shadows.json

@@ -0,0 +1,58 @@
+[
+  {
+    "name": "$ib-shadow-m1",
+    "value": "0px 0px 1px rgba(0, 0, 0, 0.2)"
+  },
+  {
+    "name": "$ib-shadow-m2",
+    "value": "0px 0px 1px rgba(0, 0, 0, 0.25)"
+  },
+  {
+    "name": "$ib-shadow-m3",
+    "value": "0px 0px 1px rgba(0, 0, 0, 0.15), 0px 1px 5px rgba(0, 0, 0, 0.1)"
+  },
+  {
+    "name": "$ib-shadow-1",
+    "value": "0px 0px 10px rgba(49, 63, 80, 0.05)"
+  },
+  {
+    "name": "$ib-shadow-2",
+    "value": "0px 4px 4px rgba(49, 63, 80, 0.1)"
+  },
+  {
+    "name": "$ib-shadow-3",
+    "value": "0px 3px 10px rgba(49, 63, 80, 0.14)"
+  },
+  {
+    "name": "$ib-shadow-4",
+    "value": "0px 1px 10px rgba(49, 63, 80, 0.25)"
+  },
+  {
+    "name": "$ib-shadow-5",
+    "value": "0px 5px 15px rgba(80, 80, 80, 0.15)"
+  },
+  {
+    "name": "$ib-shadow-6",
+    "value": "0px 7px 20px rgba(49, 63, 80, 0.15)"
+  },
+  {
+    "name": "$ib-shadow-7",
+    "value": "0px 15px 25px rgba(49, 63, 80, 0.05)"
+  },
+  {
+    "name": "$ib-shadow-r",
+    "value": "-2px 0px 7px rgba(80, 80, 80, 0.1)"
+  },
+  {
+    "name": "$ib-shadow-r1",
+    "value": "-4px 0px 14px rgba(80, 80, 80, 0.1)"
+  },
+  {
+    "name": "$ib-shadow-l",
+    "value": "2px 0px 7px rgba(80, 80, 80, 0.1)"
+  },
+  {
+    "name": "$ib-shadow-l1",
+    "value": "4px 0px 14px rgba(80, 80, 80, 0.1)"
+  }
+]

package/src/components/Alert/Alert.stories.js

@@ -25,45 +25,53 @@ const Template = (args) => ({
   },
   template: `
   <ib-alert v-bind="args">
-    Alert message
+    {{args.default}}
+
+    <template #link v-if="args.link">
+      <span v-html="args.link"></span>
+    </template>
   </ib-alert>`,
 });
 
 export const Default = Template.bind({});
-
+Default.args = {
+  default: "Default message",
+};
 const Type = (args) => ({
   components: { IbAlert },
   setup() {
     return { args };
   },
   template: `
-    <ib-alert style="margin-bottom: 5px;">Alert message</ib-alert>
-    <ib-alert style="margin-bottom: 5px;" type="warning">Warning message</ib-alert>
-    <ib-alert style="margin-bottom: 5px;" type="success">Success message</ib-alert>
-    <ib-alert type="info">Info message</ib-alert>
+    <ib-alert style="margin-bottom: 5px;">
+      {{args.default}}
+    </ib-alert>
+
+    <ib-alert style="margin-bottom: 5px;" type="warning">
+      {{args.default}}
+    </ib-alert>
+    
+    <ib-alert style="margin-bottom: 5px;" type="success">
+      {{args.default}}
+    </ib-alert>
+    
+    <ib-alert type="info">
+      {{args.default}}
+    </ib-alert>
   `,
 });
 
 export const Types = Type.bind({});
+Types.args = {
+  default: "Default message",
+};
 Type.parameters = { controls: { disable: true } };
 
-const LargeTemplate = (args) => ({
-  components: { IbAlert },
-  setup() {
-    return { args };
-  },
-  template: `
-    <ib-alert v-bind="args">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      <template #link>
-        <a href="#" class="ib-standalone-link">View Server</a>
-      </template>
-    </ib-alert>`,
-});
-
-export const LargeAlert = LargeTemplate.bind({});
+export const LargeAlert = Template.bind({});
 LargeAlert.args = {
   showCloseButton: true,
   showIcon: true,
   title: "It is Title",
+  default: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+  link: `<a class='ib-standalone-link'>View Server</a>`,
 };

package/src/components/Alert/readme.mdx

@@ -54,7 +54,6 @@ Limit action labels to one or two words. For a list of recommended action labels
 ### Default
 <Canvas of={AlertStories.Default} />
 
-
 ### All alert types
 <Canvas of={AlertStories.Types} />
 

package/src/components/Badge/readme.mdx

@@ -1,6 +1,7 @@
 # IbBadge
 
 import { Story, Canvas } from "@storybook/addon-docs";
+import * as BadgeStories from "./Badge.stories";
 
 The `IbBadge` component is a small component used to display a notification badge with a count or indicator on a parent component.
 ### Usage
@@ -28,11 +29,7 @@ The IbBadge component does not have any slots.
 The IbBadge component does not emit any events.
 
 ### Default
-<Canvas>
-    <Story id="badge--default"/>
-</Canvas>
+<Canvas of={BadgeStories.Default} />
 
 ### Large
-<Canvas>
-    <Story id="badge--large"/>
-</Canvas>
+<Canvas of={BadgeStories.Large} />

package/src/components/Button/Button.stories.js

@@ -24,7 +24,12 @@ const Template = (args) => ({
   setup() {
     return { args };
   },
-  template: '<ib-button v-bind="args">Button</ib-button>',
+  template: `<ib-button v-bind="args">
+    {{args.default}}
+    <template #icon v-if="args.icon">
+      <span style="display: contents" v-html="args.icon"></span>
+    </template>
+  </ib-button>`,
 });
 
 const IconTemplate = (args) => ({
@@ -74,40 +79,51 @@ const KindsTemplate = (args) => ({
 });
 
 export const Default = Template.bind({});
-Default.args = {};
+Default.args = {
+  default: "Default",
+  // icon: `<ion-icon name="add"></ion-icon>`,
+  icon: ``,
+};
 
 export const Secondary = Template.bind({});
 Secondary.args = {
+  default: "Secondary",
   kind: "secondary",
 };
 
 export const Tertiary = Template.bind({});
 Tertiary.args = {
+  default: "Tertiary",
   kind: "tertiary",
 };
 
 export const Ghost = Template.bind({});
 Ghost.args = {
+  default: "Ghost",
   kind: "ghost",
 };
 
 export const Danger = Template.bind({});
 Danger.args = {
+  default: "Danger",
   kind: "danger",
 };
 
 export const DangerGhost = Template.bind({});
 DangerGhost.args = {
+  default: "Danger-ghost",
   kind: "ghostDanger",
 };
 
 export const Block = Template.bind({});
 Block.args = {
+  default: "Block",
   block: true,
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
+  default: "Disabled",
   disabled: true,
 };
 

package/src/components/Button/readme.mdx

@@ -1,6 +1,7 @@
 # IbButton
 
 import { Story, Canvas } from "@storybook/addon-docs";
+import * as ButtonStories from "./Button.stories";
 
 Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.
 
@@ -43,76 +44,53 @@ Do not use buttons as navigational elements. Instead, use [links](?path=/story/l
 | click      | event      | Emitted when the button is clicked. |
 
 ### Default
-
-<Canvas>
-  <Story id="button--default" />
-</Canvas>
+<Canvas of={ButtonStories.Default} />
 
 ### With icon
 
 Example when we added the icon
-
-<Canvas>
-  <Story id="button--button-with-icon" />
-</Canvas>
+<Canvas of={ButtonStories.ButtonWithIcon} />
 
 ### Kind
 
 Each button variant has a particular function and its design signals that function to the user. It is therefore very important that the different variants are implemented consistently across products, so that they message the correct actions.
 
-<Canvas>
-  <Story id="button--kinds" />
-</Canvas>
+<Canvas of={ButtonStories.Kinds} />
 
 ### Description for all types
 
 #### Primary
 
 For the principal call to action on the page. Primary buttons should only appear once per screen (not including the application header, modal dialog, or side panel).
+<Canvas of={ButtonStories.Default} />
 
-<Canvas>
-  <Story id="button--default" />
-</Canvas>
-
-#### Seconsary
+#### Secondary
 
 For secondary actions on each page. Secondary buttons can only be used in conjunction with a primary button. As part of a pair, the secondary button’s function is to perform the negative action of the set, such as “Cancel” or “Back”. Do not use a secondary button in isolation and do not use a secondary button for a positive action.
 
-<Canvas>
-  <Story id="button--secondary" />
-</Canvas>
+<Canvas of={ButtonStories.Secondary} />
 
 #### Tertiary
 
 For less prominent, and sometimes independent, actions. Tertiary buttons can be used in isolation or paired with a primary button when there are multiple calls to action. Tertiary buttons can also be used for sub-tasks on a page where a primary button for the main and final action is present.
 
-<Canvas>
-  <Story id="button--tertiary" />
-</Canvas>
+<Canvas of={ButtonStories.Tertiary} />
 
 #### Ghost
 
 For the least pronounced actions; often used in conjunction with a primary button. In a situation such as a progress flow, a ghost button may be paired with a primary and secondary button set, where the primary button is for forward action, the secondary button is for “Back”, and the ghost button is for “Cancel”.
 
-<Canvas>
-  <Story id="button--ghost" />
-</Canvas>
+<Canvas of={ButtonStories.Ghost} />
 
 #### Danger
 
 For actions that could have destructive effects on the user’s data (for example, delete or remove). Danger button has two styles: primary and ghost.
-
-<Canvas>
-  <Story id="button--danger" />
-</Canvas>
+<Canvas of={ButtonStories.Danger} />
 
 #### Danger ghost
 
 For actions that could have destructive effects on the user’s data (for example, delete or remove). Danger button has two styles: primary and ghost.
 
-<Canvas>
-  <Story id="button--danger-ghost" />
-</Canvas>
-
+<Canvas of={ButtonStories.DangerGhost} />
 
 ## <a href="./docks/button.pdf" target="_blank">Read more</a>

package/src/components/ButtonGroup/readme.mdx

@@ -1,10 +1,8 @@
 # IbButtonGroup
 import { Story, Canvas } from "@storybook/addon-docs";
+import * as ButtonGroupStories from "./ButtonGroup.stories";
 
 Button Groups are an easy way to group a series of buttons together.
 
 ### Default
-
-<Canvas>
-  <Story id="button-group--default" />
-</Canvas>
+<Canvas of={ButtonGroupStories.Default} />

package/src/components/Dropdown/readme.mdx

@@ -1,12 +1,11 @@
 # IbDropdown
 
 import { Story, Canvas } from "@storybook/addon-docs";
+import * as DropdownStories from "./Dropdown.stories"
 
 ### Default
 
-<Canvas>
-  <Story id="dropdown--default" />
-</Canvas>
+<Canvas of={DropdownStories.Default} />
 
 ### Props
 

package/src/components/Modal/Modal.vue

@@ -12,7 +12,12 @@
   <Teleport to="body">
     <div class="modal" :class="classList" v-show="isActive" ref="modal">
       <div class="modal-body" v-outside="clickOutside">
-        <ib-icon-button class="modal-close-icon" kind="ghost" @click="close">
+        <ib-icon-button
+          v-if="showCloseButton"
+          class="modal-close-icon"
+          kind="ghost"
+          @click="close"
+        >
           <ib-icon name="close-outline" />
         </ib-icon-button>
 
@@ -41,6 +46,10 @@ import { ESC_KEY_CODE, TAB_KEY_CODE } from "../../constants/keyCodes";
 export default {
   name: "IbModal",
   directives: { Outside },
+  emits: {
+    open: null,
+    close: null,
+  },
   props: {
     active: {
       type: Boolean,
@@ -54,23 +63,17 @@ export default {
       type: Boolean,
       default: false,
     },
+    showCloseButton: {
+      type: Boolean,
+      default: true,
+    },
   },
   watch: {
     active(val) {
       this.isActive = val;
     },
-    isActive(val) {
-      if (val) {
-        this.open();
-      } else {
-        this.close();
-      }
-    },
   },
   mounted() {
-
-    console.log(this.classList, 'test')
-
     const focusableItems = this.$refs?.modal?.querySelectorAll(
       "[tabindex], a, button, input, select, textarea"
     );

package/src/components/Modal/readme.mdx

@@ -36,9 +36,10 @@ Modal container is a flexible component and its sizing depends on specific useca
 
 | Name            | type    | Default Value | Description                                        |
 | --------------- | ------- | ------------- | -------------------------------------------------- |
-| isActive        | Boolean | false         | Controls the visibility of the modal.              |
+| active          | Boolean | false         | Controls the visibility of the modal.              |
 | classList       | String  | ""            | Classes for modal.                                 |
 | stopPropagation | Boolean | false         | Disable modal close on click outside and press ESC |
+| showCloseButton | Boolean | True          | Whether is show close button                       |
 
 ### Events
 

package/src/components/TreeSelect/Select.vue

@@ -112,8 +112,18 @@
             :class="{ 'tree-select-list': true, 'has-hierarchy': hasHierarchy }"
           >
             <div
-              v-if="!requiredDependencyNotFilled && !countVisibleChildren"
+              v-if="
+                !requiredDependencyNotFilled &&
+                !countVisibleChildren &&
+                hasEmptyMessage
+              "
               class="tree-select-empty"
+            >
+              <slot name="emptyMessage"></slot>
+            </div>
+            <div
+              v-else-if="!requiredDependencyNotFilled && !countVisibleChildren"
+              class="tree-select-default-empty tree-select-empty"
             >
               {{ actualStrings.emptyTitle }}
             </div>
@@ -809,6 +819,9 @@ export default {
     hasTrigger() {
       return !!this.$slots.trigger;
     },
+    hasEmptyMessage() {
+      return !!this.$slots.emptyMessage;
+    },
     hasHierarchy() {
       return this.actualOptions.some((option) => {
         return option.children;

package/src/components/TreeSelect/scss/select.scss

@@ -160,7 +160,12 @@ $tree-search-border-color: $gray-600;
     }
   }
 
-  .tree-select-empty {
+  .tree-select-default-empty {
     text-align: center;
+    @include Ib-H4-medium;
+  }
+
+  .tree-select-empty {
+    padding: 15px;
   }
 }

package/src/main.js

@@ -1,12 +1,11 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import EventEmitter from "./EventEmmiter";
-import './assets/scss/style.scss'
+
 const app = createApp(App);
 app.config.globalProperties.$globalEvents = new EventEmitter();
 app.config.globalProperties.$emitEvent = function (event, ...args) {
   this.$emit.apply(this, arguments);
   this.$emit("all", { event, args });
 };
-
 app.mount("#app");

package/src/scripts/parseScssVariables.js

@@ -0,0 +1,80 @@
+import fs from "fs";
+import path from "path";
+
+const shadowFilePath = path.join("../assets/scss/variables/shadows.scss");
+const shadowOutputFile = path.join("../assets/scss/variables/shadows.json");
+const colorFilePath = path.join("../assets/scss/variables/colors.scss");
+const colorOutputFile = path.join("../assets/scss/variables/colors.json");
+
+parseFile(colorFilePath, colorOutputFile);
+parseFile(shadowFilePath, shadowOutputFile);
+
+function parseFile(filePath, outputFile) {
+  const variables = [];
+  const data = fs.readFileSync(filePath, { encoding: "utf-8" });
+
+  data.split("\n").forEach((line) => {
+    if (line.length) {
+      const a = line.split(": ");
+
+      variables.push({
+        name: a[0],
+        value: parseValue(a[1]),
+      });
+    }
+  });
+
+  fs.writeFileSync(outputFile, JSON.stringify(variables, null, 2));
+
+  function parseValue(value) {
+    const val = value.replace(";", "");
+    const match = value.match(/\$(\w+(-\w+)*)/);
+
+    if (match) {
+      const index = variables.findIndex((v) => v.name === `$${match[1]}`);
+      const value = val.replace(`$${match[1]}`, variables[index].value);
+
+      if (value.includes("rgba")) {
+        return convertRgbaToBrowserFormat(value);
+      }
+
+      return value;
+    }
+
+    return val;
+  }
+}
+
+function convertRgbaToBrowserFormat(rgbaValue) {
+  const components = rgbaValue.match(/rgba\(\s*([^,]+),\s*([^)]+)\)/);
+  if (!components) {
+    return null;
+  }
+
+  const color = components[1].trim();
+  const alpha = parseFloat(components[2].trim());
+  const normalizedAlpha = alpha.toFixed(2);
+
+  return `rgba(${parseColor(color)}, ${normalizedAlpha})`;
+}
+
+function parseColor(color) {
+  if (color.startsWith("#")) {
+    color = color.slice(1);
+  }
+
+  if (color.length === 3) {
+    return color
+      .split("")
+      .map((char) => char + char)
+      .join(",");
+  } else if (color.length === 6) {
+    const red = parseInt(color.slice(0, 2), 16);
+    const green = parseInt(color.slice(2, 4), 16);
+    const blue = parseInt(color.slice(4, 6), 16);
+
+    return `${red}, ${green}, ${blue}`;
+  } else {
+    return null;
+  }
+}

package/src/stories/variables/colors.stories.js

@@ -0,0 +1,25 @@
+import shadows from "../../assets/scss/variables/colors.json";
+
+export default {
+  title: "Variables/Colors",
+};
+
+const ColorsTemplate = (args) => ({
+  setup() {
+    return { args };
+  },
+  template: `
+    <div v-for="(color, index) in args.colors" :key="index" style="display: flex; padding: 10px">
+      <div style="width: 150px; height: 150px" :style="{ 'background-color': color.value }"></div>
+      <div style="padding: 10px">
+        <p>Token: {{color.name}}</p>
+        <p>Value: {{color.value}}</p>
+      </div>
+    </div>
+  `,
+});
+
+export const Colors = ColorsTemplate.bind({});
+Colors.args = {
+  colors: shadows,
+};

package/src/stories/variables/shadows.stories.js

@@ -0,0 +1,25 @@
+import shadows from "../../assets/scss/variables/shadows.json";
+
+export default {
+  title: "Variables/Shadows",
+};
+
+const ShadowsTemplate = (args) => ({
+  setup() {
+    return { args };
+  },
+  template: `
+    <div v-for="(shadow, index) in args.shadows" :key="index" style="display: flex; padding: 10px">
+      <div style="width: 150px; height: 150px" :style="{ 'box-shadow': shadow.value }"></div>
+      <div style="padding: 10px">
+        <p>Token: {{shadow.name}}</p>
+        <p>Value: {{shadow.value}}</p>
+      </div>
+    </div>
+  `,
+});
+
+export const Shadows = ShadowsTemplate.bind({});
+Shadows.args = {
+  shadows: shadows,
+};