@indielayer/ui 1.2.0 → 1.3.0

package/src/components/tag/{Tag.theme.ts → theme/Tag.base.theme.ts}

@@ -1,16 +1,8 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { TagProps } from './Tag.vue'
+import type { TagTheme } from '../Tag.vue'
 
-type InternalClasses = 'wrapper' | 'loadingWrapper'
-
-interface InternalTheme extends ThemeComponent<TagProps, InternalClasses> {}
-export interface TagTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<TagProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
+const theme: TagTheme = {
   classes: {
-    wrapper: ({ props, data }) => {
+    wrapper: ({ props }) => {
       let c = 'inline-flex items-center leading-none max-w-full'
 
       if (props.size === 'xs') c += ' px-2 py-1 text-xs'

package/src/components/tag/theme/Tag.carbon.theme.ts

@@ -0,0 +1,34 @@
+import type { TagTheme } from '../Tag.vue'
+
+const theme: TagTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      let c = 'inline-flex items-center leading-none max-w-full '
+
+      if (props.size === 'xs' || props.size === 'sm') c += ' px-2 py-1 text-xs'
+      else if (props.size === 'lg') c += ' px-4 py-3'
+      else if (props.size === 'xl') c += ' px-5 py-5 text-lg'
+      else c += ' px-3 py-2 text-sm'
+
+      return c
+    },
+
+    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-50',
+  },
+
+  styles: ({ colors, props, css }) => {
+    const color = colors.getPalette(props.color)
+
+    return css.variables({
+      bg: color[200],
+      text: color[800],
+      border: color[800],
+      dark: {
+        bg: color[700],
+        text: props.outlined ? color[200] : color[800],
+      },
+    })
+  },
+}
+
+export default theme

package/src/components/textarea/Textarea.vue

@@ -9,22 +9,27 @@ const textareaProps = {
     type: String,
     default: 'ltr',
   },
-  rows: [Number, String],
+  rows: {
+    type: [Number, String],
+    default: 2,
+  },
   max: [Number, String],
   maxlength: [Number, String],
   min: [Number, String],
   minlength: [Number, String],
   placeholder: String,
-  adjustToText: {
-    type: Boolean,
-    default: true,
-  },
+  adjustToText: Boolean,
   preventEnter: Boolean,
   block: Boolean,
 }
 
 export type TextareaProps = ExtractPublicPropTypes<typeof textareaProps>
 
+type InternalClasses = 'wrapper' | 'input'
+type InternalExtraData = { errorInternal: Ref<boolean>; }
+
+export interface TextareaTheme extends ThemeComponent<TextareaProps, InternalClasses, InternalExtraData> {}
+
 export default {
   name: 'XTextarea',
   validators: {
@@ -34,18 +39,17 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, watch, type ExtractPublicPropTypes } from 'vue'
+import { ref, watch, type ExtractPublicPropTypes, type Ref } from 'vue'
 import { useResizeObserver, useEventListener } from '@vueuse/core'
-import { useCSS } from '../../composables/css'
-import { useTheme } from '../../composables/theme'
-import { useCommon } from '../../composables/common'
-import { useColors } from '../../composables/colors'
-import { useInputtable } from '../../composables/inputtable'
-import { useInteractive } from '../../composables/interactive'
-
-import XInputError from '../helpers/InputError'
+import { useCSS } from '../../composables/useCSS'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useCommon } from '../../composables/useCommon'
+import { useColors } from '../../composables/useColors'
+import { useInputtable } from '../../composables/useInputtable'
+import { useInteractive } from '../../composables/useInteractive'
 
-import theme from './Textarea.theme'
+import XLabel from '../label/Label.vue'
+import XInputFooter from '../inputFooter/InputFooter.vue'
 
 const props = defineProps(textareaProps)
 
@@ -94,27 +98,24 @@ const {
   setError,
 } = useInputtable(props, { focus, emit })
 
-const { styles, classes, className } = useTheme('textarea', theme, props, { errorInternal })
+const { styles, classes, className } = useTheme('Textarea', {}, props, { errorInternal })
 
 defineExpose({ focus, blur, reset, validate, setError })
 </script>
 
 <template>
-  <label
+  <x-label
     :style="styles"
-    class="relative"
+    :block="block"
+    :disabled="disabled"
+    :required="required"
+    :is-inside-form="isInsideForm"
+    :label="label"
     :class="[
       className,
       classes.wrapper,
-      { 'mb-3': isInsideForm, 'w-full': block }
     ]"
   >
-    <p
-      v-if="label"
-      :class="classes.label"
-      v-text="label"
-    ></p>
-
     <textarea
       ref="elRef"
       class=""
@@ -141,6 +142,6 @@ defineExpose({ focus, blur, reset, validate, setError })
       @input="onInput"
     ></textarea>
 
-    <x-input-error :error="errorInternal" :helper="helper"/>
-  </label>
+    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+  </x-label>
 </template>

package/src/components/textarea/index.ts

@@ -1,2 +1,2 @@
 export { default as XTextarea } from './Textarea.vue'
-export type { TextareaProps } from './Textarea.vue'
+export type { TextareaProps, TextareaTheme } from './Textarea.vue'

package/src/components/textarea/theme/Textarea.base.theme.ts

@@ -0,0 +1,27 @@
+import type { TextareaTheme } from '../Textarea.vue'
+
+const theme: TextareaTheme = {
+  classes: {
+    wrapper: '',
+
+    input: ({ props, data }) => {
+      const classes = ['resize-none appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-gray-300 dark:border-gray-700 border shadow-sm rounded-md']
+
+      if (!data.errorInternal && !props.disabled) classes.push('hover:border-gray-400 dark:hover:border-gray-500')
+
+      if (props.size === 'xs') classes.push('px-2 py-1 text-xs')
+      else if (props.size === 'sm') classes.push('px-2 py-2 text-sm')
+      else if (props.size === 'lg') classes.push('px-4 py-3 text-lg')
+      else if (props.size === 'xl') classes.push('px-5 py-4 text-xl')
+      else classes.push('px-3 py-2')
+
+      classes.push(props.disabled
+        ? 'bg-gray-100 dark:bg-gray-900 text-gray-500 cursor-not-allowed'
+        : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200')
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/textarea/theme/Textarea.carbon.theme.ts

@@ -0,0 +1,29 @@
+import type { TextareaTheme } from '../Textarea.vue'
+
+const theme: TextareaTheme = {
+  classes: {
+    wrapper: '',
+
+    input: ({ props, data }) => {
+      const classes = ['resize-none appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-gray-300 dark:border-gray-700 border-b text-sm px-4']
+
+      if (!data.errorInternal && !props.disabled) classes.push('hover:border-gray-400 dark:hover:border-gray-500')
+
+      if (props.size === 'xs' || props.size === 'sm') classes.push('py-1.5')
+      else if (props.size === 'lg' || props.size === 'xl') classes.push('py-3.5')
+      else classes.push('py-2.5')
+
+      if (props.disabled) {
+        classes.push('bg-gray-100 dark:bg-gray-900 text-gray-300 cursor-not-allowed')
+      } else if (props.readonly) {
+        classes.push('bg-white dark:bg-gray-900 text-gray-700')
+      } else {
+        classes.push('bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200')
+      }
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/themeProvider/ThemeProvider.vue

@@ -0,0 +1,28 @@
+<script lang="ts">
+export default { name: 'XThemeProvider' }
+</script>
+
+<script setup lang="ts">
+import { watchEffect, ref, inject, provide, type PropType, unref } from 'vue'
+import { injectThemeKey } from '../../composables/keys'
+import { injectThemeStyles, type UITheme } from '../../theme'
+
+const props = defineProps({
+  theme: Object as PropType<UITheme>,
+})
+
+const initialTheme = inject(injectThemeKey, {})
+const theme = ref<UITheme>(props.theme || unref(initialTheme) || {})
+
+provide(injectThemeKey, theme)
+
+watchEffect(() => {
+  theme.value = props.theme || unref(initialTheme) || {}
+
+  if (theme.value.styles) injectThemeStyles(theme.value.name || '', theme.value.styles)
+})
+</script>
+
+<template>
+  <slot></slot>
+</template>

package/src/components/themeProvider/index.ts

@@ -0,0 +1 @@
+export { default as XThemeProvider } from './ThemeProvider.vue'

package/src/components/toggle/Toggle.vue

@@ -12,6 +12,9 @@ const toggleProps = {
 
 export type ToggleProps = ExtractPublicPropTypes<typeof toggleProps>
 
+type InternalClasses = 'wrapper' | 'label' | 'buttonWrapper' | 'button'
+export interface ToggleTheme extends ThemeComponent<ToggleProps, InternalClasses> {}
+
 export default {
   name: 'XToggle',
   validators: {
@@ -22,16 +25,14 @@ export default {
 
 <script setup lang="ts">
 import { computed, ref, type ExtractPublicPropTypes } from 'vue'
-import { useTheme } from '../../composables/theme'
-import { useCommon } from '../../composables/common'
-import { useColors } from '../../composables/colors'
-import { useInputtable } from '../../composables/inputtable'
-import { useInteractive } from '../../composables/interactive'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useCommon } from '../../composables/useCommon'
+import { useColors } from '../../composables/useColors'
+import { useInputtable } from '../../composables/useInputtable'
+import { useInteractive } from '../../composables/useInteractive'
 
 import XSpinner from '../../components/spinner/Spinner.vue'
-import XInputError from '../helpers/InputError'
-
-import theme from './Toggle.theme'
+import XInputFooter from '../inputFooter/InputFooter.vue'
 
 const props = defineProps(toggleProps)
 
@@ -57,7 +58,7 @@ const {
   setError,
 } = useInputtable(props, { focus, emit, withListeners: false })
 
-const { styles, classes, className } = useTheme('toggle', theme, props)
+const { styles, classes, className } = useTheme('Toggle', {}, props)
 
 defineExpose({ focus, blur, reset, validate, setError })
 </script>
@@ -73,7 +74,7 @@ defineExpose({ focus, blur, reset, validate, setError })
   >
     <div class="flex items-center">
       <div
-        class="flex items-center rounded-full transition-colors duration-300 border-[3px] shrink-0 border-transparent"
+        class="flex items-center rounded-full transition-colors duration-300 border-[3px] shrink-0 !border-transparent"
         :style="styles"
         :class="{
           [`shadow-lg shadow-${color}-500/50`]: glow && modelValue,
@@ -118,6 +119,6 @@ defineExpose({ focus, blur, reset, validate, setError })
       <x-spinner v-if="loading" :size="size" class="ml-1" />
     </div>
 
-    <x-input-error :error="errorInternal" :helper="helper"/>
+    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
   </label>
 </template>

package/src/components/toggle/index.ts

@@ -1,2 +1,2 @@
 export { default as XToggle } from './Toggle.vue'
-export type { ToggleProps } from './Toggle.vue'
+export type { ToggleProps, ToggleTheme } from './Toggle.vue'

package/src/components/toggle/{Toggle.theme.ts → theme/Toggle.base.theme.ts}

@@ -1,14 +1,6 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { ToggleProps } from './Toggle.vue'
+import type { ToggleTheme } from '../Toggle.vue'
 
-type InternalClasses = 'wrapper' | 'label' | 'buttonWrapper' | 'button'
-
-interface InternalTheme extends ThemeComponent<ToggleProps, InternalClasses> {}
-export interface ToggleTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<ToggleProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
+const theme: ToggleTheme = {
   classes: {
     wrapper: '',
 

package/src/components/toggle/theme/Toggle.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { ToggleTheme } from '../Toggle.vue'
+
+import BaseTheme from './Toggle.base.theme'
+
+const theme: ToggleTheme = BaseTheme
+
+export default theme

package/src/components/tooltip/Tooltip.vue

@@ -13,7 +13,7 @@ import XPopoverContainer from '../../components/popover/PopoverContainer.vue'
 </script>
 
 <template>
-  <x-popover hover>
+  <x-popover :triggers="['hover']" class="inline-block">
     <slot></slot>
     <template #content>
       <div class="dark">

package/src/composables/index.ts

@@ -1,7 +1,7 @@
 export * from './keys'
-export * from './common'
-export * from './colors'
-export * from './css'
-export * from './inputtable'
-export * from './interactive'
-export * from './notifications'
+export * from './useCommon'
+export * from './useColors'
+export * from './useCSS'
+export * from './useInputtable'
+export * from './useInteractive'
+export * from './useNotifications'

package/src/composables/keys.ts

@@ -1,12 +1,16 @@
-import type { InjectionKey } from 'vue'
+import type { InjectionKey, MaybeRef } from 'vue'
 import type { FormInjection } from '../components/form/Form.vue'
 import type { TabGroupInjection } from '../components/tab/TabGroup.vue'
 import type { ButtonGroupInjection } from '../components/button/ButtonGroup.vue'
+import type { NotificationInjection } from '../components/notifications/Notifications.vue'
+import type { IconInjection } from '../components/icon/Icon.vue'
+import type { UIOptions } from '../create'
+import type { UITheme } from '../theme'
 
+export const injectOptionsKey = Symbol() as InjectionKey<UIOptions>
+export const injectThemeKey = Symbol() as InjectionKey<MaybeRef<UITheme>>
 export const injectTabKey = Symbol() as InjectionKey<TabGroupInjection>
 export const injectFormKey = Symbol() as InjectionKey<FormInjection>
-export const injectThemeKey = Symbol() as InjectionKey<any>
-export const injectIconsKey = Symbol() as InjectionKey<any>
-export const injectColorsKey = Symbol() as InjectionKey<any>
+export const injectIconsKey = Symbol() as InjectionKey<IconInjection>
 export const injectButtonGroupKey = Symbol() as InjectionKey<ButtonGroupInjection>
-export const injectNotificationKey = Symbol() as InjectionKey<any>
+export const injectNotificationKey = Symbol() as InjectionKey<NotificationInjection>

package/src/composables/{colors.ts → useColors.ts}

@@ -1,6 +1,6 @@
 import { computed, inject, unref } from 'vue'
 import { injectThemeKey } from './keys'
-import { isValidColor, tailwindColors, colorShade, setOpacity } from './colors-utils'
+import { isValidColor, tailwindColors, colorShade, setOpacity } from '../common/colors'
 import { mergeRightDeep } from '../common/utils'
 
 export type Tone = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950'
@@ -40,14 +40,14 @@ const defaultColors = {
   error: tailwindColors.red,
 }
 
+const getTailwindColor = (color: string) => tailwindColors[color]
+
+const getColorOpacity = (color: string, opacity: number) => setOpacity(color, opacity)
+
 export const useColors = (): ColorComposition => {
   const globalTheme = inject(injectThemeKey,  {})
   const customColors = computed(() => mergeRightDeep(defaultColors, unref(globalTheme).colors || {}))
 
-  const getTailwindColor = (color: string) => tailwindColors[color]
-
-  const getColorOpacity = (color: string, opacity: number) => setOpacity(color, opacity)
-
   const getPalette = (color?: string): ColorPalette => {
     if (!color) return getTailwindColor('gray')
 

package/src/composables/{inputtable.ts → useInputtable.ts}

@@ -1,4 +1,4 @@
-import type { PropType } from 'vue'
+import type { MaybeRef, PropType } from 'vue'
 import { ref, computed, inject, watch, onMounted, onUnmounted } from 'vue'
 import { injectFormKey } from './keys'
 
@@ -74,17 +74,31 @@ export const useInputtable = (props: any, { focus, emit, withListeners = true }:
     return true
   }
 
-  const inputListeners = withListeners ? computed(() => {
+  const isFocused = ref(false)
+
+  type InputListeners = {
+    focus: (event: Event) => void;
+    blur: (event: Event) => void;
+    input: (event: Event) => void;
+    change: (event: Event) => void;
+  }
+
+  const inputListeners: MaybeRef<InputListeners> = withListeners ? computed<InputListeners>(() => {
     return {
-      blur: (event: Event) => emit('blur', event),
-      focus: (event: Event) => emit('focus', event),
+      focus: (event: Event) => { isFocused.value = true; emit('focus', event) },
+      blur: (event: Event) => { isFocused.value = false; emit('blur', event) },
       input: (event: Event) => {
         if (props.validateOnInput && !isFirstValidation.value) validate((event.target as HTMLInputElement).value)
         emit('update:modelValue', (event.target as HTMLInputElement).value)
       },
       change: (event: Event) => emit('change', event),
     }
-  }) : {}
+  }) : {
+    focus: () => {},
+    blur: () => {},
+    input: () => {},
+    change: () => {},
+  }
 
   onMounted(() => {
     form.registerInput(nameInternal.value, focus, validate, setError)
@@ -97,6 +111,7 @@ export const useInputtable = (props: any, { focus, emit, withListeners = true }:
   return {
     isFirstValidation,
     errorInternal,
+    isFocused,
     isInsideForm: form.isInsideForm,
     inputListeners,
     reset,
@@ -121,6 +136,7 @@ useInputtable.props = () => ({
     default: true,
   },
   error: String,
+  hideFooter: Boolean,
   rules: {
     type: Array,
     default: () => [],

package/src/composables/{interactive.ts → useInteractive.ts}

@@ -1,8 +1,11 @@
-import type { Ref } from 'vue'
+import type { LoaderStatus } from 'src/components/loader/Loader.vue'
+import type { PropType, Ref } from 'vue'
 
 export interface InteractiveProps {
   disabled?: boolean;
   loading?: boolean;
+  loadingLabel?: string;
+  loadingStatus?: LoaderStatus;
 }
 
 export const useInteractive = (
@@ -17,4 +20,9 @@ export const useInteractive = (
 useInteractive.props = () => ({
   disabled: Boolean,
   loading: Boolean,
+  loadingLabel: String,
+  loadingStatus: {
+    type: String as PropType<LoaderStatus>,
+    default: 'active',
+  },
 } as const)

package/src/composables/{notifications.ts → useNotifications.ts}

@@ -1,8 +1,9 @@
 import { inject } from 'vue'
 import { injectNotificationKey } from './keys'
+import type { NotificationInjection } from '../components/notifications/Notifications.vue'
 
 export const useNotifications = (key?: symbol | string) => {
-  const notifications = inject(key || injectNotificationKey)
+  const notifications = inject<NotificationInjection>(key || injectNotificationKey)
 
   if (!notifications) console.warn('useNotifications must have a parent wrapped with Notifications component')
 

package/src/composables/{theme.ts → useTheme.ts}

@@ -1,14 +1,18 @@
-import { computed, inject, unref, useSlots, type StyleValue, type Slots, type UnwrapNestedRefs, type UnwrapRef, type MaybeRef } from 'vue'
+import { computed, inject, unref, useSlots, type Slots, type UnwrapNestedRefs, type UnwrapRef, type MaybeRef, type CSSProperties } from 'vue'
 import { injectThemeKey } from './keys'
-import { useColors, type ColorComposition } from './colors'
-import { useCSS, type CSSComposition } from './css'
+import { useColors, type ColorComposition } from './useColors'
+import { useCSS, type CSSComposition } from './useCSS'
 import { isFunction, isObject, mergeRightDeep, smartUnref } from '../common/utils'
+import type { ComponentThemes } from 'src/theme'
+
+export type Stylish = false | null | undefined | string | CSSProperties;
+export type StyleValue = Stylish | Array<Stylish>;
 
 export type ThemeVueClass = string | Record<string, boolean> | (string | Record<string, boolean>)[]
 export type ThemeClasses<P, K extends string = string, D = undefined> = Record<K, string | ((params: ThemeParams<P, D>) => ThemeVueClass)>
 export type ThemeStyles<P, D> = StyleValue | ((params: ThemeParams<P, D>) => StyleValue);
 export interface ThemeComponent<P = object, K extends string = string, D = object> {
-  classes?: ThemeClasses<P, K, D>;
+  classes?: Partial<ThemeClasses<P, K, D>>;
   styles?: ThemeStyles<P, D>;
 }
 export type ThemeParams<P = Record<string, any>, D = Record<string, any>> = {
@@ -20,24 +24,26 @@ export type ThemeParams<P = Record<string, any>, D = Record<string, any>> = {
   data: UnwrapNestedRefs<D>;
 }
 
-export const useTheme = <P extends object = object, K extends string = string, D extends object = object>(namespace: string, defaultTheme: ThemeComponent<P, K, D> = {}, props: MaybeRef<P> = {} as P, data: D = {} as D) => {
-  const userTheme = inject(injectThemeKey, false)
+export const useTheme = <P extends object = object, K extends string = string, D extends object = object>(namespace: keyof ComponentThemes, defaultTheme: ThemeComponent<P, K, D> = {}, props: MaybeRef<P> = {} as P, data: D = {} as D) => {
+  const userTheme = inject(injectThemeKey, {})
 
   const rawClasses = computed(() => {
-    if (unref(userTheme)?.[namespace]) return mergeRightDeep(defaultTheme.classes, unref(userTheme)[namespace].classes || {})
+    if (unref(userTheme)?.components?.[namespace]) return mergeRightDeep(defaultTheme.classes || {}, unref(userTheme).components?.[namespace].classes || {})
 
-    return defaultTheme.classes
+    return defaultTheme.classes || {}
   })
 
+  const cssNamespace = namespace.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`).replace(/^-/, '')
+
   const classPrefix = computed(() => unref(userTheme)?.classPrefix ?? 'x-')
-  const className = computed(() => `${classPrefix.value}${namespace}`)
+  const className = computed(() => `${classPrefix.value}${cssNamespace}`)
 
   const rtl = computed(() => unref(userTheme)?.rtl ?? false)
 
   // compute theme
   const slots = useSlots()
   const colors = useColors()
-  const css = useCSS(namespace)
+  const css = useCSS(cssNamespace)
   const classes = computed<Record<K, ThemeVueClass>>(() => getClasses(rawClasses.value, {
     props: unref(props),
     slots,
@@ -48,7 +54,7 @@ export const useTheme = <P extends object = object, K extends string = string, D
   }))
 
   const styles = computed(() => {
-    const componentTheme = unref(userTheme)?.[namespace] || {}
+    const componentTheme = unref(userTheme)?.components?.[namespace] || {}
     const params = {
       props: unref(props),
       slots,

package/src/create.ts

@@ -1,22 +1,21 @@
 import type { App } from 'vue'
-import type { ColorLibrary } from './composables/colors'
-import { injectColorsKey, injectIconsKey, injectThemeKey } from './composables/keys'
+import { injectIconsKey, injectOptionsKey, injectThemeKey } from './composables/keys'
+import { injectThemeStyles, type UITheme } from './theme'
 
-export type IndielayerUIOptions = {
+export type UIOptions = {
   prefix?: string;
-  components?: any;
-  colors?: ColorLibrary;
-  icons?: any;
-  theme?: any;
+  components?: any[];
+  icons?: Record<string, any>;
+  theme?: UITheme;
 }
 
-const defaultOptions: IndielayerUIOptions = {
+const defaultOptions: UIOptions = {
   prefix: 'X',
 }
 
-const create = (createOptions: IndielayerUIOptions = {}) => {
-  const install = (app: App, installOptions: IndielayerUIOptions = {}) => {
-    const options = {
+const create = (createOptions: UIOptions = {}) => {
+  const install = (app: App, installOptions: UIOptions = {}) => {
+    const options: UIOptions = {
       ...defaultOptions,
       ...createOptions,
       ...installOptions,
@@ -29,9 +28,11 @@ const create = (createOptions: IndielayerUIOptions = {}) => {
         if (!app.component(`${options.prefix}${name}`)) app.component(`${options.prefix}${name}`, component)
       })
 
-    app.provide(injectColorsKey, options.colors)
+    app.provide(injectOptionsKey, options)
     app.provide(injectIconsKey, options.icons || {})
     app.provide(injectThemeKey, options.theme || {})
+
+    if (options.theme?.styles) injectThemeStyles(options.theme.name || '', options.theme.styles)
   }
 
   return {

package/src/index.ts

@@ -1,8 +1,10 @@
-export { tailwindColors as colors } from './composables/colors-utils'
+export { tailwindColors as colors } from './common/colors'
 export { default as version } from './version'
 export * from './components'
 export * from './composables'
+export * from './themes'
+export type { UITheme, ComponentThemes } from './theme'
 
-export { default as createUI } from './create'
+export { default as createUI, type UIOptions } from './create'
 
 export { default } from './install'