vueless 0.0.642 → 0.0.644

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.642",
+  "version": "0.0.644",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -66,7 +66,7 @@
     "@vue/eslint-config-prettier": "^10.0.0",
     "@vue/eslint-config-typescript": "^14.1.1",
     "@vue/tsconfig": "^0.5.1",
-    "@vueless/storybook": "^0.0.54",
+    "@vueless/storybook": "^0.0.57",
     "autoprefixer": "^10.4.19",
     "cssnano": "^6.1.2",
     "eslint": "^9.12.0",

package/ui.boilerplate/storybook/{stories_.ts → stories.ts}

@@ -10,7 +10,7 @@ interface UBoilerplateArgs extends Props {
 }
 
 export default {
-  id: "10010",
+  id: "110010",
   title: "Custom / UBoilerplate",
   component: UBoilerplate,
   args: {

package/ui.form-calendar/types.ts

@@ -65,12 +65,12 @@ export interface UCalendarProps<TModelValue extends DateValue> {
   /**
    * Min date (JavaScript Date object or string formatted in given `dateFormat`).
    */
-  minDate?: string | Date;
+  minDate?: Date | string;
 
   /**
    * Max date (JavaScript Date object or string formatted in given `dateFormat`).
    */
-  maxDate?: string | Date;
+  maxDate?: Date | string;
 
   /**
    * Component config object.

package/ui.form-date-picker/UDatePicker.vue

@@ -305,10 +305,6 @@ watchEffect(() => {
           @slot Use it add something before the date.
           @binding {string} icon-name
         -->
-        <slot name="left-icon" :icon-name="iconName" />
-      </template>
-
-      <template #right-icon="{ iconName }">
         <slot name="left" :icon-name="iconName" />
       </template>
 

package/ui.form-date-picker/types.ts

@@ -81,12 +81,12 @@ export interface UDatePickerProps<TModelValue> {
   /**
    * Min date (JavaScript Date object or string formatted in given `dateFormat`).
    */
-  minDate?: string | Date;
+  minDate?: Date | string;
 
   /**
    * Max date (JavaScript Date object or string formatted in given `dateFormat`).
    */
-  maxDate?: string | Date;
+  maxDate?: Date | string;
 
   /**
    * Left icon name.

package/ui.form-date-picker-range/types.ts

@@ -114,12 +114,12 @@ export interface UDatePickerRangeProps<TModelValue> {
   /**
    * Min date (JavaScript Date object or string formatted in given `dateFormat`).
    */
-  minDate?: string | Date;
+  minDate?: Date | string;
 
   /**
    * Max date (JavaScript Date object or string formatted in given `dateFormat`).
    */
-  maxDate?: string | Date;
+  maxDate?: Date | string;
 
   /**
    * Date string format.

package/ui.form-label/config.ts

@@ -1,9 +1,9 @@
 export default /*tw*/ {
   wrapper: {
-    base: "flex gap-2 w-full",
+    base: "flex w-full",
     variants: {
       align: {
-        top: "flex-col",
+        top: "flex-col gap-2",
         topInside: "flex-col gap-0 relative",
         topWithDesc: "flex-col-reverse w-fit",
         right: "flex-row w-fit",
@@ -14,14 +14,12 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
-      { align: "left", size: "sm", class: "gap-2" },
-      { align: "left", size: "md", class: "gap-3" },
-      { align: "left", size: "lg", class: "gap-4" },
-      { align: "right", size: "sm", class: "gap-2.5" },
-      { align: "right", size: "md", class: "gap-3" },
-      { align: "right", size: "lg", class: "gap-3.5" },
-      { align: "left", centred: true, class: "items-center justify-end w-auto" },
-      { align: "right", centred: true, class: "items-center justify-start w-auto" },
+      { align: ["left", "right"], size: "sm", class: "gap-2.5" },
+      { align: ["left", "right"], size: "md", class: "gap-3" },
+      { align: ["left", "right"], size: "lg", class: "gap-3.5" },
+      { align: ["left", "right"], centred: true, class: "items-center w-auto" },
+      { align: "left", centred: true, class: "justify-end" },
+      { align: "right", centred: true, class: "justify-start" },
     ],
   },
   content: "flex",
@@ -55,14 +53,10 @@ export default /*tw*/ {
       { align: "topWithDesc", size: "sm", class: "-mt-px" },
       { align: "topWithDesc", size: "md", class: "" },
       { align: "topWithDesc", size: "lg", class: "mt-px" },
-      { align: "left", size: "sm", class: "-mt-px text-sm" },
-      { align: "left", size: "md", class: "text-sm" },
-      { align: "left", size: "lg", class: "mt-px text-base" },
-      { align: "right", size: "sm", class: "-mt-px text-xs" },
-      { align: "right", size: "md", class: "text-sm" },
-      { align: "right", size: "lg", class: "mt-px text-base" },
-      { align: "left", centred: false, class: "pt-1" },
-      { align: "right", centred: false, class: "pt-1" },
+      { align: ["left", "right"], size: "sm", class: "-mt-px text-sm" },
+      { align: ["left", "right"], size: "md", class: "text-sm" },
+      { align: ["left", "right"], size: "lg", class: "mt-px text-base" },
+      { align: ["left", "right"], centred: false, class: "pt-1" },
     ],
   },
   description: {

package/ui.form-textarea/UTextarea.vue

@@ -63,7 +63,7 @@ const elementId = props.id || useId();
 const textareaRef = ref<HTMLTextAreaElement | null>(null);
 const labelComponentRef = ref<{ labelElement: HTMLElement | null } | null>(null);
 const leftSlotWrapperRef = ref<HTMLElement | null>(null);
-const textareaWrapperRef = ref<HTMLElement | null>(null);
+const wrapperRef = ref<HTMLElement | null>(null);
 
 const currentRows = ref(Number(props.rows));
 
@@ -74,36 +74,43 @@ watch(
   },
 );
 
-function onEnter() {
-  if (currentRows.value !== undefined) {
-    currentRows.value++;
-  }
-}
+const localValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit("update:modelValue", value);
+  },
+});
 
-function onBackspace() {
+onMounted(() => toggleReadonly(true));
+
+function getNewRowCount() {
   const textarea = textareaRef.value;
 
-  if (!textarea) return;
+  if (!textarea) return 0;
 
   const content = textarea.value;
   const newlineCount = (content.match(/\n/g) || []).length;
-  const newRowCount = Math.max(Number(props.rows), newlineCount + 1);
 
-  if (newRowCount < currentRows.value) {
+  return Math.max(Number(props.rows), newlineCount + 2);
+}
+
+function onEnter() {
+  const newRowCount = getNewRowCount();
+
+  if (newRowCount > currentRows.value) {
     currentRows.value = newRowCount;
   }
 }
 
-const localValue = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(value) {
-    emit("update:modelValue", value);
-  },
-});
+function onBackspace() {
+  const newRowCount = getNewRowCount() - 1;
 
-onMounted(() => toggleReadonly(true));
+  if (newRowCount < currentRows.value) {
+    currentRows.value = newRowCount;
+  }
+}
 
 function onChange() {
   emit("change");
@@ -154,14 +161,10 @@ useMutationObserver(leftSlotWrapperRef, (mutations) => {
 function setLabelPosition() {
   if (props.labelAlign === "top" || !hasSlotContent(slots["left"])) return;
 
-  if (
-    leftSlotWrapperRef.value &&
-    textareaWrapperRef.value &&
-    labelComponentRef.value?.labelElement
-  ) {
+  if (leftSlotWrapperRef.value && wrapperRef.value && labelComponentRef.value?.labelElement) {
     const leftSlotWidth = leftSlotWrapperRef.value.getBoundingClientRect().width;
 
-    const textareaPaddingLeft = parseFloat(getComputedStyle(textareaWrapperRef.value).paddingLeft);
+    const textareaPaddingLeft = parseFloat(getComputedStyle(wrapperRef.value).paddingLeft);
 
     labelComponentRef.value.labelElement.style.left = `${leftSlotWidth + textareaPaddingLeft}px`;
   }
@@ -186,7 +189,7 @@ const mutatedProps = computed(() => ({
   label: Boolean(props.label),
 }));
 
-const { textareaAttrs, textareaLabelAttrs, textareaWrapperAttrs, leftSlotAttrs, rightSlotAttrs } =
+const { textareaAttrs, textareaLabelAttrs, wrapperAttrs, leftSlotAttrs, rightSlotAttrs } =
   useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
@@ -204,7 +207,7 @@ const { textareaAttrs, textareaLabelAttrs, textareaWrapperAttrs, leftSlotAttrs,
     v-bind="textareaLabelAttrs"
     :data-test="dataTest"
   >
-    <label ref="textareaWrapperRef" :for="elementId" v-bind="textareaWrapperAttrs">
+    <label ref="wrapperRef" :for="elementId" v-bind="wrapperAttrs">
       <div
         v-if="hasSlotContent($slots['left'])"
         ref="leftSlotWrapperRef"
@@ -233,7 +236,7 @@ const { textareaAttrs, textareaLabelAttrs, textareaWrapperAttrs, leftSlotAttrs,
         @mousedown="onMousedown"
         @click="onClick"
         @keydown.enter="onEnter"
-        @keydown.delete="onBackspace"
+        @keyup.delete="onBackspace"
       />
 
       <div v-if="hasSlotContent($slots['right'])" :for="elementId" v-bind="rightSlotAttrs">

package/ui.form-textarea/config.ts

@@ -2,9 +2,9 @@ export default /*tw*/ {
   textareaLabel: "{ULabel}",
   leftSlot: "flex items-center justify-center whitespace-nowrap pr-2.5 gap-1 rounded-dynamic rounded-r-none",
   rightSlot: "flex items-center justify-center whitespace-nowrap pl-2.5 gap-1 rounded-dynamic rounded-l-none",
-  textareaWrapper: {
+  wrapper: {
     base: `
-      flex px-3 py-2 bg-white transition w-full
+      flex bg-white transition w-full
       rounded-dynamic border border-gray-300 hover:border-gray-400 hover:focus-within:border-brand-500
       focus-within:border-brand-500 focus-within:ring-dynamic focus-within:ring-offset-dynamic
       focus-within:ring-brand-700/15 focus-within:outline-none
@@ -27,7 +27,7 @@ export default /*tw*/ {
   },
   textarea: {
     base: `
-      p-0 block w-full bg-transparent border-none !leading-none font-normal text-gray-900
+      px-3 pt-2 pb-1.5 block w-full bg-transparent border-none font-normal text-gray-900
       placeholder:text-gray-400 placeholder:font-normal placeholder:leading-none
       focus:border-none focus:outline-none focus:ring-0 disabled:cursor-not-allowed
     `,
@@ -45,13 +45,13 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
-      { labelAlign: "topInside", label: true, size: "sm", class: "pt-5" },
-      { labelAlign: "topInside", label: true, size: "md", class: "pt-6" },
-      { labelAlign: "topInside", label: true, size: "lg", class: "pt-7" },
+      { labelAlign: "topInside", label: true, size: "sm", class: "pt-[1.2rem]" },
+      { labelAlign: "topInside", label: true, size: "md", class: "pt-[1.4rem]" },
+      { labelAlign: "topInside", label: true, size: "lg", class: "pt-[1.6rem]" },
     ],
   },
   defaults: {
-    rows: "3",
+    rows: "1",
     size: "md",
     inputmode: "text",
     labelAlign: "topInside",

package/ui.image-avatar/UAvatar.vue

@@ -55,7 +55,7 @@ function onClick(event: MouseEvent) {
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { avatarAttrs, placeholderIconAttrs } = useUI<Config>(defaultConfig);
+const { config, avatarAttrs, placeholderIconAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -78,7 +78,7 @@ const { avatarAttrs, placeholderIconAttrs } = useUI<Config>(defaultConfig);
           internal
           :size="size"
           :color="componentColor"
-          :name="placeholderIcon"
+          :name="placeholderIcon || config.defaults.placeholderIcon"
           v-bind="placeholderIconAttrs"
         />
       </slot>

package/ui.text-alert/config.ts

@@ -24,6 +24,10 @@ export default /*tw*/ {
       { color: "grayscale", variant: "secondary", class: "text-gray-900 border-gray-900" },
       { color: "grayscale", variant: "thirdary", class: "text-gray-900 bg-gray-50" },
       { color: "grayscale", variant: "thirdary", bordered: true, class: "border-gray-200" },
+      { color: "gray", variant: "primary", class: "bg-gray-500" },
+      { color: "gray", variant: "secondary", class: "text-gray-500 border-gray-500" },
+      { color: "gray", variant: "thirdary", class: "text-gray-500 bg-gray-50" },
+      { color: "gray", variant: "thirdary", bordered: true, class: "border-gray-500" },
     ],
   },
   body: "flex items-start justify-between",

package/utils/node/helper.js

@@ -1,6 +1,7 @@
 import path from "path";
 import { statSync, existsSync } from "fs";
 import { readdir } from "node:fs/promises";
+import { cwd } from "node:process";
 import esbuild from "esbuild";
 
 import { VUELESS_CONFIGS_CACHED_DIR } from "../../constants.js";
@@ -52,27 +53,27 @@ export async function getDirFiles(dirPath, ext, { recursive = true, exclude = []
 
 export function getNuxtFiles() {
   return [
-    path.join(process.cwd(), "composables"),
-    path.join(process.cwd(), "components"),
-    path.join(process.cwd(), "layouts"),
-    path.join(process.cwd(), "pages"),
-    path.join(process.cwd(), "plugins"),
-    path.join(process.cwd(), "utils"),
-    path.join(process.cwd(), "Error.vue"),
-    path.join(process.cwd(), "App.vue"),
-    path.join(process.cwd(), "Error.vue"),
-    path.join(process.cwd(), "app.vue"),
-    path.join(process.cwd(), "error.vue"),
-    path.join(process.cwd(), "playground", "app.vue"),
+    path.join(cwd(), "composables"),
+    path.join(cwd(), "components"),
+    path.join(cwd(), "layouts"),
+    path.join(cwd(), "pages"),
+    path.join(cwd(), "plugins"),
+    path.join(cwd(), "utils"),
+    path.join(cwd(), "Error.vue"),
+    path.join(cwd(), "App.vue"),
+    path.join(cwd(), "Error.vue"),
+    path.join(cwd(), "app.vue"),
+    path.join(cwd(), "error.vue"),
+    path.join(cwd(), "playground", "app.vue"),
   ];
 }
 
 export function getVueFiles() {
-  return [path.join(process.cwd(), "src")];
+  return [path.join(cwd(), "src")];
 }
 
 export async function getComponentDefaultConfig(name, entryPath) {
-  const configOutPath = path.join(process.cwd(), `${VUELESS_CONFIGS_CACHED_DIR}/${name}.mjs`);
+  const configOutPath = path.join(cwd(), `${VUELESS_CONFIGS_CACHED_DIR}/${name}.mjs`);
 
   await buildTSFile(entryPath, configOutPath);
 

package/utils/node/loaderIcon.js

@@ -7,8 +7,9 @@
 /* eslint-disable no-console */
 import fs from "node:fs";
 import path from "node:path";
-import { createRequire } from "module";
+import { cwd } from "node:process";
 import { rm, cp } from "node:fs/promises";
+import { createRequire } from "module";
 import { merge } from "lodash-es";
 
 import { vuelessConfig } from "./vuelessConfig.js";
@@ -25,11 +26,9 @@ import {
   ICONS_DIR,
 } from "../../constants.js";
 
-const cwd = process.cwd();
-
-const DEFAULT_ICONS_DIR = path.join(cwd, VUELESS_ICONS_DIR);
-const DEFAULT_ICONS_LOCAL_DIR = path.join(cwd, VUELESS_ICONS_LOCAL_DIR);
-const CACHED_ICONS_DIR = path.join(cwd, VUELESS_ICONS_CACHED_DIR);
+const DEFAULT_ICONS_DIR = path.join(cwd(), VUELESS_ICONS_DIR);
+const DEFAULT_ICONS_LOCAL_DIR = path.join(cwd(), VUELESS_ICONS_LOCAL_DIR);
+const CACHED_ICONS_DIR = path.join(cwd(), VUELESS_ICONS_CACHED_DIR);
 const U_ICON = "UIcon";
 
 let isDebug = false;
@@ -53,8 +52,8 @@ export async function cacheIcons({ mode, env, debug, targetFiles = [] } = {}) {
 
   if (isVuelessIconsMode) {
     targetFiles = isVuelessEnv
-      ? [path.join(cwd, VUELESS_LOCAL_DIR)]
-      : [path.join(cwd, VUELESS_DIR)];
+      ? [path.join(cwd(), VUELESS_LOCAL_DIR)]
+      : [path.join(cwd(), VUELESS_DIR)];
   }
 
   const commonExcludes = ["/types.ts", "/constants.ts"];
@@ -93,7 +92,7 @@ export async function removeIconsCache(mirrorCacheDir, debug) {
   }
 
   if (mirrorCacheDir) {
-    const mirrorCacheIconsPath = path.join(cwd, mirrorCacheDir, ICONS_DIR);
+    const mirrorCacheIconsPath = path.join(cwd(), mirrorCacheDir, ICONS_DIR);
 
     if (fs.existsSync(mirrorCacheIconsPath)) {
       await rm(mirrorCacheIconsPath, { recursive: true, force: true });
@@ -112,10 +111,10 @@ export async function removeIconsCache(mirrorCacheDir, debug) {
  * @returns {Promise<void>}
  */
 export async function copyIconsCache(mirrorCacheDir, debug) {
-  const cachePath = path.join(cwd, VUELESS_ICONS_CACHED_DIR);
+  const cachePath = path.join(cwd(), VUELESS_ICONS_CACHED_DIR);
 
   if (mirrorCacheDir && fs.existsSync(cachePath)) {
-    await cp(cachePath, path.join(cwd, mirrorCacheDir, ICONS_DIR), { recursive: true });
+    await cp(cachePath, path.join(cwd(), mirrorCacheDir, ICONS_DIR), { recursive: true });
   }
 
   if (debug) {
@@ -275,23 +274,23 @@ function getIconLibraryPaths(name, defaults) {
   const libraries = {
     [VUELESS_LIBRARY]: {
       // @material-symbols icons which used across the components (this works only at Vueless env).
-      source: `${cwd}/node_modules/${library}/svg-${weight}/${style}/${name}.svg`,
+      source: `${cwd()}/node_modules/${library}/svg-${weight}/${style}/${name}.svg`,
       destination: `${CACHED_ICONS_DIR}/${VUELESS_LIBRARY}/${name}.svg`
     },
     "@material-symbols": {
-      source: `${cwd}/node_modules/${library}/svg-${weight}/${style}/${name}.svg`,
+      source: `${cwd()}/node_modules/${library}/svg-${weight}/${style}/${name}.svg`,
       destination: `${CACHED_ICONS_DIR}/${library}/svg-${weight}/${style}/${name}.svg`
     },
     "bootstrap-icons": {
-      source: `${cwd}/node_modules/${library}/icons/${name}.svg`,
+      source: `${cwd()}/node_modules/${library}/icons/${name}.svg`,
       destination: `${CACHED_ICONS_DIR}/${library}/${name}.svg`
     },
     "heroicons": {
-      source: `${cwd}/node_modules/${library}/24/${name.endsWith("-fill") ? "solid" : "outline"}/${name}.svg`,
+      source: `${cwd()}/node_modules/${library}/24/${name.endsWith("-fill") ? "solid" : "outline"}/${name}.svg`,
       destination: `${CACHED_ICONS_DIR}/${library}/${name.endsWith("-fill") ? "solid" : "outline"}/${name}.svg`
     },
     "custom-icons": {
-      source: `${cwd}/${customLibraryPath}/${name}.svg`,
+      source: `${cwd()}/${customLibraryPath}/${name}.svg`,
       destination: `${CACHED_ICONS_DIR}/${library}/${name}.svg`
     },
   };
@@ -308,7 +307,7 @@ function getIconLibraryPaths(name, defaults) {
  */
 async function getDefaults() {
   const defaultIconsDir = isVuelessEnv ? VUELESS_LOCAL_DIR : VUELESS_DIR;
-  const defaultConfigPath = path.join(cwd, defaultIconsDir, COMPONENTS[U_ICON], "config.ts");
+  const defaultConfigPath = path.join(cwd(), defaultIconsDir, COMPONENTS[U_ICON], "config.ts");
   const uIconDefaultConfig = await getComponentDefaultConfig(U_ICON, defaultConfigPath);
 
   return merge({}, uIconDefaultConfig?.defaults, vuelessConfig?.component?.[U_ICON]?.defaults);

package/utils/node/tailwindSafelist.js

@@ -1,9 +1,9 @@
 import path from "node:path";
-import { merge, cloneDeep } from "lodash-es";
+import { cwd } from "node:process";
 import { existsSync } from "node:fs";
 import { readFile } from "node:fs/promises";
+import { merge, cloneDeep, isEqual } from "lodash-es";
 import { extendTailwindMerge } from "tailwind-merge";
-import { isEqual } from "lodash-es";
 import { defineConfig } from "cva";
 
 import { vuelessConfig } from "./vuelessConfig.js";
@@ -24,7 +24,6 @@ import {
   TAILWIND_VARIANT_DELIMITER_REG_EXP,
 } from "../../constants.js";
 
-const cwd = process.cwd();
 const twMerge = extendTailwindMerge(merge(TAILWIND_MERGE_EXTENSION, vuelessConfig.tailwindMerge));
 
 export const { cx } = defineConfig({
@@ -188,7 +187,7 @@ async function retrieveComponentDefaultConfig(componentName, vuelessConfigFiles)
   );
 
   return componentDefaultConfigPath
-    ? await getComponentDefaultConfig(componentName, path.join(cwd, componentDefaultConfigPath))
+    ? await getComponentDefaultConfig(componentName, path.join(cwd(), componentDefaultConfigPath))
     : {};
 }
 

package/utils/node/vuelessConfig.js

@@ -1,5 +1,6 @@
 import fs from "node:fs";
 import path from "node:path";
+import { cwd } from "node:process";
 
 import { buildTSFile } from "./helper.js";
 import { VUELESS_CACHE_DIR, VUELESS_CONFIG_FILE_NAME } from "../../constants.js";
@@ -11,12 +12,9 @@ import { VUELESS_CACHE_DIR, VUELESS_CONFIG_FILE_NAME } from "../../constants.js"
 export let vuelessConfig = {};
 
 (async () => {
-  const configPathJs = path.join(process.cwd(), `${VUELESS_CONFIG_FILE_NAME}.js`);
-  const configPathTs = path.join(process.cwd(), `${VUELESS_CONFIG_FILE_NAME}.ts`);
-  const configOutPath = path.join(
-    process.cwd(),
-    `${VUELESS_CACHE_DIR}/${VUELESS_CONFIG_FILE_NAME}.mjs`,
-  );
+  const configPathJs = path.join(cwd(), `${VUELESS_CONFIG_FILE_NAME}.js`);
+  const configPathTs = path.join(cwd(), `${VUELESS_CONFIG_FILE_NAME}.ts`);
+  const configOutPath = path.join(cwd(), `${VUELESS_CACHE_DIR}/${VUELESS_CONFIG_FILE_NAME}.mjs`);
 
   if (!fs.existsSync(configPathJs) && !fs.existsSync(configPathTs)) {
     vuelessConfig = {};

package/utils/storybook.ts

@@ -91,19 +91,20 @@ export function getArgTypes(componentName: string | undefined) {
   component.attributes?.forEach((attribute: Attribute) => {
     const type = attribute.value.type;
 
-    if (type.includes("|")) {
+    if (attribute.enum) {
       types[attribute.name] = {
-        control: type.split("|")[0].toLowerCase() as ArgType["control"],
+        options: attribute.enum,
+        control: "select",
         table: {
           defaultValue: { summary: attribute.default || "" },
+          type: { summary: attribute.enum.join(" | ") },
         },
       };
     }
 
-    if (attribute.enum) {
+    if (attribute.enum?.length === 1) {
       types[attribute.name] = {
-        options: attribute.enum,
-        control: "select",
+        control: "object",
         table: {
           defaultValue: { summary: attribute.default || "" },
           type: { summary: attribute.enum.join(" | ") },
@@ -111,17 +112,36 @@ export function getArgTypes(componentName: string | undefined) {
       };
     }
 
-    if (attribute.enum?.length === 1) {
+    const nonUnionTypes = [
+      "string",
+      "number",
+      "boolean",
+      "Date",
+      "UnknownObject",
+      "UnknownArray",
+      "Array",
+    ];
+
+    if (attribute.enum?.every((value) => nonUnionTypes.includes(value))) {
+      let control = attribute.enum[0];
+
+      if (control === "string") {
+        control = "text";
+      }
+
+      if (control === "Date") {
+        control = "date";
+      }
+
       types[attribute.name] = {
-        control: "object",
+        control: control as ArgType["control"],
         table: {
           defaultValue: { summary: attribute.default || "" },
-          type: { summary: attribute.enum.join(" | ") },
         },
       };
     }
 
-    if (type === "string" || type.includes("string")) {
+    if (type === "string") {
       types[attribute.name] = {
         control: "text",
         table: {
@@ -139,14 +159,11 @@ export function getArgTypes(componentName: string | undefined) {
       };
     }
 
-    if (type === "Date" || attribute.enum?.includes("Date")) {
+    if (type === "Date") {
       types[attribute.name] = {
         control: "date",
         table: {
           defaultValue: { summary: attribute.default || "" },
-          type: {
-            summary: ["Date", "string"].join(" | "),
-          },
         },
       };
     }