@indielayer/ui 1.2.0 → 1.4.0

package/src/composables/keys.ts

@@ -1,12 +1,20 @@
-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 { FormGroupInjection } from '../components/formGroup'
+import type { AccordionInjection } from '../components/accordion'
+import type { UIOptions } from '../create'
+import type { UITheme } from '../theme'
 
-export const injectTabKey = Symbol() as InjectionKey<TabGroupInjection>
+export const injectOptionsKey = Symbol() as InjectionKey<UIOptions>
+export const injectThemeKey = Symbol() as InjectionKey<MaybeRef<UITheme>>
+export const injectTabGroupKey = 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 injectFormGroupKey = Symbol() as InjectionKey<FormGroupInjection>
+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>
+export const injectAccordionKey = Symbol() as InjectionKey<AccordionInjection>

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/useFocusTrap.ts

@@ -0,0 +1,106 @@
+import type { ComponentPublicInstance } from 'vue'
+import { onUnmounted, type MaybeRef, unref, nextTick } from 'vue'
+
+const focusableQuery = 'button:not([tabindex="-1"]), [href], input, select, textarea, li, a, [tabindex]:not([tabindex="-1"])'
+
+export function useFocusTrap() {
+  let focusable: HTMLElement[] = []
+  let observer: MutationObserver | null = null
+
+  let firstFocusableEl: HTMLElement | null = null
+  let lastFocusableEl: HTMLElement | null = null
+
+  async function initFocusTrap(targetRef: MaybeRef<HTMLElement | ComponentPublicInstance | null>) {
+    targetRef = unref(targetRef)
+
+    if (!targetRef) return
+
+    await nextTick()
+
+    getFocusableElements(targetRef)
+
+    if (firstFocusableEl) firstFocusableEl.focus()
+
+    document.addEventListener('keydown', handleKeydown)
+    observer = new MutationObserver(() => getFocusableElements(targetRef))
+
+    if ((targetRef as ComponentPublicInstance).$el) observer.observe((targetRef as ComponentPublicInstance).$el as Node, { childList: true, subtree: true })
+    else observer.observe(targetRef as Node, { childList: true, subtree: true })
+  }
+
+  function getFocusableElements(targetRef: MaybeRef<HTMLElement | ComponentPublicInstance | null>) {
+    if (targetRef === null) return
+
+    let elements
+
+    if ((targetRef as ComponentPublicInstance).$el) elements = (targetRef as ComponentPublicInstance)?.$el.querySelectorAll(focusableQuery)
+    else (targetRef as HTMLElement).querySelectorAll(focusableQuery)
+
+    focusable = Array.from(elements || []) as HTMLElement[]
+    firstFocusableEl = focusable[0] || null
+    lastFocusableEl = focusable[focusable.length - 1] || null
+  }
+
+  const handleKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Tab') {
+      const isShiftPressed = event.shiftKey
+      const currentEl = document.activeElement as HTMLElement | null
+
+      if (!currentEl) {
+        event.preventDefault()
+        focusable[0]?.focus()
+
+        return
+      }
+
+      const firstEl = focusable[0]
+      const lastEl = focusable[focusable.length - 1]
+
+      if (!isShiftPressed && currentEl === lastEl) {
+        event.preventDefault()
+        firstEl?.focus()
+      } else if (isShiftPressed && currentEl === firstEl) {
+        event.preventDefault()
+        lastEl?.focus()
+      }
+
+    } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+      event.preventDefault()
+      const currentEl = document.activeElement as HTMLElement
+      const index = focusable.indexOf(currentEl)
+      const previousEl = focusable[index - 1]
+
+      if (previousEl) {
+        previousEl.focus()
+      } else if (lastFocusableEl) {
+        lastFocusableEl.focus()
+      }
+
+    } else if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+      event.preventDefault()
+      const currentEl = document.activeElement as HTMLElement
+      const index = focusable.indexOf(currentEl)
+      const nextElement = focusable[index + 1]
+
+      if (nextElement) {
+        nextElement.focus()
+      } else if (firstFocusableEl) {
+        firstFocusableEl.focus()
+      }
+    }
+  }
+
+  const clearFocusTrap = () => {
+    document.removeEventListener('keydown', handleKeydown)
+    observer?.disconnect()
+  }
+
+  onUnmounted(() => {
+    clearFocusTrap()
+  })
+
+  return {
+    initFocusTrap,
+    clearFocusTrap,
+  }
+}

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

@@ -1,6 +1,6 @@
-import type { PropType } from 'vue'
+import type { MaybeRef, PropType } from 'vue'
 import { ref, computed, inject, watch, onMounted, onUnmounted } from 'vue'
-import { injectFormKey } from './keys'
+import { injectFormGroupKey, injectFormKey } from './keys'
 
 export interface XFormInputMethods {
   focus: () => void;
@@ -11,6 +11,7 @@ export interface XFormInputMethods {
 export const useInputtable = (props: any, { focus, emit, withListeners = true }: { focus: () => void; emit: any; withListeners?: boolean; }) => {
   const isFirstValidation = ref(true)
   const errorInternal = ref(props.error)
+  const hideFooterInternal = ref(props.hideFooter)
 
   const name = props.name ? props.name : (Math.random() + 1).toString(36).substring(7)
   const nameInternal = ref(name)
@@ -18,6 +19,18 @@ export const useInputtable = (props: any, { focus, emit, withListeners = true }:
   watch(() => props.error, (val) => { errorInternal.value = val })
   watch(() => props.name, (val) => { if (val) nameInternal.value = val })
 
+  const formGroup = inject(injectFormGroupKey, {
+    registerInputGroup: () => {},
+    unregisterInputGroup: () => {},
+    setValue: () => {},
+    isInsideFormGroup: false,
+    value: undefined,
+  })
+
+  if (formGroup.isInsideFormGroup) {
+    hideFooterInternal.value = true
+  }
+
   const form = inject(injectFormKey, {
     registerInput: () => {},
     unregisterInput: () => {},
@@ -74,31 +87,58 @@ 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)
+    if (formGroup.isInsideFormGroup) {
+      formGroup.registerInputGroup(nameInternal.value, focus)
+    } else {
+      form.registerInput(nameInternal.value, focus, validate, setError)
+    }
   })
 
   onUnmounted(() => {
-    form.unregisterInput(nameInternal.value)
+    if (formGroup.isInsideFormGroup) {
+      formGroup.unregisterInputGroup(nameInternal.value)
+    } else {
+      form.unregisterInput(nameInternal.value)
+    }
+
   })
 
   return {
     isFirstValidation,
     errorInternal,
+    hideFooterInternal,
+    isFocused,
     isInsideForm: form.isInsideForm,
+    isInsideFormGroup: formGroup.isInsideFormGroup,
     inputListeners,
+    formGroup,
     reset,
     validate,
     setError,
@@ -113,6 +153,7 @@ useInputtable.emits = (withListeners = true): string[] => {
 
 useInputtable.props = () => ({
   modelValue: [String, Number, Boolean, Object, Array] as PropType<string | number | boolean | object | any[] | undefined>,
+  id: String,
   name: String,
   readonly: Boolean,
   required: Boolean,
@@ -120,7 +161,10 @@ useInputtable.props = () => ({
     type: Boolean,
     default: true,
   },
+  label: String,
+  helper: String,
   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'

package/src/theme.ts

@@ -0,0 +1,131 @@
+import type { ColorLibrary } from './composables/useColors'
+import type {
+  AccordionTheme,
+  AccordionItemTheme,
+  AlertTheme,
+  AvatarTheme,
+  BadgeTheme,
+  BreadcrumbsTheme,
+  ButtonTheme,
+  ButtonGroupTheme,
+  CardTheme,
+  CarouselTheme,
+  CarouselSlideTheme,
+  CheckboxTheme,
+  ContainerTheme,
+  DividerTheme,
+  DrawerTheme,
+  FormTheme,
+  FormGroupTheme,
+  IconTheme,
+  ImageTheme,
+  InputTheme,
+  InputFooterTheme,
+  LabelTheme,
+  LinkTheme,
+  LoaderTheme,
+  MenuTheme,
+  MenuItemTheme,
+  ModalTheme,
+  NotificationsTheme,
+  PaginationTheme,
+  PaginationItemTheme,
+  PopoverTheme,
+  PopoverContainerTheme,
+  ProgressTheme,
+  RadioTheme,
+  ScrollTheme,
+  SelectTheme,
+  SkeletonTheme,
+  SliderTheme,
+  StepperTheme,
+  TabTheme,
+  TabGroupTheme,
+  TableTheme,
+  TableCellTheme,
+  TableHeadTheme,
+  TableHeaderTheme,
+  TableRowTheme,
+  TagTheme,
+  TextareaTheme,
+  ToggleTheme,
+} from './components'
+
+export type ComponentThemes = {
+  Accordion: AccordionTheme;
+  AccordionItem: AccordionItemTheme;
+  Alert: AlertTheme;
+  Avatar: AvatarTheme;
+  Badge: BadgeTheme;
+  Breadcrumbs: BreadcrumbsTheme;
+  Button: ButtonTheme;
+  ButtonGroup: ButtonGroupTheme;
+  Card: CardTheme;
+  Carousel: CarouselTheme;
+  CarouselSlide: CarouselSlideTheme;
+  Checkbox: CheckboxTheme;
+  Container: ContainerTheme;
+  Divider: DividerTheme;
+  Drawer: DrawerTheme;
+  Form: FormTheme;
+  FormGroup: FormGroupTheme;
+  Icon: IconTheme;
+  Image: ImageTheme;
+  Input: InputTheme;
+  InputFooter: InputFooterTheme;
+  Label: LabelTheme;
+  Link: LinkTheme;
+  Loader: LoaderTheme;
+  Menu: MenuTheme;
+  MenuItem: MenuItemTheme;
+  Modal: ModalTheme;
+  Notifications: NotificationsTheme;
+  Pagination: PaginationTheme;
+  PaginationItem: PaginationItemTheme;
+  Popover: PopoverTheme;
+  PopoverContainer: PopoverContainerTheme;
+  Progress: ProgressTheme;
+  Radio: RadioTheme;
+  Scroll: ScrollTheme;
+  Select: SelectTheme;
+  Skeleton: SkeletonTheme;
+  Slider: SliderTheme;
+  Stepper: StepperTheme;
+  Tab: TabTheme;
+  TabGroup: TabGroupTheme;
+  Table: TableTheme;
+  TableCell: TableCellTheme;
+  TableHead: TableHeadTheme;
+  TableHeader: TableHeaderTheme;
+  TableRow: TableRowTheme;
+  Tag: TagTheme;
+  Textarea: TextareaTheme;
+  Toggle: ToggleTheme;
+}
+
+export type UITheme = {
+  name?: string;
+  classPrefix?: string;
+  components?: ComponentThemes;
+  colors?: ColorLibrary;
+  styles?: string;
+  rtl?: boolean;
+}
+
+export function injectThemeStyles(name: string, styles: string) {
+  if (typeof window !== 'undefined') {
+    const el = document.querySelector('style[data-theme-style]')
+
+    if (el) {
+      el.setAttribute('data-theme-style', name)
+      el.textContent = styles
+    } else {
+      const themeStyle: HTMLStyleElement = document.createElement('style')
+
+      themeStyle.setAttribute('data-theme-style', name)
+      themeStyle.textContent = styles
+
+      document.head.appendChild(themeStyle)
+    }
+  }
+}

package/src/themes/base/components.ts

@@ -0,0 +1,49 @@
+export { default as Accordion } from '../../components/accordion/theme/Accordion.base.theme'
+export { default as AccordionItem } from '../../components/accordion/theme/AccordionItem.base.theme'
+export { default as Alert } from '../../components/alert/theme/Alert.base.theme'
+export { default as Avatar } from '../../components/avatar/theme/Avatar.base.theme'
+export { default as Badge } from '../../components/badge/theme/Badge.base.theme'
+export { default as Breadcrumbs } from '../../components/breadcrumbs/theme/Breadcrumbs.base.theme'
+export { default as Button } from '../../components/button/theme/Button.base.theme'
+export { default as ButtonGroup } from '../../components/button/theme/ButtonGroup.base.theme'
+export { default as Card } from '../../components/card/theme/Card.base.theme'
+export { default as Carousel } from '../../components/carousel/theme/Carousel.base.theme'
+export { default as CarouselSlide } from '../../components/carousel/theme/CarouselSlide.base.theme'
+export { default as Checkbox } from '../../components/checkbox/theme/Checkbox.base.theme'
+export { default as Container } from '../../components/container/theme/Container.base.theme'
+export { default as Divider } from '../../components/divider/theme/Divider.base.theme'
+export { default as Drawer } from '../../components/drawer/theme/Drawer.base.theme'
+export { default as Form } from '../../components/form/theme/Form.base.theme'
+export { default as FormGroup } from '../../components/formGroup/theme/FormGroup.base.theme'
+export { default as Icon } from '../../components/icon/theme/Icon.base.theme'
+export { default as Image } from '../../components/image/theme/Image.base.theme'
+export { default as Input } from '../../components/input/theme/Input.base.theme'
+export { default as InputFooter } from '../../components/inputFooter/theme/InputFooter.base.theme'
+export { default as Label } from '../../components/label/theme/Label.base.theme'
+export { default as Link } from '../../components/link/theme/Link.base.theme'
+export { default as Loader } from '../../components/loader/theme/Loader.base.theme'
+export { default as Menu } from '../../components/menu/theme/Menu.base.theme'
+export { default as MenuItem } from '../../components/menu/theme/MenuItem.base.theme'
+export { default as Modal } from '../../components/modal/theme/Modal.base.theme'
+export { default as Notifications } from '../../components/notifications/theme/Notifications.base.theme'
+export { default as Pagination } from '../../components/pagination/theme/Pagination.base.theme'
+export { default as PaginationItem } from '../../components/pagination/theme/PaginationItem.base.theme'
+export { default as Popover } from '../../components/popover/theme/Popover.base.theme'
+export { default as PopoverContainer } from '../../components/popover/theme/PopoverContainer.base.theme'
+export { default as Progress } from '../../components/progress/theme/Progress.base.theme'
+export { default as Radio } from '../../components/radio/theme/Radio.base.theme'
+export { default as Scroll } from '../../components/scroll/theme/Scroll.base.theme'
+export { default as Select } from '../../components/select/theme/Select.base.theme'
+export { default as Skeleton } from '../../components/skeleton/theme/Skeleton.base.theme'
+export { default as Slider } from '../../components/slider/theme/Slider.base.theme'
+export { default as Stepper } from '../../components/stepper/theme/Stepper.base.theme'
+export { default as Tab } from '../../components/tab/theme/Tab.base.theme'
+export { default as TabGroup } from '../../components/tab/theme/TabGroup.base.theme'
+export { default as Table } from '../../components/table/theme/Table.base.theme'
+export { default as TableCell } from '../../components/table/theme/TableCell.base.theme'
+export { default as TableHead } from '../../components/table/theme/TableHead.base.theme'
+export { default as TableHeader } from '../../components/table/theme/TableHeader.base.theme'
+export { default as TableRow } from '../../components/table/theme/TableRow.base.theme'
+export { default as Tag } from '../../components/tag/theme/Tag.base.theme'
+export { default as Textarea } from '../../components/textarea/theme/Textarea.base.theme'
+export { default as Toggle } from '../../components/toggle/theme/Toggle.base.theme'

package/src/themes/base/index.ts

@@ -0,0 +1,15 @@
+import type { UITheme } from '../../theme'
+import * as components from './components'
+import rawStyles from './styles.css?raw'
+
+const theme: UITheme = {
+  name: 'Base',
+  colors: {
+    primary: { '50': '#ecfdf5', '100': '#d1fae5', '200': '#a7f3d0', '300': '#6ee7b7', '400': '#34d399', '500': '#10b981', '600': '#059669', '700': '#047857', '800': '#065f46', '900': '#064e3b', '950': '#022c22' },
+  },
+  styles: `${rawStyles}`,
+  classPrefix: 'x-',
+  components,
+}
+
+export default theme