@nuxt/ui 2.10.0 → 2.11.1

package/dist/runtime/composables/useFormGroup.mjs

@@ -1,12 +1,13 @@
 import { inject, ref, computed, onMounted } from "vue";
 import { useDebounceFn } from "@vueuse/core";
+import { uid } from "../utils/uid.mjs";
 export const useFormGroup = (inputProps, config) => {
   const formBus = inject("form-events", void 0);
   const formGroup = inject("form-group", void 0);
   const formInputs = inject("form-inputs", void 0);
   const inputId = ref(inputProps?.id);
   onMounted(() => {
-    inputId.value = inputProps?.id ?? formGroup?.inputId.value;
+    inputId.value = inputProps?.legend === null || inputProps.legend ? void 0 : inputProps?.id ?? uid();
     if (formGroup) {
       formGroup.inputId.value = inputId.value;
       if (formInputs) {
@@ -28,7 +29,7 @@ export const useFormGroup = (inputProps, config) => {
     emitFormEvent("change", formGroup?.name.value);
   }
   const emitFormInput = useDebounceFn(() => {
-    if (blurred.value) {
+    if (blurred.value || formGroup?.eagerValidation.value) {
       emitFormEvent("input", formGroup?.name.value);
     }
   }, 300);

package/dist/runtime/composables/useShortcuts.d.ts

@@ -1,11 +1,11 @@
 export declare const _useShortcuts: () => {
-    macOS: import("vue").ComputedRef<any>;
+    macOS: import("vue").ComputedRef<false | "" | RegExpMatchArray | null | undefined>;
     metaSymbol: import("vue").Ref<string>;
     activeElement: import("@vueuse/shared").ComputedRefWithControl<HTMLElement | null | undefined>;
     usingInput: import("vue").ComputedRef<string | boolean>;
 };
 export declare const useShortcuts: () => {
-    macOS: import("vue").ComputedRef<any>;
+    macOS: import("vue").ComputedRef<false | "" | RegExpMatchArray | null | undefined>;
     metaSymbol: import("vue").Ref<string>;
     activeElement: import("@vueuse/shared").ComputedRefWithControl<HTMLElement | null | undefined>;
     usingInput: import("vue").ComputedRef<string | boolean>;

package/dist/runtime/composables/useUI.d.ts

@@ -1,8 +1,8 @@
 import type { Ref } from 'vue';
 import type { Strategy } from '../types';
-export declare const useUI: <T>(key: any, $ui: Ref<Partial<T & {
-    strategy: Strategy;
-}> | undefined>, $config?: T | Ref<T> | undefined, $wrapperClass?: Ref<string>, withAppConfig?: boolean) => {
+export declare const useUI: <T>(key: any, $ui?: Ref<(Partial<T> & {
+    strategy?: Strategy | undefined;
+}) | undefined> | undefined, $config?: T | Ref<T> | undefined, $wrapperClass?: Ref<string>, withAppConfig?: boolean) => {
     ui: import("vue").ComputedRef<T>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;

package/dist/runtime/types/alert.d.ts

@@ -0,0 +1,7 @@
+import { alert } from '../ui.config'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
+import colors from '#ui-colors'
+import type { AppConfig } from 'nuxt/schema'
+
+export type AlertColor = keyof typeof alert.color | ExtractDeepKey<AppConfig, ['ui', 'alert', 'color']> | typeof colors[number]
+export type AlertVariant = keyof typeof alert.variant | ExtractDeepKey<AppConfig, ['ui', 'alert', 'variant']> | NestedKeyOf<typeof alert.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'alert', 'color']>>

package/dist/runtime/types/avatar.d.ts

@@ -1,7 +1,9 @@
 import { avatar } from '../ui.config'
+import type { ExtractDeepKey } from '.'
 import colors from '#ui-colors'
+import type { AppConfig } from 'nuxt/schema'
 
-export type AvatarSize = keyof typeof avatar.size
+export type AvatarSize = keyof typeof avatar.size | ExtractDeepKey<AppConfig, ['ui', 'avatar', 'size']>
 export type AvatarChipColor = 'gray' | typeof colors[number]
 export type AvatarChipPosition = keyof typeof avatar.chip.position
 

package/dist/runtime/types/badge.d.ts

@@ -1,10 +1,11 @@
 import { badge } from '../ui.config'
-import type { NestedKeyOf } from '.'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
 import colors from '#ui-colors'
+import type { AppConfig } from 'nuxt/schema'
 
-export type BadgeSize = keyof typeof badge.size
-export type BadgeColor = keyof typeof badge.color | typeof colors[number]
-export type BadgeVariant = keyof typeof badge.variant | NestedKeyOf<typeof badge.color>
+export type BadgeSize = keyof typeof badge.size | ExtractDeepKey<AppConfig, ['ui', 'badge', 'size']>
+export type BadgeColor = keyof typeof badge.color | ExtractDeepKey<AppConfig, ['ui', 'badge', 'color']> | typeof colors[number]
+export type BadgeVariant = keyof typeof badge.variant | ExtractDeepKey<AppConfig, ['ui', 'badge', 'variant']> | NestedKeyOf<typeof badge.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'badge', 'color']>>
 
 export interface Badge {
   label?: string

package/dist/runtime/types/breadcrumb.d.ts

@@ -0,0 +1,9 @@
+import type { Link } from './link'
+
+export interface BreadcrumbLink extends Link {
+  label: string
+  icon?: string
+  iconClass?: string
+  // FIXME: This is a workaround for `link.to` not being resolved although it extends `NuxtLinkProps`
+  [key: string]: any
+}

package/dist/runtime/types/button.d.ts

@@ -1,11 +1,12 @@
 import type { Link } from './link'
 import { button } from '../ui.config'
-import type { NestedKeyOf } from '.'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
 import colors from '#ui-colors'
+import type { AppConfig } from 'nuxt/schema'
 
-export type ButtonSize = keyof typeof button.size
-export type ButtonColor = keyof typeof button.color | typeof colors[number]
-export type ButtonVariant = keyof typeof button.variant | NestedKeyOf<typeof button.color>
+export type ButtonSize = keyof typeof button.size | ExtractDeepKey<AppConfig, ['ui', 'button', 'size']>
+export type ButtonColor = keyof typeof button.color | ExtractDeepKey<AppConfig, ['ui', 'button', 'color']> | typeof colors[number]
+export type ButtonVariant = keyof typeof button.variant | ExtractDeepKey<AppConfig, ['ui', 'button', 'variant']> | NestedKeyOf<typeof button.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'button', 'color']>>
 
 export interface Button extends Link {
   type?: string

package/dist/runtime/types/chip.d.ts

@@ -0,0 +1,11 @@
+import { chip } from '../ui.config'
+import colors from '#ui-colors'
+
+export type ChipSize = keyof typeof chip.size
+export type ChipColor = 'gray' | typeof colors[number]
+export type ChipPosition = keyof typeof chip.position
+
+export interface Chip {
+  color?: ChipColor
+  position?: ChipPosition
+}

package/dist/runtime/types/dropdown.d.ts

@@ -1,7 +1,7 @@
-import type { Link } from './link'
+import type { NuxtLinkProps } from '#app'
 import type { Avatar } from './avatar'
 
-export interface DropdownItem extends Link {
+export interface DropdownItem extends NuxtLinkProps {
   label: string
   slot?: string
   icon?: string

package/dist/runtime/types/form-group.d.ts

@@ -0,0 +1,5 @@
+import { formGroup } from '../ui.config'
+import type { ExtractDeepKey } from '.'
+import type { AppConfig } from 'nuxt/schema'
+
+export type FormGroupSize = keyof typeof formGroup.size | ExtractDeepKey<AppConfig, ['ui', 'formGroup', 'size']>

package/dist/runtime/types/form.d.ts

@@ -1,4 +1,4 @@
-import { Ref } from 'vue'
+import type { Ref } from 'vue'
 
 export interface FormError<T extends string = string> {
   path: T
@@ -31,5 +31,6 @@ export interface InjectedFormGroupValue {
   inputId: Ref<string | undefined>
   name: Ref<string>
   size: Ref<string | number | symbol>
-  error: Ref<string | boolean>
+  error: Ref<string | boolean | undefined>
+  eagerValidation: Ref<boolean>
 }

package/dist/runtime/types/index.d.ts

@@ -1,16 +1,26 @@
 export * from './accordion'
+export * from './alert'
 export * from './avatar'
 export * from './badge'
+export * from './breadcrumb'
 export * from './button'
+export * from './chip'
 export * from './clipboard'
 export * from './command-palette'
 export * from './dropdown'
+export * from './form-group'
 export * from './form'
+export * from './input'
+export * from './kbd'
 export * from './link'
 export * from './meter'
 export * from './notification'
 export * from './popper'
 export * from './progress'
+export * from './range'
+export * from './select'
 export * from './tabs'
+export * from './textarea'
+export * from './toggle'
 export * from './vertical-navigation'
 export * from './utils'

package/dist/runtime/types/input.d.ts

@@ -0,0 +1,8 @@
+import { input } from '../ui.config'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
+import colors from '#ui-colors'
+import type { AppConfig } from 'nuxt/schema'
+
+export type InputSize = keyof typeof input.size | ExtractDeepKey<AppConfig, ['ui', 'input', 'size']>
+export type InputColor = keyof typeof input.color | ExtractDeepKey<AppConfig, ['ui', 'input', 'color']> | typeof colors[number]
+export type InputVariant = keyof typeof input.variant | ExtractDeepKey<AppConfig, ['ui', 'input', 'variant']> | NestedKeyOf<typeof input.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'input', 'color']>>

package/dist/runtime/types/kbd.d.ts

@@ -0,0 +1,5 @@
+import { kbd } from '../ui.config'
+import type { ExtractDeepKey } from '.'
+import type { AppConfig } from 'nuxt/schema'
+
+export type KbdSize = keyof typeof kbd.size | ExtractDeepKey<AppConfig, ['ui', 'kbd', 'size']>

package/dist/runtime/types/popper.d.ts

@@ -1,6 +1,8 @@
 import type { Placement, PositioningStrategy } from '@popperjs/core'
 
 export interface PopperOptions {
+  // Workaround for weak types: https://mariusschulz.com/blog/weak-type-detection-in-typescript#workarounds-for-weak-types
+  [key: string]: unknown
   locked?: boolean
   overflowPadding?: number
   offsetDistance?: number

package/dist/runtime/types/range.d.ts

@@ -0,0 +1,5 @@
+import { range } from '../ui.config'
+import type { ExtractDeepKey } from '.'
+import type { AppConfig } from 'nuxt/schema'
+
+export type RangeSize = keyof typeof range.size | ExtractDeepKey<AppConfig, ['ui', 'range', 'size']>

package/dist/runtime/types/select.d.ts

@@ -0,0 +1,8 @@
+import { select } from '../ui.config'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
+import colors from '#ui-colors'
+import type { AppConfig } from 'nuxt/schema'
+
+export type SelectSize = keyof typeof select.size | ExtractDeepKey<AppConfig, ['ui', 'select', 'size']>
+export type SelectColor = keyof typeof select.color | ExtractDeepKey<AppConfig, ['ui', 'select', 'color']> | typeof colors[number]
+export type SelectVariant = keyof typeof select.variant | ExtractDeepKey<AppConfig, ['ui', 'select', 'variant']> | NestedKeyOf<typeof select.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'select', 'color']>>

package/dist/runtime/types/textarea.d.ts

@@ -0,0 +1,8 @@
+import { textarea } from '../ui.config'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
+import colors from '#ui-colors'
+import type { AppConfig } from 'nuxt/schema'
+
+export type TextareaSize = keyof typeof textarea.size | ExtractDeepKey<AppConfig, ['ui', 'textarea', 'size']>
+export type TextareaColor = keyof typeof textarea.color | ExtractDeepKey<AppConfig, ['ui', 'textarea', 'color']> | typeof colors[number]
+export type TextareaVariant = keyof typeof textarea.variant | ExtractDeepKey<AppConfig, ['ui', 'textarea', 'variant']> | NestedKeyOf<typeof textarea.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'textarea', 'color']>>

package/dist/runtime/types/toggle.d.ts

@@ -0,0 +1,5 @@
+import { toggle } from '../ui.config'
+import type { ExtractDeepKey } from '.'
+import type { AppConfig } from 'nuxt/schema'
+
+export type ToggleSize = keyof typeof toggle.size | ExtractDeepKey<AppConfig, ['ui', 'toggle', 'size']>

package/dist/runtime/types/utils.d.ts

@@ -1,11 +1,28 @@
-export type Strategy = 'merge' | 'override';
+export type Strategy = 'merge' | 'override'
 
-export type NestedKeyOf<ObjectType extends object> = {
-  [Key in keyof ObjectType]: ObjectType[Key] extends object
+export type NestedKeyOf<ObjectType extends Record<string, any>> = {
+  [Key in keyof ObjectType]: ObjectType[Key] extends Record<string, any>
   ? NestedKeyOf<ObjectType[Key]>
-  : Key;
-}[keyof ObjectType];
+  : Key
+}[keyof ObjectType]
 
 export type DeepPartial<T> = Partial<{
-  [P in keyof T]: DeepPartial<T[P]> | { [key: string]: string | object };
-}>;
+  [P in keyof T]: DeepPartial<T[P]> | { [key: string]: string | object }
+}>
+
+type DeepKey<T, Keys extends string[]> =
+  Keys extends [infer First, ...infer Rest]
+    ? First extends keyof T
+      ? Rest extends string[]
+        ? DeepKey<T[First], Rest>
+        : never
+      : never
+    : T
+
+export type ExtractDeepKey<T, Path extends string[]> = DeepKey<T, Path> extends infer Result
+  ? Result extends Record<string, any> ? keyof Result : never
+  : never
+
+export type ExtractDeepObject<T, Path extends string[]> = DeepKey<T, Path> extends infer Result
+  ? Result extends Record<string, any> ? Result : never
+  : never

package/dist/runtime/ui.config/data/table.d.ts

@@ -0,0 +1,60 @@
+declare const _default: {
+    wrapper: string;
+    base: string;
+    divide: string;
+    thead: string;
+    tbody: string;
+    tr: {
+        base: string;
+        selected: string;
+        active: string;
+    };
+    th: {
+        base: string;
+        padding: string;
+        color: string;
+        font: string;
+        size: string;
+    };
+    td: {
+        base: string;
+        padding: string;
+        color: string;
+        font: string;
+        size: string;
+    };
+    checkbox: {
+        padding: string;
+    };
+    loadingState: {
+        wrapper: string;
+        label: string;
+        icon: string;
+    };
+    emptyState: {
+        wrapper: string;
+        label: string;
+        icon: string;
+    };
+    default: {
+        sortAscIcon: string;
+        sortDescIcon: string;
+        sortButton: {
+            icon: string;
+            trailing: boolean;
+            square: boolean;
+            color: "gray";
+            variant: "ghost";
+            class: string;
+        };
+        loadingState: {
+            icon: string;
+            label: string;
+        };
+        emptyState: {
+            icon: string;
+            label: string;
+        };
+    };
+};
+export default _default;

package/dist/runtime/ui.config/data/table.mjs

@@ -0,0 +1,59 @@
+export default {
+  wrapper: "relative overflow-x-auto",
+  base: "min-w-full table-fixed",
+  divide: "divide-y divide-gray-300 dark:divide-gray-700",
+  thead: "",
+  tbody: "divide-y divide-gray-200 dark:divide-gray-800",
+  tr: {
+    base: "",
+    selected: "bg-gray-50 dark:bg-gray-800/50",
+    active: "hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer"
+  },
+  th: {
+    base: "text-left rtl:text-right",
+    padding: "px-3 py-3.5",
+    color: "text-gray-900 dark:text-white",
+    font: "font-semibold",
+    size: "text-sm"
+  },
+  td: {
+    base: "whitespace-nowrap",
+    padding: "px-3 py-4",
+    color: "text-gray-500 dark:text-gray-400",
+    font: "",
+    size: "text-sm"
+  },
+  checkbox: {
+    padding: "ps-4"
+  },
+  loadingState: {
+    wrapper: "flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14",
+    label: "text-sm text-center text-gray-900 dark:text-white",
+    icon: "w-6 h-6 mx-auto text-gray-400 dark:text-gray-500 mb-4 animate-spin"
+  },
+  emptyState: {
+    wrapper: "flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14",
+    label: "text-sm text-center text-gray-900 dark:text-white",
+    icon: "w-6 h-6 mx-auto text-gray-400 dark:text-gray-500 mb-4"
+  },
+  default: {
+    sortAscIcon: "i-heroicons-bars-arrow-up-20-solid",
+    sortDescIcon: "i-heroicons-bars-arrow-down-20-solid",
+    sortButton: {
+      icon: "i-heroicons-arrows-up-down-20-solid",
+      trailing: true,
+      square: true,
+      color: "gray",
+      variant: "ghost",
+      class: "-m-1.5"
+    },
+    loadingState: {
+      icon: "i-heroicons-arrow-path-20-solid",
+      label: "Loading..."
+    },
+    emptyState: {
+      icon: "i-heroicons-circle-stack-20-solid",
+      label: "No items."
+    }
+  }
+};

package/dist/runtime/ui.config/elements/accordion.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+    wrapper: string;
+    item: {
+        base: string;
+        size: string;
+        color: string;
+        padding: string;
+        icon: string;
+    };
+    transition: {
+        enterActiveClass: string;
+        leaveActiveClass: string;
+    };
+    default: {
+        openIcon: string;
+        closeIcon: string;
+        class: string;
+        variant: "soft";
+    };
+};
+export default _default;

package/dist/runtime/ui.config/elements/accordion.mjs

@@ -0,0 +1,20 @@
+export default {
+  wrapper: "w-full flex flex-col",
+  item: {
+    base: "",
+    size: "text-sm",
+    color: "text-gray-500 dark:text-gray-400",
+    padding: "pt-1.5 pb-3",
+    icon: "ms-auto transform transition-transform duration-200"
+  },
+  transition: {
+    enterActiveClass: "overflow-hidden transition-[height] duration-200 ease-out",
+    leaveActiveClass: "overflow-hidden transition-[height] duration-200 ease-out"
+  },
+  default: {
+    openIcon: "i-heroicons-chevron-down-20-solid",
+    closeIcon: "",
+    class: "mb-1.5 w-full",
+    variant: "soft"
+  }
+};

package/dist/runtime/ui.config/elements/alert.d.ts

@@ -0,0 +1,41 @@
+declare const _default: {
+    wrapper: string;
+    inner: string;
+    title: string;
+    description: string;
+    actions: string;
+    shadow: string;
+    rounded: string;
+    padding: string;
+    gap: string;
+    icon: {
+        base: string;
+    };
+    avatar: {
+        base: string;
+        size: "md";
+    };
+    color: {
+        white: {
+            solid: string;
+        };
+    };
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    default: {
+        color: string;
+        variant: string;
+        icon: null;
+        closeButton: null;
+        actionButton: {
+            size: "xs";
+            color: "primary";
+            variant: "link";
+        };
+    };
+};
+export default _default;

package/dist/runtime/ui.config/elements/alert.mjs

@@ -0,0 +1,40 @@
+export default {
+  wrapper: "w-full relative overflow-hidden",
+  inner: "w-0 flex-1",
+  title: "text-sm font-medium",
+  description: "mt-1 text-sm leading-4 opacity-90",
+  actions: "flex items-center gap-2 mt-3 flex-shrink-0",
+  shadow: "",
+  rounded: "rounded-lg",
+  padding: "p-4",
+  gap: "gap-3",
+  icon: {
+    base: "flex-shrink-0 w-5 h-5"
+  },
+  avatar: {
+    base: "flex-shrink-0 self-center",
+    size: "md"
+  },
+  color: {
+    white: {
+      solid: "text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800"
+    }
+  },
+  variant: {
+    solid: "bg-{color}-500 dark:bg-{color}-400 text-white dark:text-gray-900",
+    outline: "text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400",
+    soft: "bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400",
+    subtle: "bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 ring-opacity-25 dark:ring-opacity-25"
+  },
+  default: {
+    color: "white",
+    variant: "solid",
+    icon: null,
+    closeButton: null,
+    actionButton: {
+      size: "xs",
+      color: "primary",
+      variant: "link"
+    }
+  }
+};

package/dist/runtime/ui.config/elements/avatar.d.ts

@@ -0,0 +1,60 @@
+declare const _default: {
+    wrapper: string;
+    background: string;
+    rounded: string;
+    text: string;
+    placeholder: string;
+    size: {
+        '3xs': string;
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+    };
+    chip: {
+        base: string;
+        background: string;
+        position: {
+            'top-right': string;
+            'bottom-right': string;
+            'top-left': string;
+            'bottom-left': string;
+        };
+        size: {
+            '3xs': string;
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            '3xl': string;
+        };
+    };
+    icon: {
+        base: string;
+        size: {
+            '3xs': string;
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            '3xl': string;
+        };
+    };
+    default: {
+        size: string;
+        icon: null;
+        chipColor: null;
+        chipPosition: string;
+    };
+};
+export default _default;

package/dist/runtime/ui.config/elements/avatar.mjs

@@ -0,0 +1,59 @@
+export default {
+  wrapper: "relative inline-flex items-center justify-center flex-shrink-0",
+  background: "bg-gray-100 dark:bg-gray-800",
+  rounded: "rounded-full",
+  text: "font-medium leading-none text-gray-900 dark:text-white truncate",
+  placeholder: "font-medium leading-none text-gray-500 dark:text-gray-400 truncate",
+  size: {
+    "3xs": "h-4 w-4 text-[8px]",
+    "2xs": "h-5 w-5 text-[10px]",
+    xs: "h-6 w-6 text-xs",
+    sm: "h-8 w-8 text-sm",
+    md: "h-10 w-10 text-base",
+    lg: "h-12 w-12 text-lg",
+    xl: "h-14 w-14 text-xl",
+    "2xl": "h-16 w-16 text-2xl",
+    "3xl": "h-20 w-20 text-3xl"
+  },
+  chip: {
+    base: "absolute rounded-full ring-1 ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium",
+    background: "bg-{color}-500 dark:bg-{color}-400",
+    position: {
+      "top-right": "top-0 right-0",
+      "bottom-right": "bottom-0 right-0",
+      "top-left": "top-0 left-0",
+      "bottom-left": "bottom-0 left-0"
+    },
+    size: {
+      "3xs": "h-[4px] min-w-[4px] text-[4px] p-px",
+      "2xs": "h-[5px] min-w-[5px] text-[5px] p-px",
+      xs: "h-1.5 min-w-[0.375rem] text-[6px] p-px",
+      sm: "h-2 min-w-[0.5rem] text-[7px] p-0.5",
+      md: "h-2.5 min-w-[0.625rem] text-[8px] p-0.5",
+      lg: "h-3 min-w-[0.75rem] text-[10px] p-0.5",
+      xl: "h-3.5 min-w-[0.875rem] text-[11px] p-1",
+      "2xl": "h-4 min-w-[1rem] text-[12px] p-1",
+      "3xl": "h-5 min-w-[1.25rem] text-[14px] p-1"
+    }
+  },
+  icon: {
+    base: "text-gray-500 dark:text-gray-400 flex-shrink-0",
+    size: {
+      "3xs": "h-2 w-2",
+      "2xs": "h-2.5 w-2.5",
+      xs: "h-3 w-3",
+      sm: "h-4 w-4",
+      md: "h-5 w-5",
+      lg: "h-6 w-6",
+      xl: "h-7 w-7",
+      "2xl": "h-8 w-8",
+      "3xl": "h-10 w-10"
+    }
+  },
+  default: {
+    size: "sm",
+    icon: null,
+    chipColor: null,
+    chipPosition: "top-right"
+  }
+};