@sakoa/ui 0.1.1 → 0.2.0

package/dist/cli/index.js

@@ -8425,6 +8425,12 @@ async function initCommand() {
       message: "Composable directory:",
       initial: DEFAULT_CONFIG.composableDir
     },
+    {
+      type: "text",
+      name: "libDir",
+      message: "Lib/utils directory:",
+      initial: DEFAULT_CONFIG.libDir
+    },
     {
       type: "confirm",
       name: "typescript",
@@ -8445,6 +8451,7 @@ async function initCommand() {
   const config = {
     componentDir: response.componentDir,
     composableDir: response.composableDir,
+    libDir: response.libDir,
     typescript: response.typescript,
     overwrite: response.overwriteFiles
   };
@@ -8453,6 +8460,7 @@ async function initCommand() {
   log.success("Created saka-ui.json");
   log.dim(`  Component dir: ${config.componentDir}`);
   log.dim(`  Composable dir: ${config.composableDir}`);
+  log.dim(`  Lib dir: ${config.libDir}`);
   log.dim(`  TypeScript: ${config.typescript}`);
   log.blank();
   log.info('Next: run "saka-ui add button" to add your first component.');

package/dist/components/ui/SAlert.d.ts

@@ -1,4 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
+import { IconProp } from '../../lib/icon';
 declare const alertVariants: (props?: ({
     variant?: "custom" | "error" | "success" | "warning" | "info" | null | undefined;
     size?: "small" | "medium" | "large" | null | undefined;
@@ -9,7 +10,7 @@ export interface Props {
     size?: 'small' | 'medium' | 'large';
     title?: string;
     description?: string;
-    icon?: string | boolean;
+    icon?: IconProp | boolean;
     closable?: boolean;
     autoDismiss?: boolean;
     duration?: number;
@@ -51,7 +52,7 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {
 }>, {
     size: "small" | "medium" | "large";
     closable: boolean;
-    icon: string | boolean;
+    icon: IconProp | boolean;
     title: string;
     position: "static" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
     duration: number;

package/dist/components/ui/SButton.d.ts

@@ -1,4 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
+import { IconProp } from '../../lib/icon';
 export declare const buttonVariants: (props?: ({
     variant?: "link" | "filled" | "outlined" | "light" | "ghost" | null | undefined;
     size?: "small" | "medium" | "large" | "xs" | "xl" | null | undefined;
@@ -14,8 +15,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;
@@ -32,8 +33,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Pr
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     onClick?: ((event: MouseEvent) => any) | undefined;
 }>, {
-    type: "button" | "submit" | "reset";
     size: "xs" | "small" | "medium" | "large" | "xl";
+    type: "button" | "submit" | "reset";
     disabled: boolean;
     color: string;
     variant: "filled" | "outlined" | "light" | "ghost" | "link";
@@ -42,8 +43,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Pr
     rounded: "none" | "sm" | "md" | "lg" | "full";
     preserveSize: boolean;
     block: boolean;
-    iconLeft: string;
-    iconRight: string;
+    iconLeft: IconProp;
+    iconRight: IconProp;
     iconOnly: boolean;
     tag: string;
     href: string;

package/dist/components/ui/SCheckbox.d.ts

@@ -1,4 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
+import { IconProp } from '../../lib/icon';
 declare const checkboxVariants: (props?: ({
     size?: "small" | "medium" | "large" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -14,7 +15,7 @@ export interface Props {
     label?: string;
     labelPosition?: 'left' | 'right';
     rounded?: boolean;
-    icon?: string;
+    icon?: IconProp;
     required?: boolean;
     name?: string;
     error?: string;
@@ -38,10 +39,10 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     "onUpdate:modelValue"?: ((value: string | number | boolean | any[]) => any) | undefined;
     onChange?: ((value: string | number | boolean | any[], event: Event) => any) | undefined;
 }>, {
-    modelValue: boolean | string | number | any[];
     size: "small" | "medium" | "large";
+    modelValue: boolean | string | number | any[];
     name: string;
-    icon: string;
+    icon: IconProp;
     disabled: boolean;
     label: string;
     value: any;

package/dist/components/ui/SDatePicker.d.ts

@@ -28,22 +28,22 @@ export interface Props {
     labelPlacement?: 'top' | 'left';
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    clear: () => any;
     "update:modelValue": (value: Date | [Date, Date] | Date[] | null) => any;
     close: () => any;
-    clear: () => any;
     open: () => any;
     monthChange: (month: number, year: number) => any;
     yearChange: (year: number) => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onClear?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: Date | [Date, Date] | Date[] | null) => any) | undefined;
     onClose?: (() => any) | undefined;
-    onClear?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;
     onMonthChange?: ((month: number, year: number) => any) | undefined;
     onYearChange?: ((year: number) => any) | undefined;
 }>, {
-    modelValue: Date | Date[] | [Date, Date] | null;
     size: "small" | "medium" | "large";
+    modelValue: Date | Date[] | [Date, Date] | null;
     disabled: boolean;
     label: string;
     mode: "single" | "range" | "multiple";

package/dist/components/ui/SGlassButton.d.ts

@@ -1,3 +1,4 @@
+import { IconProp } from '../../lib/icon';
 export interface Props {
     size?: 'xs' | 'small' | 'medium' | 'large' | 'xl';
     disabled?: boolean;
@@ -5,8 +6,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;
@@ -39,16 +40,16 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     onClick?: ((event: MouseEvent) => any) | undefined;
 }>, {
-    type: "button" | "submit" | "reset";
     size: "xs" | "small" | "medium" | "large" | "xl";
+    type: "button" | "submit" | "reset";
     disabled: boolean;
     color: string;
     loading: boolean;
     rounded: "none" | "sm" | "md" | "lg" | "full";
     preserveSize: boolean;
     block: boolean;
-    iconLeft: string;
-    iconRight: string;
+    iconLeft: IconProp;
+    iconRight: IconProp;
     iconOnly: boolean;
     tag: string;
     href: string;

package/dist/components/ui/SInput.d.ts

@@ -1,3 +1,4 @@
+import { IconProp } from '../../lib/icon';
 export interface Props {
     modelValue?: string | number;
     type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'textarea';
@@ -9,8 +10,8 @@ export interface Props {
     placeholder?: string;
     labelPlacement?: 'top' | 'top-left' | 'top-center' | 'top-right' | 'bottom' | 'left' | 'right' | 'floating' | 'inside';
     labelAnimation?: 'morph' | 'slide' | 'fade' | 'none';
-    iconLeft?: string;
-    iconRight?: string;
+    iconLeft?: IconProp;
+    iconRight?: IconProp;
     iconColor?: string;
     disabled?: boolean;
     readonly?: boolean;
@@ -70,8 +71,8 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {
     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;
@@ -81,8 +82,8 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {
     validate: (isValid: boolean, error: string | null) => any;
     "select-suggestion": (suggestion: string) => any;
 }, string, import('vue').PublicProps, Readonly<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;
@@ -92,9 +93,9 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {
     onValidate?: ((isValid: boolean, error: string | null) => any) | undefined;
     "onSelect-suggestion"?: ((suggestion: string) => any) | undefined;
 }>, {
+    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;

package/dist/components/ui/SSelect.d.ts

@@ -1,8 +1,9 @@
+import { IconProp } from '../../lib/icon';
 export interface SelectOption {
     value: any;
     label?: string;
     disabled?: boolean;
-    icon?: string;
+    icon?: IconProp;
     image?: string;
     description?: string;
     color?: string;
@@ -32,7 +33,7 @@ export interface Props {
     required?: boolean;
     teleport?: boolean | string;
     placement?: 'bottom' | 'top' | 'auto';
-    arrowIcon?: string;
+    arrowIcon?: IconProp;
     menuWidth?: string | number;
     menuAlign?: 'start' | 'end' | 'center';
     creatable?: boolean;
@@ -102,8 +103,8 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     onOpen?: (() => any) | undefined;
     onCreate?: ((value: string) => any) | undefined;
 }>, {
-    modelValue: any | any[];
     size: "small" | "medium" | "large";
+    modelValue: any | any[];
     placement: "bottom" | "top" | "auto";
     filter: boolean;
     disabled: boolean;
@@ -126,7 +127,7 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     noOptionsText: string;
     noResultsText: string;
     hint: string;
-    arrowIcon: string;
+    arrowIcon: IconProp;
     menuWidth: string | number;
     menuAlign: "start" | "end" | "center";
     creatable: boolean;

package/dist/components/ui/SSwitch.d.ts

@@ -1,3 +1,4 @@
+import { IconProp } from '../../lib/icon';
 export interface Props {
     modelValue?: boolean | string | number;
     type?: 'inset' | 'outset';
@@ -9,8 +10,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;
@@ -34,9 +35,9 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     "onUpdate:modelValue"?: ((value: string | number | boolean) => any) | undefined;
     onChange?: ((value: string | number | boolean) => any) | undefined;
 }>, {
+    size: "small" | "medium" | "large";
     modelValue: boolean | string | number;
     type: "inset" | "outset";
-    size: "small" | "medium" | "large";
     disabled: boolean;
     color: string;
     loading: boolean;
@@ -44,8 +45,8 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     uncheckedValue: boolean | string | number;
     labelBefore: string;
     labelAfter: string;
-    checkedIcon: string;
-    uncheckedIcon: string;
+    checkedIcon: IconProp;
+    uncheckedIcon: IconProp;
     checkedText: string;
     uncheckedText: string;
     trackClass: string;

package/dist/components/ui/accordion/SAccordionItem.d.ts

@@ -1,3 +1,4 @@
+import { IconProp } from '../../../lib/icon';
 export interface Props {
     /** Unique identifier for this item */
     name: string | number;
@@ -5,10 +6,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 */
@@ -50,13 +51,13 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     onToggle?: ((expanded: boolean) => any) | undefined;
 }>, {
-    icon: string;
+    icon: IconProp;
     disabled: boolean;
     title: string;
     contentClass: string;
     lazy: boolean;
     subtitle: string;
-    expandIcon: string;
+    expandIcon: IconProp;
     headerClass: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     contentRef: HTMLDivElement;

package/dist/components/ui/card/SCardHeader.d.ts

@@ -1,3 +1,4 @@
+import { IconProp } from '../../../lib/icon';
 export interface Props {
     /** Title text */
     title?: string;
@@ -7,8 +8,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 */
@@ -34,7 +35,7 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
-    icon: string;
+    icon: IconProp;
     title: string;
     layout: "horizontal" | "vertical";
     align: "start" | "center" | "end";

package/dist/components/ui/dropdown/SDropdownGroup.d.ts

@@ -1,8 +1,9 @@
+import { IconProp } from '../../../lib/icon';
 export interface Props {
     /** Group header label */
     label: string;
     /** Icon for the header */
-    icon?: string;
+    icon?: IconProp;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -14,7 +15,7 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
-    icon: string;
+    icon: IconProp;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/ui/dropdown/SDropdownItem.d.ts

@@ -1,12 +1,13 @@
+import { IconProp } from '../../../lib/icon';
 export interface Props {
     /** Unique key for the item */
     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 */
@@ -37,13 +38,13 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     onClick?: ((event: MouseEvent) => any) | undefined;
     "onUpdate:checked"?: ((checked: boolean) => any) | undefined;
 }>, {
-    icon: string;
+    icon: IconProp;
     disabled: boolean;
     label: string;
     color: string;
     description: string;
     checked: boolean;
-    trailingIcon: string;
+    trailingIcon: IconProp;
     shortcut: string;
     danger: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/ui/option/SOption.d.ts

@@ -1,8 +1,9 @@
+import { IconProp } from '../../../lib/icon';
 export interface Props {
     value: any;
     label?: string;
     disabled?: boolean;
-    icon?: string;
+    icon?: IconProp;
     description?: string;
     color?: string;
 }
@@ -17,7 +18,7 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
-    icon: string;
+    icon: IconProp;
     disabled: boolean;
     label: string;
     color: string;

package/dist/components/ui/otp/SOTP.d.ts

@@ -81,8 +81,8 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {
     onComplete?: ((value: string) => any) | undefined;
     onResend?: (() => any) | undefined;
 }>, {
-    modelValue: string;
     size: SOTPSize;
+    modelValue: string;
     disabled: boolean;
     mode: SOTPMode;
     animation: SOTPAnimation;

package/dist/components/ui/pagination/SPagination.d.ts

@@ -111,8 +111,8 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     "onUpdate:pageSize"?: ((size: number) => any) | undefined;
     onPageSizeChange?: ((size: number) => any) | undefined;
 }>, {
-    modelValue: number;
     size: PaginationSize;
+    modelValue: number;
     disabled: boolean;
     animation: AnimationType;
     color: string;

package/dist/components/ui/progress/SProgress.d.ts

@@ -31,8 +31,8 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
-    modelValue: number;
     size: "xs" | "small" | "medium" | "large" | "xl";
+    modelValue: number;
     animated: boolean;
     disabled: boolean;
     width: string;

package/dist/components/ui/progress/SProgressRange.d.ts

@@ -50,8 +50,8 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     "onDrag-start"?: ((handle: "max" | "single" | "min") => any) | undefined;
     "onDrag-end"?: ((value: number | RangeValue) => any) | undefined;
 }>, {
-    modelValue: number | RangeValue;
     size: "small" | "medium" | "large";
+    modelValue: number | RangeValue;
     disabled: boolean;
     label: string;
     color: string;

package/dist/components/ui/radio/SRadio.d.ts

@@ -1,3 +1,4 @@
+import { IconProp } from '../../../lib/icon';
 export interface Props {
     modelValue?: any;
     value?: any;
@@ -8,7 +9,7 @@ export interface Props {
     label?: string;
     labelPosition?: 'left' | 'right';
     variant?: 'default' | 'filled' | 'outlined' | 'button';
-    icon?: string;
+    icon?: IconProp;
     required?: boolean;
     name?: string;
     error?: string;
@@ -33,10 +34,10 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
     onChange?: ((value: any, event: Event) => any) | undefined;
 }>, {
-    modelValue: any;
     size: "small" | "medium" | "large";
+    modelValue: any;
     name: string;
-    icon: string;
+    icon: IconProp;
     disabled: boolean;
     label: string;
     value: any;

package/dist/components/ui/radio/SRadioGroup.d.ts

@@ -32,8 +32,8 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
     onChange?: ((value: any) => any) | undefined;
 }>, {
-    modelValue: any;
     size: "small" | "medium" | "large";
+    modelValue: any;
     name: string;
     disabled: boolean;
     color: string;

package/dist/components/ui/stepper/SStepper.d.ts

@@ -51,8 +51,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Pr
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
     onChange?: ((value: number, oldValue: number) => any) | undefined;
 }>, {
-    modelValue: number;
     size: StepperSize;
+    modelValue: number;
     animated: boolean;
     linear: boolean;
     color: string;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { cn } from './lib/utils';
+export { type IconProp, isIconComponent } from './lib/icon';
 export { STabs, STabPane, STabsList, STabsTrigger, STabsContent, STabsIndicator } from './components/ui/tabs';
 export { default as SIcon } from './components/ui/SIcon';
 export { default as SChip } from './components/ui/SChip';

package/dist/lib/icon.d.ts

@@ -0,0 +1,10 @@
+import { Component } from 'vue';
+/**
+ * Icon prop type: accepts either an MDI icon name string (e.g. "home")
+ * or a Vue component (e.g. a Lucide icon component).
+ */
+export type IconProp = string | Component;
+/**
+ * Check if an icon prop value is a Vue component (not a string).
+ */
+export declare function isIconComponent(icon: IconProp): icon is Component;