@sakoa/ui 0.1.1 → 0.2.0

package/registry/source/components/ui/drawer/SDrawerClose.vue

@@ -9,6 +9,7 @@ defineOptions({ inheritAttrs: false })
 
 import { inject } from 'vue'
 import { cn } from '../../../lib/utils'
+import { type IconProp, isIconComponent } from '../../../lib/icon'
 import { SDrawerContextKey, type SDrawerContext } from './SDrawer.vue'
 
 export interface Props {
@@ -19,7 +20,7 @@ export interface Props {
   /** Visual variant */
   variant?: 'default' | 'ghost' | 'subtle'
   /** Icon to display */
-  icon?: string
+  icon?: IconProp
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -59,6 +60,7 @@ const variantClasses = {
     aria-label="Close drawer"
     @click="handleClose"
   >
-    <span :class="`mdi mdi-${icon} text-xl`" />
+    <component v-if="isIconComponent(icon)" :is="icon" class="text-xl" />
+    <span v-else :class="`mdi mdi-${icon} text-xl`" />
   </button>
 </template>

package/registry/source/components/ui/dropdown/SDropdown.vue

@@ -4,6 +4,7 @@
  * A highly customizable dropdown component for menus, actions, and navigation
  */
 import { type InjectionKey, type Ref } from 'vue'
+import { type IconProp, isIconComponent } from '../../../lib/icon'
 
 // Types
 export type DropdownTrigger = 'click' | 'hover' | 'context' | 'manual'
@@ -19,8 +20,8 @@ export type DropdownAnimation = 'fade' | 'slide' | 'scale' | 'reveal'
 export interface DropdownMenuItem {
   key: string
   label: string
-  icon?: string
-  trailingIcon?: string
+  icon?: IconProp
+  trailingIcon?: IconProp
   description?: string
   shortcut?: string
   disabled?: boolean
@@ -98,7 +99,7 @@ export interface Props {
   /** Trigger button text */
   label?: string
   /** Trigger button icon */
-  icon?: string
+  icon?: IconProp
   /** Hide the dropdown arrow on trigger */
   hideArrow?: boolean
 }
@@ -589,7 +590,8 @@ defineExpose({
           ]"
           :disabled="disabled"
         >
-          <span v-if="icon" :class="['mdi', `mdi-${icon}`, sizeConfig.icon]" />
+          <component v-if="icon && isIconComponent(icon)" :is="icon" :class="[sizeConfig.icon]" />
+          <span v-else-if="icon" :class="['mdi', `mdi-${icon}`, sizeConfig.icon]" />
           <span v-if="label">{{ label }}</span>
           <span 
             v-if="!hideArrow" 
@@ -704,7 +706,8 @@ defineExpose({
                   />
                   
                   <!-- Leading icon -->
-                  <span 
+                  <component v-else-if="item.icon && isIconComponent(item.icon)" :is="item.icon" :class="[sizeConfig.icon, 'mr-2.5', item.danger ? '' : 'text-muted-foreground']" />
+                  <span
                     v-else-if="item.icon"
                     :class="['mdi', `mdi-${item.icon}`, sizeConfig.icon, 'mr-2.5', item.danger ? '' : 'text-muted-foreground']"
                   />
@@ -732,8 +735,9 @@ defineExpose({
                     </kbd>
                     
                     <!-- Trailing icon -->
-                    <span 
-                      v-if="item.trailingIcon"
+                    <component v-if="item.trailingIcon && isIconComponent(item.trailingIcon)" :is="item.trailingIcon" :class="[sizeConfig.icon, 'text-muted-foreground']" />
+                    <span
+                      v-else-if="item.trailingIcon"
                       :class="['mdi', `mdi-${item.trailingIcon}`, sizeConfig.icon, 'text-muted-foreground']"
                     />
                     

package/registry/source/components/ui/dropdown/SDropdownGroup.vue

@@ -3,13 +3,14 @@ defineOptions({ inheritAttrs: false })
 
 import { inject, computed } from 'vue'
 import { cn } from '../../../lib/utils'
+import { type IconProp, isIconComponent } from '../../../lib/icon'
 import { SDropdownContextKey, type SDropdownContext } from './SDropdown.vue'
 
 export interface Props {
   /** Group header label */
   label: string
   /** Icon for the header */
-  icon?: string
+  icon?: IconProp
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -33,7 +34,8 @@ const sizeConfig = computed(() => ({
       class="font-semibold uppercase tracking-wider text-muted-foreground flex items-center gap-2 sticky top-0 bg-background/95 backdrop-blur-sm"
       :class="sizeConfig"
     >
-      <span v-if="icon" :class="['mdi', `mdi-${icon}`, 'text-xs']" />
+      <component v-if="icon && isIconComponent(icon)" :is="icon" class="text-xs" />
+      <span v-else-if="icon" :class="['mdi', `mdi-${icon}`, 'text-xs']" />
       <span>{{ label }}</span>
     </div>
     

package/registry/source/components/ui/dropdown/SDropdownItem.vue

@@ -3,6 +3,7 @@ defineOptions({ inheritAttrs: false })
 
 import { inject, ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { cn } from '../../../lib/utils'
+import { type IconProp, isIconComponent } from '../../../lib/icon'
 import { SDropdownContextKey, type SDropdownContext } from './SDropdown.vue'
 
 export interface Props {
@@ -10,10 +11,10 @@ export interface Props {
   itemKey: string
   /** Item label text */
   label?: string
-  /** Leading icon (MDI icon name) */
-  icon?: string
-  /** Trailing icon */
-  trailingIcon?: string
+  /** Leading icon (MDI icon name or Vue component) */
+  icon?: IconProp
+  /** Trailing icon (MDI icon name or Vue component) */
+  trailingIcon?: IconProp
   /** Description text below label */
   description?: string
   /** Keyboard shortcut display */
@@ -130,7 +131,8 @@ const handleClick = (event: MouseEvent) => {
     />
     
     <!-- Leading icon -->
-    <span 
+    <component v-else-if="icon && isIconComponent(icon)" :is="icon" :class="[sizeConfig.icon, 'mr-2.5', danger ? '' : 'text-muted-foreground group-hover:text-foreground']" />
+    <span
       v-else-if="icon"
       :class="['mdi', `mdi-${icon}`, sizeConfig.icon, 'mr-2.5', danger ? '' : 'text-muted-foreground group-hover:text-foreground']"
     />
@@ -160,8 +162,9 @@ const handleClick = (event: MouseEvent) => {
       </kbd>
       
       <!-- Trailing icon -->
-      <span 
-        v-if="trailingIcon"
+      <component v-if="trailingIcon && isIconComponent(trailingIcon)" :is="trailingIcon" :class="[sizeConfig.icon, 'text-muted-foreground']" />
+      <span
+        v-else-if="trailingIcon"
         :class="['mdi', `mdi-${trailingIcon}`, sizeConfig.icon, 'text-muted-foreground']"
       />
       

package/registry/source/components/ui/option/SOption.vue

@@ -3,12 +3,13 @@ defineOptions({ inheritAttrs: false })
 
 import { inject, computed, type CSSProperties } from 'vue'
 import { cn } from '../../../lib/utils'
+import { type IconProp, isIconComponent } from '../../../lib/icon'
 
 export interface Props {
   value: any
   label?: string
   disabled?: boolean
-  icon?: string
+  icon?: IconProp
   description?: string
   color?: string
 }
@@ -132,8 +133,14 @@ const bgClass = computed(() => {
     />
 
     <!-- Icon -->
+    <component
+      v-if="icon && isIconComponent(icon)"
+      :is="icon"
+      :class="cn('relative z-10 shrink-0', sizeConfig.icon, isSelected && !hasCustomColor ? 'text-primary' : '')"
+      :style="isSelected && hasCustomColor ? { color: resolvedColor } : {}"
+    />
     <span
-      v-if="icon"
+      v-else-if="icon"
       :class="cn('relative z-10 shrink-0 mdi', `mdi-${icon}`, sizeConfig.icon, isSelected && !hasCustomColor ? 'text-primary' : '')"
       :style="isSelected && hasCustomColor ? { color: resolvedColor } : {}"
     />

package/registry/source/components/ui/radio/SRadio.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, inject, type CSSProperties } from 'vue'
 import { cn } from '../../../lib/utils'
+import { type IconProp, isIconComponent } from '../../../lib/icon'
 
 defineOptions({ inheritAttrs: false })
 
@@ -14,7 +15,7 @@ export interface Props {
   label?: string
   labelPosition?: 'left' | 'right'
   variant?: 'default' | 'filled' | 'outlined' | 'button'
-  icon?: string
+  icon?: IconProp
   required?: boolean
   name?: string
   error?: string
@@ -195,8 +196,9 @@ const buttonStyle = computed<CSSProperties>(() => {
     ></span>
 
     <!-- Icon -->
+    <component v-if="icon && !loading && isIconComponent(icon)" :is="icon" class="mr-2" />
     <span
-      v-if="icon && !loading"
+      v-else-if="icon && !loading"
       :class="['mdi', `mdi-${icon}`, 'mr-2']"
     ></span>
 
@@ -296,8 +298,14 @@ const buttonStyle = computed<CSSProperties>(() => {
           :class="currentVariant === 'filled' ? (hasCustomColor ? 'text-white' : 'text-primary-foreground') : ''"
         >
           <slot name="icon">
+            <component
+              v-if="icon && isIconComponent(icon)"
+              :is="icon"
+              :class="cn(sizeConfig.icon, currentVariant !== 'filled' && !hasCustomColor ? 'text-primary' : '')"
+              :style="currentVariant !== 'filled' && hasCustomColor ? { color: currentColor } : {}"
+            />
             <span
-              v-if="icon"
+              v-else-if="icon"
               :class="cn('mdi', `mdi-${icon}`, sizeConfig.icon, currentVariant !== 'filled' && !hasCustomColor ? 'text-primary' : '')"
               :style="currentVariant !== 'filled' && hasCustomColor ? { color: currentColor } : {}"
             />

package/registry/source/components/ui/tabs/STabs.vue

@@ -4,6 +4,7 @@
  * Supports both simple (STabPane) and compound (STabsList + STabsTrigger + STabsContent) APIs
  */
 import { type InjectionKey, type Ref } from 'vue'
+import type { IconProp } from '../../../lib/icon'
 
 // Types - exported for external use
 export type TabType = 'line' | 'card' | 'segment' | 'bar' | 'chip'
@@ -14,7 +15,7 @@ export type TabJustify = 'flex-start' | 'center' | 'flex-end' | 'space-between'
 export interface TabPaneInfo {
   name: string | number
   tab: string
-  icon?: string
+  icon?: IconProp
   disabled?: boolean
   closable?: boolean
   tabClass?: string
@@ -44,6 +45,7 @@ defineOptions({ inheritAttrs: false })
 
 import { provide, ref, computed, watch, nextTick, onMounted, useSlots } from 'vue'
 import { cn } from '../../../lib/utils'
+import { isIconComponent } from '../../../lib/icon'
 
 // Props
 export interface Props {
@@ -416,8 +418,9 @@ provide(STabsContextKey, {
             :close="() => emit('close', pane.name)"
           >
             <!-- Icon -->
+            <component v-if="pane.icon && isIconComponent(pane.icon)" :is="pane.icon" :class="[{ 'scale-110': activeTab === pane.name }]" />
             <span
-              v-if="pane.icon"
+              v-else-if="pane.icon"
               class="mdi transition-transform duration-300"
               :class="[`mdi-${pane.icon}`, { 'scale-110': activeTab === pane.name }]"
             />