@indielayer/ui 1.1.0 → 1.3.0

package/src/components/checkbox/theme/Checkbox.carbon.theme.ts

@@ -0,0 +1,94 @@
+import type { CheckboxTheme } from '../Checkbox.vue'
+
+const theme: CheckboxTheme = {
+  classes: {
+    wrapper: 'inline-block relative cursor-pointer align-middle',
+
+    box: ({ props }) => {
+      const classes = ['rounded-sm flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]']
+
+      if (props.size === 'xs' || props.size === 'sm') classes.push('h-3 w-3')
+      else if (props.size === 'xl') classes.push('h-5 w-5')
+      else classes.push('h-4 w-4')
+
+      return classes
+    },
+
+    icon: ({ props }) => {
+      const classes = ['fill-current text-white dark:text-gray-900']
+
+      if (props.size === 'xs' || props.size === 'sm') classes.push('h-2 w-2')
+      else if (props.size === 'xl') classes.push('h-3.5 w-3.5')
+      else classes.push('h-2.5 w-2.5')
+
+      return classes
+    },
+
+    label: ({ props }) => {
+      const classes = ['inline-block text-gray-800 dark:text-gray-200 pl-2 text-sm']
+
+      if (props.size === 'xs') classes.push('text-xs')
+      else if (props.size === 'sm') classes.push('text-sm')
+      else if (props.size === 'lg') classes.push('text-lg')
+      else if (props.size === 'xl') classes.push('text-xl')
+
+      return classes
+    },
+  },
+
+  styles({ props, colors, css, data }) {
+    const gray = colors.getPalette('gray')
+    const color = colors.getPalette(props.color)
+    const vars = []
+
+    if (props.loading) {
+      return css.variables({
+        bg: 'transparent',
+        border: 'transparent',
+        dark: {
+          bg: 'transparent',
+          border: 'transparent',
+        },
+      })
+    }
+
+    if (props.disabled) {
+      vars.push(css.variables({
+        bg: gray[100],
+        border: gray[200],
+        dark: {
+          bg: gray[800],
+          border: gray[700],
+        },
+      }))
+    } else {
+      if (data.checked) {
+        vars.push(css.variables({
+          bg: color[500],
+          border: color[500],
+          dark: {
+            bg: color[500],
+            border: color[500],
+          },
+        }))
+      } else {
+        vars.push(css.variables({
+          bg: '#fff',
+          border: props.glow ? color[300] : gray[900],
+          dark: {
+            bg: gray[900],
+            border: props.glow ? color[300] : gray[300],
+          },
+        }))
+      }
+
+      if (props.glow) {
+        vars.push(css.get('glow', colors.getColorOpacity(color[500], 0.5)))
+      }
+    }
+
+    return vars
+  },
+}
+
+export default theme

package/src/components/collapse/Collapse.vue

@@ -13,18 +13,19 @@ const collapseProps = {
 
 export type CollapseProps = ExtractPublicPropTypes<typeof collapseProps>
 
+type InternalClasses = 'wrapper' | 'icon' | 'content'
+export interface CollapseTheme extends ThemeComponent<CollapseProps, InternalClasses> {}
+
 export default { name: 'XCollapse' }
 </script>
 
 <script setup lang="ts">
 import { ref, watch, type ExtractPublicPropTypes } from 'vue'
-import { useTheme } from '../../composables/theme'
-import { useColors } from '../../composables/colors'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useColors } from '../../composables/useColors'
 
 import XIcon from '../../components/icon/Icon.vue'
 
-import theme from './Collapse.theme'
-
 const props = defineProps(collapseProps)
 
 const emit = defineEmits(['expand'])
@@ -100,7 +101,7 @@ function onExpand(anim = true) {
   emit('expand')
 }
 
-const { styles, classes, className } = useTheme('collapse', theme, props)
+const { styles, classes, className } = useTheme('Collapse', {}, props)
 
 defineExpose({ toggle, open, close })
 </script>

package/src/components/collapse/index.ts

@@ -1,3 +1,2 @@
 export { default as XCollapse } from './Collapse.vue'
-export type { CollapseProps } from './Collapse.vue'
-export type { CollapseTheme } from './Collapse.theme'
+export type { CollapseProps, CollapseTheme } from './Collapse.vue'

package/src/components/collapse/theme/Collapse.base.theme.ts

@@ -0,0 +1,13 @@
+import type { CollapseTheme } from '../Collapse.vue'
+
+const theme: CollapseTheme = {
+  classes: {
+    wrapper: ({ props }) => `relative flex items-center ${props.icon ?  'flex-row-reverse' : ''} ${props.disabled ? '' : 'cursor-pointer'}`,
+
+    icon: 'absolute top-1/2 transform -translate-y-1/2 right-3',
+
+    content: 'transition-[height] duration-150 overflow-y-hidden',
+  },
+}
+
+export default theme

package/src/components/collapse/theme/Collapse.carbon.theme.ts

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

package/src/components/container/Container.vue

@@ -8,18 +8,19 @@ const containerProps = {
 
 export type ContainerProps = ExtractPublicPropTypes<typeof containerProps>
 
+type InternalClasses = 'wrapper'
+export interface ContainerTheme extends ThemeComponent<ContainerProps, InternalClasses> {}
+
 export default { name: 'XContainer' }
 </script>
 
 <script setup lang="ts">
 import type { ExtractPublicPropTypes } from 'vue'
-import { useTheme } from '../../composables/theme'
-
-import theme from './Container.theme'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const props = defineProps(containerProps)
 
-const { styles, classes, className } = useTheme('container', theme, props)
+const { styles, classes, className } = useTheme('Container', {}, props)
 </script>
 
 <template>

package/src/components/container/index.ts

@@ -1,3 +1,2 @@
 export { default as XContainer } from './Container.vue'
-export type { ContainerProps } from './Container.vue'
-export type { ContainerTheme } from './Container.theme'
+export type { ContainerProps, ContainerTheme } from './Container.vue'

package/src/components/container/theme/Container.base.theme.ts

@@ -0,0 +1,9 @@
+import type { ContainerTheme } from '../Container.vue'
+
+const theme: ContainerTheme = {
+  classes: {
+    wrapper: 'max-w-screen-2xl mx-auto px-4 md:px-8',
+  },
+}
+
+export default theme

package/src/components/container/theme/Container.carbon.theme.ts

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

package/src/components/divider/Divider.vue

@@ -6,18 +6,19 @@ const dividerProps = {
 
 export type DividerProps = ExtractPublicPropTypes<typeof dividerProps>
 
+type InternalClasses = 'wrapper' | 'label' | 'line'
+export interface DividerTheme extends ThemeComponent<DividerProps, InternalClasses> {}
+
 export default { name: 'XDivider' }
 </script>
 
 <script setup lang="ts">
 import type { ExtractPublicPropTypes } from 'vue'
-import { useTheme } from '../../composables/theme'
-
-import theme from './Divider.theme'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const props = defineProps(dividerProps)
 
-const { styles, classes, className } = useTheme('divider', theme, props)
+const { styles, classes, className } = useTheme('Divider', {}, props)
 </script>
 
 <template>

package/src/components/divider/index.ts

@@ -1,3 +1,2 @@
 export { default as XDivider } from './Divider.vue'
-export type { DividerProps } from './Divider.vue'
-export type { DividerTheme } from './Divider.theme'
+export type { DividerProps, DividerTheme } from './Divider.vue'

package/src/components/divider/theme/Divider.base.theme.ts

@@ -0,0 +1,13 @@
+import type { DividerTheme } from '../Divider.vue'
+
+const theme: DividerTheme = {
+  classes: {
+    wrapper: ({ props }) => `flex justify-center items-center ${props.vertical ? 'h-full flex-col' : 'w-full'}`,
+
+    label: 'font-medium text-sm text-gray-600 dark:text-gray-300',
+
+    line: 'bg-gray-200 dark:bg-slate-700 flex-grow',
+  },
+}
+
+export default theme

package/src/components/divider/theme/Divider.carbon.theme.ts

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

package/src/components/drawer/Drawer.vue

@@ -28,6 +28,9 @@ const drawerProps = {
 export type DrawerPosition = typeof drawerPosition[number]
 export type DrawerProps = ExtractPublicPropTypes<typeof drawerProps>
 
+type InternalClasses = 'wrapper' | 'backdrop'
+export interface DrawerTheme extends ThemeComponent<DrawerProps, InternalClasses> {}
+
 export default {
   name: 'XDrawer',
   inheritAttrs: false,
@@ -40,12 +43,10 @@ export default {
 <script setup lang="ts">
 import { computed, onMounted, ref, watch, watchEffect, type PropType, type ExtractPublicPropTypes } from 'vue'
 import { breakpointsTailwind, useBreakpoints, useEventListener, useSwipe, type Breakpoints, type UseSwipeDirection } from '@vueuse/core'
-import { useTheme } from '../../composables/theme'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 import XScroll from '../../components/scroll/Scroll.vue'
 
-import theme from './Drawer.theme'
-
 const props = defineProps(drawerProps)
 
 const emit = defineEmits(['update:modelValue'])
@@ -194,7 +195,7 @@ onMounted(() => {
   deferShow.value = true
 })
 
-const { styles, classes, className } = useTheme('drawer', theme, props)
+const { styles, classes, className } = useTheme('Drawer', {}, props)
 
 defineExpose({ open, close })
 </script>

package/src/components/drawer/index.ts

@@ -1,3 +1,2 @@
 export { default as XDrawer } from './Drawer.vue'
-export type { DrawerProps, DrawerPosition } from './Drawer.vue'
-export type { DrawerTheme } from './Drawer.theme'
+export type { DrawerProps, DrawerPosition, DrawerTheme } from './Drawer.vue'

package/src/components/drawer/theme/Drawer.base.theme.ts

@@ -0,0 +1,11 @@
+import type { DrawerTheme } from '../Drawer.vue'
+
+const theme: DrawerTheme = {
+  classes: {
+    wrapper: 'flex flex-col max-h-full bg-white dark:bg-gray-800',
+
+    backdrop: 'duration-150 ease-in-out',
+  },
+}
+
+export default theme

package/src/components/drawer/theme/Drawer.carbon.theme.ts

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

package/src/components/form/Form.vue

@@ -35,6 +35,9 @@ export type FormInput = {
   setError: (val: string) => void;
 }
 
+type InternalClasses = 'wrapper'
+export interface FormTheme extends ThemeComponent<FormProps, InternalClasses> {}
+
 export default {
   name: 'XForm',
   inheritAttrs: false,
@@ -44,9 +47,7 @@ export default {
 <script setup lang="ts">
 import { provide, onMounted, watch, nextTick, type PropType, type ExtractPublicPropTypes } from 'vue'
 import { injectFormKey } from '../../composables/keys'
-import { useTheme } from '../../composables/theme'
-
-import theme from './Form.theme'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const props = defineProps(formProps)
 
@@ -118,7 +119,7 @@ const submit = (e: Event) => {
   emit('submit', isFormValid)
 }
 
-const { styles, classes, className } = useTheme('form', theme, props)
+const { styles, classes, className } = useTheme('Form', {}, props)
 </script>
 
 <template>

package/src/components/form/index.ts

@@ -1,3 +1,2 @@
 export { default as XForm } from './Form.vue'
-export type { FormProps, FormError, FormInjection, FormInput } from './Form.vue'
-export type { FormTheme } from './Form.theme'
+export type { FormProps, FormError, FormInjection, FormInput, FormTheme } from './Form.vue'

package/src/components/form/theme/Form.base.theme.ts

@@ -0,0 +1,9 @@
+import type { FormTheme } from '../Form.vue'
+
+const theme: FormTheme = {
+  classes: {
+    wrapper: '',
+  },
+}
+
+export default theme

package/src/components/form/theme/Form.carbon.theme.ts

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

package/src/components/icon/Icon.vue

@@ -13,6 +13,11 @@ const iconProps = {
 }
 
 export type IconProps = ExtractPublicPropTypes<typeof iconProps>
+export type Icon = string | { icon: string; filled?: boolean; viewBox?: string; }
+export type IconInjection = Record<string, Icon>
+
+type InternalClasses = 'wrapper'
+export interface IconTheme extends ThemeComponent<IconProps, InternalClasses> {}
 
 export default {
   name: 'XIcon',
@@ -24,18 +29,16 @@ export default {
 
 <script setup lang="ts">
 import { inject, ref, watchEffect, normalizeStyle, unref, computed, type ExtractPublicPropTypes } from 'vue'
-import { useCommon } from '../../composables/common'
+import { useCommon } from '../../composables/useCommon'
 import { injectIconsKey } from '../../composables/keys'
-import { useTheme } from '../../composables/theme'
-
-import theme from './Icon.theme'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const props = defineProps(iconProps)
 
-const icons: any = inject(injectIconsKey, () => ({}))
+const icons = inject(injectIconsKey, {})
 
 const isWrapSVG = ref(false)
-const computedIcon = ref('')
+const computedIcon = ref<Icon | undefined>('')
 const computedFilled = ref(props.filled)
 const computedViewBox = ref(props.viewBox)
 const attrs = ref({})
@@ -62,7 +65,7 @@ watchEffect(() => {
     } else if (typeof injectedIcon === 'object') {
       computedIcon.value = injectedIcon.icon
       computedFilled.value = injectedIcon.filled || props.filled
-      computedViewBox.value = injectedIcon.viewBox || injectedIcon.viewbox || props.viewBox
+      computedViewBox.value = injectedIcon.viewBox || props.viewBox
     }
   } else {
     computedIcon.value = props.icon || ''
@@ -88,7 +91,7 @@ function getSVG(svgString: string) {
   }
 }
 
-const { styles, classes, className } = useTheme('icon', theme, props)
+const { styles, classes, className } = useTheme('Icon', {}, props)
 
 const normalizedStyle = computed(() => normalizeStyle(unref(styles)))
 </script>

package/src/components/icon/index.ts

@@ -1,3 +1,2 @@
 export { default as XIcon } from './Icon.vue'
-export type { IconProps } from './Icon.vue'
-export type { IconTheme } from './Icon.theme'
+export type { IconProps, IconTheme, Icon, IconInjection } from './Icon.vue'

package/src/components/icon/{Icon.theme.ts → theme/Icon.base.theme.ts}

@@ -1,14 +1,6 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { IconProps } from './Icon.vue'
+import type { IconTheme } from '../Icon.vue'
 
-type InternalClasses = 'wrapper'
-
-interface InternalTheme extends ThemeComponent<IconProps, InternalClasses> {}
-export interface IconTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<IconProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
+const theme: IconTheme = {
   classes: {
     wrapper: ({ props }) => {
       const classes = 'inline'

package/src/components/icon/theme/Icon.carbon.theme.ts

@@ -0,0 +1,18 @@
+import type { IconTheme } from '../Icon.vue'
+
+const theme: IconTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const classes = 'inline'
+
+      if (props.size === 'xs') return classes + ' h-3 w-3'
+      else if (props.size === 'sm') return classes + ' h-4 w-4'
+      else if (props.size === 'lg') return classes + ' h-6 w-6'
+      else if (props.size === 'xl') return classes + ' h-9 w-9'
+
+      return classes + ' h-4 w-4'
+    },
+  },
+}
+
+export default theme

package/src/components/image/Image.vue

@@ -5,14 +5,15 @@ const imageProps = {
 
 export type ImageProps = ExtractPublicPropTypes<typeof imageProps>
 
+type InternalClasses = 'wrapper'
+export interface ImageTheme extends ThemeComponent<ImageProps, InternalClasses> {}
+
 export default { name: 'XImage' }
 </script>
 
 <script setup lang="ts">
 import { watch, ref, type ExtractPublicPropTypes } from 'vue'
-import { useTheme } from '../../composables/theme'
-
-import theme from './Image.theme'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const fallback = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
 
@@ -33,7 +34,7 @@ if (typeof window !== 'undefined' && Image) {
   })
 }
 
-const { styles, classes, className } = useTheme('image', theme, props)
+const { styles, classes, className } = useTheme('Image', {}, props)
 </script>
 
 <template>

package/src/components/image/index.ts

@@ -1,3 +1,2 @@
 export { default as XImage } from './Image.vue'
-export type { ImageProps } from './Image.vue'
-export type { ImageTheme } from './Image.theme'
+export type { ImageProps, ImageTheme } from './Image.vue'

package/src/components/image/theme/Image.base.theme.ts

@@ -0,0 +1,9 @@
+import type { ImageTheme } from '../Image.vue'
+
+const theme: ImageTheme = {
+  classes: {
+    wrapper: '',
+  },
+}
+
+export default theme

package/src/components/image/theme/Image.carbon.theme.ts

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

package/src/components/index.ts

@@ -4,6 +4,7 @@ export * from './badge'
 export * from './breadcrumbs'
 export * from './button'
 export * from './card'
+export * from './carousel'
 export * from './checkbox'
 export * from './collapse'
 export * from './container'
@@ -13,7 +14,10 @@ export * from './form'
 export * from './icon'
 export * from './image'
 export * from './input'
+export * from './inputFooter'
+export * from './label'
 export * from './link'
+export * from './loader'
 export * from './menu'
 export * from './modal'
 export * from './notifications'
@@ -31,5 +35,6 @@ export * from './tab'
 export * from './table'
 export * from './tag'
 export * from './textarea'
+export * from './themeProvider'
 export * from './toggle'
 export * from './tooltip'