design-system-next 1.2.25 → 1.3.2

package/src/components/input/input.vue

@@ -3,7 +3,7 @@
     <label v-if="props.label" :for="id" :class="labelClasses">
       {{ props.label }}
     </label>
-    <div class="relative">
+    <div class="spr-relative">
       <div v-if="$slots.prefix" :class="prefixSlotClasses">
         <slot name="prefix" />
       </div>
@@ -18,8 +18,10 @@
       <div v-if="$slots.trailing" :class="trailingSlotClasses">
         <slot name="trailing" />
       </div>
-      <div v-if="$slots.icon" :class="iconSlotClasses">
-        <slot name="icon" />
+      <div v-if="$slots.icon || TYPE_HAS_TRAILING_ICONS.includes(props.type)" :class="iconSlotClasses">
+        <slot name="icon" >
+          <Icon  v-if="props.type === 'search'" icon="ph:magnifying-glass" />
+        </slot>
       </div>
     </div>
   </div>
@@ -28,8 +30,9 @@
 <script setup lang="ts">
 import { useSlots } from 'vue';
 
-import { inputPropTypes, inputEmitTypes } from './input';
+import { inputPropTypes, inputEmitTypes, TYPE_HAS_TRAILING_ICONS} from './input';
 import { useInput } from './use-input';
+import { Icon } from '@iconify/vue';
 
 const emit = defineEmits(inputEmitTypes);
 

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

@@ -1,8 +1,10 @@
 import { computed, toRefs } from 'vue';
-import type { InputPropTypes, InputEmitTypes } from './input';
-import classNames from 'classnames';
 import { useVModel } from '@vueuse/core';
+
+import classNames from 'classnames';
+
 import type { SetupContext } from 'vue';
+import type { InputPropTypes, InputEmitTypes } from './input';
 
 export const useInput = (
   props: InputPropTypes,
@@ -13,71 +15,71 @@ export const useInput = (
   const modelValue = useVModel(props, 'modelValue', emit);
 
   const wrapperClasses = computed(() => {
-    return classNames('flex flex-col gap-size-spacing-4xs');
+    return classNames('spr-flex spr-flex-col spr-gap-size-spacing-4xs');
   });
 
   const labelClasses = computed(() => {
-    return classNames('body-sm-regular text-color-strong block', {
-      'text-color-on-fill-disabled': disabled.value,
+    return classNames('spr-body-sm-regular spr-text-color-strong spr-block', {
+      'spr-text-color-on-fill-disabled': disabled.value,
     });
   });
 
   const inputClasses = 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',
-      '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',
+      'focus:!spr-border-kangkong-700 focus:spr-text-color-strong focus:!spr-border-[1.5px]',
+      'placeholder:spr-text-mushroom-300',
       {
-        'border border-solid border-mushroom-200': !error.value || !disabled.value,
-        '!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,
-        'pr-[5%]': slots.icon,
-        'pl-size-spacing-lg': slots.prefix,
-        'pr-[93%] sm:pr-[85%]': offsetSize.value === 'xs' && slots.trailing,
-        'pr-[90%] sm:pr-[80%]': offsetSize.value === 'sm' && slots.trailing,
-        'pr-[50%]': offsetSize.value === 'md' && slots.trailing,
-        'cursor-pointer': readonly.value,
-        'border-kangkong-700': active.value,
-        'text-color-strong': active.value,
-        'border-[1.5px]': active.value,
+        'spr-border spr-border-solid spr-border-mushroom-200': !error.value || !disabled.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-pr-[5%]': slots.icon,
+        'spr-pl-size-spacing-lg': slots.prefix,
+        'spr-pr-[93%] sm:spr-pr-[85%]': offsetSize.value === 'xs' && slots.trailing,
+        'spr-pr-[90%] sm:spr-pr-[80%]': offsetSize.value === 'sm' && slots.trailing,
+        'spr-pr-[50%]': offsetSize.value === 'md' && slots.trailing,
+        'spr-cursor-pointer': readonly.value,
+        'spr-border-kangkong-700': active.value,
+        'spr-text-color-strong': active.value,
+        'spr-border-[1.5px]': active.value,
       },
     );
   });
 
   const iconSlotClasses = computed(() => {
-    return classNames('absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 transform text-mushroom-300', {
-      '!text-tomato-600': error.value,
-    });
+    return classNames(
+      'spr-absolute spr-right-3 spr-top-1/2 spr-h-5 spr-w-5 -spr-translate-y-1/2 spr-transform spr-text-mushroom-300',
+      {
+        '!spr-text-tomato-600': error.value,
+      },
+    );
   });
 
   const prefixSlotClasses = computed(() => {
-    return classNames('absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 transform text-mushroom-300', {
-      '!text-tomato-600': error.value,
-    });
+    return classNames(
+      'spr-absolute spr-left-3 spr-top-1/2 spr-h-5 spr-w-5 -spr-translate-y-1/2 spr-transform spr-text-mushroom-300',
+      {
+        '!spr-text-tomato-600': error.value,
+      },
+    );
   });
 
   const trailingSlotClasses = computed(() => {
-    return classNames('absolute left-[55%] top-1/2 -translate-y-1/2 transform text-mushroom-300', {
-      '!text-tomato-600': error.value,
-      'left-[7%] sm:left-[16%]': offsetSize.value === 'xs' && slots.trailing,
-      'left-[12%] sm:left-[24%]': offsetSize.value === 'sm' && slots.trailing,
-      'left-[52%]': offsetSize.value === 'md' && slots.trailing,
-    });
+    return classNames(
+      'spr-absolute spr-left-[55%] spr-top-1/2 -spr-translate-y-1/2 spr-transform spr-text-mushroom-300',
+      {
+        '!spr-text-tomato-600': error.value,
+        'spr-left-[7%] sm:spr-left-[16%]': offsetSize.value === 'xs' && slots.trailing,
+        'spr-left-[12%] sm:spr-left-[24%]': offsetSize.value === 'sm' && slots.trailing,
+        'spr-left-[52%]': offsetSize.value === 'md' && slots.trailing,
+      },
+    );
   });
 
   const onInput = (event: Event) => {

package/src/components/lozenge/lozenge.vue

@@ -2,20 +2,20 @@
   <div v-if="visible" :class="lozengeClasses">
     <div
       :class="[
-        'label-xs-medium inline-flex items-center gap-size-spacing-6xs rounded-md border border-solid p-size-spacing-5xs text-xs uppercase',
+        'spr-label-xs-medium spr-inline-flex spr-items-center spr-gap-size-spacing-6xs spr-rounded-md spr-border spr-border-solid spr-p-size-spacing-5xs spr-text-xs spr-uppercase',
         lozengeToneClasses,
       ]"
     >
-      <div v-if="$slots.icon" class="flex h-3 w-3 items-center overflow-hidden">
+      <div v-if="$slots.icon" class="spr-flex spr-h-3 spr-w-3 spr-items-center spr-overflow-hidden">
         <slot name="icon" />
       </div>
 
-      <div v-if="$slots.avatar" class="flex items-center">
+      <div v-if="$slots.avatar" class="spr-flex spr-items-center">
         <slot name="avatar" />
       </div>
 
-      <div v-if="url && !$slots.avatar" class="h-4 w-4 overflow-hidden">
-        <img class="h-full w-full rounded-full object-cover" :src="url" alt="avatar" />
+      <div v-if="url && !$slots.avatar" class="spr-h-4 spr-w-4 spr-overflow-hidden">
+        <img class="spr-h-full spr-w-full spr-rounded-full spr-object-cover" :src="url" alt="avatar" />
       </div>
 
       <div>{{ label }}</div>
@@ -26,6 +26,8 @@
 <script setup lang="ts">
 import { lozengePropTypes } from './lozenge';
 import { useLozenge } from './use-lozenge';
+
 const props = defineProps(lozengePropTypes);
+
 const { lozengeClasses, lozengeToneClasses } = useLozenge(props);
 </script>

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

@@ -1,36 +1,44 @@
 import { computed, toRefs } from 'vue';
+
 import classNames from 'classnames';
+
 import type { LozengePropTypes } from './lozenge';
 
 export const useLozenge = (props: LozengePropTypes) => {
   const { tone, fill } = toRefs(props);
+
   const lozengeClasses = computed(() => {
-    return classNames({ 'flex flex-wrap rounded-md !border': !fill.value }, { 'flex flex-wrap': fill.value });
+    return classNames(
+      { 'spr-flex spr-flex-wrap spr-rounded-md !spr-border': !fill.value },
+      { 'spr-flex spr-flex-wrap': fill.value },
+    );
   });
 
   const lozengeToneClasses = computed(() => {
     return classNames({
-      'text-color-pending-base background-color-pending-weak !border-color-pending-base':
+      'spr-text-color-pending-base spr-background-color-pending-weak !spr-border-color-pending-base':
         tone.value === 'pending' && !fill.value,
-      'text-color-information-base background-color-information-weak !border-color-information-base':
+      'spr-text-color-information-base spr-background-color-information-weak !spr-border-color-information-base':
         tone.value === 'information' && !fill.value,
-      'text-color-success-base background-color-success-weak !border-color-success-base':
+      'spr-text-color-success-base spr-background-color-success-weak !spr-border-color-success-base':
         tone.value === 'success' && !fill.value,
-      'text-color-base background-color-base !border-color-base': tone.value === 'neutral' && !fill.value,
-      'text-color-danger-base background-color-danger-weak !border-color-danger-base':
+      'spr-text-color-base spr-background-color-base !spr-border-color-base': tone.value === 'neutral' && !fill.value,
+      'spr-text-color-danger-base spr-background-color-danger-weak !spr-border-color-danger-base':
         tone.value === 'danger' && !fill.value,
-      'text-color-caution-base background-color-caution-weak !border-color-caution-base':
+      'spr-text-color-caution-base spr-background-color-caution-weak !spr-border-color-caution-base':
         tone.value === 'caution' && !fill.value,
-      'text-color-strong !border-color-base background-color': tone.value === 'plain' && !fill.value,
+      'spr-text-color-strong !spr-border-color-base spr-background-color': tone.value === 'plain' && !fill.value,
 
-      'background-color-pending-base text-color-strong !border-0': tone.value === 'pending' && fill.value,
-      'background-color-information-base text-color-inverted-strong !border-0':
+      'spr-background-color-pending-base spr-text-color-strong !spr-border-0': tone.value === 'pending' && fill.value,
+      'spr-background-color-information-base spr-text-color-inverted-strong !spr-border-0':
         tone.value === 'information' && fill.value,
-      'background-color-success-base text-color-inverted-strong !border-0': tone.value === 'success' && fill.value,
-      'background-color-base text-color-strong !border-0': tone.value === 'neutral' && fill.value,
-      'background-color-danger-base text-color-inverted-strong !border-0': tone.value === 'danger' && fill.value,
-      'background-color-caution-base text-color-strong !border-0': tone.value === 'caution' && fill.value,
-      'text-color-strong background-color !border-0': tone.value === 'plain' && fill.value,
+      'spr-background-color-success-base spr-text-color-inverted-strong !spr-border-0':
+        tone.value === 'success' && fill.value,
+      'spr-background-color-base spr-text-color-strong !spr-border-0': tone.value === 'neutral' && fill.value,
+      'spr-background-color-danger-base spr-text-color-inverted-strong !spr-border-0':
+        tone.value === 'danger' && fill.value,
+      'spr-background-color-caution-base spr-text-color-strong !spr-border-0': tone.value === 'caution' && fill.value,
+      'spr-text-color-strong spr-background-color !spr-border-0': tone.value === 'plain' && fill.value,
     });
   });
 

package/src/components/modal/modal.vue

@@ -2,35 +2,35 @@
   <dialog
     ref="dialog"
     :class="[
-      'spr-modal border-color-weak background-color rounded-border-radius-xl border p-0 drop-shadow-[0_2px_8px_-2px_rgba(38,43,43,0.20)]',
+      'spr-modal spr-border-color-weak spr-background-color spr-rounded-border-radius-xl spr-border spr-p-0 spr-drop-shadow-[0_2px_8px_-2px_rgba(38,43,43,0.20)]',
       modalSizesClasses,
     ]"
   >
     <header
       v-if="hasHeader"
       :class="[
-        'border-color-weak background-color flex items-center justify-between gap-size-spacing-3xs border-x-0 border-b border-t-0 border-solid px-size-spacing-xs py-size-spacing-2xs',
-        'text-color-strong subheading-xs',
+        'spr-border-color-weak spr-background-color spr-flex spr-items-center spr-justify-between spr-gap-size-spacing-3xs spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid spr-px-size-spacing-xs spr-py-size-spacing-2xs',
+        'spr-text-color-strong spr-subheading-xs',
       ]"
     >
       <slot name="header" />
 
       <div v-if="!$slots.header">{{ title }}</div>
 
-      <span v-if="hasClose" class="text-color-weak subheading-xs" @click="closeModal">
+      <span v-if="hasClose" class="spr-text-color-weak spr-subheading-xs" @click="closeModal">
         <Icon icon="ph:x" />
       </span>
     </header>
 
-    <div class="body-sm-regular">
+    <div class="spr-body-sm-regular">
       <slot />
     </div>
 
     <footer
       v-if="hasFooter"
       :class="[
-        'border-color-weak background-color flex w-full items-center border-x-0 border-b-0 border-t border-solid px-size-spacing-xs py-size-spacing-2xs',
-        'text-color-strong subheading-xs',
+        'spr-border-color-weak spr-background-color spr-flex spr-w-full spr-items-center spr-border-x-0 spr-border-b-0 spr-border-t spr-border-solid spr-px-size-spacing-xs spr-py-size-spacing-2xs',
+        'spr-text-color-strong spr-subheading-xs',
       ]"
     >
       <slot name="footer" />
@@ -53,6 +53,6 @@ const { dialog, closeModal, modalSizesClasses } = useModal(props, emit);
 <style scoped>
 /* Tailwind CSS does not directly support the ::backdrop pseudo-element, need to add this */
 .spr-modal::backdrop {
-  @apply bg-overlay;
+  @apply spr-bg-overlay;
 }
 </style>

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

@@ -1,19 +1,20 @@
 import { ref, watch, computed, toRefs } from 'vue';
-import type { SetupContext } from 'vue';
-import type { ModalEmitTypes } from './modal';
-import type { ModalPropTypes } from './modal';
 
 import classNames from 'classnames';
+
+import type { SetupContext } from 'vue';
+import type { ModalEmitTypes, ModalPropTypes } from './modal';
+
 export const useModal = (props: ModalPropTypes, emit: SetupContext<ModalEmitTypes>['emit']) => {
   const dialog = ref<HTMLDialogElement | null>(null);
   const { size } = toRefs(props);
 
   const modalSizesClasses = computed(() => {
     return classNames({
-      'min-w-[360px] max-w-[800px] ': size.value === 'sm',
-      'min-w-[480px] max-w-[800px] ': size.value === 'md',
-      'w-[720px]': size.value === 'lg',
-      'w-[1280px]': size.value === 'xl',
+      'spr-min-w-[360px] spr-max-w-[800px] ': size.value === 'sm',
+      'spr-min-w-[480px] spr-max-w-[800px] ': size.value === 'md',
+      'spr-w-[720px]': size.value === 'lg',
+      'spr-w-[1280px]': size.value === 'xl',
     });
   });
 
@@ -44,7 +45,6 @@ export const useModal = (props: ModalPropTypes, emit: SetupContext<ModalEmitType
   return {
     dialog,
     modalSizesClasses,
-
     openModal,
     closeModal,
   };

package/src/components/radio/radio.vue

@@ -13,7 +13,7 @@
     ref="radioRef"
     :for="props.id"
     :disabled="props.disabled"
-    :class="['group m-0 inline-flex w-auto items-center space-x-2 p-0', radioLabelClasses]"
+    :class="['spr-group spr-m-0 spr-inline-flex spr-w-auto spr-items-center spr-space-x-2 spr-p-0', radioLabelClasses]"
   >
     <span :class="indicatorClasses"></span>
     <slot />

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

@@ -1,6 +1,8 @@
 import { computed, ref, ComputedRef } from 'vue';
 import { useElementHover } from '@vueuse/core';
+
 import classNames from 'classnames';
+
 import type { RadioPropTypes } from './radio';
 
 export const useRadioButton = (props: RadioPropTypes) => {
@@ -8,10 +10,10 @@ export const useRadioButton = (props: RadioPropTypes) => {
   const isHovered = useElementHover(radioRef);
 
   const radioClasses: ComputedRef<string> = computed(() => {
-    const baseClasses = 'sr-only peer inline-block';
+    const baseClasses = 'spr-sr-only spr-peer spr-inline-block';
 
     if (props.disabled) {
-      return classNames(baseClasses, 'cursor-not-allowed');
+      return classNames(baseClasses, 'spr-cursor-not-allowed');
     }
 
     return baseClasses;
@@ -19,17 +21,17 @@ export const useRadioButton = (props: RadioPropTypes) => {
 
   const indicatorClasses: ComputedRef<string> = computed(() => {
     const baseClasses = [
-      'inline-block w-4 h-4 rounded-full border-2 border-solid mr-2 shrink-0',
-      'transition duration-150 ease-in-out',
-      'group-active:scale-90',
+      'spr-inline-block spr-w-4 spr-h-4 spr-rounded-full spr-border-2 spr-border-solid spr-mr-2 spr-shrink-0',
+      'spr-transition spr-duration-150 spr-ease-in-out',
+      'group-active:spr-scale-90',
     ];
 
     if (props.disabled) {
       return classNames(
         baseClasses,
         props.modelValue === props.value
-          ? 'border-color-disabled background-color-disabled shadow-[inset_0px_0px_0px_2.5px_#fff] cursor-not-allowed'
-          : 'border-color-disabled background-color cursor-not-allowed',
+          ? 'spr-border-color-disabled spr-background-color-disabled spr-shadow-[inset_0px_0px_0px_2.5px_#fff] spr-cursor-not-allowed'
+          : 'spr-border-color-disabled spr-background-color spr-cursor-not-allowed',
       );
     }
 
@@ -37,27 +39,27 @@ export const useRadioButton = (props: RadioPropTypes) => {
       return classNames(
         baseClasses,
         props.modelValue === props.value
-          ? 'background-color-brand-hover border-2 border-color-brand-hover shadow-[inset_0px_0px_0px_2.5px_#fff] animate-shadow-grow'
-          : 'background-color-base border-2 border-color-supporting shadow-[inset_0px_0px_0px_2.5px_#fff]',
+          ? 'spr-background-color-brand-hover spr-border-2 spr-border-color-brand-hover spr-shadow-[inset_0px_0px_0px_2.5px_#fff] animate-shadow-grow'
+          : 'spr-background-color-base spr-border-2 spr-border-color-supporting spr-shadow-[inset_0px_0px_0px_2.5px_#fff]',
       );
     }
 
     if (props.modelValue === props.value) {
       return classNames(
         baseClasses,
-        'border-color-brand-base background-color-brand-base shadow-[inset_0px_0px_0px_2.5px_#fff] animate-shadow-grow',
+        'spr-border-color-brand-base spr-background-color-brand-base spr-shadow-[inset_0px_0px_0px_2.5px_#fff] animate-shadow-grow',
       );
     }
 
-    return classNames(baseClasses, 'border-color-supporting shadow-[inset_0px_0px_0px_2.5px_#fff]');
+    return classNames(baseClasses, 'spr-border-color-supporting spr-shadow-[inset_0px_0px_0px_2.5px_#fff]');
   });
 
   const radioLabelClasses: ComputedRef<string> = computed(() => {
     if (props.disabled) {
-      return 'text-color-disabled cursor-not-allowed';
+      return 'spr-text-color-disabled spr-cursor-not-allowed';
     }
 
-    return 'text-color-strong cursor-pointer inline-flex items-center p-0';
+    return 'spr-text-color-strong spr-cursor-pointer spr-inline-flex spr-items-center spr-p-0';
   });
 
   return {