@saasmakers/ui 2.0.34 → 2.0.36

package/app/components/bases/BaseToast.vue

@@ -29,7 +29,7 @@ function onClose(event: KeyboardEvent | MouseEvent) {
 
 <template>
   <div
-    class="group flex select-none items-center border border-gray-200 rounded-full bg-white px-3 py-2 text-base text-gray-800 font-normal shadow-sm transition-colors dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
+    class="group flex select-none items-center border border-gray-200 rounded-full bg-white px-3 py-2 text-sm text-gray-800 font-normal shadow-sm transition-colors dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
     :class="{ 'cursor-pointer': hasClose }"
     role="button"
     tabindex="0"
@@ -39,14 +39,14 @@ function onClose(event: KeyboardEvent | MouseEvent) {
   >
     <div class="pointer-events-none flex items-center flex-initial">
       <BaseIcon
-        size="lg"
+        size="xl"
         :status="status"
       />
 
       <BaseText
         class="ml-2"
         no-wrap
-        size="base"
+        size="sm"
         :text="text"
       />
     </div>
@@ -78,10 +78,8 @@ function onClose(event: KeyboardEvent | MouseEvent) {
     </button>
 
     <template v-if="hasClose">
-      <div class="ml-2 mr-1.5 h-5 border-l border-gray-200 flex-initial dark:border-gray-700" />
-
       <BaseIcon
-        class="text-gray-400 transition-colors flex-initial dark:text-gray-500"
+        class="ml-2 text-gray-400 transition-colors flex-initial dark:text-gray-500"
         :class="{
           'group-hover:text-red-600 dark:group-hover:text-red-400': status === 'error',
           'group-hover:text-indigo-600 dark:group-hover:text-indigo-400': status === 'info',
@@ -89,7 +87,7 @@ function onClose(event: KeyboardEvent | MouseEvent) {
           'group-hover:text-orange-600 dark:group-hover:text-orange-400': status === 'warning',
         }"
         :icon="getLayerIcon('close')"
-        size="lg"
+        size="xl"
       />
     </template>
   </div>

package/app/components/layout/LayoutBottomSheet.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { LayoutBottomSheet } from '../../types/layout'
 
-withDefaults(defineProps<LayoutBottomSheet>(), { title: undefined })
+withDefaults(defineProps<LayoutBottomSheet>(), { ariaLabel: undefined })
 
 defineSlots<{
   default?: () => VNode[]
@@ -199,7 +199,7 @@ watch(visible, (isVisible) => {
         <div
           v-if="visible"
           ref="panelRef"
-          :aria-label="title"
+          :aria-label="ariaLabel"
           aria-modal="true"
           class="layout-bottom-sheet fixed bottom-0 left-0 right-0 z-[60] mx-auto max-h-[85dvh] max-w-screen-md flex flex-col rounded-t-2xl bg-white text-gray-900 app-text shadow-lg outline-none safe-bottom dark:bg-gray-900 dark:text-gray-100"
           :class="{

package/app/components/layout/LayoutModal.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { LayoutModal } from '../../types/layout'
 
-withDefaults(defineProps<LayoutModal>(), { title: undefined })
+withDefaults(defineProps<LayoutModal>(), { ariaLabel: undefined })
 
 defineSlots<{
   default?: () => VNode[]
@@ -39,7 +39,7 @@ function onClose() {
         >
           <div
             ref="panelRef"
-            :aria-label="title"
+            :aria-label="ariaLabel"
             aria-modal="true"
             class="scroll-y-stable pointer-events-auto max-h-[85dvh] max-w-md w-full rounded-2xl bg-white p-5 text-gray-900 app-text shadow-lg outline-none dark:bg-gray-900 dark:text-gray-100"
             role="dialog"

package/app/types/layout.d.ts

@@ -11,9 +11,9 @@ export interface LayoutBackdrop {
 }
 
 export interface LayoutBottomSheet {
-  title?: string
+  ariaLabel?: string
 }
 
 export interface LayoutModal {
-  title?: string
+  ariaLabel?: string
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "2.0.34",
+  "version": "2.0.36",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",