design-system-next 1.2.25 → 1.3.2

package/src/components/tabs/tabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative flex">
+  <div class="spr-relative spr-flex">
     <div
       v-for="(tab, index) in list"
       :key="index"
@@ -8,28 +8,32 @@
         tabsClasses,
         {
           // Regular Tab
-          'rounded-l-md': !underlined && index === 0,
-          'rounded-r-md': !underlined && index === tabElements.length - 1,
+          'spr-rounded-l-md': !underlined && index === 0,
+          'spr-rounded-r-md': !underlined && index === tabElements.length - 1,
 
           // Regular Tab - Active
-          'border-color-success-base cursor-pointer !border !border-solid': !underlined && activeTab.index === index,
+          'spr-border-color-success-base spr-cursor-pointer !spr-border !spr-border-solid':
+            !underlined && activeTab.index === index,
 
           // Regular Tab - Inactive
-          'border-color-weak hover:background-color-hover cursor-pointer !border-x-[0.5px] !border-y !border-solid':
+          'spr-border-color-weak hover:spr-background-color-hover spr-cursor-pointer !spr-border-x-[0.5px] !spr-border-y !spr-border-solid':
             !underlined && activeTab.index !== index,
 
           // Regular Tab - Disabled
-          'background-color-disabled !cursor-not-allowed': !underlined && tab.disabled,
+          'spr-background-color-disabled !spr-cursor-not-allowed !spr-text-color-on-fill-disabled':
+            !underlined && tab.disabled,
 
           // Underlined Tab - Active
-          'cursor-pointer': underlined && activeTab.index === index,
+          'spr-cursor-pointer': underlined && activeTab.index === index,
 
           // Underlined Tab - Inactive
-          'border-color-base cursor-pointer !border-b !border-solid': underlined && activeTab.index !== index,
-          'hover:background-color-hover cursor-pointer': underlined && activeTab.index !== index && !tab.disabled,
+          'spr-border-color-base spr-cursor-pointer !spr-border-b !spr-border-solid':
+            underlined && activeTab.index !== index,
+          'hover:spr-background-color-hover spr-cursor-pointer':
+            underlined && activeTab.index !== index && !tab.disabled,
 
           // Underlined Tab - Disabled
-          'border-color-disabled text-color-on-fill-disabled background-color-disabled !cursor-not-allowed border-b':
+          'spr-border-color-disabled spr-text-color-on-fill-disabled !spr-cursor-not-allowed spr-border-b':
             underlined && tab.disabled,
         },
       ]"
@@ -39,25 +43,25 @@
       <div
         v-if="!underlined && activeTab.index === index"
         :class="[
-          'background-color-single-active tw-w-full absolute bottom-0 left-0 z-[5] block h-full w-full',
+          'spr-background-color-single-active spr-tw-w-full spr-absolute spr-bottom-0 spr-left-0 spr-z-[5] spr-block spr-h-full spr-w-full',
           {
-            'rounded-l-md': activeTab.index === 0,
-            'rounded-r-md': activeTab.index === tabElements.length - 1,
+            'spr-rounded-l-md': activeTab.index === 0,
+            'spr-rounded-r-md': activeTab.index === tabElements.length - 1,
           },
         ]"
       />
 
       <div
         :class="{
-          'relative z-[10] flex items-center gap-size-spacing-5xs leading-none': true,
-          'cursor-not-allowed': tab.disabled,
+          'spr-relative spr-z-[10] spr-flex spr-items-center spr-gap-size-spacing-5xs spr-leading-none': true,
+          'spr-cursor-not-allowed': tab.disabled,
         }"
       >
         <div v-if="!!tab.icon">
           <Icon
             :class="{
-              'body-sm-regular': true,
-              'text-color-brand-base': activeTab.index === index,
+              'spr-body-sm-regular': true,
+              'spr-text-color-brand-base': activeTab.index === index,
             }"
             :icon="activeTab.index === index && typeof tab.iconFill === 'string' ? tab.iconFill : tab.icon"
           />
@@ -72,8 +76,8 @@
     <div
       v-if="underlined"
       :class="[
-        'background-color-success-base absolute bottom-0 left-0 z-10 block h-0.5 rounded-full',
-        'transition-left duration-150 ease-in-out',
+        'spr-background-color-success-base spr-absolute spr-bottom-0 spr-left-0 spr-z-10 spr-block spr-h-0.5 spr-rounded-full',
+        'spr-transition-left spr-duration-150 spr-ease-in-out',
       ]"
       :style="{
         width: `${activeTab.width}px`,

package/src/components/tabs/use-tabs.ts

@@ -1,15 +1,16 @@
 import { ref, computed, onMounted, SetupContext } from 'vue';
-import type { TabsPropTypes, TabsEmitTypes } from './tabs';
 
 import classNames from 'classnames';
 
+import type { TabsPropTypes, TabsEmitTypes } from './tabs';
+
 export const useTabs = (props: TabsPropTypes, emit: SetupContext<TabsEmitTypes>['emit']) => {
   const tabsClasses = computed(() => {
     return classNames({
-      'relative px-size-spacing-xs py-size-spacing-3xs body-sm text-color-strong group': true,
-      'transition-left duration-150 ease-in-out': true,
+      'spr-relative spr-px-size-spacing-xs spr-py-size-spacing-3xs spr-body-sm spr-text-color-strong spr-group': true,
+      'spr-transition-left spr-duration-150 spr-ease-in-out': true,
       capitalize: !props.underlined,
-      'uppercase border-x-0 border-t-0': props.underlined,
+      'spr-uppercase spr-border-x-0 spr-border-t-0': props.underlined,
     });
   });
 

package/src/components/timePicker/timePicker.vue

@@ -4,7 +4,7 @@
       {{ label }}
     </label>
 
-    <div class="relative flex items-center">
+    <div class="spr-relative spr-flex spr-items-center">
       <input
         v-model="selectedValue"
         type="text"
@@ -31,13 +31,10 @@
           v-for="option in filteredOptions"
           :key="option"
           :class="[
-            'flex justify-between',
-            'body-xs-regular p-size-spacing-3xs',
-            'hover:background-color-hover',
-            'rounded-border-radius-md',
-            'cursor-pointer',
+            'spr-flex spr-justify-between spr-body-xs-regular spr-p-size-spacing-3xs spr-rounded-border-radius-md spr-cursor-pointer',
+            'hover:spr-background-color-hover',
             {
-              'background-color-single-active rounded-border-radius-md':
+              'spr-background-color-single-active spr-rounded-border-radius-md':
                 option.toUpperCase() === selectedValue?.toUpperCase(),
             },
           ]"
@@ -45,18 +42,22 @@
         >
           {{ option }}
 
-          <span v-if="option.toUpperCase() === selectedValue?.toUpperCase()" class="text-color-brand-base font-bold">
+          <span
+            v-if="option.toUpperCase() === selectedValue?.toUpperCase()"
+            class="spr-text-color-brand-base spr-font-bold"
+          >
             <Icon icon="ph:check" />
           </span>
         </div>
       </div>
-      <div v-else class="px-3 py-2 text-gray-500">No matching options found</div>
+      <div v-else class="spr-px-3 spr-py-2 spr-text-gray-500">No matching options found</div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
+
 import { timePickerPropTypes, timePickerEmitTypes } from './timePicker';
 import { useTimePicker } from './use-timePicker';
 

package/src/components/timePicker/use-timePicker.ts

@@ -1,10 +1,11 @@
 import { computed, ref, ComputedRef, toRefs } from 'vue';
-import dayjs from 'dayjs';
-import type { TimePickerPropTypes, TimePickerEmitTypes } from './timePicker';
-import type { SetupContext } from 'vue';
 import { useVModel } from '@vueuse/core';
 
 import classNames from 'classnames';
+import dayjs from 'dayjs';
+
+import type { TimePickerPropTypes, TimePickerEmitTypes } from './timePicker';
+import type { SetupContext } from 'vue';
 
 export const useTimePicker = (props: TimePickerPropTypes, emit: SetupContext<TimePickerEmitTypes>['emit']) => {
   const { error, disabled, format, interval, disableTyping, fullWidth } = toRefs(props);
@@ -14,68 +15,50 @@ export const useTimePicker = (props: TimePickerPropTypes, emit: SetupContext<Tim
 
   const timepickerClasses: ComputedRef<string> = computed(() => {
     return classNames(
-      'block',
-      'w-full',
-      'px-size-spacing-2xs',
-      'py-size-spacing-4xs',
-      'rounded-border-radius-md',
-      'placeholder:text-mushroom-300',
-      'text-color-strong',
-      'font-size-200',
-      'border border-solid border-mushroom-200',
-      'focus:!border-kangkong-700',
-      'focus:text-color-strong',
-      'focus:!border-[1.5px]',
-      'outline-none',
-      'ring-0',
+      'spr-block spr-w-full spr-px-size-spacing-2xs spr-py-size-spacing-4xs spr-rounded-border-radius-md spr-outline-none spr-ring-0',
+      'spr-text-color-strong spr-font-size-200',
+      'spr-border spr-border-solid spr-border-mushroom-200',
+      'placeholder:spr-text-mushroom-300',
+      'focus:!spr-border-kangkong-700 focus:spr-text-color-strong focus:!spr-border-[1.5px]',
       {
-        '!border-[1.5px]': error.value,
-        '!border-tomato-600': error.value,
-        'focus:!border-tomato-600': error.value,
-        '!border-white-100': disabled.value,
-        'background-color-disabled': disabled.value,
-        'cursor-not-allowed': disabled.value,
-        'text-color-on-fill-disabled': disabled.value,
-        'cursor-pointer': disableTyping.value,
+        '!spr-border-[1.5px]': error.value,
+        '!spr-border-tomato-600': error.value,
+        'focus:!spr-border-tomato-600': error.value,
+        '!spr-border-white-100': disabled.value,
+        'spr-background-color-disabled': disabled.value,
+        'spr-cursor-not-allowed': disabled.value,
+        'spr-text-color-on-fill-disabled': disabled.value,
+        'spr-cursor-pointer': disableTyping.value,
       },
     );
   });
 
   const optionClasses: ComputedRef<string> = computed(() => {
     return classNames(
-      'absolute',
-      'z-50 ',
-      'mt-1',
-      'max-h-[300px]',
-      'w-[240px]',
-      'overflow-y-auto',
-      'background-color ',
-      'text-mushroom-950',
-      'border border-solid',
-      'rounded-border-radius-md',
-      'border-color-weak',
-      'shadow-[0_2px_8px_-2px_rgba(38, 43, 43, 0.20)]',
-      'p-size-spacing-3xs',
+      'spr-absolute spr-z-50',
+      'spr-mt-1 spr-max-h-[300px] spr-w-[240px] spr-overflow-y-auto spr-background-color spr-rounded-border-radius-md spr-shadow-[0_2px_8px_-2px_rgba(38, 43, 43, 0.20)] spr-p-size-spacing-3xs',
+      'spr-text-mushroom-950',
+      'spr-border spr-border-solid spr-border-color-weak',
       {
-        'w-full': fullWidth.value,
+        'spr-w-full': fullWidth.value,
       },
     );
   });
 
   const iconClasses: ComputedRef<string> = computed(() => {
-    return classNames('absolute right-3 text-color-supporting', {
-      '!text-tomato-600': error.value,
+    return classNames('spr-absolute spr-right-3 spr-text-color-supporting', {
+      '!spr-text-tomato-600': error.value,
     });
   });
 
   const labelClasses: ComputedRef<string> = computed(() => {
-    return classNames('body-sm-regular text-color-strong block  mb-size-spacing-4xs ', {
-      'text-color-on-fill-disabled': disabled.value,
+    return classNames('spr-body-sm-regular spr-text-color-strong spr-block spr-mb-size-spacing-4xs', {
+      'spr-text-color-on-fill-disabled': disabled.value,
     });
   });
 
   const wrapperClasses: ComputedRef<string> = computed(() => {
-    return 'relative w-full';
+    return 'spr-relative spr-w-full';
   });
 
   const filterInput = (event: Event) => {
@@ -99,6 +82,7 @@ export const useTimePicker = (props: TimePickerPropTypes, emit: SetupContext<Tim
     const end = dayjs().endOf('day');
 
     let current = start;
+
     while (current.isBefore(end) || current.isSame(end)) {
       options.push(formatTime(current));
       current = current.add(interval.value, 'minute');
@@ -109,12 +93,15 @@ export const useTimePicker = (props: TimePickerPropTypes, emit: SetupContext<Tim
 
   const formatTime = (date: dayjs.Dayjs): string => {
     let hours = date.hour();
+
     const minutes = date.minute().toString().padStart(2, '0');
+
     if (props.format === '12') {
       const period = hours >= 12 ? 'PM' : 'AM';
       hours = hours % 12 || 12; // Convert 0 to 12 for 12-hour format
       return `${hours.toString().padStart(2, '0')}:${minutes} ${period}`;
     }
+
     return `${hours.toString().padStart(2, '0')}:${minutes}`;
   };
 
@@ -151,7 +138,6 @@ export const useTimePicker = (props: TimePickerPropTypes, emit: SetupContext<Tim
     selectedValue,
     isOpen,
     getPlaceHolder,
-
     filterInput,
     selectOption,
     handleClick,

package/src/components/tooltip/tooltip.vue

@@ -1,6 +1,6 @@
 <template>
   <Tooltip
-    class="w-fit"
+    class="spr-w-fit"
     :aria-id="props.hasMaxWidth ? 'tooltip-full-width-wrapper' : 'tooltip-wrapper'"
     :placement="placement"
   >

package/src/main.ts

@@ -1,8 +1,11 @@
 import { createApp } from 'vue';
 import App from '@/App.vue';
+
 import '@/assets/styles/tailwind.css';
+
 import FloatingVue from 'floating-vue';
 
 const app = createApp(App);
+
 app.use(FloatingVue);
 app.mount('#app');