vueless 1.2.8-beta.10 → 1.2.8-beta.12

package/constants.d.ts

@@ -131,6 +131,7 @@ export namespace SYSTEM_CONFIG_KEY {
     let unstyled: string;
     let transition: string;
     let colors: string;
+    let props: string;
 }
 export const ICON_NON_PROPS_DEFAULTS: string[];
 export namespace DIRECTIVES {

package/constants.js

@@ -225,6 +225,7 @@ export const SYSTEM_CONFIG_KEY = {
   unstyled: "unstyled",
   transition: "transition",
   colors: "colors",
+  props: "props",
   ...CVA_CONFIG_KEY,
 };
 

package/index.d.ts

@@ -140,6 +140,8 @@ export type {
   NestedComponent,
   ComponentConfig,
   ComponentDefaults,
+  ComponentCustomProp,
+  ComponentCustomProps,
   CreateVuelessOptions,
   /* Color and theme types */
   StateColors,

package/index.ts

@@ -146,6 +146,8 @@ export type {
   NestedComponent,
   ComponentConfig,
   ComponentDefaults,
+  ComponentCustomProp,
+  ComponentCustomProps,
   CreateVuelessOptions,
   /* Color and theme types */
   StateColors,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.8-beta.10",
+  "version": "1.2.8-beta.12",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -18,10 +18,10 @@
     "release:icons": "npx node .scripts/icons",
     "release:types": "rm -f ./node_modules/.tmp/tsconfig.app.tsbuildinfo && npx tsc --project tsconfig.build.json",
     "release:prepare": "npm run release:icons && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md dist/ && npx node .scripts/writeLocales && npm run release:types",
-    "release:beta": "release-it --ci --npm.publish --preRelease=beta --increment=prerelease",
-    "release:patch": "release-it patch --ci --npm.publish --git.tag --github.release",
-    "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",
-    "release:major": "release-it major --ci --npm.publish --git.tag --github.release",
+    "release:beta": "release-it --increment=prerelease --preRelease=beta --ci --no-git.tag --no-github.release",
+    "release:patch": "release-it patch --ci",
+    "release:minor": "release-it minor --ci",
+    "release:major": "release-it major --ci",
     "lint": "eslint --no-fix src/ test/ .storybook/ .vueless/ .scripts/",
     "lint:fix": "eslint --fix src/ test/ .storybook/ .vueless/ .scripts/",
     "lint:ci": "eslint --no-fix --max-warnings=0",
@@ -47,6 +47,7 @@
   "devDependencies": {
     "@material-symbols/svg-500": "^0.35.0",
     "@release-it/bumper": "^7.0.5",
+    "@release-it/conventional-changelog": "^10.0.1",
     "@tsconfig/node20": "^20.1.6",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^24.1.0",
@@ -106,6 +107,9 @@
       "types": "./modules.d.ts"
     }
   },
+  "overrides": {
+    "conventional-changelog-conventionalcommits": "8.0.0"
+  },
   "resolutions": {
     "jackspeak": "2.3.6"
   },

package/plugin-vite.js

@@ -129,9 +129,14 @@ export const Vueless = function (options = {}) {
         await cacheMergedConfigs({ vuelessSrcDir, basePath });
       }
 
-      await buildWebTypes({ vuelessSrcDir, basePath });
+      /* set custom prop types */
       await setCustomPropTypes({ vuelessSrcDir, basePath });
 
+      /* build web-types.json with delay for right custom props behavior */
+      setTimeout(async () => {
+        await buildWebTypes({ vuelessSrcDir, basePath });
+      }, 2000);
+
       /* collect used in project colors for tailwind safelist */
       await createTailwindSafelist({ env, srcDir: vuelessSrcDir, targetFiles, basePath, debug });
 

package/types.ts

@@ -198,7 +198,7 @@ export type MergedThemeConfig = Omit<ThemeConfig, "text | outline | rounding"> &
 
 export type UnknownObject = Record<string, unknown>;
 export type UnknownArray = unknown[];
-export type UnknownType = string | number | boolean | UnknownObject | undefined | null;
+export type UnknownType = string | number | boolean | UnknownObject | undefined | null | unknown;
 
 export type ComponentNames = keyof Components & string; // keys union
 
@@ -325,7 +325,19 @@ export interface NestedComponent {
 
 export type ComponentDefaults = {
   color?: string;
-  [key: string]: unknown | UnknownObject;
+  [key: string]: UnknownType;
+};
+
+export type ComponentCustomProps = {
+  [key: string]: ComponentCustomProp;
+};
+
+export type ComponentCustomProp = {
+  required?: boolean;
+  ignore?: boolean;
+  values?: string[];
+  default?: UnknownType;
+  description?: string;
 };
 
 export interface CVA {

package/utils/helper.ts

@@ -196,6 +196,10 @@ export function toNumber(value: unknown): number | undefined {
     return value;
   }
 
+  if (typeof value === "boolean") {
+    return Number(value);
+  }
+
   if (typeof value === "string" && value.trim() !== "") {
     const number = Number(value);
 

package/utils/node/dynamicProps.d.ts

@@ -1,2 +1,5 @@
-export function setCustomPropTypes({ vuelessSrcDir, basePath }?: {}): Promise<void>;
-export function removeCustomPropTypes(srcDir: any): Promise<void>;
+export function setCustomPropTypes({ vuelessSrcDir, basePath }?: {
+    vuelessSrcDir: string;
+    basePath: string;
+}): Promise<void>;
+export function removeCustomPropTypes(srcDir: string): Promise<void>;

package/utils/node/dynamicProps.js

@@ -1,6 +1,6 @@
+import path from "node:path";
 import fs from "node:fs/promises";
 import { existsSync } from "node:fs";
-import path from "node:path";
 
 import { removeFolderIfEmpty } from "./helper.js";
 import { getVuelessConfig } from "./vuelessConfig.js";
@@ -8,86 +8,97 @@ import { getVuelessConfig } from "./vuelessConfig.js";
 import {
   CACHE_DIR,
   COMPONENTS,
-  GRAYSCALE_COLOR,
+  TEXT_COLOR,
   INHERIT_COLOR,
   PRIMARY_COLOR,
-  TEXT_COLOR,
+  GRAYSCALE_COLOR,
+  VUELESS_CACHE_DIR,
 } from "../../constants.js";
+import { buildWebTypes } from "./webTypes.js";
 
+/* local constants */
+const SAFE_COLORS = [PRIMARY_COLOR, GRAYSCALE_COLOR, INHERIT_COLOR, TEXT_COLOR];
 const OPTIONAL_MARK = "?";
 const CLOSING_BRACKET = "}";
 const IGNORE_PROP = "@ignore";
 const CUSTOM_PROP = "@custom";
 
+/* regular expressions */
 const PROPS_INTERFACE_REG_EXP = /export\s+interface\s+Props(?:<[^>]+>)?\s*{([^}]*)}/s;
 const UNION_SYMBOLS_REG_EXP = /[?|:"|;]/g;
 const WORD_IN_QUOTE_REG_EXP = /"([^"]+)"/g;
 
-const DEFAULT_SAFE_COLORS = [PRIMARY_COLOR, GRAYSCALE_COLOR, INHERIT_COLOR, TEXT_COLOR];
-
+/**
+ * Updates custom PropTypes for components based on provided configuration and colors.
+ *
+ * @param {Object} options Configuration options.
+ * @param {string} options.vuelessSrcDir The source directory for Vueless components.
+ * @param {string} options.basePath The base path for retrieving the Vueless configuration file.
+ * @return {Promise<void>} Resolves when custom PropTypes for all components are updated successfully.
+ */
 export async function setCustomPropTypes({ vuelessSrcDir, basePath } = {}) {
   const vuelessConfig = await getVuelessConfig(basePath);
 
+  const hasCustomColors = vuelessConfig.colors?.length;
+  const hasCustomColorProp = !!Object.values(vuelessConfig.components || {}).find(
+    (component) => component.props?.color,
+  );
+
+  let componentsWithColorProp = [];
+
+  /* Build web-types.json to get list of components with color prop */
+  if (hasCustomColors || hasCustomColorProp) {
+    await buildWebTypes({ vuelessSrcDir, basePath });
+
+    componentsWithColorProp = await getComponentsWithColors();
+  }
+
   for await (const [componentName, componentDir] of Object.entries(COMPONENTS)) {
     let componentGlobalConfig = vuelessConfig.components?.[componentName];
+    const hasDefaultColorProp = componentsWithColorProp.some((item) => item.name === componentName);
+
+    /* Skip components without props and without global colors in config */
+    if (!componentGlobalConfig?.props && !(hasCustomColors && hasDefaultColorProp)) {
+      continue;
+    }
 
-    if (vuelessConfig.colors && vuelessConfig.colors.length && componentGlobalConfig) {
-      const customProps = componentGlobalConfig.props || [];
-      const colorPropsIndex = customProps.findIndex((prop) => prop.name === "color");
-      const isCustomColorProp = colorPropsIndex !== -1;
+    /* Add colors to the default or custom color prop */
+    if (componentGlobalConfig?.props?.color || (hasCustomColors && hasDefaultColorProp)) {
+      // eslint-disable-next-line prettier/prettier
+      const defaultColors = componentsWithColorProp.find((component) => component.name === componentName)?.colors || [];
+      const safelistedColors = defaultColors.filter((color) => SAFE_COLORS.includes(color));
 
-      const modifiedCustomColorProp = isCustomColorProp
-        ? customProps.with(colorPropsIndex, {
-            ...customProps[colorPropsIndex],
-            name: "color",
+      componentGlobalConfig = {
+        ...(componentGlobalConfig || {}),
+        props: {
+          ...(componentGlobalConfig?.props || {}),
+          color: {
+            ...(componentGlobalConfig?.props?.color || {}),
             values: [
               ...new Set([
-                ...(customProps[colorPropsIndex]?.values || []),
-                ...vuelessConfig.colors,
-                ...DEFAULT_SAFE_COLORS,
+                ...(componentGlobalConfig?.props?.color?.values || []),
+                ...(vuelessConfig.colors || []),
+                ...safelistedColors,
               ]),
             ],
-          })
-        : undefined;
-
-      const customPropsWithColor = [
-        ...customProps,
-        {
-          name: "color",
-          values: [...new Set([...vuelessConfig.colors, ...DEFAULT_SAFE_COLORS])],
-          required: false,
-        },
-      ];
-
-      componentGlobalConfig = {
-        ...componentGlobalConfig,
-        props: isCustomColorProp ? modifiedCustomColorProp : customPropsWithColor,
-      };
-    }
-
-    if (vuelessConfig.colors && vuelessConfig.colors.length && !componentGlobalConfig) {
-      componentGlobalConfig = {
-        props: [
-          {
-            name: "color",
-            values: [...new Set([...vuelessConfig.colors, ...DEFAULT_SAFE_COLORS])],
-            required: false,
           },
-        ],
+        },
       };
     }
 
-    const isCustomProps = componentGlobalConfig && componentGlobalConfig.props;
+    const cachePath = path.join(vuelessSrcDir, componentDir);
 
-    if (isCustomProps) {
-      const cachePath = path.join(vuelessSrcDir, componentDir);
-
-      await cacheComponentTypes(cachePath);
-      await modifyComponentTypes(cachePath, componentGlobalConfig.props);
-    }
+    await cacheComponentTypes(cachePath);
+    await modifyComponentTypes(cachePath, componentGlobalConfig.props);
   }
 }
 
+/**
+ * Removes custom prop types definitions for components.
+ *
+ * @param {string} srcDir - The source directory containing the component directories.
+ * @return {Promise<void>} - A promise that resolves when custom prop types have been removed.
+ */
 export async function removeCustomPropTypes(srcDir) {
   for await (const componentDir of Object.values(COMPONENTS)) {
     await restoreComponentTypes(path.join(srcDir, componentDir));
@@ -95,6 +106,39 @@ export async function removeCustomPropTypes(srcDir) {
   }
 }
 
+/**
+ * Retrieves a list of components that have a "color" prop from the `web-types.json` file.
+ *
+ * @return {Promise<Array<string>>} A promise that resolves with an array of component names.
+ */
+async function getComponentsWithColors() {
+  const webTypesPath = path.join(VUELESS_CACHE_DIR, "web-types.json");
+
+  if (!existsSync(webTypesPath)) {
+    return [];
+  }
+
+  const webTypesContent = await fs.readFile(webTypesPath, "utf8");
+  const webTypes = JSON.parse(webTypesContent);
+
+  if (!webTypes.contributions?.html?.tags) {
+    return [];
+  }
+
+  return webTypes.contributions.html.tags
+    .filter((component) => component?.attributes.some((attribute) => attribute.name === "color"))
+    .map((component) => ({
+      name: component.name,
+      colors: component.attributes.find((attribute) => attribute.name === "color")?.enum,
+    }));
+}
+
+/**
+ * Caches the component types by copying a source file to a specified cache directory.
+ *
+ * @param {string} filePath - The directory path where the source file is located and the cache directory will be created.
+ * @return {Promise<void>} A promise that resolves when the file has been successfully copied, or immediately if no action is taken.
+ */
 async function cacheComponentTypes(filePath) {
   const cacheDir = path.join(filePath, CACHE_DIR);
   const sourceFile = path.join(filePath, "types.ts");
@@ -111,6 +155,13 @@ async function cacheComponentTypes(filePath) {
   await fs.cp(sourceFile, destFile);
 }
 
+/**
+ * Clears the cached component types by removing the specified cache file
+ * and deleting the corresponding folder if it is empty.
+ *
+ * @param {string} filePath - The base file path where the cache directory resides.
+ * @return {Promise<void>} A promise that resolves when the cache has been cleared.
+ */
 async function clearComponentTypesCache(filePath) {
   const cacheDir = path.join(filePath, CACHE_DIR);
   const sourceFile = path.join(cacheDir, "types.ts");
@@ -122,6 +173,13 @@ async function clearComponentTypesCache(filePath) {
   await removeFolderIfEmpty(cacheDir);
 }
 
+/**
+ * Restores the component type definitions by copying a cached file to the destination.
+ *
+ * @param {string} filePath - The directory path where the component types should be restored.
+ * This path serves as the base for locating the cached file and the destination file.
+ * @return {Promise<void>} A promise that resolves when the component types have been successfully restored.
+ */
 async function restoreComponentTypes(filePath) {
   const cacheDir = path.join(filePath, CACHE_DIR);
   const sourceFile = path.join(cacheDir, "types.ts");
@@ -132,6 +190,14 @@ async function restoreComponentTypes(filePath) {
   }
 }
 
+/**
+ * Extracts and processes the values from multiple lines based on the given indices.
+ *
+ * @param {Array<string>} lines - The array of lines to process.
+ * @param {number} propIndex - The index from which to start slicing the lines.
+ * @param {number} propEndIndex - The index until which to slice the lines (inclusive).
+ * @return {Array<string>} An array of strings with processed values, trimmed of unnecessary symbols.
+ */
 function getMultiLineUnionValues(lines, propIndex, propEndIndex) {
   return lines
     .slice(propIndex)
@@ -139,6 +205,15 @@ function getMultiLineUnionValues(lines, propIndex, propEndIndex) {
     .map((item) => item.replace(UNION_SYMBOLS_REG_EXP, "").trim());
 }
 
+/**
+ * Extracts and returns inline union values from the specified lines of text,
+ * based on provided property indices.
+ *
+ * @param {string[]} lines - The array of string lines to extract union values from.
+ * @param {number} propIndex - The starting index in the lines array from where extraction begins.
+ * @param {number} propEndIndex - The ending index in the lines array up to which extraction is performed.
+ * @return {string[]} An array of extracted union values, or an empty array if no matches are found.
+ */
 function getInlineUnionValues(lines, propIndex, propEndIndex) {
   const types = lines
     .slice(propIndex)
@@ -167,10 +242,8 @@ async function modifyComponentTypes(filePath, props) {
 
     const lines = propsInterface.split("\n");
 
-    for (const prop of props) {
-      const { name, type, values = [], description, required, ignore } = prop;
-
-      if (!name) return;
+    for (const name in props) {
+      const { type = "string", values = [], description, required, ignore } = props[name];
 
       /* Find line with prop. */
       const propRegex = new RegExp(`^\\s*${name}[?:]?\\s*:`);

package/utils/node/helper.d.ts

@@ -1,15 +1,18 @@
-export function getDirFiles(dirPath: any, ext: any, { recursive, exclude }?: {
+export function getDirFiles(dirPath: string, ext: string, { recursive, exclude }?: {
     recursive?: boolean | undefined;
-    exclude?: never[] | undefined;
+    exclude?: string[] | undefined;
 }): Promise<string[]>;
 export function getNuxtDirs(): string[];
 export function getVueDirs(): string[];
 export function getVuelessConfigDirs(): string[];
-export function getMergedComponentConfig(name: any): Promise<any>;
-export function getDefaultComponentConfig(name: any, configDir: any): Promise<{}>;
-export function cacheMergedConfigs({ vuelessSrcDir, basePath }?: {}): Promise<void>;
-export function buildTSFile(entryPath: any, configOutFile: any): Promise<void>;
-export function removeFolderIfEmpty(dirPath: any): Promise<void>;
+export function getMergedComponentConfig(name: string): Promise<Object>;
+export function getDefaultComponentConfig(name: string, configDir: string): Promise<Object>;
+export function cacheMergedConfigs({ vuelessSrcDir, basePath }?: {
+    vuelessSrcDir: string;
+    basePath: string;
+}): Promise<void>;
+export function buildTSFile(entryPath: string, configOutFile: string): Promise<void>;
+export function removeFolderIfEmpty(dirPath: string): Promise<void>;
 export function detectTypeScript(): Promise<boolean>;
 export function autoImportUserConfigs(basePath?: string): Promise<void>;
 export function generateConfigIndexContent(imports?: string[], componentEntries?: string[]): Promise<string>;

package/utils/node/helper.js

@@ -20,6 +20,16 @@ import {
   CONFIG_INDEX_FILE_NAME,
 } from "../../constants.js";
 
+/**
+ * Retrieves a list of file names in a specified directory that match the given extension and filtering criteria.
+ *
+ * @param {string} dirPath - The path of the directory to search for files.
+ * @param {string} ext - The extension of the files to include in the result.
+ * @param {Object} [options] - Optional settings to customize the file search.
+ * @param {boolean} [options.recursive=true] - Whether to search directories recursively.
+ * @param {string[]} [options.exclude=[]] - A list of file or directory names to exclude from the result.
+ * @return {Promise<string[]>} - A promise that resolves to an array of file paths that match the specified criteria.
+ */
 export async function getDirFiles(dirPath, ext, { recursive = true, exclude = [] } = {}) {
   let fileNames = [];
 
@@ -65,6 +75,10 @@ export async function getDirFiles(dirPath, ext, { recursive = true, exclude = []
     .filter((filePath) => !statSync(filePath).isDirectory());
 }
 
+/**
+ * Retrieves an array of directory paths and specific file paths within the current working directory related to a Nuxt.js project.
+ * @return {string[]}.
+ */
 export function getNuxtDirs() {
   return [
     path.join(cwd(), "app"),
@@ -82,14 +96,28 @@ export function getNuxtDirs() {
   ];
 }
 
+/**
+ * Retrieves an array of directory paths and specific file paths within the current working directory related to a Vue.js project.
+ * @return {string[]}.
+ */
 export function getVueDirs() {
   return [path.join(cwd(), "src")];
 }
 
+/**
+ * Retrieves an array of directory paths and specific file paths within the current working directory related to a Vueless project.
+ * @return {string[]}.
+ */
 export function getVuelessConfigDirs() {
   return [path.join(cwd(), VUELESS_CONFIG_DIR)];
 }
 
+/**
+ * Retrieves the merged config for a specific component.
+ *
+ * @param {string} name - The name of the component.
+ * @return {Promise<Object>} A promise that resolves to the merged configuration object for the specified component.
+ */
 export async function getMergedComponentConfig(name) {
   const configOutPath = path.join(cwd(), `${VUELESS_MERGED_CONFIGS_CACHED_DIR}/${name}.json`);
 
@@ -100,6 +128,13 @@ export async function getMergedComponentConfig(name) {
   }
 }
 
+/**
+ * Retrieves the default config for a specific component.
+ *
+ * @param {string} name - The name of the component.
+ * @param {string} configDir - The directory path where the component's configuration file is located.
+ * @return {Promise<Object>} A promise that resolves to the default configuration object for the specified component.
+ */
 export async function getDefaultComponentConfig(name, configDir) {
   const configOutPath = path.join(cwd(), `${VUELESS_CONFIGS_CACHED_DIR}/${name}.mjs`);
   let config = {};
@@ -117,6 +152,14 @@ export async function getDefaultComponentConfig(name, configDir) {
   return config;
 }
 
+/**
+ * Caches merged configs for all components.
+ *
+ * @param {Object} options - Configuration options.
+ * @param {string} options.vuelessSrcDir - The source directory for Vueless components.
+ * @param {string} options.basePath - The base path for retrieving the Vueless configuration file.
+ * @return {Promise<void>} A promise that resolves when all merged configs have been cached.
+ */
 export async function cacheMergedConfigs({ vuelessSrcDir, basePath } = {}) {
   const vuelessConfig = await getVuelessConfig(basePath);
   const componentNames = Object.entries(COMPONENTS);
@@ -146,6 +189,13 @@ export async function cacheMergedConfigs({ vuelessSrcDir, basePath } = {}) {
   }
 }
 
+/**
+ * Builds a TypeScript file into a JavaScript file using esbuild.
+ *
+ * @param {string} entryPath - The path to the TypeScript file to be built.
+ * @param {string} configOutFile - The output path for the resulting JavaScript file.
+ * @return {Promise<void>} A promise that resolves when the build is complete.
+ */
 export async function buildTSFile(entryPath, configOutFile) {
   await esbuild.build({
     entryPoints: [entryPath],
@@ -158,13 +208,20 @@ export async function buildTSFile(entryPath, configOutFile) {
   });
 }
 
+/**
+ * Removes a folder if it is empty.
+ * @param {string} dirPath - The path to the directory to be removed.
+ * @return {Promise<void>} A promise that resolves when the directory has been removed.
+ */
 export async function removeFolderIfEmpty(dirPath) {
-  if (existsSync(dirPath)) {
+  try {
     const files = await readdir(dirPath);
 
     if (!files.length) {
-      await rmdir(dirPath);
+      await rmdir(dirPath, { recursive: false, force: true });
     }
+  } catch {
+    // suppress errors
   }
 }
 

package/utils/node/tailwindSafelist.js

@@ -233,7 +233,7 @@ function getClassesToSafelist(config) {
   const safelistItems = [];
 
   for (const key in config) {
-    if (key === SYSTEM_CONFIG_KEY.defaults) continue;
+    if (key === SYSTEM_CONFIG_KEY.defaults || SYSTEM_CONFIG_KEY.props) continue;
 
     if (Object.hasOwn(config, key)) {
       const classes = config[key];
@@ -267,7 +267,7 @@ function getClassesToSafelist(config) {
  */
 function getSafelistClasses(config, colors) {
   const classes = new Set();
-  const defaultColor = config.defaults?.color || "";
+  const defaultColor = config.defaults?.color || config.props?.color?.default || "";
 
   getClassesToSafelist(config).map((safelistClass) => {
     [...colors, defaultColor].forEach((color) => {

package/utils/theme.ts

@@ -334,10 +334,10 @@ export function setTheme(config: ThemeConfig = {}) {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function normalizeThemeConfig(theme: any): MergedThemeConfig {
   return {
-    colorMode: theme.colorMode,
-    isColorModeAuto: theme.isColorModeAuto,
-    primary: theme.primary,
-    neutral: theme.neutral,
+    colorMode: String(theme.colorMode) as ColorMode,
+    isColorModeAuto: !!toNumber(theme.isColorModeAuto),
+    primary: String(theme.primary),
+    neutral: String(theme.neutral),
     text: {
       xs: toNumber(theme.text?.xs),
       sm: toNumber(theme.text?.sm),

package/utils/ui.ts

@@ -7,7 +7,13 @@ import { createGetMergedConfig } from "./node/mergeConfigs";
 import { COMPONENT_NAME as U_ICON } from "../ui.image-icon/constants";
 import { ICON_NON_PROPS_DEFAULTS, TAILWIND_MERGE_EXTENSION } from "../constants";
 
-import type { Config, ComponentDefaults, UnknownObject, ComponentNames } from "../types";
+import type {
+  Config,
+  UnknownObject,
+  ComponentNames,
+  ComponentDefaults,
+  ComponentCustomProps,
+} from "../types";
 
 interface MergedConfigOptions {
   defaultConfig: unknown;
@@ -87,10 +93,14 @@ export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVa
  * Return default values for component props, icons, etc..
  */
 export function getDefaults<Props, Config>(defaultConfig: Config, name: ComponentNames) {
-  const componentDefaults = (defaultConfig as UnknownObject).defaults || {};
+  const componentDefaults = (defaultConfig as Config & UnknownObject).defaults || {};
   const globalDefaults = vuelessConfig.components?.[name]?.defaults || {};
 
-  const defaults = merge({}, componentDefaults, globalDefaults) as Props & ComponentDefaults;
+  const customProps = vuelessConfig.components?.[name]?.props as ComponentCustomProps;
+  const customPropsDefaults = getCustomPropsDefaults(customProps) || {};
+
+  const defaults = merge({}, componentDefaults, globalDefaults, customPropsDefaults) as Props &
+    ComponentDefaults;
 
   /* Remove non a props defaults. */
   for (const key in defaults) {
@@ -116,3 +126,22 @@ export function getDefaults<Props, Config>(defaultConfig: Config, name: Componen
 export function setColor(classes: string, color: string) {
   return classes?.replace(/{color}/g, color);
 }
+
+/**
+ * Retrieves the default values from the provided component custom properties.
+ */
+export function getCustomPropsDefaults(props: ComponentCustomProps) {
+  const customPropsDefaults: ComponentDefaults = {};
+
+  if (!props) {
+    return customPropsDefaults;
+  }
+
+  for (const [key, value] of Object.entries(props)) {
+    if (value.default) {
+      customPropsDefaults[key] = value.default;
+    }
+  }
+
+  return customPropsDefaults;
+}