@saasmakers/ui 0.1.117 → 0.2.2

package/app/components/bases/BaseAlert.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { BaseAlert } from '../../types/bases'
 import { Preferences } from '@capacitor/preferences'
+import type { BaseAlert } from '../../types/bases'
 
 const props = withDefaults(defineProps<BaseAlert>(), {
   closingId: '',

package/app/components/bases/BaseAvatar.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { BaseAvatar } from '../../types/bases'
 import { NuxtLinkLocale } from '#components'
+import type { BaseAvatar } from '../../types/bases'
 
 const props = withDefaults(defineProps<BaseAvatar>(), {
   bordered: true,

package/app/components/bases/BaseButton.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { BaseButton } from '../../types/bases'
 import { NuxtLinkLocale } from '#components'
+import type { BaseButton } from '../../types/bases'
 
 const props = withDefaults(defineProps<BaseButton>(), {
   background: true,

package/app/components/bases/BaseChart.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { BaseChart } from '../../types/bases'
 import { BarChart, LineChart, PieChart } from 'chartist'
+import type { BaseChart } from '../../types/bases'
 
 const properties = withDefaults(defineProps<BaseChart>(), {
   data: () => ({

package/app/components/bases/BaseIcon.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { BaseIcon } from '../../types/bases'
 import { NuxtLinkLocale } from '#components'
+import type { BaseIcon } from '../../types/bases'
 
 const props = withDefaults(defineProps<BaseIcon>(), {
   bold: false,

package/app/components/bases/BaseOverlay.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { BaseOverlay } from '../../types/bases'
 import { onKeyStroke } from '@vueuse/core'
 import { Motion } from 'motion-v'
+import type { BaseOverlay } from '../../types/bases'
 import useMotion from '../../composables/useMotion'
 
 const props = withDefaults(defineProps<BaseOverlay>(), {

package/app/components/bases/BaseParagraph.vue

@@ -14,7 +14,7 @@ defineSlots<{
 
 <template>
   <p
-    class="select-text font-semibold leading-relaxed tracking-tight normal-case"
+    class="select-text leading-relaxed tracking-tight normal-case"
     :class="{
       'text-center': alignment === 'center',
       'text-left': alignment === 'left',

package/app/components/bases/BaseTag.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { BaseTag } from '../../types/bases'
 import { NuxtLinkLocale } from '#components'
+import type { BaseTag } from '../../types/bases'
 
 const props = withDefaults(defineProps<BaseTag>(), {
   active: false,

package/app/components/bases/BaseText.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { BaseText } from '../../types/bases'
 import { NuxtLinkLocale } from '#components'
+import type { BaseText } from '../../types/bases'
 
 const props = withDefaults(defineProps<BaseText>(), {
   alignment: undefined,

package/app/components/fields/FieldEmojis.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { FieldEmojis } from '../../types/fields'
 import { emojis } from '@saasmakers/shared'
 import { refDebounced } from '@vueuse/core'
+import type { FieldEmojis } from '../../types/fields'
 
 const props = withDefaults(defineProps<Omit<FieldEmojis, 'modelValue'>>(), { disabled: false })
 
@@ -18,7 +18,8 @@ const searchRaw = ref('')
 const searchQuery = refDebounced(searchRaw, 250)
 
 const emojisFiltered = computed(() => {
-  const searchQueryCleaned = normalizeText(searchQuery.value.trim())
+  const searchQueryRaw = searchQuery.value.trim()
+  const searchQueryCleaned = normalizeText(searchQueryRaw)
 
   if (!searchQueryCleaned) {
     return emojis
@@ -27,6 +28,10 @@ const emojisFiltered = computed(() => {
   return emojis
     .map((category) => {
       const filtered = category.emojis.filter((emoji) => {
+        if (emoji.character === searchQueryRaw) {
+          return true
+        }
+
         const localizedKeywords = (emoji.keywords[locale.value] ?? [])
         const englishKeywords = (emoji.keywords.en ?? [])
         const allKeywords = [...localizedKeywords, ...englishKeywords]

package/app/components/fields/FieldSelect.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { FieldSelect, FieldSelectOption } from '../../types/fields'
 import { vOnClickOutside } from '@vueuse/components'
+import type { FieldSelect, FieldSelectOption } from '../../types/fields'
 
 const props = withDefaults(defineProps<Omit<FieldSelect, 'modelValue'>>(), {
   border: 'full',

package/app/components/fields/FieldTabs.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { FieldTabs, FieldTabsAction } from '../../types/fields'
 import { NuxtLinkLocale } from '#components'
+import type { FieldTabs, FieldTabsAction } from '../../types/fields'
 
 withDefaults(defineProps<Omit<FieldTabs, 'modelValue'>>(), {
   disabled: false,

package/app/composables/useChartist.ts

@@ -11,13 +11,11 @@ export default function useChartist() {
     easing?: EasingType
     stagger?: number
   } = {}) => {
-    const {
-      animateArea = true,
-      delay = 0,
-      duration = 500,
-      easing = easings.easeOutQuart,
-      stagger = 0,
-    } = params
+    const animateArea = params.animateArea ?? true
+    const delay = params.delay ?? 0
+    const duration = params.duration ?? 500
+    const easing = params.easing ?? easings.easeOutQuart
+    const stagger = params.stagger ?? 0
 
     return (chart: BaseChart) => {
       chart.on('draw', (ctx: DrawEvent) => {
@@ -83,7 +81,9 @@ export default function useChartist() {
         if (ctx.type === 'bar') {
           const barCtx = ctx as BarDrawEvent
           // Access private options property via type assertion
-          const chartOptions = (chart as unknown as { options?: Options & Partial<BarChartOptions> }).options
+          const chartOptions = (chart as unknown as {
+            options?: Options & Partial<BarChartOptions>
+          }).options
           const horizontal = !!(chartOptions as BarChartOptions | undefined)?.horizontalBars
 
           // For vertical bars, y1 is baseline, y2 is top. For horizontal, x1 is baseline, x2 is end.

package/app/composables/useLayerUtils.ts

@@ -1,5 +1,12 @@
 import numbroLib from 'numbro'
 
+export default function useLayerUtils() {
+  return {
+    normalizeText,
+    numbro,
+  }
+}
+
 function normalizeText(text: string) {
   return text
     .toLowerCase()
@@ -17,10 +24,3 @@ function numbro(number: '∞' | number | undefined, format?: string) {
 
   return numbroLib(number).format(format || '0,0')
 }
-
-export default function useLayerUtils() {
-  return {
-    normalizeText,
-    numbro,
-  }
-}

package/app/types/bases.d.ts

@@ -1,31 +1,3 @@
-// Global types for bases
-export type BaseAlignment = 'center' | 'left' | 'right'
-
-export type BaseBackground = 'gray' | 'white'
-
-export type BaseColor
-  = | 'black'
-    | 'gray'
-    | 'green'
-    | 'indigo'
-    | 'orange'
-    | 'red'
-    | 'white'
-
-export type BaseSize
-  = | '2xl'
-    | '2xs'
-    | '3xl'
-    | '3xs'
-    | '4xl'
-    | 'base'
-    | 'lg'
-    | 'sm'
-    | 'xl'
-    | 'xs'
-
-export type BaseStatus = | 'error' | 'info' | 'success' | 'warning'
-
 // Components
 export interface BaseAlert {
   closingId?: string
@@ -35,6 +7,9 @@ export interface BaseAlert {
   text?: BaseTextText
 }
 
+// Global types for bases
+export type BaseAlignment = 'center' | 'left' | 'right'
+
 export interface BaseAvatar {
   bordered?: boolean
   borderWidth?: number
@@ -46,6 +21,8 @@ export interface BaseAvatar {
   to?: RouteLocationNamedI18n
 }
 
+export type BaseBackground = 'gray' | 'white'
+
 export interface BaseBordered {
   background?: BaseBackground
   borderColor?: BaseBorderedColor
@@ -119,6 +96,15 @@ export interface BaseChart {
 
 export type BaseChartType = 'bar' | 'line' | 'pie'
 
+export type BaseColor
+  = | 'black'
+    | 'gray'
+    | 'green'
+    | 'indigo'
+    | 'orange'
+    | 'red'
+    | 'white'
+
 export interface BaseDivider {
   borderStyle?: BaseDividerBorderStyle
   margin?: number
@@ -283,6 +269,18 @@ export type BaseQuoteBackground = 'gray' | 'gray-light' | 'white'
 
 export type BaseQuoteSize = 'base' | 'sm' | 'xs'
 
+export type BaseSize
+  = | '2xl'
+    | '2xs'
+    | '3xl'
+    | '3xs'
+    | '4xl'
+    | 'base'
+    | 'lg'
+    | 'sm'
+    | 'xl'
+    | 'xs'
+
 export interface BaseSpinner {
   clickable?: boolean
   color?: BaseColor
@@ -293,6 +291,8 @@ export interface BaseSpinner {
   uppercase?: boolean
 }
 
+export type BaseStatus = | 'error' | 'info' | 'success' | 'warning'
+
 export interface BaseTag {
   active?: boolean
   avatar?: string
@@ -352,7 +352,10 @@ export interface BaseText {
   uppercase?: boolean
 }
 
-export type BaseTextText = string | { base: string, sm: string }
+export type BaseTextText = string | {
+  base: string
+  sm: string
+}
 
 export interface BaseToast {
   hasClose?: boolean

package/app/types/fields.d.ts

@@ -1,15 +1,6 @@
 // Global types for fields
 export type FieldBackground = 'gray' | 'white'
 
-export type FieldSize = 'base' | 'lg' | 'sm' | 'xs'
-
-export type FieldStatus
-  = | 'default'
-    | 'error'
-    | 'info'
-    | 'success'
-    | 'warning'
-
 // Components
 export interface FieldCheckbox {
   description?: BaseTextText
@@ -142,6 +133,15 @@ export interface FieldSelectOption {
   value: string
 }
 
+export type FieldSize = 'base' | 'lg' | 'sm' | 'xs'
+
+export type FieldStatus
+  = | 'default'
+    | 'error'
+    | 'info'
+    | 'success'
+    | 'warning'
+
 export interface FieldTabs {
   disabled?: boolean
   minimizeOnMobile?: boolean

package/app/types/global.d.ts

@@ -96,7 +96,10 @@ declare global {
   // Navigator
   interface Navigator {
     userAgentData?: {
-      brands?: { brand: string, version: string }[]
+      brands?: {
+        brand: string
+        version: string
+      }[]
       mobile?: boolean
       platform?: string
     }

package/nuxt.config.ts

@@ -49,7 +49,7 @@ export default defineNuxtConfig({
   colorMode: {
     classSuffix: '',
     fallback: 'light',
-    preference: 'system',
+    preference: 'light',
   },
 
   experimental: { typedPages: true },

package/package.json

@@ -1,17 +1,12 @@
 {
   "name": "@saasmakers/ui",
-  "type": "module",
-  "version": "0.1.117",
+  "version": "0.2.2",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
-  "author": "SaaS Makers",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/saasmakers/saasmakers-turborepo.git",
-    "directory": "packages/ui"
-  },
+  "author": "SaaS Makers",
   "sideEffects": false,
+  "type": "module",
   "exports": {
     ".": "./nuxt.config.ts"
   },
@@ -22,10 +17,6 @@
     "public",
     "uno.config.ts"
   ],
-  "peerDependencies": {
-    "@saasmakers/shared": "^0.1.17",
-    "nuxt": "4.2.2"
-  },
   "dependencies": {
     "@capacitor/preferences": "8.0.0",
     "@nuxt/icon": "2.1.1",
@@ -60,12 +51,16 @@
     "typescript": "5.9.3",
     "@saasmakers/shared": "0.1.17"
   },
+  "peerDependencies": {
+    "@saasmakers/shared": "^0.1.17",
+    "nuxt": "4.2.2"
+  },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "dev": "storybook dev -p 3103 --no-open",
-    "lint": "eslint .",
+    "dev": "storybook dev -p 3104 --no-open",
+    "lint": "eslint . --max-warnings=0",
     "typecheck": "nuxi typecheck"
   }
 }

package/uno.config.ts

@@ -1,3 +1,4 @@
+/* eslint-disable perfectionist/sort-objects */
 import type { Preset } from 'unocss'
 import { defineConfig, presetWind3 } from 'unocss'