@davincihealthcare/elty-design-system-vue 1.13.7 → 1.13.8

package/README.md

@@ -8,8 +8,13 @@ To get started with using these components in your Vue project, follow these sim
 
 ### Installation
 
+First install Tailwindcss following the steps at https://tailwindcss.com/docs/installation/framework-guides
+
+Then install required plugins and the design system package itself
+
 ```bash
-# using yarn
+# using yarn (or any other package manager)
+yarn add -D @tailwindcss/forms @tailwindcss/typography
 yarn add @davincihealthcare/elty-design-system-vue
 ```
 
@@ -23,8 +28,8 @@ module.exports = {
   ...
   content: [..., './node_modules/@davincihealthcare/elty-design-system-vue/**/*.{tsx,js}'],
   plugins: [
-    require('@tailwindcss/forms'), // ⚠️
-    require('@tailwindcss/typography'), // ⚠️
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
     require('@davincihealthcare/elty-design-system-vue').EltyTailwindPlugin
   ]
   ...
@@ -35,10 +40,7 @@ Note: content needs a new entry in the array, alongside other you may already ha
 
 Make sure to:
 
-- NOT to import the elty foundations which are already imported alongside this plugin.
-- import other required official tailwind plugins
-  - `@tailwindcss/forms`
-  - `@tailwindcss/typography`
+- do NOT to import the elty foundations which are already imported alongside this plugin.
 
 in main.ts file
 

package/dist/index.js

@@ -17598,8 +17598,7 @@ const aG = { class: "relative" }, oG = { class: "border-neutral-surface text-neu
       default: m0(() => [
         I("div", {
           id: b(S),
-          class: "relative flex items-center",
-          onClick: G
+          class: "relative flex items-center"
         }, [
           I("div", {
             class: j(["mr-1 flex items-center justify-center", {
@@ -17612,18 +17611,19 @@ const aG = { class: "relative" }, oG = { class: "border-neutral-surface text-neu
               checked: typeof t.modelValue == "boolean" && t.modelValue,
               indeterminate: t.modelValue === "indeterminate",
               type: "checkbox",
-              class: j(["cursor-pointer rounded border-2 focus:ring-0", {
+              class: j(["rounded border-2 focus:ring-0", {
                 "h-[15px] w-[15px]": t.size === "xxs",
                 "h-[18px] w-[18px]": t.size !== "xxs",
                 "border-neutral-surface": !b(l) && f.disabled,
                 "text-neutral-lighter": !b(l) && !f.disabled,
                 "text-neutral-inactive": b(l) && f.disabled,
                 "cursor-not-allowed": f.disabled,
-                "text-neutral-darker": !f.disabled,
+                "text-neutral-darker cursor-pointer": !f.disabled,
                 inputClass: t.inputClass
               }]),
               disabled: f.disabled,
-              "data-cy": f.label ? `${f.label.trim().replaceAll(" ", "")}-checkbox` : "checkbox"
+              "data-cy": f.label ? `${f.label.trim().replaceAll(" ", "")}-checkbox` : "checkbox",
+              onClick: G
             }, null, 10, dG)
           ], 2),
           f.label ? (E(), o("label", {