@antify/ui 2.1.0 → 2.2.1

package/dist/components/table/__stories/AntTable.stories.js

@@ -3,14 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.Skeleton = exports.Loading = exports.Empty = exports.Docs = void 0;
+module.exports = exports.Skeleton = exports.MultipleCollapseStrategy = exports.Loading = exports.Empty = exports.Docs = exports.DefaultCollapseOpen = exports.Collapsible = void 0;
 var _AntTable = _interopRequireDefault(require("../AntTable.vue"));
+var _AntButton = _interopRequireDefault(require("../../buttons/AntButton.vue"));
+var _AntSelect = _interopRequireDefault(require("../../inputs/AntSelect.vue"));
+var _AntCheckboxGroup = _interopRequireDefault(require("../../inputs/AntCheckboxGroup.vue"));
 var _TableHeader = require("../__types/TableHeader.types");
 var _vue = require("vue");
 var _faker = require("@faker-js/faker");
 var _AntSwitch = _interopRequireDefault(require("../../inputs/AntSwitch.vue"));
+var _test = require("@storybook/test");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
+  components: {
+    AntSelect: _AntSelect.default,
+    AntCheckboxGroup: _AntCheckboxGroup.default
+  },
   title: "Components/Table",
   component: _AntTable.default,
   parameters: {
@@ -137,7 +145,7 @@ const meta = {
 };
 module.exports = meta;
 const testData = (0, _vue.ref)([]);
-for (let i = 0; i < 100; i++) {
+function getRandomEntry() {
   const randomName = _faker.faker.person.firstName() + " " + _faker.faker.person.lastName();
   const randomNumber = _faker.faker.number.int({
     min: 18,
@@ -145,38 +153,96 @@ for (let i = 0; i < 100; i++) {
   });
   const randomEmail = _faker.faker.internet.email();
   const randomBoolean = _faker.faker.datatype.boolean();
-  testData.value.push({
+  const randomPermissions = _faker.faker.helpers.arrayElements(["read", "write"], {
+    min: 0,
+    max: 2
+  });
+  return {
     name: randomName,
     age: randomNumber,
     email: randomEmail,
-    employed: randomBoolean
-  });
+    employed: randomBoolean,
+    permissions: randomPermissions
+  };
+}
+for (let i = 0; i < 100; i++) {
+  testData.value.push(getRandomEntry());
 }
 const Docs = exports.Docs = {
   render: args => ({
     components: {
       AntTable: _AntTable.default,
-      AntSwitch: _AntSwitch.default
+      AntSwitch: _AntSwitch.default,
+      AntCheckboxGroup: _AntCheckboxGroup.default
     },
     setup() {
       const selected = (0, _vue.ref)();
+      const checkboxes = [{
+        label: "Read",
+        value: "read"
+      }, {
+        label: "Write",
+        value: "write"
+      }];
       return {
         args,
-        selected
+        selected,
+        checkboxes
       };
     },
     template: `
       <div class="h-96 border border-dashed border-base-300">
         <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val">
           <template #cellContent="{element: entry, header}">
-            <div v-if="header.identifier === 'employeed'">
-              <AntSwitch v-model="entry.employeed"/>
+            <div v-if="header.identifier === 'employed'">
+              <AntSwitch v-model="entry.employed"/>
+            </div>
+
+            <div v-if="header.identifier === 'permissions'">
+              <AntCheckboxGroup v-model="entry.permissions" :checkboxes="checkboxes" direction="row"/>
             </div>
           </template>
         </AntTable>
       </div>
     `
   }),
+  play: async ({
+    step
+  }) => {
+    const firstRow = document.querySelectorAll('[data-e2e="table-row"]')[0];
+    const employedCell = firstRow.querySelector('[data-e2e="table-cell-employed"]');
+    const employedSwitch = employedCell?.querySelector('[data-e2e="switch"]')?.querySelector("button");
+    const permissionsCell = firstRow.querySelector('[data-e2e="table-cell-permissions"]');
+    const permissionCheckboxWithLabel = permissionsCell?.querySelector('[data-e2e="checkbox"]');
+    const permissionCheckbox = permissionCheckboxWithLabel?.querySelector('[type="checkbox"]');
+    const permissionLabel = permissionCheckboxWithLabel?.querySelector("label");
+    await step("Click on a table cell and expect the row to be selected", async () => {
+      await _test.userEvent.click(employedCell);
+      await (0, _test.waitFor)(() => (0, _test.expect)(firstRow).toHaveClass("bg-primary-200"), {
+        timeout: 600
+      });
+    });
+    await step("Click on employed switch and expect the value to toggle", async () => {
+      const initialAriaChecked = JSON.parse(employedSwitch?.getAttribute("aria-checked"));
+      await _test.userEvent.click(employedSwitch);
+      await (0, _test.waitFor)(() => {
+        const toggledAriaChecked = JSON.parse(employedSwitch?.getAttribute("aria-checked"));
+        (0, _test.expect)(toggledAriaChecked).toBe(!initialAriaChecked);
+      }, {
+        timeout: 600
+      });
+    });
+    await step("Click on one of the permissions and expect the value to toggle", async () => {
+      const initialAriaChecked = JSON.parse(permissionCheckbox?.getAttribute("aria-checked"));
+      await _test.userEvent.click(permissionLabel);
+      await (0, _test.waitFor)(() => {
+        const toggledAriaChecked = JSON.parse(permissionCheckbox?.getAttribute("aria-checked"));
+        (0, _test.expect)(toggledAriaChecked).toBe(!initialAriaChecked);
+      }, {
+        timeout: 600
+      });
+    });
+  },
   args: {
     headers: [{
       title: "Name",
@@ -196,8 +262,13 @@ const Docs = exports.Docs = {
       rowClassList: "",
       type: _TableHeader.AntTableRowTypes.text
     }, {
-      title: "Employeed",
-      identifier: "employeed",
+      title: "Employed",
+      identifier: "employed",
+      rowClassList: "",
+      type: _TableHeader.AntTableRowTypes.slot
+    }, {
+      title: "Permissions",
+      identifier: "permissions",
       rowClassList: "",
       type: _TableHeader.AntTableRowTypes.slot
     }],
@@ -222,8 +293,8 @@ const Empty = exports.Empty = {
         <div class="h-96 border border-dashed border-base-300">
           <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val">
             <template #cellContent="{element: entry, header}">
-              <div v-if="header.identifier === 'employeed'">
-                <AntSwitch v-model="entry.employeed"/>
+              <div v-if="header.identifier === 'employed'">
+                <AntSwitch v-model="entry.employed"/>
               </div>
             </template>
           </AntTable>
@@ -232,14 +303,13 @@ const Empty = exports.Empty = {
           <div class="h-96 border border-dashed border-base-300">
             <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val" empty-state-text="Custom Empty State Text">
               <template #cellContent="{element: entry, header}">
-                <div v-if="header.identifier === 'employeed'">
-                  <AntSwitch v-model="entry.employeed"/>
+                <div v-if="header.identifier === 'employed'">
+                  <AntSwitch v-model="entry.employed"/>
                 </div>
               </template>
             </AntTable>
           </div>
         </div>
-      </div>
     `
   }),
   args: {
@@ -334,4 +404,156 @@ const Loading = exports.Loading = {
     }],
     data: testData.value
   }
+};
+const Collapsible = exports.Collapsible = {
+  render: args => ({
+    components: {
+      AntTable: _AntTable.default,
+      AntSwitch: _AntSwitch.default,
+      AntCheckboxGroup: _AntCheckboxGroup.default
+    },
+    setup() {
+      const selected = (0, _vue.ref)();
+      const checkboxes = [{
+        label: "Read",
+        value: "read"
+      }, {
+        label: "Write",
+        value: "write"
+      }];
+      return {
+        args,
+        selected,
+        checkboxes
+      };
+    },
+    template: `
+      <div class="h-96 border border-dashed border-base-300">
+        <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val">
+          <template #cellContent="{element: entry, header}">
+            <div v-if="header.identifier === 'employed'">
+              <AntSwitch v-model="entry.employed"/>
+            </div>
+
+            <div v-if="header.identifier === 'permissions'">
+              <AntCheckboxGroup v-model="entry.permissions" :checkboxes="checkboxes" direction="row"/>
+            </div>
+          </template>
+
+          <template #afterRowContent="{element, rowIndex}">
+            <div class="p-4">
+              <pre>
+                {{element}}
+              </pre>
+            </div>
+          </template>
+        </AntTable>
+      </div>
+    `
+  }),
+  args: Docs.args
+};
+const MultipleCollapseStrategy = exports.MultipleCollapseStrategy = {
+  render: args => ({
+    components: {
+      AntTable: _AntTable.default,
+      AntSwitch: _AntSwitch.default,
+      AntCheckboxGroup: _AntCheckboxGroup.default
+    },
+    setup() {
+      const selected = (0, _vue.ref)();
+      const checkboxes = [{
+        label: "Read",
+        value: "read"
+      }, {
+        label: "Write",
+        value: "write"
+      }];
+      return {
+        args,
+        selected,
+        checkboxes
+      };
+    },
+    template: `
+      <div class="h-96 border border-dashed border-base-300">
+        <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val" collapse-strategy="multiple">
+          <template #cellContent="{element: entry, header}">
+            <div v-if="header.identifier === 'employed'">
+              <AntSwitch v-model="entry.employed"/>
+            </div>
+
+            <div v-if="header.identifier === 'permissions'">
+              <AntCheckboxGroup v-model="entry.permissions" :checkboxes="checkboxes" direction="row"/>
+            </div>
+          </template>
+
+          <template #afterRowContent="{element, rowIndex}">
+            <div class="p-4">
+              <pre>
+                {{JSON.stringify(element, null, 2)}}
+              </pre>
+            </div>
+          </template>
+        </AntTable>
+      </div>
+    `
+  }),
+  args: Docs.args
+};
+const DefaultCollapseOpen = exports.DefaultCollapseOpen = {
+  render: args => ({
+    components: {
+      AntTable: _AntTable.default,
+      AntSwitch: _AntSwitch.default,
+      AntCheckboxGroup: _AntCheckboxGroup.default,
+      AntButton: _AntButton.default
+    },
+    setup() {
+      const selected = (0, _vue.ref)();
+      const data = (0, _vue.ref)(args.data.splice(0, 5));
+      const checkboxes = [{
+        label: "Read",
+        value: "read"
+      }, {
+        label: "Write",
+        value: "write"
+      }];
+      function addRandomEntry() {
+        data.value = [...data.value, getRandomEntry()];
+      }
+      return {
+        args,
+        data,
+        selected,
+        checkboxes,
+        addRandomEntry
+      };
+    },
+    template: `
+      <div class="h-96 border border-dashed border-base-300 flex flex-col gap-2">
+        <AntButton state="primary" @click="addRandomEntry" filled>Add Random Entry</AntButton>
+        <AntTable v-bind="args" :data="data" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val" :rows-collapsed="false" collapse-strategy="multiple">
+          <template #cellContent="{element: entry, header}">
+            <div v-if="header.identifier === 'employed'">
+              <AntSwitch v-model="entry.employed"/>
+            </div>
+
+            <div v-if="header.identifier === 'permissions'">
+              <AntCheckboxGroup v-model="entry.permissions" :checkboxes="checkboxes" direction="row"/>
+            </div>
+          </template>
+
+          <template #afterRowContent="{element, rowIndex}">
+            <div class="p-4">
+              <pre>
+                {{JSON.stringify(element, null, 2)}}
+              </pre>
+            </div>
+          </template>
+        </AntTable>
+      </div>
+    `
+  }),
+  args: Docs.args
 };

package/dist/components/table/__stories/AntTable.stories.mjs

@@ -1,9 +1,14 @@
 import AntTable from "../AntTable.vue";
+import AntButton from "../../buttons/AntButton.vue";
+import AntSelect from "../../inputs/AntSelect.vue";
+import AntCheckboxGroup from "../../inputs/AntCheckboxGroup.vue";
 import { AntTableAlign, AntTableRowTypes, AntTableSize } from "../__types/TableHeader.types.mjs";
 import { ref } from "vue";
 import { faker } from "@faker-js/faker";
 import AntSwitch from "../../inputs/AntSwitch.vue";
+import { expect, userEvent, waitFor } from "@storybook/test";
 const meta = {
+  components: { AntSelect, AntCheckboxGroup },
   title: "Components/Table",
   component: AntTable,
   parameters: { controls: { sort: "requiredFirst" } },
@@ -90,37 +95,82 @@ const meta = {
 };
 export default meta;
 const testData = ref([]);
-for (let i = 0; i < 100; i++) {
+function getRandomEntry() {
   const randomName = faker.person.firstName() + " " + faker.person.lastName();
   const randomNumber = faker.number.int({ min: 18, max: 60 });
   const randomEmail = faker.internet.email();
   const randomBoolean = faker.datatype.boolean();
-  testData.value.push({
+  const randomPermissions = faker.helpers.arrayElements(["read", "write"], { min: 0, max: 2 });
+  return {
     name: randomName,
     age: randomNumber,
     email: randomEmail,
-    employed: randomBoolean
-  });
+    employed: randomBoolean,
+    permissions: randomPermissions
+  };
+}
+for (let i = 0; i < 100; i++) {
+  testData.value.push(getRandomEntry());
 }
 export const Docs = {
   render: (args) => ({
-    components: { AntTable, AntSwitch },
+    components: { AntTable, AntSwitch, AntCheckboxGroup },
     setup() {
       const selected = ref();
-      return { args, selected };
+      const checkboxes = [{
+        label: "Read",
+        value: "read"
+      }, {
+        label: "Write",
+        value: "write"
+      }];
+      return { args, selected, checkboxes };
     },
     template: `
       <div class="h-96 border border-dashed border-base-300">
         <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val">
           <template #cellContent="{element: entry, header}">
-            <div v-if="header.identifier === 'employeed'">
-              <AntSwitch v-model="entry.employeed"/>
+            <div v-if="header.identifier === 'employed'">
+              <AntSwitch v-model="entry.employed"/>
+            </div>
+
+            <div v-if="header.identifier === 'permissions'">
+              <AntCheckboxGroup v-model="entry.permissions" :checkboxes="checkboxes" direction="row"/>
             </div>
           </template>
         </AntTable>
       </div>
     `
   }),
+  play: async ({ step }) => {
+    const firstRow = document.querySelectorAll('[data-e2e="table-row"]')[0];
+    const employedCell = firstRow.querySelector('[data-e2e="table-cell-employed"]');
+    const employedSwitch = employedCell?.querySelector('[data-e2e="switch"]')?.querySelector("button");
+    const permissionsCell = firstRow.querySelector('[data-e2e="table-cell-permissions"]');
+    const permissionCheckboxWithLabel = permissionsCell?.querySelector('[data-e2e="checkbox"]');
+    const permissionCheckbox = permissionCheckboxWithLabel?.querySelector('[type="checkbox"]');
+    const permissionLabel = permissionCheckboxWithLabel?.querySelector("label");
+    await step("Click on a table cell and expect the row to be selected", async () => {
+      await userEvent.click(employedCell);
+      await waitFor(() => expect(firstRow).toHaveClass("bg-primary-200"), { timeout: 600 });
+    });
+    await step("Click on employed switch and expect the value to toggle", async () => {
+      const initialAriaChecked = JSON.parse(employedSwitch?.getAttribute("aria-checked"));
+      await userEvent.click(employedSwitch);
+      await waitFor(() => {
+        const toggledAriaChecked = JSON.parse(employedSwitch?.getAttribute("aria-checked"));
+        expect(toggledAriaChecked).toBe(!initialAriaChecked);
+      }, { timeout: 600 });
+    });
+    await step("Click on one of the permissions and expect the value to toggle", async () => {
+      const initialAriaChecked = JSON.parse(permissionCheckbox?.getAttribute("aria-checked"));
+      await userEvent.click(permissionLabel);
+      await waitFor(() => {
+        const toggledAriaChecked = JSON.parse(permissionCheckbox?.getAttribute("aria-checked"));
+        expect(toggledAriaChecked).toBe(!initialAriaChecked);
+      }, { timeout: 600 });
+    });
+  },
   args: {
     headers: [
       {
@@ -144,8 +194,14 @@ export const Docs = {
         type: AntTableRowTypes.text
       },
       {
-        title: "Employeed",
-        identifier: "employeed",
+        title: "Employed",
+        identifier: "employed",
+        rowClassList: "",
+        type: AntTableRowTypes.slot
+      },
+      {
+        title: "Permissions",
+        identifier: "permissions",
         rowClassList: "",
         type: AntTableRowTypes.slot
       }
@@ -165,8 +221,8 @@ export const Empty = {
         <div class="h-96 border border-dashed border-base-300">
           <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val">
             <template #cellContent="{element: entry, header}">
-              <div v-if="header.identifier === 'employeed'">
-                <AntSwitch v-model="entry.employeed"/>
+              <div v-if="header.identifier === 'employed'">
+                <AntSwitch v-model="entry.employed"/>
               </div>
             </template>
           </AntTable>
@@ -175,14 +231,13 @@ export const Empty = {
           <div class="h-96 border border-dashed border-base-300">
             <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val" empty-state-text="Custom Empty State Text">
               <template #cellContent="{element: entry, header}">
-                <div v-if="header.identifier === 'employeed'">
-                  <AntSwitch v-model="entry.employeed"/>
+                <div v-if="header.identifier === 'employed'">
+                  <AntSwitch v-model="entry.employed"/>
                 </div>
               </template>
             </AntTable>
           </div>
         </div>
-      </div>
     `
   }),
   args: {
@@ -293,3 +348,128 @@ export const Loading = {
     data: testData.value
   }
 };
+export const Collapsible = {
+  render: (args) => ({
+    components: { AntTable, AntSwitch, AntCheckboxGroup },
+    setup() {
+      const selected = ref();
+      const checkboxes = [{
+        label: "Read",
+        value: "read"
+      }, {
+        label: "Write",
+        value: "write"
+      }];
+      return { args, selected, checkboxes };
+    },
+    template: `
+      <div class="h-96 border border-dashed border-base-300">
+        <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val">
+          <template #cellContent="{element: entry, header}">
+            <div v-if="header.identifier === 'employed'">
+              <AntSwitch v-model="entry.employed"/>
+            </div>
+
+            <div v-if="header.identifier === 'permissions'">
+              <AntCheckboxGroup v-model="entry.permissions" :checkboxes="checkboxes" direction="row"/>
+            </div>
+          </template>
+
+          <template #afterRowContent="{element, rowIndex}">
+            <div class="p-4">
+              <pre>
+                {{element}}
+              </pre>
+            </div>
+          </template>
+        </AntTable>
+      </div>
+    `
+  }),
+  args: Docs.args
+};
+export const MultipleCollapseStrategy = {
+  render: (args) => ({
+    components: { AntTable, AntSwitch, AntCheckboxGroup },
+    setup() {
+      const selected = ref();
+      const checkboxes = [{
+        label: "Read",
+        value: "read"
+      }, {
+        label: "Write",
+        value: "write"
+      }];
+      return { args, selected, checkboxes };
+    },
+    template: `
+      <div class="h-96 border border-dashed border-base-300">
+        <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val" collapse-strategy="multiple">
+          <template #cellContent="{element: entry, header}">
+            <div v-if="header.identifier === 'employed'">
+              <AntSwitch v-model="entry.employed"/>
+            </div>
+
+            <div v-if="header.identifier === 'permissions'">
+              <AntCheckboxGroup v-model="entry.permissions" :checkboxes="checkboxes" direction="row"/>
+            </div>
+          </template>
+
+          <template #afterRowContent="{element, rowIndex}">
+            <div class="p-4">
+              <pre>
+                {{JSON.stringify(element, null, 2)}}
+              </pre>
+            </div>
+          </template>
+        </AntTable>
+      </div>
+    `
+  }),
+  args: Docs.args
+};
+export const DefaultCollapseOpen = {
+  render: (args) => ({
+    components: { AntTable, AntSwitch, AntCheckboxGroup, AntButton },
+    setup() {
+      const selected = ref();
+      const data = ref(args.data.splice(0, 5));
+      const checkboxes = [{
+        label: "Read",
+        value: "read"
+      }, {
+        label: "Write",
+        value: "write"
+      }];
+      function addRandomEntry() {
+        data.value = [...data.value, getRandomEntry()];
+      }
+      return { args, data, selected, checkboxes, addRandomEntry };
+    },
+    template: `
+      <div class="h-96 border border-dashed border-base-300 flex flex-col gap-2">
+        <AntButton state="primary" @click="addRandomEntry" filled>Add Random Entry</AntButton>
+        <AntTable v-bind="args" :data="data" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val" :rows-collapsed="false" collapse-strategy="multiple">
+          <template #cellContent="{element: entry, header}">
+            <div v-if="header.identifier === 'employed'">
+              <AntSwitch v-model="entry.employed"/>
+            </div>
+
+            <div v-if="header.identifier === 'permissions'">
+              <AntCheckboxGroup v-model="entry.permissions" :checkboxes="checkboxes" direction="row"/>
+            </div>
+          </template>
+
+          <template #afterRowContent="{element, rowIndex}">
+            <div class="p-4">
+              <pre>
+                {{JSON.stringify(element, null, 2)}}
+              </pre>
+            </div>
+          </template>
+        </AntTable>
+      </div>
+    `
+  }),
+  args: Docs.args
+};

package/dist/components/table/__types/AntCollapsibleTable.types.d.ts

@@ -0,0 +1,4 @@
+export declare enum CollapseStrategy {
+    single = "single",
+    multiple = "multiple"
+}

package/dist/components/table/__types/AntCollapsibleTable.types.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CollapseStrategy = void 0;
+var CollapseStrategy = exports.CollapseStrategy = /* @__PURE__ */(CollapseStrategy2 => {
+  CollapseStrategy2["single"] = "single";
+  CollapseStrategy2["multiple"] = "multiple";
+  return CollapseStrategy2;
+})(CollapseStrategy || {});

package/dist/components/table/__types/AntCollapsibleTable.types.mjs

@@ -0,0 +1,5 @@
+export var CollapseStrategy = /* @__PURE__ */ ((CollapseStrategy2) => {
+  CollapseStrategy2["single"] = "single";
+  CollapseStrategy2["multiple"] = "multiple";
+  return CollapseStrategy2;
+})(CollapseStrategy || {});

package/dist/tailwind.config.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("tailwindcss/types/config").Config;
+import { type Config } from 'tailwindcss';
+declare const _default: Config;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antify/ui",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "private": false,
   "type": "module",
   "exports": {
@@ -58,7 +58,8 @@
     "@vuepic/vue-datepicker": "^6.1.0",
     "@vueuse/components": "^10.7.2",
     "@vueuse/core": "^10.7.2",
-    "@vueuse/router": "^10.7.2"
+    "@vueuse/router": "^10.7.2",
+    "big.js": "^6.2.2"
   },
   "devDependencies": {
     "@antify/validate": "^1.14.0",
@@ -73,6 +74,7 @@
     "@storybook/vue3": "^8.2.9",
     "@storybook/vue3-vite": "^8.2.9",
     "@tsconfig/node20": "^20.1.4",
+    "@types/big.js": "^6.2.2",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^20.14.5",
     "@vitejs/plugin-vue": "^5.0.5",
@@ -84,7 +86,7 @@
     "standard-version": "^9.5.0",
     "storybook": "^8.2.9",
     "storybook-vue3-router": "^5.0.0",
-    "typescript": "~5.4.0",
+    "typescript": "~5.5.0",
     "unbuild": "^2.0.0",
     "vite": "^5.3.1",
     "vitest": "^1.6.0",