veloce-vue 0.40.0 → 0.45.0

package/components/Button.vue

@@ -1,80 +1,80 @@
 <script setup lang="ts">
-import { computed, type Component } from 'vue';
-import { Icon, Loading } from '../exports/icons';
-import { type Variant, type Severity, type Position, type Size, type FontWeight } from '../exports/types';
+import { computed, type Component } from "vue";
+import { Icon, Loading } from "../exports/icons";
+import { type Variant, type Severity, type Position, type Size, type FontWeight } from "../exports/types";
 
 const props = defineProps({
-  label: { type: String, default: '' },
+  label: { type: String, default: "" },
   loading: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false },
-  variant: { type: String as () => Variant, default: 'solid' },
-  severity: { type: String as () => Severity, default: 'primary' },
+  variant: { type: String as () => Variant, default: "solid" },
+  severity: { type: String as () => Severity, default: "primary" },
   icon: { type: Object as () => Component, default: () => null },
-  iconClass: { type: String, default: '' },
-  iconPosition: { type: String as () => Position, default: 'right' },
+  iconClass: { type: String, default: "" },
+  iconPosition: { type: String as () => Position, default: "right" },
   rounded: { type: Boolean, default: false },
-  size: { type: String as () => Size, default: 'md' },
-  fontWeight: { type: String as () => FontWeight, default: 'medium' as FontWeight },
+  size: { type: String as () => Size, default: "md" },
+  fontWeight: { type: String as () => FontWeight, default: "medium" as FontWeight },
   neumorphic: { type: Boolean, default: false },
   highlighted: { type: Boolean, default: false },
 });
 
 const severityClasses = {
   primary: {
-    ghost: 'bg-transparent text-primary hover:bg-primary/10 dark:hover:bg-neutral-800',
-    outlined: 'border-primary! text-primary hover:bg-primary hover:text-inverted disabled:hover:text-primary disabled:hover:bg-primary disabled:hover:text-inverted',
-    link: 'text-primary hover:underline',
-    soft: 'bg-primary-light text-primary hover:bg-primary-light/80 dark:bg-primary/10 dark:text-primary dark:hover:bg-primary/20',
-    solid: 'bg-primary text-inverted hover:bg-primary/70 disabled:hover:bg-primary dark:hover:bg-primary/80',
-    neutral: 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700',
+    ghost: "bg-transparent text-primary hover:bg-primary/10 dark:hover:bg-neutral-800",
+    outlined: "border-primary! text-primary hover:bg-primary hover:text-inverted disabled:hover:text-primary disabled:hover:bg-primary disabled:hover:text-inverted",
+    link: "text-primary hover:underline",
+    soft: "bg-primary-light text-primary hover:bg-primary-light/80 dark:bg-primary/10 dark:text-primary dark:hover:bg-primary/20",
+    solid: "bg-primary text-inverted hover:bg-primary/70 disabled:hover:bg-primary dark:hover:bg-primary/80",
+    neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700",
   },
   secondary: {
-    ghost: 'bg-transparent text-secondary hover:bg-secondary/10 dark:hover:bg-neutral-800',
-    outlined: 'border-secondary! text-secondary hover:bg-secondary hover:text-inverted disabled:hover:text-secondary disabled:hover:bg-secondary disabled:hover:text-inverted',
-    link: 'text-secondary hover:underline',
-    soft: 'bg-secondary-light text-secondary hover:bg-secondary-light/80 dark:bg-secondary/10 dark:text-secondary dark:hover:bg-secondary/20',
-    solid: 'bg-secondary text-inverted hover:bg-secondary/70 disabled:hover:bg-secondary dark:hover:bg-secondary/80',
-    neutral: 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700',
+    ghost: "bg-transparent text-secondary hover:bg-secondary/10 dark:hover:bg-neutral-800",
+    outlined: "border-secondary! text-secondary hover:bg-secondary hover:text-inverted disabled:hover:text-secondary disabled:hover:bg-secondary disabled:hover:text-inverted",
+    link: "text-secondary hover:underline",
+    soft: "bg-secondary-light text-secondary hover:bg-secondary-light/80 dark:bg-secondary/10 dark:text-secondary dark:hover:bg-secondary/20",
+    solid: "bg-secondary text-inverted hover:bg-secondary/70 disabled:hover:bg-secondary dark:hover:bg-secondary/80",
+    neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700",
   },
   success: {
-    ghost: 'bg-transparent text-success hover:bg-success/10 dark:hover:bg-neutral-800',
-    outlined: 'border-success! text-success hover:bg-success hover:text-inverted disabled:hover:text-success disabled:hover:bg-success disabled:hover:text-inverted',
-    link: 'text-success hover:underline',
-    soft: 'bg-success-light text-success hover:bg-success-light/80 dark:bg-success/10 dark:text-success dark:hover:bg-success/20',
-    solid: 'bg-success text-inverted hover:bg-success/70 disabled:hover:bg-success dark:hover:bg-success/80',
-    neutral: 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700',
+    ghost: "bg-transparent text-success hover:bg-success/10 dark:hover:bg-neutral-800",
+    outlined: "border-success! text-success hover:bg-success hover:text-inverted disabled:hover:text-success disabled:hover:bg-success disabled:hover:text-inverted",
+    link: "text-success hover:underline",
+    soft: "bg-success-light text-success hover:bg-success-light/80 dark:bg-success/10 dark:text-success dark:hover:bg-success/20",
+    solid: "bg-success text-inverted hover:bg-success/70 disabled:hover:bg-success dark:hover:bg-success/80",
+    neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700",
   },
   info: {
-    ghost: 'bg-transparent text-info hover:bg-info/10 dark:hover:bg-neutral-800',
-    outlined: 'border-info! text-info hover:bg-info hover:text-inverted disabled:hover:text-info disabled:hover:bg-info disabled:hover:text-inverted',
-    link: 'text-info hover:underline',
-    soft: 'bg-info-light text-info hover:bg-info-light/80 dark:bg-info/10 dark:text-info dark:hover:bg-info/20',
-    solid: 'bg-info text-inverted hover:bg-info/70 disabled:hover:bg-info dark:hover:bg-info/80',
-    neutral: 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700',
+    ghost: "bg-transparent text-info hover:bg-info/10 dark:hover:bg-neutral-800",
+    outlined: "border-info! text-info hover:bg-info hover:text-inverted disabled:hover:text-info disabled:hover:bg-info disabled:hover:text-inverted",
+    link: "text-info hover:underline",
+    soft: "bg-info-light text-info hover:bg-info-light/80 dark:bg-info/10 dark:text-info dark:hover:bg-info/20",
+    solid: "bg-info text-inverted hover:bg-info/70 disabled:hover:bg-info dark:hover:bg-info/80",
+    neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700",
   },
   warning: {
-    ghost: 'bg-transparent text-warning hover:bg-warning/10 dark:hover:bg-neutral-800',
-    outlined: 'border-warning! text-warning hover:bg-warning hover:text-inverted disabled:hover:text-warning disabled:hover:bg-warning disabled:hover:text-inverted',
-    link: 'text-warning hover:underline',
-    soft: 'bg-warning-light text-warning hover:bg-warning-light/80 dark:bg-warning/10 dark:text-warning dark:hover:bg-warning/20',
-    solid: 'bg-warning text-inverted hover:bg-warning/70 disabled:hover:bg-warning dark:hover:bg-warning/80',
-    neutral: 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700',
+    ghost: "bg-transparent text-warning hover:bg-warning/10 dark:hover:bg-neutral-800",
+    outlined: "border-warning! text-warning hover:bg-warning hover:text-inverted disabled:hover:text-warning disabled:hover:bg-warning disabled:hover:text-inverted",
+    link: "text-warning hover:underline",
+    soft: "bg-warning-light text-warning hover:bg-warning-light/80 dark:bg-warning/10 dark:text-warning dark:hover:bg-warning/20",
+    solid: "bg-warning text-inverted hover:bg-warning/70 disabled:hover:bg-warning dark:hover:bg-warning/80",
+    neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700",
   },
   error: {
-    ghost: 'bg-transparent text-error hover:bg-error/10 dark:hover:bg-neutral-800',
-    outlined: 'border-error! text-error hover:bg-error hover:text-inverted disabled:hover:text-error disabled:hover:bg-error disabled:hover:text-inverted',
-    link: 'text-error hover:underline',
-    soft: 'bg-error-light text-error hover:bg-error-light/80 dark:bg-error/10 dark:text-error dark:hover:bg-error/20',
-    solid: 'bg-error text-inverted hover:bg-error/70 disabled:hover:bg-error dark:hover:bg-error/80',
-    neutral: 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700',
+    ghost: "bg-transparent text-error hover:bg-error/10 dark:hover:bg-neutral-800",
+    outlined: "border-error! text-error hover:bg-error hover:text-inverted disabled:hover:text-error disabled:hover:bg-error disabled:hover:text-inverted",
+    link: "text-error hover:underline",
+    soft: "bg-error-light text-error hover:bg-error-light/80 dark:bg-error/10 dark:text-error dark:hover:bg-error/20",
+    solid: "bg-error text-inverted hover:bg-error/70 disabled:hover:bg-error dark:hover:bg-error/80",
+    neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700",
   },
   neutral: {
-    ghost: 'bg-transparent text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800',
-    outlined: 'border-neutral-300! dark:border-neutral-700! text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800 disabled:hover:text-neutral-700 disabled:hover:text-inverted',
-    link: 'text-neutral-700 dark:text-neutral-300 hover:underline',
-    soft: 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700',
-    solid: 'bg-neutral-100 dark:bg-neutral-800 text-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-100/80',
-    neutral: 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700',
+    ghost: "bg-transparent text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800",
+    outlined: "border-neutral-300! dark:border-neutral-700! text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800 disabled:hover:text-neutral-700 disabled:hover:text-inverted",
+    link: "text-neutral-700 dark:text-neutral-300 hover:underline",
+    soft: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700",
+    solid: "bg-neutral-100 dark:bg-neutral-800 text-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-100/80",
+    neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700",
   },
 };
 
@@ -84,7 +84,20 @@ const classes = computed(() => {
 </script>
 
 <template>
-  <button type="button" :disabled="props.disabled || props.loading" :class="[classes, { 'rounded-full': props.rounded }, { 'justify-center': !props.icon }, { 'px-2 py-1 text-sm': props.size === 'sm', 'px-2.5 py-1.5 text-sm': props.size === 'md', 'px-3 py-2 text-base': props.size === 'lg', 'px-3.5 py-2.5 text-lg': props.size === 'xl' }, { 'font-normal': props.fontWeight === 'normal', 'font-medium': props.fontWeight === 'medium', 'font-semibold': props.fontWeight === 'semibold', 'font-bold': props.fontWeight === 'bold' }, { 'veloce-button-neumorphic': props.neumorphic }, { 'bg-highlight': props.highlighted }]" class="flex cursor-pointer items-center justify-center gap-2 rounded border border-transparent transition-all duration-200 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+  <button
+    type="button"
+    :disabled="props.disabled || props.loading"
+    :class="[
+      classes,
+      { 'rounded-full': props.rounded },
+      { 'justify-center': !props.icon },
+      { 'px-2 py-1 text-sm': props.size === 'sm', 'px-2.5 py-1.5 text-sm': props.size === 'md', 'px-3 py-2 text-base': props.size === 'lg', 'px-3.5 py-2.5 text-lg': props.size === 'xl' },
+      { 'font-normal': props.fontWeight === 'normal', 'font-medium': props.fontWeight === 'medium', 'font-semibold': props.fontWeight === 'semibold', 'font-bold': props.fontWeight === 'bold' },
+      { 'veloce-button-neumorphic': props.neumorphic },
+      { 'bg-highlight': props.highlighted },
+    ]"
+    class="flex cursor-pointer items-center justify-center gap-2 rounded border border-transparent transition-all duration-200 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
+  >
     <slot v-if="$slots.default" />
     <template v-else>
       <span v-if="props.label" :class="{ 'order-2': props.iconPosition === 'left' }"> {{ props.label }} </span>
@@ -93,12 +106,12 @@ const classes = computed(() => {
     </template>
   </button>
 </template>
-<style lang="scss">
+<style>
 .veloce-button-neumorphic {
   position: relative;
 
   &::after {
-    content: ' ';
+    content: " ";
     position: absolute;
     inset: -1px;
     border-top: inset;

package/components/Checkbox.vue

@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import { Icon, Check } from '../exports/icons';
-import { computed, type Component } from 'vue';
+import { Icon, Check } from "../exports/icons";
+import { computed, type Component } from "vue";
 
-type CheckboxSize = 'sm' | 'md' | 'lg';
-type CheckboxVariant = 'primary' | 'secondary' | 'success' | 'info' | 'error' | 'warning';
+type CheckboxSize = "sm" | "md" | "lg";
+type CheckboxVariant = "primary" | "secondary" | "success" | "info" | "error" | "warning";
 
 const props = defineProps({
-  label: { type: String, default: '' },
-  labelClass: { type: String, default: '' },
-  checkboxClass: { type: String, default: '' },
-  size: { type: String as () => CheckboxSize, default: 'md' },
-  variant: { type: String as () => CheckboxVariant, default: 'primary' },
+  label: { type: String, default: "" },
+  labelClass: { type: String, default: "" },
+  checkboxClass: { type: String, default: "" },
+  size: { type: String as () => CheckboxSize, default: "md" },
+  variant: { type: String as () => CheckboxVariant, default: "primary" },
   icon: { type: Object as () => Component, default: () => Check },
+  iconClass: { type: String, default: "" },
   disabled: { type: Boolean, default: false },
 });
 
@@ -20,22 +21,22 @@ const model = defineModel<boolean>({ required: true });
 const getSizeClasses = computed(() => {
   const sizes = {
     sm: {
-      checkbox: 'size-4',
-      icon: 'size-3',
-      gap: 'gap-1.5',
-      text: 'text-sm',
+      checkbox: "size-4",
+      icon: "size-3",
+      gap: "gap-1.5",
+      text: "text-sm",
     },
     md: {
-      checkbox: 'size-5',
-      icon: 'size-5',
-      gap: 'gap-2',
-      text: 'text-base',
+      checkbox: "size-5",
+      icon: "size-5",
+      gap: "gap-2",
+      text: "text-base",
     },
     lg: {
-      checkbox: 'size-6',
-      icon: 'size-6',
-      gap: 'gap-2.5',
-      text: 'text-lg',
+      checkbox: "size-6",
+      icon: "size-6",
+      gap: "gap-2.5",
+      text: "text-lg",
     },
   };
   return sizes[props.size];
@@ -44,40 +45,40 @@ const getSizeClasses = computed(() => {
 const getVariantClasses = computed(() => {
   const variants = {
     primary: {
-      bg: 'bg-primary',
-      border: 'border-primary',
-      text: 'text-white',
-      hover: 'hover:border-primary/70',
+      bg: "bg-primary",
+      border: "border-primary",
+      text: "text-white",
+      hover: "hover:border-primary/70",
     },
     secondary: {
-      bg: 'bg-secondary',
-      border: 'border-secondary',
-      text: 'text-white',
-      hover: 'hover:border-secondary/70',
+      bg: "bg-secondary",
+      border: "border-secondary",
+      text: "text-white",
+      hover: "hover:border-secondary/70",
     },
     success: {
-      bg: 'bg-success',
-      border: 'border-success',
-      text: 'text-white',
-      hover: 'hover:border-success/70',
+      bg: "bg-success",
+      border: "border-success",
+      text: "text-white",
+      hover: "hover:border-success/70",
     },
     info: {
-      bg: 'bg-info',
-      border: 'border-info',
-      text: 'text-white',
-      hover: 'hover:border-info/70',
+      bg: "bg-info",
+      border: "border-info",
+      text: "text-white",
+      hover: "hover:border-info/70",
     },
     warning: {
-      bg: 'bg-warning',
-      border: 'border-warning',
-      text: 'text-white',
-      hover: 'hover:border-warning/70',
+      bg: "bg-warning",
+      border: "border-warning",
+      text: "text-white",
+      hover: "hover:border-warning/70",
     },
     error: {
-      bg: 'bg-error',
-      border: 'border-error',
-      text: 'text-white',
-      hover: 'hover:border-error/70',
+      bg: "bg-error",
+      border: "border-error",
+      text: "text-white",
+      hover: "hover:border-error/70",
     },
   };
   return variants[props.variant];
@@ -85,9 +86,12 @@ const getVariantClasses = computed(() => {
 </script>
 
 <template>
-  <div :class="[getSizeClasses.gap, props.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer']" class="flex w-fit select-none items-center" @click="!props.disabled ? (model = !model) : null">
-    <div :class="[getSizeClasses.checkbox, model ? [getVariantClasses.bg, getVariantClasses.border] : [getVariantClasses.border, props.disabled ? 'opacity-50' : getVariantClasses.hover], checkboxClass]" class="m-0 flex items-center justify-center rounded-sm border-2 duration-200">
-      <Icon v-if="model" :icon="icon" :class="`${getSizeClasses.icon} ${getVariantClasses.text}`" />
+  <div :class="[getSizeClasses.gap, props.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer']" class="flex w-fit items-center select-none" @click="!props.disabled ? (model = !model) : null">
+    <div
+      :class="[getSizeClasses.checkbox, model ? [getVariantClasses.bg, getVariantClasses.border] : [getVariantClasses.border, props.disabled ? 'opacity-50' : getVariantClasses.hover], checkboxClass]"
+      class="m-0 flex items-center justify-center rounded-sm border-2 duration-200"
+    >
+      <Icon v-if="model" :icon="icon" :class="`${getSizeClasses.icon} ${getVariantClasses.text} ${iconClass}`" />
     </div>
     <div :class="[labelClass, getSizeClasses.text]">{{ label }}</div>
   </div>

package/components/Input.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import { computed, ref, type Component } from 'vue';
-import { useRandomId } from '../exports/utils';
-import { Icon, Eye, EyeOff } from '../exports/icons';
-import { type Size } from '../exports/types';
+import { computed, ref, type Component } from "vue";
+import { useRandomId } from "../exports/utils";
+import { Icon, Eye, EyeOff } from "../exports/icons";
+import { type Size } from "../exports/types";
 
 const id = useRandomId();
 
 const props = defineProps({
   leadingIcon: { type: Object as () => Component, default: () => null },
   trailingIcon: { type: Object as () => Component, default: () => null },
-  placeholder: { type: String, default: '' },
-  iconClass: { type: String, default: '' },
-  helpText: { type: String, default: '' },
-  type: { type: String as () => 'text' | 'password', default: 'text' },
-  labelStyle: { type: String as () => 'float' | 'static', default: 'static' },
-  label: { type: String, default: '' },
-  size: { type: String as () => Size, default: 'md' },
+  placeholder: { type: String, default: "" },
+  iconClass: { type: String, default: "" },
+  helpText: { type: String, default: "" },
+  type: { type: String as () => "text" | "password", default: "text" },
+  labelStyle: { type: String as () => "float" | "static", default: "static" },
+  label: { type: String, default: "" },
+  size: { type: String as () => Size, default: "md" },
 });
 
 const model = defineModel();
@@ -27,14 +27,14 @@ const togglePasswordVisibility = () => (isPasswordVisible.value = !isPasswordVis
 
 const sizeClasses = computed(() => {
   switch (props.size) {
-    case 'sm':
-      return { container: 'h-[30px]', input: 'px-2 py-1 text-sm', icon: 'size-4', text: 'text-sm', floatLabel: { focus: 'text-xs', base: 'text-sm' } };
-    case 'md':
-      return { container: 'h-[34px]', input: 'px-2.5 py-1.5 text-sm', icon: 'size-4', text: 'text-sm', floatLabel: { focus: 'text-xs', base: 'text-sm' } };
-    case 'lg':
-      return { container: 'h-[42px]', input: 'px-3 py-2 text-base', icon: 'size-5', text: 'text-base', floatLabel: { focus: 'text-sm', base: 'text-base' } };
-    case 'xl':
-      return { container: 'h-[50px]', input: 'px-3.5 py-2.5 text-lg', icon: 'size-6', text: 'text-lg', floatLabel: { focus: 'text-sm', base: 'text-lg' } };
+    case "sm":
+      return { container: "h-[30px]", input: "px-2 py-1 text-sm", icon: "size-4", text: "text-sm", floatLabel: { focus: "text-xs", base: "text-sm" } };
+    case "md":
+      return { container: "h-[34px]", input: "px-2.5 py-1.5 text-sm", icon: "size-4", text: "text-sm", floatLabel: { focus: "text-xs", base: "text-sm" } };
+    case "lg":
+      return { container: "h-[42px]", input: "px-3 py-2 text-base", icon: "size-5", text: "text-base", floatLabel: { focus: "text-sm", base: "text-base" } };
+    case "xl":
+      return { container: "h-[50px]", input: "px-3.5 py-2.5 text-lg", icon: "size-6", text: "text-lg", floatLabel: { focus: "text-sm", base: "text-lg" } };
   }
 });
 </script>
@@ -45,21 +45,46 @@ const sizeClasses = computed(() => {
       <label class="text-sm font-medium duration-100" :for="id">{{ label }}</label>
     </div>
 
-    <div :class="[{ 'mb-6': helpText }, sizeClasses.container]" class="relative">
+    <div :class="[sizeClasses.container]" class="relative">
       <!-- leading icon -->
-      <Icon v-if="leadingIcon" :icon="leadingIcon" :class="[sizeClasses.icon, iconClass]" class="text-muted absolute left-3 top-1/2 -translate-y-1/2" />
+      <Icon v-if="leadingIcon" :icon="leadingIcon" :class="[sizeClasses.icon, iconClass]" class="text-muted absolute top-1/2 left-3 -translate-y-1/2" />
       <!-- trailing icon -->
-      <Icon v-if="trailingIcon" :icon="trailingIcon" :class="[sizeClasses.icon, iconClass]" class="text-muted absolute right-3 top-1/2 -translate-y-1/2" />
+      <Icon v-if="trailingIcon" :icon="trailingIcon" :class="[sizeClasses.icon, iconClass]" class="text-muted absolute top-1/2 right-3 -translate-y-1/2" />
 
       <!-- input -->
-      <input :type="type === 'password' && isPasswordVisible ? 'text' : type" v-model="model" :class="[sizeClasses.input, sizeClasses.text, { 'pr-12': props.type === 'password' }, { 'pl-10': leadingIcon && props.size === 'md' }, { 'pl-9': leadingIcon && props.size === 'sm' }, { 'pl-11': leadingIcon && props.size === 'lg' }, { 'pl-12': leadingIcon && props.size === 'xl' }, { 'pr-10': trailingIcon && props.type !== 'password' && props.size === 'md' }, { 'pr-9': trailingIcon && props.type !== 'password' && props.size === 'sm' }, { 'pr-11': trailingIcon && props.type !== 'password' && props.size === 'lg' }, { 'pr-12': trailingIcon && props.type !== 'password' && props.size === 'xl' }]" class="outline-primary dark:placeholder:text-muted focus:border-primary/75 peer h-full w-full rounded border outline-none duration-200" :id="id" :placeholder="labelStyle === 'float' ? ' ' : placeholder" @focus="isFocused = true" @blur="isFocused = false" />
+      <input
+        :type="type === 'password' && isPasswordVisible ? 'text' : type"
+        v-model="model"
+        :class="[
+          sizeClasses.input,
+          sizeClasses.text,
+          { 'pr-12': props.type === 'password' },
+          { 'pl-10': leadingIcon && props.size === 'md' },
+          { 'pl-9': leadingIcon && props.size === 'sm' },
+          { 'pl-11': leadingIcon && props.size === 'lg' },
+          { 'pl-12': leadingIcon && props.size === 'xl' },
+          { 'pr-10': trailingIcon && props.type !== 'password' && props.size === 'md' },
+          { 'pr-9': trailingIcon && props.type !== 'password' && props.size === 'sm' },
+          { 'pr-11': trailingIcon && props.type !== 'password' && props.size === 'lg' },
+          { 'pr-12': trailingIcon && props.type !== 'password' && props.size === 'xl' },
+        ]"
+        class="outline-primary dark:placeholder:text-muted focus:border-primary/75 peer h-full w-full rounded border duration-200 outline-none"
+        :id="id"
+        :placeholder="labelStyle === 'float' ? ' ' : placeholder"
+        @focus="isFocused = true"
+        @blur="isFocused = false"
+      />
       <!-- floating label -->
-      <div v-if="labelStyle === 'float'" :class="[model || isFocused ? `-top-1.5 px-0.5 ${sizeClasses.floatLabel.focus}` : `bottom-0 top-0 my-auto ${sizeClasses.floatLabel.base}`]" class="bg-background dark:text-muted absolute left-2.5 h-fit rounded leading-none text-neutral-400 duration-100">
+      <div
+        v-if="labelStyle === 'float'"
+        :class="[model || isFocused ? `-top-1.5 px-0.5 ${sizeClasses.floatLabel.focus}` : `top-0 bottom-0 my-auto ${sizeClasses.floatLabel.base}`]"
+        class="bg-background dark:text-muted absolute left-2.5 h-fit rounded leading-none text-neutral-400 duration-100"
+      >
         {{ placeholder }}
       </div>
 
       <!-- password toggle -->
-      <div v-if="type === 'password'" class="absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer" @click="togglePasswordVisibility">
+      <div v-if="type === 'password'" class="absolute top-1/2 right-4 -translate-y-1/2 cursor-pointer" @click="togglePasswordVisibility">
         <Icon :icon="isPasswordVisible ? EyeOff : Eye" :class="sizeClasses.icon" class="text-muted" />
       </div>
     </div>

package/components/toast/ToastContainer.vue

@@ -1,50 +1,64 @@
 <template>
-  <div :class="containerClasses" class="w-full sm:w-auto">
+  <div :class="containerClasses" class="w-full sm:w-auto" :id="containerId">
     <AnimatePresence>
-      <Toast v-for="(toast, index) in toasts" :key="toast.id" :icon="toast.icon" class="pointer-events-auto" :style="{ zIndex: index + 1 }" :id="toast.id" :message="toast.message" :severity="toast.severity" :duration="toast.duration" :closable="toast.closable" :position="position" @close="removeToast" />
+      <Toast
+        v-for="(toast, index) in toasts"
+        :key="toast.id"
+        :icon="toast.icon"
+        class="pointer-events-auto"
+        :style="{ zIndex: index + 1 }"
+        :id="toast.id"
+        :message="toast.message"
+        :severity="toast.severity"
+        :duration="toast.duration"
+        :closable="toast.closable"
+        :position="position"
+        @close="removeToast"
+      />
     </AnimatePresence>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, type Ref } from 'vue';
-import { AnimatePresence } from 'motion-v';
-import Toast from './Toast.vue';
-import { setToastContainer } from '../../exports/toast';
-import type { ToastItem } from '../../exports/toast';
-import { useRandomId } from '../../exports/utils';
+import { ref, computed, onMounted, onUnmounted, type Ref } from "vue";
+import { AnimatePresence } from "motion-v";
+import Toast from "./Toast.vue";
+import { setToastContainer } from "../../exports/toast";
+import type { ToastItem } from "../../exports/toast";
+import { useRandomId } from "../../exports/utils";
 
 const props = defineProps({
-  position: { type: String as () => 'top-center' | 'bottom-center' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left', default: 'top-right' },
+  position: { type: String as () => "top-center" | "bottom-center" | "top-right" | "top-left" | "bottom-right" | "bottom-left", default: "top-right" },
   maxToasts: { type: Number, default: 5 },
+  containerId: { type: String, default: "default-toast-container" },
 });
 
 const toasts: Ref<ToastItem[]> = ref<ToastItem[]>([]);
 
 const containerClasses = computed(() => {
-  const baseClasses = 'fixed z-[9999] flex flex-col gap-3 p-4 pointer-events-none';
+  const baseClasses = "fixed z-[9999] flex flex-col gap-3 p-4 pointer-events-none";
   const positionClasses = {
-    'top-left': 'top-0 left-0',
-    'top-right': 'top-0 right-0',
-    'top-center': 'top-0 left-1/2 -translate-x-1/2',
-    'bottom-left': 'bottom-0 left-0',
-    'bottom-right': 'bottom-0 right-0',
-    'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2',
+    "top-left": "top-0 left-0",
+    "top-right": "top-0 right-0",
+    "top-center": "top-0 left-1/2 -translate-x-1/2",
+    "bottom-left": "bottom-0 left-0",
+    "bottom-right": "bottom-0 right-0",
+    "bottom-center": "bottom-0 left-1/2 -translate-x-1/2",
   };
-  return `${baseClasses} ${positionClasses[props.position] || positionClasses['top-right']}`;
+  return `${baseClasses} ${positionClasses[props.position] || positionClasses["top-right"]}`;
 });
 
 const addToast = (toast: ToastItem): void => {
   const newToast: ToastItem = {
     id: toast.id || useRandomId(),
     message: toast.message,
-    severity: toast.severity || 'info',
+    severity: toast.severity || "info",
     icon: toast.icon,
     duration: toast.duration ?? 5000,
     closable: toast.closable ?? true,
   };
 
-  if (props.position.includes('top')) {
+  if (props.position.includes("top")) {
     toasts.value.unshift(newToast);
   } else {
     toasts.value.push(newToast);
@@ -68,7 +82,11 @@ const clearAll = (): void => {
 };
 
 onMounted(() => {
-  setToastContainer({ addToast, removeToast, clearAll, toasts });
+  setToastContainer({ addToast, removeToast, clearAll, toasts }, props.containerId);
+});
+
+onUnmounted(() => {
+  setToastContainer(null, props.containerId);
 });
 
 defineExpose<{

package/composables/useToast.ts

@@ -1,6 +1,6 @@
-import type { Severity } from '../exports/types';
-import type { Component } from 'vue';
-import { useRandomId } from '../exports/utils';
+import type { Severity } from "../exports/types";
+import type { Component } from "vue";
+import { useRandomId } from "../exports/utils";
 
 export interface ToastItem {
   id: string;
@@ -17,6 +17,7 @@ export interface ToastOptions {
   icon?: Component;
   duration?: number;
   closable?: boolean;
+  containerId?: string;
 }
 
 interface ToastContainerMethods {
@@ -26,54 +27,70 @@ interface ToastContainerMethods {
   toasts: any;
 }
 
-let toastContainerInstance: ToastContainerMethods | null = null;
+let toastContainerId: string = "default-toast-container";
+const toastContainerInstances = new Map<string, ToastContainerMethods>();
 
-export const setToastContainer = (instance: ToastContainerMethods | null) => {
-  toastContainerInstance = instance;
+export const setToastContainer = (instance: ToastContainerMethods | null, containerId: string) => {
+  toastContainerId = containerId;
+
+  if (instance) {
+    toastContainerInstances.set(containerId, instance);
+  } else {
+    toastContainerInstances.delete(containerId);
+  }
 };
 
-const showToast = (options: ToastOptions) => {
-  if (!toastContainerInstance) {
-    console.warn('Toast container not initialized. Make sure to add <ToastContainer> to your app.');
+const getToastContainer = (containerId?: string): ToastContainerMethods | null => {
+  const id = containerId || toastContainerId;
+  return toastContainerInstances.get(id) || null;
+};
+
+const showToast = (options: ToastOptions & { containerId?: string }) => {
+  const containerId = options.containerId || toastContainerId;
+  const container = getToastContainer(containerId);
+
+  if (!container) {
+    console.warn(`Toast container with ID "${containerId}" not initialized. Make sure to add <ToastContainer> to your app.`);
     return;
   }
 
   const toastItem: ToastItem = {
     id: useRandomId(),
     message: options.message,
-    severity: options.severity || 'info',
+    severity: options.severity || "info",
     icon: options.icon,
     duration: options.duration ?? 5000,
     closable: options.closable ?? true,
   };
 
-  toastContainerInstance.addToast(toastItem);
+  container.addToast(toastItem);
 };
 
-export const useToast = () => {
-  const success = (message: string, options?: Omit<ToastOptions, 'message' | 'severity'>) => {
-    return showToast({ ...options, message, severity: 'success' });
+export const useToast = (containerId?: string) => {
+  const success = (message: string, options?: Omit<ToastOptions, "message" | "severity"> & { containerId?: string }) => {
+    return showToast({ ...options, message, severity: "success", containerId: options?.containerId || containerId });
   };
 
-  const error = (message: string, options?: Omit<ToastOptions, 'message' | 'severity'>) => {
-    return showToast({ ...options, message, severity: 'error' });
+  const error = (message: string, options?: Omit<ToastOptions, "message" | "severity"> & { containerId?: string }) => {
+    return showToast({ ...options, message, severity: "error", containerId: options?.containerId || containerId });
   };
 
-  const warning = (message: string, options?: Omit<ToastOptions, 'message' | 'severity'>) => {
-    return showToast({ ...options, message, severity: 'warning' });
+  const warning = (message: string, options?: Omit<ToastOptions, "message" | "severity"> & { containerId?: string }) => {
+    return showToast({ ...options, message, severity: "warning", containerId: options?.containerId || containerId });
   };
 
-  const info = (message: string, options?: Omit<ToastOptions, 'message' | 'severity'>) => {
-    return showToast({ ...options, message, severity: 'info' });
+  const info = (message: string, options?: Omit<ToastOptions, "message" | "severity"> & { containerId?: string }) => {
+    return showToast({ ...options, message, severity: "info", containerId: options?.containerId || containerId });
   };
 
-  const show = (message: string, options?: ToastOptions) => {
-    return showToast({ ...options, message });
+  const show = (message: string, options?: Omit<ToastOptions, "message"> & { containerId?: string }) => {
+    return showToast({ ...options, message, containerId: options?.containerId || containerId });
   };
 
   const clear = () => {
-    if (toastContainerInstance) {
-      toastContainerInstance.clearAll();
+    const container = getToastContainer(containerId);
+    if (container) {
+      container.clearAll();
     }
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "veloce-vue",
-  "version": "0.40.0",
+  "version": "0.45.0",
   "private": false,
   "type": "module",
   "license": "MIT",

package/styles/index.css

@@ -1,5 +1,7 @@
-@import './vars.css';
-@import './theme.css';
-@import './utilities.css';
+@import "./vars.css";
+@import "./theme.css";
+@import "./utilities.css";
 
 @source "../utils";
+
+@custom-variant dark (&:where(.dark, .dark *));

package/styles/utilities.css

@@ -16,6 +16,5 @@
 }
 
 @utility text-highlight {
-  background-color: transparent;
-  /* @apply inline-table rounded bg-neutral-100 px-1.5 outline outline-neutral-200/75 dark:bg-neutral-800 dark:outline-neutral-700/75; */
+  @apply inline-table rounded bg-neutral-100 px-1.5 outline outline-neutral-200/75 dark:bg-neutral-800 dark:outline-neutral-700/75;
 }

package/types/components/Button.vue.d.ts

@@ -1,5 +1,5 @@
-import { type Component } from 'vue';
-import { type Variant, type Severity, type Position, type Size, type FontWeight } from '../exports/types';
+import { type Component } from "vue";
+import { type Variant, type Severity, type Position, type Size, type FontWeight } from "../exports/types";
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;

package/types/components/Checkbox.vue.d.ts

@@ -1,6 +1,6 @@
-import { type Component } from 'vue';
-type CheckboxSize = 'sm' | 'md' | 'lg';
-type CheckboxVariant = 'primary' | 'secondary' | 'success' | 'info' | 'error' | 'warning';
+import { type Component } from "vue";
+type CheckboxSize = "sm" | "md" | "lg";
+type CheckboxVariant = "primary" | "secondary" | "success" | "info" | "error" | "warning";
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     label: {
         type: StringConstructor;
@@ -26,6 +26,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: () => Component;
         default: () => import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     };
+    iconClass: {
+        type: StringConstructor;
+        default: string;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -61,6 +65,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: () => Component;
         default: () => import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     };
+    iconClass: {
+        type: StringConstructor;
+        default: string;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -77,6 +85,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     size: CheckboxSize;
     disabled: boolean;
     variant: CheckboxVariant;
+    iconClass: string;
     labelClass: string;
     checkboxClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/types/components/Input.vue.d.ts

@@ -1,5 +1,5 @@
-import { type Component } from 'vue';
-import { type Size } from '../exports/types';
+import { type Component } from "vue";
+import { type Size } from "../exports/types";
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     leadingIcon: {
         type: () => Component;

package/types/components/toast/ToastContainer.vue.d.ts

@@ -1,5 +1,5 @@
-import { type Ref } from 'vue';
-import type { ToastItem } from '../../exports/toast';
+import { type Ref } from "vue";
+import type { ToastItem } from "../../exports/toast";
 declare const toasts: Ref<ToastItem[]>;
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     position: {
@@ -10,6 +10,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: NumberConstructor;
         default: number;
     };
+    containerId: {
+        type: StringConstructor;
+        default: string;
+    };
 }>, {
     addToast: (toast: ToastItem) => void;
     removeToast: (id: string) => void;
@@ -24,9 +28,14 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: NumberConstructor;
         default: number;
     };
+    containerId: {
+        type: StringConstructor;
+        default: string;
+    };
 }>> & Readonly<{}>, {
     position: "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center";
     maxToasts: number;
+    containerId: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/types/composables/useToast.d.ts

@@ -1,5 +1,5 @@
-import type { Severity } from '../exports/types';
-import type { Component } from 'vue';
+import type { Severity } from "../exports/types";
+import type { Component } from "vue";
 export interface ToastItem {
     id: string;
     message: string;
@@ -14,6 +14,7 @@ export interface ToastOptions {
     icon?: Component;
     duration?: number;
     closable?: boolean;
+    containerId?: string;
 }
 interface ToastContainerMethods {
     addToast: (toast: ToastItem) => void;
@@ -21,13 +22,23 @@ interface ToastContainerMethods {
     clearAll: () => void;
     toasts: any;
 }
-export declare const setToastContainer: (instance: ToastContainerMethods | null) => void;
-export declare const useToast: () => {
-    success: (message: string, options?: Omit<ToastOptions, "message" | "severity">) => void;
-    error: (message: string, options?: Omit<ToastOptions, "message" | "severity">) => void;
-    warning: (message: string, options?: Omit<ToastOptions, "message" | "severity">) => void;
-    info: (message: string, options?: Omit<ToastOptions, "message" | "severity">) => void;
-    show: (message: string, options?: ToastOptions) => void;
+export declare const setToastContainer: (instance: ToastContainerMethods | null, containerId: string) => void;
+export declare const useToast: (containerId?: string) => {
+    success: (message: string, options?: Omit<ToastOptions, "message" | "severity"> & {
+        containerId?: string;
+    }) => void;
+    error: (message: string, options?: Omit<ToastOptions, "message" | "severity"> & {
+        containerId?: string;
+    }) => void;
+    warning: (message: string, options?: Omit<ToastOptions, "message" | "severity"> & {
+        containerId?: string;
+    }) => void;
+    info: (message: string, options?: Omit<ToastOptions, "message" | "severity"> & {
+        containerId?: string;
+    }) => void;
+    show: (message: string, options?: Omit<ToastOptions, "message"> & {
+        containerId?: string;
+    }) => void;
     clear: () => void;
 };
 export {};