@sakoa/ui 0.1.1 → 0.2.0

package/dist/views/docs/CLIView.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/dist/views/docs/GettingStartedView.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/dist/views/docs/IconsGuideView.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/dist/views/docs/UseClickOutsideView.d.ts

@@ -12,8 +12,8 @@ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import
             readonly preserveSize?: boolean | undefined;
             readonly block?: boolean | undefined;
             readonly rounded?: "none" | "sm" | "md" | "lg" | "full" | undefined;
-            readonly iconLeft?: string | undefined;
-            readonly iconRight?: string | undefined;
+            readonly iconLeft?: import('../../index').IconProp | undefined;
+            readonly iconRight?: import('../../index').IconProp | undefined;
             readonly iconOnly?: boolean | undefined;
             readonly tag?: string | undefined;
             readonly href?: string | undefined;
@@ -45,8 +45,8 @@ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import
         }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
             click: (event: MouseEvent) => any;
         }, string, {
-            type: "button" | "submit" | "reset";
             size: "xs" | "small" | "medium" | "large" | "xl";
+            type: "button" | "submit" | "reset";
             disabled: boolean;
             color: string;
             variant: "filled" | "outlined" | "light" | "ghost" | "link";
@@ -55,8 +55,8 @@ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import
             rounded: "none" | "sm" | "md" | "lg" | "full";
             preserveSize: boolean;
             block: boolean;
-            iconLeft: string;
-            iconRight: string;
+            iconLeft: import('../../index').IconProp;
+            iconRight: import('../../index').IconProp;
             iconOnly: boolean;
             tag: string;
             href: string;
@@ -86,8 +86,8 @@ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import
         $nextTick: typeof import('vue').nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
     } & Readonly<{
-        type: "button" | "submit" | "reset";
         size: "xs" | "small" | "medium" | "large" | "xl";
+        type: "button" | "submit" | "reset";
         disabled: boolean;
         color: string;
         variant: "filled" | "outlined" | "light" | "ghost" | "link";
@@ -96,8 +96,8 @@ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import
         rounded: "none" | "sm" | "md" | "lg" | "full";
         preserveSize: boolean;
         block: boolean;
-        iconLeft: string;
-        iconRight: string;
+        iconLeft: import('../../index').IconProp;
+        iconRight: import('../../index').IconProp;
         iconOnly: boolean;
         tag: string;
         href: string;
@@ -108,7 +108,7 @@ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import
         iconClass: string;
     }> & Omit<Readonly<import('../../components/ui/SButton').Props> & Readonly<{
         onClick?: ((event: MouseEvent) => any) | undefined;
-    }>, "type" | "size" | "disabled" | "color" | "variant" | "contentClass" | "loading" | "rounded" | "preserveSize" | "block" | "iconLeft" | "iconRight" | "iconOnly" | "tag" | "href" | "to" | "ripple" | "animationType" | "animateInactive" | "iconClass"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+    }>, "size" | "type" | "disabled" | "color" | "variant" | "contentClass" | "loading" | "rounded" | "preserveSize" | "block" | "iconLeft" | "iconRight" | "iconOnly" | "tag" | "href" | "to" | "ripple" | "animationType" | "animateInactive" | "iconClass"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
         $slots: {
             'icon-left'?(_: {}): any;
             default?(_: {}): any;

package/dist/views/docs/UseHotkeyView.d.ts

@@ -13,8 +13,8 @@ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import
             readonly placeholder?: string | undefined;
             readonly labelPlacement?: "top" | "top-left" | "top-center" | "top-right" | "bottom" | "left" | "right" | "floating" | "inside" | undefined;
             readonly labelAnimation?: "morph" | "slide" | "fade" | "none" | undefined;
-            readonly iconLeft?: string | undefined;
-            readonly iconRight?: string | undefined;
+            readonly iconLeft?: import('../../index').IconProp | undefined;
+            readonly iconRight?: import('../../index').IconProp | undefined;
             readonly iconColor?: string | undefined;
             readonly disabled?: boolean | undefined;
             readonly readonly?: boolean | undefined;
@@ -54,8 +54,8 @@ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import
             readonly inputClass?: string | undefined;
             readonly labelClass?: string | undefined;
             readonly wrapperClass?: string | undefined;
-            readonly "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
             readonly onClear?: (() => any) | undefined;
+            readonly "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
             readonly onInput?: ((event: Event) => any) | undefined;
             readonly onChange?: ((value: string | number, event: Event) => any) | undefined;
             readonly onBlur?: ((event: FocusEvent) => any) | undefined;
@@ -80,11 +80,11 @@ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import
         $root: import('vue').ComponentPublicInstance | null;
         $parent: import('vue').ComponentPublicInstance | null;
         $host: Element | null;
-        $emit: ((event: "update:modelValue", value: string | number) => void) & ((event: "clear") => void) & ((event: "input", event: Event) => void) & ((event: "change", value: string | number, event: Event) => void) & ((event: "blur", event: FocusEvent) => void) & ((event: "focus", event: FocusEvent) => void) & ((event: "update:error", error: string | null) => void) & ((event: "enter", event: KeyboardEvent) => void) & ((event: "validate", isValid: boolean, error: string | null) => void) & ((event: "select-suggestion", suggestion: string) => void);
+        $emit: ((event: "clear") => void) & ((event: "update:modelValue", value: string | number) => void) & ((event: "input", event: Event) => void) & ((event: "change", value: string | number, event: Event) => void) & ((event: "blur", event: FocusEvent) => void) & ((event: "focus", event: FocusEvent) => void) & ((event: "update:error", error: string | null) => void) & ((event: "enter", event: KeyboardEvent) => void) & ((event: "validate", isValid: boolean, error: string | null) => void) & ((event: "select-suggestion", suggestion: string) => void);
         $el: any;
         $options: import('vue').ComponentOptionsBase<Readonly<import('../../components/ui/SInput').Props> & Readonly<{
-            "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
             onClear?: (() => any) | undefined;
+            "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
             onInput?: ((event: Event) => any) | undefined;
             onChange?: ((value: string | number, event: Event) => any) | undefined;
             onBlur?: ((event: FocusEvent) => any) | undefined;
@@ -99,8 +99,8 @@ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import
             validate: () => Promise<void>;
             inputElement: import('vue').Ref<HTMLInputElement | HTMLTextAreaElement | null, HTMLInputElement | HTMLTextAreaElement | null>;
         }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-            "update:modelValue": (value: string | number) => any;
             clear: () => any;
+            "update:modelValue": (value: string | number) => any;
             input: (event: Event) => any;
             change: (value: string | number, event: Event) => any;
             blur: (event: FocusEvent) => any;
@@ -110,9 +110,9 @@ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import
             validate: (isValid: boolean, error: string | null) => any;
             "select-suggestion": (suggestion: string) => any;
         }, string, {
+            size: "small" | "medium" | "large";
             modelValue: string | number;
             type: "text" | "email" | "password" | "number" | "tel" | "url" | "search" | "textarea";
-            size: "small" | "medium" | "large";
             disabled: boolean;
             required: boolean;
             color: string;
@@ -155,9 +155,9 @@ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import
         $nextTick: typeof import('vue').nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
     } & Readonly<{
+        size: "small" | "medium" | "large";
         modelValue: string | number;
         type: "text" | "email" | "password" | "number" | "tel" | "url" | "search" | "textarea";
-        size: "small" | "medium" | "large";
         disabled: boolean;
         required: boolean;
         color: string;
@@ -180,8 +180,8 @@ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import
         allowOnly: "digits" | "letters" | "alphanumeric" | RegExp | ((char: string) => boolean);
         decimalPlaces: number;
     }> & Omit<Readonly<import('../../components/ui/SInput').Props> & Readonly<{
-        "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
         onClear?: (() => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
         onInput?: ((event: Event) => any) | undefined;
         onChange?: ((value: string | number, event: Event) => any) | undefined;
         onBlur?: ((event: FocusEvent) => any) | undefined;
@@ -190,7 +190,7 @@ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import
         onEnter?: ((event: KeyboardEvent) => any) | undefined;
         onValidate?: ((isValid: boolean, error: string | null) => any) | undefined;
         "onSelect-suggestion"?: ((suggestion: string) => any) | undefined;
-    }>, "blur" | "focus" | "validate" | "inputElement" | ("modelValue" | "type" | "size" | "disabled" | "required" | "color" | "variant" | "loading" | "rounded" | "resize" | "clearable" | "labelPlacement" | "readonly" | "labelAnimation" | "validateOn" | "autofocus" | "spellcheck" | "showPasswordToggle" | "counter" | "rows" | "suggestions" | "showSuggestionsOnFocus" | "allowOnly" | "decimalPlaces")> & import('vue').ShallowUnwrapRef<{
+    }>, "blur" | "focus" | "validate" | "inputElement" | ("size" | "modelValue" | "type" | "disabled" | "required" | "color" | "variant" | "loading" | "rounded" | "resize" | "clearable" | "labelPlacement" | "readonly" | "labelAnimation" | "validateOn" | "autofocus" | "spellcheck" | "showPasswordToggle" | "counter" | "rows" | "suggestions" | "showSuggestionsOnFocus" | "allowOnly" | "decimalPlaces")> & import('vue').ShallowUnwrapRef<{
         focus: () => void;
         blur: () => void;
         validate: () => Promise<void>;

package/dist/views/ui/OTPView.d.ts

@@ -98,8 +98,8 @@ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import
             complete: (value: string) => any;
             resend: () => any;
         }, string, {
-            modelValue: string;
             size: import('../../components/ui/otp').SOTPSize;
+            modelValue: string;
             disabled: boolean;
             mode: import('../../components/ui/otp').SOTPMode;
             animation: import('../../components/ui/otp').SOTPAnimation;
@@ -148,8 +148,8 @@ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import
         $nextTick: typeof import('vue').nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
     } & Readonly<{
-        modelValue: string;
         size: import('../../components/ui/otp').SOTPSize;
+        modelValue: string;
         disabled: boolean;
         mode: import('../../components/ui/otp').SOTPMode;
         animation: import('../../components/ui/otp').SOTPAnimation;
@@ -188,7 +188,7 @@ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import
         onSuccess?: (() => any) | undefined;
         onComplete?: ((value: string) => any) | undefined;
         onResend?: (() => any) | undefined;
-    }>, "clear" | "blur" | "focus" | "focusInput" | "triggerError" | "getValue" | "isComplete" | ("modelValue" | "size" | "disabled" | "mode" | "animation" | "color" | "variant" | "loading" | "rounded" | "separator" | "gap" | "readonly" | "maxlength" | "autoFocus" | "entryAnimation" | "inputAnimation" | "successAnimation" | "errorAnimation" | "morphText" | "morphDuration" | "showPlaceholder" | "placeholderChar" | "maskChar" | "autoSubmit" | "masked" | "clearOnError" | "allowPaste" | "countdown" | "resendText")> & import('vue').ShallowUnwrapRef<{
+    }>, "clear" | "blur" | "focus" | "focusInput" | "triggerError" | "getValue" | "isComplete" | ("size" | "modelValue" | "disabled" | "mode" | "animation" | "color" | "variant" | "loading" | "rounded" | "separator" | "gap" | "readonly" | "maxlength" | "autoFocus" | "entryAnimation" | "inputAnimation" | "successAnimation" | "errorAnimation" | "morphText" | "morphDuration" | "showPlaceholder" | "placeholderChar" | "maskChar" | "autoSubmit" | "masked" | "clearOnError" | "allowPaste" | "countdown" | "resendText")> & import('vue').ShallowUnwrapRef<{
         clear: () => void;
         focusInput: (index: number) => void;
         focus: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakoa/ui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "type": "module",
   "main": "./dist/saka-ui.umd.cjs",
   "module": "./dist/saka-ui.js",

package/registry/source/components/ui/SAlert.vue

@@ -2,6 +2,7 @@
 import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../../lib/utils'
+import { type IconProp, isIconComponent } from '../../lib/icon'
 
 defineOptions({ inheritAttrs: false })
 
@@ -66,7 +67,7 @@ export interface Props {
   size?: 'small' | 'medium' | 'large'
   title?: string
   description?: string
-  icon?: string | boolean
+  icon?: IconProp | boolean
   closable?: boolean
   autoDismiss?: boolean
   duration?: number
@@ -125,8 +126,10 @@ const defaultIcons = computed(() => ({
 
 const displayIcon = computed(() => {
   if (props.icon === false) return null
-  if (typeof props.icon === 'string') return props.icon
-  return defaultIcons.value[props.variant as keyof typeof defaultIcons.value] || 'information'
+  if (props.icon === true || props.icon === undefined) {
+    return defaultIcons.value[props.variant as keyof typeof defaultIcons.value] || 'information'
+  }
+  return props.icon // could be string or Component
 })
 
 const sizes = computed(() => sizeConfig[props.size])
@@ -302,9 +305,10 @@ defineExpose({
     >
       <div class="flex items-start" :class="sizes.gap">
         <!-- Icon -->
-        <div v-if="displayIcon" class="shrink-0" :class="[variantIconColors[variant], iconClass]">
+        <div v-if="displayIcon != null" class="shrink-0" :class="[variantIconColors[variant], iconClass]">
           <slot name="icon">
-            <span class="mdi" :class="[`mdi-${displayIcon}`, sizes.iconSize]" />
+            <component v-if="isIconComponent(displayIcon)" :is="displayIcon" :class="[sizes.iconSize]" />
+            <span v-else class="mdi" :class="[`mdi-${displayIcon}`, sizes.iconSize]" />
           </slot>
         </div>
 

package/registry/source/components/ui/SButton.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { cva, type VariantProps } from 'class-variance-authority'
+import type { IconProp } from '../../lib/icon'
 
 export const buttonVariants = cva(
   'relative inline-flex items-center justify-center font-medium transition-all duration-200 ease-out overflow-hidden select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 border-[1.5px] border-transparent',
@@ -46,8 +47,8 @@ export interface Props {
   preserveSize?: boolean
   block?: boolean
   rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
-  iconLeft?: string
-  iconRight?: string
+  iconLeft?: IconProp
+  iconRight?: IconProp
   iconOnly?: boolean
   tag?: string
   href?: string
@@ -64,6 +65,7 @@ export interface Props {
 <script setup lang="ts">
 import { computed, ref, useSlots, type CSSProperties } from 'vue'
 import { cn } from '../../lib/utils'
+import { isIconComponent } from '../../lib/icon'
 
 const iconOnlySizes: Record<string, string> = {
   xs: 'w-6 h-6 text-xs',
@@ -257,10 +259,10 @@ const componentBindings = computed(() => {
     >
       <template v-if="!loading || preserveSize">
         <slot name="icon-left">
-          <span
-            v-if="iconLeft"
-            :class="['mdi', `mdi-${iconLeft}`, iconSizes, iconClass]"
-          />
+          <template v-if="iconLeft">
+            <component v-if="isIconComponent(iconLeft)" :is="iconLeft" :class="[iconSizes, iconClass]" />
+            <span v-else :class="['mdi', `mdi-${iconLeft}`, iconSizes, iconClass]" />
+          </template>
         </slot>
       </template>
 
@@ -274,10 +276,10 @@ const componentBindings = computed(() => {
 
       <template v-if="!loading || preserveSize">
         <slot name="icon-right">
-          <span
-            v-if="iconRight"
-            :class="['mdi', `mdi-${iconRight}`, iconSizes, iconClass]"
-          />
+          <template v-if="iconRight">
+            <component v-if="isIconComponent(iconRight)" :is="iconRight" :class="[iconSizes, iconClass]" />
+            <span v-else :class="['mdi', `mdi-${iconRight}`, iconSizes, iconClass]" />
+          </template>
         </slot>
       </template>
     </span>

package/registry/source/components/ui/SCheckbox.vue

@@ -2,6 +2,7 @@
 import { computed, ref, type CSSProperties } from 'vue'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../../lib/utils'
+import { type IconProp, isIconComponent } from '../../lib/icon'
 
 defineOptions({ inheritAttrs: false })
 
@@ -34,7 +35,7 @@ export interface Props {
   label?: string
   labelPosition?: 'left' | 'right'
   rounded?: boolean
-  icon?: string
+  icon?: IconProp
   required?: boolean
   name?: string
   error?: string
@@ -246,7 +247,8 @@ const rounded = computed(() => props.rounded)
           :class="cn('absolute inset-0 flex items-center justify-center', color ? 'text-white' : 'text-primary-foreground', sizeConfig.icon)"
         >
           <slot name="icon">
-            <span :class="['mdi', `mdi-${displayIcon}`]" />
+            <component v-if="isIconComponent(displayIcon)" :is="displayIcon" />
+            <span v-else :class="['mdi', `mdi-${displayIcon}`]" />
           </slot>
         </span>
       </Transition>

package/registry/source/components/ui/SGlassButton.vue

@@ -2,6 +2,7 @@
 import { computed, ref, useSlots, onMounted, onUnmounted } from 'vue'
 import { useTheme } from '../../composables/useTheme'
 import { cn } from '../../lib/utils'
+import { type IconProp, isIconComponent } from '../../lib/icon'
 
 defineOptions({ inheritAttrs: false })
 
@@ -13,8 +14,8 @@ export interface Props {
   preserveSize?: boolean
   block?: boolean
   rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
-  iconLeft?: string
-  iconRight?: string
+  iconLeft?: IconProp
+  iconRight?: IconProp
   iconOnly?: boolean
   tag?: string
   href?: string
@@ -356,10 +357,10 @@ const componentBindings = computed(() => {
       <!-- Left icon -->
       <template v-if="!loading || preserveSize">
         <slot name="icon-left">
-          <span
-            v-if="iconLeft"
-            :class="['mdi', `mdi-${iconLeft}`, iconSizes]"
-          />
+          <template v-if="iconLeft">
+            <component v-if="isIconComponent(iconLeft)" :is="iconLeft" :class="[iconSizes]" />
+            <span v-else :class="['mdi', `mdi-${iconLeft}`, iconSizes]" />
+          </template>
         </slot>
       </template>
 
@@ -376,10 +377,10 @@ const componentBindings = computed(() => {
       <!-- Right icon -->
       <template v-if="!loading || preserveSize">
         <slot name="icon-right">
-          <span
-            v-if="iconRight"
-            :class="['mdi', `mdi-${iconRight}`, iconSizes]"
-          />
+          <template v-if="iconRight">
+            <component v-if="isIconComponent(iconRight)" :is="iconRight" :class="[iconSizes]" />
+            <span v-else :class="['mdi', `mdi-${iconRight}`, iconSizes]" />
+          </template>
         </slot>
       </template>
     </span>

package/registry/source/components/ui/SInput.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted, type CSSProperties } from 'vue'
 import { cn } from '../../lib/utils'
+import { type IconProp, isIconComponent } from '../../lib/icon'
 
 defineOptions({ inheritAttrs: false })
 
@@ -23,8 +24,8 @@ export interface Props {
   labelAnimation?: 'morph' | 'slide' | 'fade' | 'none'
   
   // Icons
-  iconLeft?: string
-  iconRight?: string
+  iconLeft?: IconProp
+  iconRight?: IconProp
   iconColor?: string
   
   // States
@@ -743,7 +744,8 @@ watch(() => props.error, (newError) => {
           :style="iconColor ? { color: iconColor } : iconFocusStyle"
         >
           <slot name="prefix">
-            <span v-if="iconLeft" :class="['mdi', `mdi-${iconLeft}`]" />
+            <component v-if="iconLeft && isIconComponent(iconLeft)" :is="iconLeft" />
+            <span v-else-if="iconLeft" :class="['mdi', `mdi-${iconLeft}`]" />
             <span v-if="prefix" class="text-muted-foreground text-sm">{{ prefix }}</span>
           </slot>
         </span>
@@ -905,8 +907,14 @@ watch(() => props.error, (newError) => {
           
           <!-- Custom suffix -->
           <slot name="suffix">
+            <component
+              v-if="iconRight && isIconComponent(iconRight)"
+              :is="iconRight"
+              :class="[iconColorClass]"
+              :style="iconColor ? { color: iconColor } : iconFocusStyle"
+            />
             <span
-              v-if="iconRight"
+              v-else-if="iconRight"
               :class="['mdi', `mdi-${iconRight}`, iconColorClass]"
               :style="iconColor ? { color: iconColor } : iconFocusStyle"
             />

package/registry/source/components/ui/SSelect.vue

@@ -3,12 +3,13 @@ defineOptions({ inheritAttrs: false })
 
 import { ref, computed, watch, provide, onMounted, onBeforeUnmount, nextTick, type CSSProperties } from 'vue'
 import { cn } from '../../lib/utils'
+import { type IconProp, isIconComponent } from '../../lib/icon'
 
 export interface SelectOption {
   value: any
   label?: string
   disabled?: boolean
-  icon?: string
+  icon?: IconProp
   image?: string
   description?: string
   color?: string
@@ -40,7 +41,7 @@ export interface Props {
   teleport?: boolean | string
   placement?: 'bottom' | 'top' | 'auto'
   // New props
-  arrowIcon?: string
+  arrowIcon?: IconProp
   menuWidth?: string | number
   menuAlign?: 'start' | 'end' | 'center'
   creatable?: boolean
@@ -872,6 +873,7 @@ const resolvedColor = computed(() => props.color ?? 'var(--s-primary)')
               :alt="selectedOptions[0].label" 
               class="w-5 h-5 rounded-full object-cover shrink-0"
             />
+            <component v-else-if="selectedOptions[0]?.icon && isIconComponent(selectedOptions[0].icon)" :is="selectedOptions[0].icon" class="text-muted-foreground" />
             <span v-else-if="selectedOptions[0]?.icon" :class="['mdi', `mdi-${selectedOptions[0].icon}`, 'text-muted-foreground']" />
             <span class="truncate text-foreground">{{ displayValue }}</span>
           </slot>
@@ -907,8 +909,14 @@ const resolvedColor = computed(() => props.color ?? 'var(--s-primary)')
 
       <!-- Dropdown arrow -->
       <slot name="arrow" :is-open="isOpen">
-        <span 
-          v-if="!loading"
+        <component
+          v-if="!loading && isIconComponent(arrowIcon)"
+          :is="arrowIcon"
+          class="text-muted-foreground transition-transform duration-200 shrink-0"
+          :class="[sizeConfig.icon, { 'rotate-180': isOpen }]"
+        />
+        <span
+          v-else-if="!loading"
           class="text-muted-foreground transition-transform duration-200 shrink-0"
           :class="['mdi', `mdi-${arrowIcon}`, sizeConfig.icon, { 'rotate-180': isOpen }]"
         />
@@ -1030,8 +1038,15 @@ const resolvedColor = computed(() => props.color ?? 'var(--s-primary)')
                           class="relative z-10 w-6 h-6 rounded-full object-cover shrink-0 mr-2.5"
                         />
                         <!-- Icon -->
-                        <span 
-                          v-else-if="option.icon" 
+                        <component
+                          v-else-if="option.icon && isIconComponent(option.icon)"
+                          :is="option.icon"
+                          class="relative z-10 shrink-0 mr-2.5"
+                          :class="[sizeConfig.icon]"
+                          :style="isSelected(option.value) ? { color: option.color ?? resolvedColor } : {}"
+                        />
+                        <span
+                          v-else-if="option.icon"
                           class="relative z-10 shrink-0 mr-2.5"
                           :class="['mdi', `mdi-${option.icon}`, sizeConfig.icon]"
                           :style="isSelected(option.value) ? { color: option.color ?? resolvedColor } : {}"
@@ -1098,8 +1113,15 @@ const resolvedColor = computed(() => props.color ?? 'var(--s-primary)')
                         class="relative z-10 w-6 h-6 rounded-full object-cover shrink-0 mr-2.5"
                       />
                       <!-- Icon -->
-                      <span 
-                        v-else-if="option.icon" 
+                      <component
+                        v-else-if="option.icon && isIconComponent(option.icon)"
+                        :is="option.icon"
+                        class="relative z-10 shrink-0 mr-2.5"
+                        :class="[sizeConfig.icon]"
+                        :style="isSelected(option.value) ? { color: option.color ?? resolvedColor } : {}"
+                      />
+                      <span
+                        v-else-if="option.icon"
                         class="relative z-10 shrink-0 mr-2.5"
                         :class="['mdi', `mdi-${option.icon}`, sizeConfig.icon]"
                         :style="isSelected(option.value) ? { color: option.color ?? resolvedColor } : {}"

package/registry/source/components/ui/SSwitch.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, useAttrs, type CSSProperties } from 'vue'
 import { cn } from '../../lib/utils'
+import { type IconProp, isIconComponent } from '../../lib/icon'
 
 defineOptions({ inheritAttrs: false })
 
@@ -17,8 +18,8 @@ export interface Props {
   uncheckedValue?: boolean | string | number
   labelBefore?: string
   labelAfter?: string
-  checkedIcon?: string
-  uncheckedIcon?: string
+  checkedIcon?: IconProp
+  uncheckedIcon?: IconProp
   checkedText?: string
   uncheckedText?: string
   trackClass?: string
@@ -232,16 +233,18 @@ const thumbClasses = computed(() => {
         <!-- Custom Icons via Slots -->
         <template v-else>
           <slot v-if="isChecked" name="checked-icon">
+            <component v-if="checkedIcon && isIconComponent(checkedIcon)" :is="checkedIcon" :class="[sizeConfig.icon]" :style="checkedIconStyle" />
             <span
-              v-if="checkedIcon"
+              v-else-if="checkedIcon"
               :class="['mdi', `mdi-${checkedIcon}`, sizeConfig.icon]"
               :style="checkedIconStyle"
               :data-no-color="!color ? '' : undefined"
             ></span>
           </slot>
           <slot v-else name="unchecked-icon">
+            <component v-if="uncheckedIcon && isIconComponent(uncheckedIcon)" :is="uncheckedIcon" :class="[sizeConfig.icon, 'text-muted-foreground']" />
             <span
-              v-if="uncheckedIcon"
+              v-else-if="uncheckedIcon"
               :class="['mdi', `mdi-${uncheckedIcon}`, sizeConfig.icon, 'text-muted-foreground']"
             ></span>
           </slot>

package/registry/source/components/ui/accordion/SAccordionItem.vue

@@ -3,6 +3,7 @@ defineOptions({ inheritAttrs: false })
 
 import { inject, ref, computed, onMounted, onBeforeUnmount, watch, nextTick, provide, useSlots } from 'vue'
 import { cn } from '../../../lib/utils'
+import { type IconProp, isIconComponent } from '../../../lib/icon'
 import { SAccordionContextKey, SAccordionItemContextKey, type SAccordionContext } from './SAccordion.vue'
 
 export interface Props {
@@ -12,10 +13,10 @@ export interface Props {
   title?: string
   /** Optional subtitle text */
   subtitle?: string
-  /** MDI icon name for header */
-  icon?: string
-  /** Custom expand icon (MDI icon name, replaces default chevron) */
-  expandIcon?: string
+  /** MDI icon name or Vue component for header */
+  icon?: IconProp
+  /** Custom expand icon (MDI icon name or Vue component, replaces default chevron) */
+  expandIcon?: IconProp
   /** Disable this item */
   disabled?: boolean
   /** Lazy render content */
@@ -272,8 +273,14 @@ provide(SAccordionItemContextKey, {
             :disabled="disabled"
           >
             <!-- Icon -->
+            <component
+              v-if="icon && isIconComponent(icon)"
+              :is="icon"
+              :class="[sizeConfig.icon, 'shrink-0 text-muted-foreground']"
+              :style="isExpanded ? { color: context?.color } : {}"
+            />
             <span
-              v-if="icon"
+              v-else-if="icon"
               :class="['mdi', `mdi-${icon}`, sizeConfig.icon, 'shrink-0 text-muted-foreground']"
               :style="isExpanded ? { color: context?.color } : {}"
             />
@@ -304,7 +311,14 @@ provide(SAccordionItemContextKey, {
 
         <!-- Expand Icon -->
         <slot name="icon" :expanded="isExpanded">
+          <component
+            v-if="expandIcon && isIconComponent(expandIcon)"
+            :is="expandIcon"
+            :class="[sizeConfig.expandIcon, 'text-muted-foreground shrink-0']"
+            :style="expandIconStyle"
+          />
           <span
+            v-else
             :class="['mdi shrink-0', `mdi-${expandIcon || 'chevron-down'}`, sizeConfig.expandIcon, 'text-muted-foreground']"
             :style="expandIconStyle"
           />

package/registry/source/components/ui/card/SCardHeader.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue'
 import { cn } from '../../../lib/utils'
+import { type IconProp, isIconComponent } from '../../../lib/icon'
 import { cardContextKey, type CardContext } from './index'
 
 defineOptions({ inheritAttrs: false })
@@ -14,8 +15,8 @@ export interface Props {
   avatar?: string
   /** Avatar fallback text (initials) */
   avatarFallback?: string
-  /** Icon name (MDI) */
-  icon?: string
+  /** Icon name (MDI) or Vue component */
+  icon?: IconProp
   /** Icon color */
   iconColor?: string
   /** Show divider below header */
@@ -109,11 +110,13 @@ const computedStyle = computed(() => {
         </div>
         
         <!-- Icon -->
-        <div 
-          v-else-if="icon" 
+        <div
+          v-else-if="icon"
           class="w-10 h-10 rounded-xl bg-primary/15 flex items-center justify-center"
         >
-          <span 
+          <component v-if="isIconComponent(icon)" :is="icon" :style="{ color: iconColor }" />
+          <span
+            v-else
             class="mdi text-xl"
             :class="`mdi-${icon}`"
             :style="{ color: iconColor }"