@bobbykim/manguito-theme 0.3.0 → 0.5.0

package/index.ts

@@ -5,9 +5,16 @@ import GenerateMCLClass, {
   scaleType,
 } from './theme'
 import type { ClassType, InputType } from './theme/index.js'
+// base components
+import DropdownContainer from './lib/dropdown/DropdownContainer.vue'
+import DropdownContent from './lib/dropdown/DropdownContent.vue'
+import Collapse from './lib/collapse/Collapse.vue'
+import Sidebar from './lib/sidebar/Sidebar.vue'
+import Modal from './lib/modal/Modal.vue'
+
+import HamburgerMenu from './lib/nav/HamburgerMenu.vue'
 
 const generateClass = (type: ClassType, value: InputType): string => {
-  console.log('running generate class')
   const mclGenerate = new GenerateMCLClass(type, value)
   if ((<string[]>(<unknown>colorType)).includes(type)) {
     return mclGenerate.generateColorClass()
@@ -26,3 +33,15 @@ const generateClass = (type: ClassType, value: InputType): string => {
 }
 
 export default generateClass
+
+export {
+  DropdownContainer,
+  DropdownContent,
+  Collapse,
+  HamburgerMenu,
+  Sidebar,
+  Modal,
+}
+export * from './lib/directives'
+export * from './theme/theme.types'
+export * from './lib/collapse/index.types'

package/lib/collapse/Collapse.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { ref, watch, Transition } from 'vue'
+import type { CollapseEvent } from './index.types'
+const props = withDefaults(
+  defineProps<{
+    collapseId: string
+    accordion?: string
+    className?: string
+    visible?: boolean
+  }>(),
+  {
+    className: '',
+    visible: false,
+  }
+)
+const emit = defineEmits(['toggle'])
+const toggle = ref<boolean>(props.visible)
+
+const handleToggleEvent = (e: Event): void => {
+  toggle.value = !toggle.value
+  emit('toggle', { ...e, visible: toggle.value } as CollapseEvent)
+}
+
+/**
+ * @TransitionFunctions
+ * @param {HTMLElement} el - passed any since transition handlers don't accept HTMLElement (accepts Element)
+ */
+const onEnter = (el: any) => {
+  el.style.height = 'auto'
+  el.style.opacity = '0'
+  const endWidth = getComputedStyle(el).height
+  el.style.height = '0px'
+  el.offsetHeight // force repaint
+  el.style.height = endWidth
+  el.style.opacity = '1'
+}
+const onAfterEnter = (el: any) => {
+  el.style.height = 'auto'
+  el.style.opacity = '1'
+}
+const onLeave = (el: any) => {
+  el.style.height = getComputedStyle(el).height
+  el.offsetHeight // force repaint
+  el.style.height = '0px'
+  el.style.opacity = '0'
+}
+
+watch(
+  () => props.visible,
+  (newValue) => {
+    toggle.value = newValue
+  }
+)
+</script>
+
+<template>
+  <div>
+    <button
+      :id="collapseId"
+      @click="handleToggleEvent"
+      class="hidden"
+      :accordion="accordion"
+      :visible="toggle"
+    ></button>
+    <transition
+      name="collapse"
+      tag="div"
+      @enter="onEnter"
+      @after-enter="onAfterEnter"
+      @leave="onLeave"
+      class="overflow-hidden"
+    >
+      <div v-show="toggle">
+        <div :class="[className]">
+          <slot />
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.collapse-enter-active,
+.collapse-leave-active {
+  transition-property: height, opacity;
+  transition-duration: 500ms;
+  transition-timing-function: ease;
+}
+</style>

package/lib/collapse/index.types.ts

@@ -0,0 +1,3 @@
+export interface CollapseEvent extends Event {
+  visible: boolean
+}

package/lib/directives/index.ts

@@ -0,0 +1,78 @@
+import { Directive } from 'vue'
+
+export const vClickOutside: Directive = {
+  mounted(el, binding) {
+    el.__ClickOutsideHandler = (event: Event) => {
+      if (!(el === event.target || el.contains(event.target))) {
+        binding.value(event)
+      }
+    }
+    document.body.addEventListener('click', el.__ClickOutsideHandler)
+  },
+  unmounted(el) {
+    document.body.removeEventListener('click', el.__ClickOutsideHandler)
+  },
+}
+
+export const vToggle: Directive = {
+  mounted(el, binding) {
+    el.__ClickToggleHandler = (e: Event): void => {
+      const eTarget = e.target as HTMLElement
+      let target: HTMLElement
+      if (eTarget.tagName === 'A') {
+        const targetId = eTarget.getAttribute('href')
+        const formattedTargetId =
+          targetId?.charAt(0) === '#' ? targetId.substring(1) : targetId
+        target = document.getElementById(formattedTargetId as string)!
+      } else {
+        target = document.getElementById(binding.arg as string)!
+      }
+      target.click()
+      return
+    }
+    el.addEventListener('click', el.__ClickToggleHandler)
+  },
+  unmounted(el) {
+    el.removeEventListener('click', el.__ClickToggleHandler)
+  },
+}
+
+export const vCollapse: Directive = {
+  mounted(el, binding) {
+    el.__HandleToggler = (event: Event): void => {
+      const eTarget = event.target as HTMLElement
+      let target: HTMLElement
+      if (eTarget.tagName === 'A') {
+        const targetId = eTarget.getAttribute('href')
+        const formattedTargetId =
+          targetId?.charAt(0) === '#' ? targetId.substring(1) : targetId
+        target = document.getElementById(formattedTargetId as string)!
+      } else {
+        target = document.getElementById(binding.arg as string) as HTMLElement
+      }
+      if (!target.hasAttribute('accordion')) {
+        // run when it is not accordion component case
+        target.click()
+        return
+      }
+      const accordionName = target.getAttribute('accordion')
+      const accordionList: NodeListOf<HTMLElement> = document.querySelectorAll(
+        `button[accordion="${accordionName}"]`
+      )
+      // loop through each accordion items and handle reaction for each case
+      for (let i = 0; i < accordionList.length; i++) {
+        const isVisible = accordionList[i].getAttribute('visible')
+        if (accordionList[i].id !== target.id && isVisible === 'true') {
+          accordionList[i].click()
+        }
+        if (accordionList[i].id === target.id) {
+          accordionList[i].click()
+        }
+      }
+    }
+    el.addEventListener('click', el.__HandleToggler)
+  },
+  unmounted(el) {
+    el.removeEventListener('click', el.__HandleToggler)
+  },
+}

package/lib/dropdown/DropdownContainer.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { reactive, provide, ref, onMounted } from 'vue'
+import type { InjectType } from './index.types'
+import { vClickOutside } from '../directives'
+
+const emit = defineEmits(['click-outside', 'toggle'])
+const dropdownTarget = ref()
+const dropdownState = reactive<InjectType>({
+  active: false,
+  buttonHeight: 0,
+})
+provide('dropdownState', dropdownState)
+const toggle = (e: Event): void => {
+  dropdownState.active = !dropdownState.active
+  emit('toggle', e)
+}
+const onClickOutside = (e: Event): void => {
+  dropdownState.active = false
+  emit('click-outside', e)
+}
+const onEscape = (): void => {
+  dropdownState.active = false
+}
+onMounted(() => {
+  if (typeof window !== undefined) {
+    dropdownState.buttonHeight = dropdownTarget.value.scrollHeight
+  }
+})
+</script>
+
+<template>
+  <div
+    class="relative"
+    ref="dropdownTarget"
+    v-click-outside="onClickOutside"
+    @keyup.esc="onEscape"
+  >
+    <slot
+      name="toggler"
+      :toggle="toggle"
+      :dropdown-state="dropdownState.active"
+    />
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

package/lib/dropdown/DropdownContent.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed, ref, inject, Transition } from 'vue'
+import { InjectType } from './index.types'
+
+const props = withDefaults(
+  defineProps<{
+    className?: string
+  }>(),
+  {
+    className: '',
+  }
+)
+const contentRef = ref<HTMLAreaElement>()
+const dropdownState = inject<InjectType>('dropdownState', {
+  active: false,
+  buttonHeight: 0,
+})
+const active = computed<boolean>(() => {
+  return dropdownState.active
+})
+const handleItemClick = () => {
+  dropdownState.active = false
+}
+const buttonHeight = computed(() => {
+  return { '--button-height': `${dropdownState.buttonHeight}px` }
+})
+const dropdownDirection = computed<string | undefined>(() => {
+  if (typeof window === undefined) {
+    return
+  }
+  if (!dropdownState.active || !contentRef.value) {
+    return
+  }
+  if (
+    window.innerHeight - contentRef.value.getBoundingClientRect().bottom <
+    0
+  ) {
+    return 'dropup-bottom'
+  }
+})
+</script>
+
+<template>
+  <transition name="dropdown-content">
+    <div
+      v-if="active"
+      ref="contentRef"
+      class="absolute my-2xs max-w-[14rem] w-max overflow-hidden"
+      :class="[dropdownDirection, className]"
+      :style="buttonHeight"
+    >
+      <slot :item-click="handleItemClick" />
+    </div>
+  </transition>
+</template>
+
+<style scoped lang="scss">
+.dropup-bottom {
+  bottom: var(--button-height);
+}
+.dropdown-content-enter-active,
+.dropdown-content-leave-active {
+  transition: all 0.3s;
+}
+.dropdown-content-enter-from,
+.dropdown-content-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+</style>

package/lib/dropdown/index.types.ts

@@ -0,0 +1,4 @@
+export type InjectType = {
+  active: boolean
+  buttonHeight: number
+}

package/lib/modal/Modal.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { ref, computed, watch, Transition } from 'vue'
+import generateClass, {
+  ColorPalette,
+  vClickOutside,
+  VerticalAlignment,
+} from '../../'
+
+const props = withDefaults(
+  defineProps<{
+    modalId: string
+    title?: string
+    titleColor?: ColorPalette
+    className?: string
+    visible?: boolean
+    noBackdrop?: boolean
+    noHeader?: boolean
+    color?: ColorPalette
+    backdropColor?: ColorPalette
+    placement?: VerticalAlignment
+  }>(),
+  {
+    titleColor: 'dark-3',
+    className: '',
+    visible: false,
+    noBackdrop: false,
+    noHeader: false,
+    color: 'light-1',
+    backdropColor: 'dark-4',
+    placement: 'center',
+  }
+)
+
+const emit = defineEmits(['toggle', 'close'])
+const toggle = ref<boolean>(props.visible)
+const toggleComplete = ref<boolean>(false)
+
+const handleToggleEvent = (e: Event): void => {
+  toggle.value = !toggle.value
+  emit('toggle', e)
+}
+const openModal = (): void => {
+  toggle.value = true
+}
+const closeModal = (e: Event): void => {
+  if (toggleComplete.value === true) {
+    toggle.value = false
+    emit('close', e)
+  }
+}
+const handlePlacementVar = computed(() => {
+  let placementVariable: number
+  if (props.placement === 'top') {
+    placementVariable = 25
+  } else if (props.placement === 'bottom') {
+    placementVariable = 75
+  } else {
+    placementVariable = 50
+  }
+  return { '--vertical-placement': placementVariable + '%' }
+})
+
+/**
+ * @TransitionFunctions
+ * Handle toggleComplete value after completion of animation
+ */
+const onAfterEnter = () => {
+  toggleComplete.value = true
+}
+const onAfterLeave = () => {
+  toggleComplete.value = false
+}
+watch(
+  () => props.visible,
+  (newValue) => {
+    toggle.value = newValue
+  }
+)
+defineExpose({
+  toggle: handleToggleEvent,
+  close: closeModal,
+  open: openModal,
+})
+</script>
+
+<template>
+  <div :style="handlePlacementVar">
+    <button :id="modalId" @click="handleToggleEvent" class="hidden"></button>
+    <Transition name="fade" appear tag="div" v-if="!noBackdrop">
+      <section
+        v-if="toggle"
+        @click="closeModal"
+        class="fixed inset-0 overflow-y-auto bg-opacity-70 backdrop-blur z-[100]"
+        :class="generateClass('BGCOLOR', backdropColor)"
+      ></section>
+    </Transition>
+    <Transition
+      name="slide-down"
+      tag="div"
+      @after-enter="onAfterEnter"
+      @after-leave="onAfterLeave"
+      appear
+    >
+      <div
+        v-if="toggle"
+        class="vertical-placement fixed w-full max-w-md z-[110] px-xs"
+      >
+        <div
+          v-click-outside="closeModal"
+          :class="[generateClass('BGCOLOR', color), className]"
+          class="relative overscroll-contain overflow-y-scroll max-h-[80vh] md:max-h-[60vh]"
+        >
+          <div v-if="!noHeader" class="sticky top-0">
+            <slot name="header" :close="closeModal" :status="toggle">
+              <div
+                class="flex justify-between items-center p-xs border-b-2"
+                :class="generateClass('BGCOLOR', color)"
+              >
+                <h3
+                  v-if="title"
+                  class="h3-md"
+                  :class="generateClass('TEXTCOLOR', titleColor)"
+                >
+                  {{ title }}
+                </h3>
+                <button @click="closeModal">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    height="1em"
+                    viewBox="0 0 384 512"
+                    class="hover:opacity-75 focus:opacity-75 transition-opacity duration-300 ease-in h-sm"
+                    :class="[generateClass('SVGFILL', titleColor)]"
+                  >
+                    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+                    <path
+                      d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </slot>
+          </div>
+          <slot name="body" :close="closeModal" :status="toggle" />
+          <div class="sticky bottom-0">
+            <slot name="footer" :close="closeModal" :status="toggle" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.vertical-placement {
+  top: var(--vertical-placement);
+  left: 50%;
+  transform: translateY(calc(-1 * var(--vertical-placement))) translateX(-50%);
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition-property: opacity;
+  transition-duration: 300ms;
+  transition-timing-function: linear;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.slide-down-enter-active {
+  animation: slide-down 300ms ease;
+}
+.slide-down-leave-active {
+  animation: slide-down reverse 300ms ease;
+}
+
+@keyframes slide-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-100%) translateX(-50%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(calc(-1 * var(--vertical-placement))) translateX(-50%);
+  }
+}
+</style>

package/lib/nav/HamburgerMenu.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ColorPalette } from '@bobbykim/manguito-theme'
+import generateClass from '../../index'
+
+const props = withDefaults(
+  defineProps<{
+    color?: ColorPalette
+    displayBorder?: boolean
+    toggle: boolean
+    navColor: ColorPalette
+  }>(),
+  {
+    color: 'dark-2',
+    displayBorder: true,
+  }
+)
+
+const emit = defineEmits(['hbg-click'])
+
+const handleButtonToggle = (e: Event): void => {
+  emit('hbg-click', e)
+}
+
+const hamburgetButtonState = computed({
+  get() {
+    return props.toggle
+  },
+  set(value) {
+    return value
+  },
+})
+
+const getBorderClass = (
+  bColor: ColorPalette,
+  border: boolean,
+  nColor: ColorPalette
+): string => {
+  /**
+   * @bColor - color
+   * @border - displayBorder
+   * @nColor - navColor
+   */
+
+  const classArray: string[] = [
+    generateClass('RINGCOLOR', bColor),
+    generateClass('OFFSETRING', nColor),
+  ]
+
+  if (border) {
+    classArray.push(generateClass('BORDER', bColor))
+    classArray.push('border')
+  }
+  return classArray.join(' ')
+}
+
+const getHamburgerButtonClass = (color: ColorPalette): string => {
+  /**
+   * @color - color
+   */
+  const classArray: string[] = [
+    generateClass('BGCOLOR', color),
+    generateClass('BEFOREBG', color),
+    generateClass('AFTERBG', color),
+  ]
+
+  return classArray.join(' ')
+}
+</script>
+
+<template>
+  <button
+    class="p-3xs rounded-md aspect-square outline-none focus:ring-4 ring-offset-2 transition-all duration-300 ease-linear hover:opacity-70 focus:opacity-70 hamburger__button"
+    :class="getBorderClass(color, displayBorder, navColor)"
+    @click="handleButtonToggle"
+  >
+    <input
+      type="checkbox"
+      v-model="hamburgetButtonState"
+      class="hidden hamburger__checkbox"
+    />
+    <div
+      class="relative h-[3px] w-sm hamburger__icon before:w-sm after:w-sm before:h-[3px] after:h-[3px] transition-all duration-300 ease-linear"
+      :class="getHamburgerButtonClass(color)"
+    ></div>
+  </button>
+</template>
+
+<style lang="scss" scoped>
+.hamburger__icon {
+  &::before,
+  &::after {
+    position: absolute;
+    left: 0;
+    transition: all 0.3s linear;
+  }
+  &::before {
+    top: -0.5rem;
+  }
+  &::after {
+    top: 0.5rem;
+  }
+}
+.hamburger__button {
+  &:focus .hamburger__icon,
+  &:hover .hamburger__icon {
+    scale: 1.05;
+  }
+}
+.hamburger__checkbox:checked + .hamburger__icon {
+  background-color: transparent;
+}
+.hamburger__checkbox:checked + .hamburger__icon::before {
+  top: 0;
+  transform: rotate(135deg);
+}
+.hamburger__checkbox:checked + .hamburger__icon::after {
+  top: 0;
+  transform: rotate(-135deg);
+}
+</style>

package/lib/sidebar/Sidebar.vue

@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import { ref, computed, watch, Transition } from 'vue'
+import generateClass, { ColorPalette, vClickOutside, DirectionX } from '../../'
+
+const props = withDefaults(
+  defineProps<{
+    sidebarId: string
+    title?: string
+    titleColor?: ColorPalette
+    className?: string
+    visible?: boolean
+    noBackdrop?: boolean
+    noHeader?: boolean
+    color?: ColorPalette
+    backdropColor?: ColorPalette
+    placement?: DirectionX
+    width?: string | number
+  }>(),
+  {
+    titleColor: 'dark-3',
+    className: '',
+    visible: false,
+    noBackdrop: false,
+    noHeader: false,
+    color: 'light-1',
+    backdropColor: 'dark-4',
+    placement: 'left',
+    width: 300,
+  }
+)
+
+const emit = defineEmits(['toggle', 'close'])
+const toggle = ref<boolean>(props.visible)
+const toggleComplete = ref<boolean>(false)
+const headerRef = ref<HTMLElement>()
+const footerRef = ref<HTMLElement>()
+
+const handleToggleEvent = (e: Event): void => {
+  toggle.value = !toggle.value
+  emit('toggle', e)
+}
+const openSidebar = (): void => {
+  toggle.value = true
+}
+const closeSidebar = (e: Event): void => {
+  if (toggleComplete.value === true) {
+    toggle.value = false
+    emit('close', e)
+  }
+}
+const handleStyleVariables = computed(() => {
+  return {
+    '--sidebar-width': `${props.width}px`,
+    '--header-height':
+      headerRef.value && toggle.value
+        ? headerRef.value.scrollHeight + 'px'
+        : '0px',
+    '--footer-height':
+      footerRef.value && toggle.value
+        ? footerRef.value.scrollHeight + 'px'
+        : '0px',
+  }
+})
+const sidebarClass = computed(() => {
+  return props.placement === 'left' ? 'sidebar-left' : 'sidebar-right'
+})
+
+/**
+ * @TransitionFunctions
+ * Handle toggleComplete value after completion of animation
+ */
+const onAfterEnter = () => {
+  toggleComplete.value = true
+}
+const onAfterLeave = () => {
+  toggleComplete.value = false
+}
+watch(
+  () => props.visible,
+  (newValue) => {
+    toggle.value = newValue
+  }
+)
+defineExpose({
+  toggle: handleToggleEvent,
+  open: openSidebar,
+  close: closeSidebar,
+})
+</script>
+
+<template>
+  <div :style="handleStyleVariables">
+    <button :id="sidebarId" @click="handleToggleEvent" class="hidden"></button>
+    <Transition name="fade" appear tag="div" v-if="!noBackdrop">
+      <section
+        v-if="toggle"
+        @click="closeSidebar"
+        class="fixed inset-0 overflow-y-auto bg-opacity-70 backdrop-blur z-[100]"
+        :class="generateClass('BGCOLOR', backdropColor)"
+      ></section>
+    </Transition>
+    <Transition
+      :name="sidebarClass"
+      @after-enter="onAfterEnter"
+      @after-leave="onAfterLeave"
+      appear
+    >
+      <div
+        v-if="toggle"
+        v-click-outside="closeSidebar"
+        class="sidebar-body fixed h-full overflow-hidden inset-y-0 shadow z-[110]"
+        :class="[placement === 'left' ? 'left-0' : 'right-0']"
+      >
+        <div
+          class="relative h-full overscroll-contain overflow-y-scroll"
+          :class="[generateClass('BGCOLOR', color), className]"
+        >
+          <div v-if="!noHeader" class="sticky top-0" ref="headerRef">
+            <slot name="header" :close="closeSidebar" :status="toggle">
+              <div
+                class="flex justify-between items-center p-xs"
+                :class="generateClass('BGCOLOR', color)"
+              >
+                <h3
+                  v-if="title"
+                  class="h3-md"
+                  :class="generateClass('TEXTCOLOR', titleColor)"
+                >
+                  {{ title }}
+                </h3>
+                <button @click="closeSidebar">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    height="1em"
+                    viewBox="0 0 384 512"
+                    class="hover:opacity-75 focus:opacity-75 transition-opacity duration-300 ease-in h-sm"
+                    :class="[generateClass('SVGFILL', titleColor)]"
+                  >
+                    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+                    <path
+                      d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </slot>
+          </div>
+
+          <div class="sidebar-body-height">
+            <slot name="body" :close="closeSidebar" :status="toggle" />
+          </div>
+
+          <div class="sticky bottom-0" ref="footerRef">
+            <slot name="footer" :close="closeSidebar" :status="toggle" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.sidebar-body {
+  width: 100%;
+}
+.sidebar-body-height {
+  min-height: calc(100vh - var(--header-height) - var(--footer-height));
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition-property: opacity;
+  transition-duration: 300ms;
+  transition-timing-function: linear;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.sidebar-left-enter-active,
+.sidebar-left-leave-active,
+.sidebar-right-enter-active,
+.sidebar-right-leave-active {
+  transition-property: transform, opacity;
+  transition-duration: 300ms;
+  transition-timing-function: linear;
+}
+
+.sidebar-left-enter-from,
+.sidebar-left-leave-to {
+  transform: translateX(-100%);
+}
+.sidebar-right-enter-from,
+.sidebar-right-leave-to {
+  transform: translateX(100%);
+}
+
+@media screen and (min-width: 768px) {
+  .sidebar-body {
+    width: var(--sidebar-width);
+  }
+  .sidebar-left-enter-from,
+  .sidebar-left-leave-to {
+    transform: translateX(calc(-1 * var(--sidebar-width)));
+  }
+  .sidebar-right-enter-from,
+  .sidebar-right-leave-to {
+    transform: translateX(var(--sidebar-width));
+  }
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/manguito-theme",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "main theme file for manguito components library. Other MCL components will need to import this file to run.",
   "type": "module",
   "main": "index.ts",
@@ -17,5 +17,5 @@
     "url": "https://github.com/bobbykim89/manguito-component-library.git"
   },
   "license": "MIT",
-  "gitHead": "2c169fa8137650bf3fbc02ef2158c4c4e147a9ce"
+  "gitHead": "c095c399687fa416347eaec8a6d2003a39fc19ac"
 }

package/theme/index.ts

@@ -7,7 +7,7 @@ import type {
   Range,
   OpacityRange,
   SpacingLevel,
-  Position,
+  Alignment,
 } from './theme.types'
 
 /**
@@ -21,6 +21,7 @@ export const colorType = [
   'BEFOREBG',
   'AFTERBG',
   'HVBGCOLOR',
+  'FCBGCOLOR',
   'ACTIVEBG',
   'TEXTCOLOR',
   'HVTEXTCOLOR',
@@ -101,7 +102,7 @@ export type InputType =
   | Range<1, 12>
   | OpacityRange
   | SpacingLevel
-  | Position
+  | Alignment
 
 class GenerateMCLClass extends MCLTheme {
   classType: ClassType
@@ -119,6 +120,8 @@ class GenerateMCLClass extends MCLTheme {
         return this.getBgColorClass()
       case 'HVBGCOLOR':
         return this.getHoverBgColorClass()
+      case 'FCBGCOLOR':
+        return this.getFocusBgColorClass()
       case 'BEFOREBG':
         return this.getBeforeBgColorClass()
       case 'AFTERBG':
@@ -274,6 +277,12 @@ class GenerateMCLClass extends MCLTheme {
     }
     return MCLTheme.hoverBgColor[this.classValue as ColorPalette]
   }
+  getFocusBgColorClass(): string {
+    if (!this.validateColorType) {
+      return ' '
+    }
+    return MCLTheme.focusBgColor[this.classValue as ColorPalette]
+  }
   getBeforeBgColorClass(): string {
     if (!this.validateColorType) {
       return ' '
@@ -440,7 +449,7 @@ class GenerateMCLClass extends MCLTheme {
   }
   // handle text align classes
   getTextAlignClass(): string {
-    return MCLTheme.textAlign[this.classValue as Position]
+    return MCLTheme.textAlign[this.classValue as Alignment]
   }
   // handle border width classes
   getBorderWidthClass(): string {

package/theme/theme.ts

@@ -60,7 +60,7 @@ abstract class MCLTheme {
     white: 'bg-white',
     transparent: 'bg-transparent',
   }
-  // hover bg color class
+  // hover: bg color class
   protected static hoverBgColor: ColorClass = {
     primary: 'hover:bg-primary',
     secondary: 'hover:bg-secondary',
@@ -80,6 +80,26 @@ abstract class MCLTheme {
     white: 'hover:bg-white',
     transparent: 'hover:bg-transparent',
   }
+  // focus: bg color class
+  protected static focusBgColor: ColorClass = {
+    primary: 'focus:bg-primary',
+    secondary: 'focus:bg-secondary',
+    success: 'focus:bg-success',
+    danger: 'focus:bg-danger',
+    info: 'focus:bg-info',
+    warning: 'focus:bg-warning',
+    'light-1': 'focus:bg-light-1',
+    'light-2': 'focus:bg-light-2',
+    'light-3': 'focus:bg-light-3',
+    'light-4': 'focus:bg-light-4',
+    'dark-1': 'focus:bg-dark-1',
+    'dark-2': 'focus:bg-dark-2',
+    'dark-3': 'focus:bg-dark-3',
+    'dark-4': 'focus:bg-dark-4',
+    black: 'focus:bg-black',
+    white: 'focus:bg-white',
+    transparent: 'focus:bg-transparent',
+  }
   // ::before bg color class
   protected static beforeBgColor: ColorClass = {
     primary: 'before:bg-primary',

package/theme/theme.types.ts

@@ -37,12 +37,15 @@ export type HeadingSize = 'sm' | 'md' | 'lg' | 'xl'
 export type BodyText = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 // Font weight
 export type FontWeight = 'light' | 'normal' | 'bold'
-// border positions
-export type Position = 'left' | 'center' | 'right'
+// alignment
+export type Alignment = 'left' | 'center' | 'right'
+export type VerticalAlignment = 'top' | 'center' | 'bottom'
 // link targets
 export type CtaTarget = '_self' | '_blank'
 // Highlight positions
-export type Location = 'left' | 'right' | 'top' | 'bottom'
+export type Direction = 'left' | 'right' | 'top' | 'bottom'
+export type DirectionY = 'top' | 'bottom'
+export type DirectionX = 'left' | 'right'
 // available ranges
 type _RangeArray<
   T extends number,
@@ -60,7 +63,6 @@ export type Range<T extends number, R extends number> = IntRange<
 
 export type ButtonSize = 'small' | 'medium' | 'large'
 export type OpacityRange = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100
-export type Directions = 'left' | 'right'
 export type ColumnWidth = 25 | 50 | 75 | 100
 export type CrossOrigin = 'use-credentials' | 'anonymous'
 export type InputType = 'text' | 'email' | 'password'

package/themeVariables.cjs

@@ -70,7 +70,7 @@ const mclTheme = plugin.withOptions(
               },
             },
             [`.btn.btn-invert.btn-${e(key)}`]: {
-              [`@apply border-2 bg-white border-${key} text-${key}`]: {},
+              [`@apply border-2 bg-transparent border-${key} text-${key}`]: {},
               '&:hover': {
                 [`@apply bg-${key} text-white bg-opacity-100`]: {},
               },
@@ -83,6 +83,11 @@ const mclTheme = plugin.withOptions(
                 '@apply ring-0': {},
               },
             },
+            [`.btn.btn-${e(key)}.btn-no-ring`]: {
+              '&:focus': {
+                '@apply ring-0': {},
+              },
+            },
             [`.btn.btn-progress.btn-${e(key)}`]: {
               [`@apply before:bg-${key} border-${key} text-${key} bg-transparent`]:
                 {},
@@ -364,6 +369,12 @@ const mclTheme = plugin.withOptions(
             '@apply ring-0': {},
           },
         },
+        '.btn.btn-no-ring': {
+          '@apply ring-offset-0': {},
+          '&:focus': {
+            '@apply ring-0': {},
+          },
+        },
         '.btn.btn-invert': {
           '@apply border-2 border-primary text-primary bg-white': {},
           '&:hover': {