@okam/stack-ui 1.25.3 → 1.25.6

package/src/theme/Alerts/index.ts

@@ -1,97 +0,0 @@
-import { tv } from 'tailwind-variants'
-import button from '../Button'
-import typography from '../Typography'
-
-const alertsWrapper = tv({
-  base: 'bg-color-1-200 p-4 flex flex-col gap-4',
-})
-
-const alertsContainer = tv({
-  base: 'flex justify-between items-center gap-4 relative',
-})
-
-const alertsCloseBtn = tv({
-  extend: button,
-  base: 'self-end',
-})
-
-const alertsSwiperSwiper = tv({
-  base: 'bg-color-1-300 m-2 rounded-lg order-2',
-})
-
-const alertsSwiperWrapper = tv({
-  base: 'm-4',
-})
-
-const alertsItemWrapper = tv({
-  base: '',
-})
-
-const alertsItemContainer = tv({
-  base: '',
-})
-
-const alertsItemTitle = tv({
-  extend: typography,
-  defaultVariants: {
-    size: 'h1',
-  },
-})
-
-const alertsItemContent = tv({
-  extend: typography,
-})
-
-const alertsItemIcon = tv({
-  base: 'block w-min bg-color-1-400 p-2 rounded-lg',
-})
-
-const alertsNavigationButton = tv({
-  extend: button,
-  variants: {
-    order: {
-      prev: 'order-1',
-      next: 'order-3',
-    },
-  },
-})
-
-const alertsPaginationWrapper = tv({
-  base: 'flex gap-4 justify-center absolute z-10 bottom-4 left-0 right-0',
-})
-
-const alertsPaginationBullet = tv({
-  base: 'w-4 h-4 rounded-full block bg-color-1-600 focus-ring-black',
-  variants: {
-    active: {
-      true: 'bg-color-1-100',
-      false: '',
-    },
-  },
-})
-
-const alertsTheme = {
-  wrapper: alertsWrapper,
-  container: alertsContainer,
-  closeBtn: alertsCloseBtn,
-  swiper: {
-    swiper: alertsSwiperSwiper,
-    wrapper: alertsSwiperWrapper,
-  },
-  item: {
-    wrapper: alertsItemWrapper,
-    container: alertsItemContainer,
-    title: alertsItemTitle,
-    content: alertsItemContent,
-    icon: alertsItemIcon,
-  },
-  navigation: {
-    button: alertsNavigationButton,
-  },
-  pagination: {
-    wrapper: alertsPaginationWrapper,
-    bullet: alertsPaginationBullet,
-  },
-}
-
-export default alertsTheme

package/src/theme/Box/index.ts

@@ -1,45 +0,0 @@
-import { tv } from 'tailwind-variants'
-
-export const main = tv({
-  base: 'w-full bg-slate-100',
-})
-
-export const container = tv({
-  base: 'max-w-screen-lg mx-auto w-full',
-  variants: {
-    fullWidth: {
-      true: 'max-w-full col-span-full p-0',
-    },
-    spacing: {
-      small: 'mb-3',
-      medium: 'mb-6',
-      large: 'mb-8',
-      none: 'mb-0',
-    },
-  },
-})
-
-export const grid = tv({
-  extend: container,
-  base: 'grid grid-cols-12 gap-6 px-4 col-span-full',
-  variants: {
-    fullWidth: {
-      true: 'max-w-full col-span-full p-0',
-    },
-  },
-})
-
-export const gridItem = tv({
-  base: 'bg-slate-300 h-64 p-4 flex justify-start items-end',
-  defaultVariants: {
-    size: 'small',
-  },
-  variants: {
-    size: {
-      small: 'col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-4',
-      medium: 'col-span-12 sm:col-span-12 md:col-span-8 lg:col-span-8',
-      large:
-        'lg:col-start-3 sm:col-start-1 sm:col-end-13 lg:col-end-11 md:col-start-3 md:col-end-11 col-start-1 col-end-13',
-    },
-  },
-})

package/src/theme/Button/index.tsx

@@ -1,72 +0,0 @@
-import { tv } from 'tailwind-variants'
-
-const button = tv({
-  base: `
-    flex
-    items-center
-    justify-center
-    gap-4
-    transition
-    duration-300
-    ease-in-out
-    disabled:pointer-events-none
-    disabled:opacity-30
-    focus-ring-black
-  `,
-  defaultVariants: {
-    buttonStyle: 'default',
-    type: 'button',
-    size: 'default',
-    shape: 'rounded',
-  },
-  variants: {
-    buttonStyle: {
-      default: `
-            px-4
-            py-2
-            text-white
-            !bg-color-1-500 
-            hover:!bg-color-1-400
-            active:!bg-color-1-400
-          `,
-      outline: `
-            px-4
-            py-2
-            bg-transparent
-            !border-color-1-500
-            text-color-1-500
-            hover:bg-color-1-500
-            hover:text-white
-            active:bg-color-1-500
-            active:text-white
-          `,
-      hollow: `
-            px-2
-            bg-transparent
-            text-color-1-500
-            hover:border-b-color-1-500
-            active:border-b-color-1-500
-            focus:border-b-color-1-500
-    
-          `,
-    },
-    intent: {
-      error: `
-            !bg-error 
-            text-white 
-            pointer-events-none
-            !border-error
-          `,
-    },
-    size: {
-      default: `min-w-12 min-h-6`,
-      large: `min-w-36 min-h-18`,
-    },
-    shape: {
-      rounded: `rounded-md`,
-      circular: `rounded-full`,
-    },
-  },
-})
-
-export default button

package/src/theme/Calendar/index.tsx

@@ -1,167 +0,0 @@
-import { tv } from 'tailwind-variants'
-
-export const calendarContainer = tv({
-  base: 'inline-block text-gray-800',
-})
-
-export const calendarHeaderContainer = tv({
-  base: 'flex items-center justify-between pb-4',
-})
-
-export const calendarNavigationButtonsContainer = tv({
-  base: 'flex items-center gap-1',
-})
-
-export const calendarNavigationButtons = tv({
-  base: 'active:bg-color-1-500 p-2 rounded-full active:text-color-1-100 hover:bg-color-1-200 focus-ring-black',
-})
-
-export const calendarTable = tv({
-  base: 'flex-1',
-})
-
-export const calendarDayLabel = tv({
-  base: 'text-center',
-})
-
-export const calendarCellContainer = tv({
-  base: 'py-0.5 relative',
-  variants: {
-    isFocusVisible: {
-      true: 'z-10',
-      false: '',
-    },
-  },
-})
-
-export const calendarCell = tv({
-  base: 'w-10 h-10 outline-none group',
-  variants: {
-    isSelected: {
-      true: '',
-      false: '',
-    },
-    isInvalid: {
-      true: '',
-      fasle: '',
-    },
-    isDisabled: {
-      true: 'disabled',
-      false: '',
-    },
-    isRoundedLeft: {
-      true: 'rounded-l-full',
-      false: '',
-    },
-    isRoundedRight: {
-      true: 'rounded-r-full',
-      false: '',
-    },
-  },
-  compoundVariants: [
-    {
-      isSelected: true,
-      isInvalid: true,
-      class: 'bg-red-300',
-    },
-    {
-      isSelected: true,
-      isInvalid: false,
-      class: 'bg-color-1-300',
-    },
-  ],
-})
-
-export const calendarCellFormattedDate = tv({
-  base: 'w-full h-full rounded-full flex items-center justify-center cursor-pointer',
-  variants: {
-    isSelected: {
-      true: '',
-      false: '',
-    },
-    isInvalid: {
-      true: '',
-      fasle: '',
-    },
-    isDisabled: {
-      true: '',
-      false: '',
-    },
-    isFocusVisible: {
-      true: 'ring-2 group-focus:z-2 ring-violet-600 ring-offset-2',
-      false: '',
-    },
-    isSelectionStart: {
-      true: '',
-      false: '',
-    },
-    isSelectionEnd: {
-      true: '',
-      false: '',
-    },
-  },
-  compoundVariants: [
-    {
-      isDisabled: true,
-      isInvalid: false,
-      class: 'text-gray-400',
-    },
-    {
-      isSelectionStart: true,
-      isSelectionEnd: false,
-      isInvalid: true,
-      class: 'bg-red-600 text-white hover:bg-red-700',
-    },
-    {
-      isSelectionStart: true,
-      isSelectionEnd: true,
-      isInvalid: true,
-      class: 'bg-red-600 text-white hover:bg-red-700',
-    },
-    {
-      isSelectionStart: true,
-      isSelectionEnd: false,
-      isInvalid: false,
-      class: 'bg-color-1-400 text-white hover:bg-color-1-500',
-    },
-    {
-      isSelectionStart: true,
-      isSelectionEnd: true,
-      isInvalid: false,
-      class: 'bg-color-1-400 rounded-full text-white hover:bg-color-1-500',
-    },
-    {
-      isSelectionStart: false,
-      isSelectionEnd: true,
-      isInvalid: true,
-      class: 'bg-red-600 text-white hover:bg-red-700',
-    },
-    {
-      isSelectionStart: false,
-      isSelectionEnd: true,
-      isInvalid: false,
-      class: 'bg-color-1-400 text-white hover:bg-color-1-500',
-    },
-    {
-      isSelected: false,
-      isDisabled: false,
-      class: 'hover:bg-color-1-100',
-    },
-    {
-      isSelected: true,
-      isDisabled: false,
-      isInvalid: false,
-      isSelectionStart: false,
-      isSelectionEnd: false,
-      class: 'hover:bg-color-1-300',
-    },
-    {
-      isSelected: true,
-      isDisabled: false,
-      isInvalid: true,
-      isSelectionStart: false,
-      isSelectionEnd: false,
-      class: 'hover:bg-red-400',
-    },
-  ],
-})

package/src/theme/Carousel/index.ts

@@ -1,36 +0,0 @@
-import { tv } from 'tailwind-variants'
-
-const carouselContainer = tv({
-  base: 'flex justify-between items-center relative h-[475px] mb-18 lg:h-[650px]',
-})
-
-const carouselSwiper = tv({
-  base: 'bg-color-1-400 !py-4',
-})
-
-const carouselSwiperWrapper = tv({
-  base: 'bg-color-1-100 py-4',
-})
-
-const carouselSlideContainer = tv({
-  base: 'flex justify-center m-auto px-8 w-full h-full',
-})
-
-const carouselSlideWrapper = tv({
-  base: 'bg-color-1-200 p-2',
-})
-
-const carouselNavigationButtons = tv({
-  base: 'bg-color-1-500 rounded-full p-4 text-white',
-})
-
-const carousel = {
-  container: carouselContainer,
-  slideContainer: carouselSlideContainer,
-  slideWrapper: carouselSlideWrapper,
-  navigationButtons: carouselNavigationButtons,
-  swiper: carouselSwiper,
-  swiperWrapper: carouselSwiperWrapper,
-}
-
-export default carousel

package/src/theme/Checkbox/index.ts

@@ -1,49 +0,0 @@
-import { tv } from 'tailwind-variants'
-
-export const checkboxContainer = tv({
-  base: 'flex focus-ring-black',
-})
-
-export const checkboxLabel = tv({
-  base: `hover:cursor-pointer`,
-  variants: {
-    color: {
-      gray: 'text-gray-300',
-      black: 'text-black',
-    },
-    isDisabled: {
-      true: 'text-gray-6',
-    },
-  },
-  defaultVariants: {
-    color: 'black',
-  },
-})
-
-export const checkBox = tv({
-  base: `w-6 h-6 mt-0.5 mr-2.5 rounded-full border-2 border-gray-2 shrink-0 hover:cursor-pointer flex items-center justify-center`,
-  variants: {
-    isDisabled: {
-      true: 'border-gray-6',
-    },
-    isFocused: {
-      true: `outline-black [outline-offset: 2px]`,
-    },
-    isError: {
-      true: 'border-red-500',
-    },
-  },
-})
-
-export const checkMark = tv({
-  base: `hidden w-4 h-4 bg-gray-300 rounded-full`,
-  variants: {
-    selected: {
-      true: 'block text-white',
-    },
-  },
-})
-
-export const checkMarkIcon = tv({
-  base: 'text-white w-4 h-4 [&_svg]:w-4 [&_svg]:h-4',
-})

package/src/theme/CheckboxGroup/index.ts

@@ -1,14 +0,0 @@
-import { tv } from 'tailwind-variants'
-
-export const checkboxGroup = tv({
-  base: `block`,
-  variants: {
-    isDisabled: {
-      true: 'opacity-60 pointer-events-none',
-    },
-  },
-})
-
-export const checkboxGroupItemsGroup = tv({
-  base: `flex flex-col gap-4 py-8`,
-})

package/src/theme/DatePicker/index.tsx

@@ -1,42 +0,0 @@
-import { tv } from 'tailwind-variants'
-
-export const datePickerContainer = tv({
-  base: 'relative inline-flex flex-col text-left',
-})
-
-export const datePickerButton = tv({
-  base: 'flex items-center border-2 border-color-1-500 rounded focus-ring-black',
-})
-
-export const datePickerCalendarPopoverUnderlay = tv({
-  base: 'fixed inset-0',
-})
-
-export const datePickerCalendarPopoverContainer = tv({
-  base: 'absolute top-full bg-white border border-gray-300 rounded-md shadow-lg mt-2 p-8 z-10',
-})
-
-export const datePickerDateField = tv({
-  base: 'pr-1 flex gap-2',
-  defaultVariants: {
-    dateFieldShown: true,
-  },
-  variants: {
-    dateFieldShown: {
-      true: '',
-      false: 'hidden',
-    },
-  },
-})
-
-export const datePickerDateSegment = tv({
-  base: 'focus-ring-black',
-})
-
-export const datePickerIcon = tv({
-  base: 'text-color-1-500 bg-color-1-100 border-l-2 border-color-1-500 h-full py-2 px-2',
-})
-
-export const datePickerLabel = tv({
-  base: 'text-color-1-500 font-bold px-2',
-})

package/src/theme/Image/index.ts

@@ -1,8 +0,0 @@
-import { tv } from 'tailwind-variants'
-import type { TToken } from '../../providers/Theme/interface'
-
-export const imgStyles = tv({
-  base: 'object-contain',
-})
-
-export const imgTheme = (props: TToken) => imgStyles(props)

package/src/theme/LightBox/index.ts

@@ -1,56 +0,0 @@
-import { tv } from 'tailwind-variants'
-import typography from '../Typography'
-
-const lightBoxWrapper = tv({
-  base: 'focus-ring-black',
-})
-
-const lightBoxContainer = tv({
-  base: `rounded-3xl overflow-hidden`,
-})
-
-const lightBoxCloseBtn = tv({
-  base: `
-    absolute
-    xl:top-10
-    xl:right-20
-    lg:top-8
-    lg:right-8
-    z-[10000]
-    top-4
-    right-4
-    size-10
-    focus-ring-black
-  `,
-})
-
-const lightBoxLabel = tv({
-  extend: typography,
-  base: 'sr-only',
-})
-
-const lightBoxModalUnderlay = tv({
-  base: 'w-screen h-screen bg-black/50 absolute top-0 left-0 flex justify-center items-center',
-})
-
-const lightBoxModalOverlay = tv({
-  base: '',
-})
-
-const lightBoxModalDialog = tv({
-  base: 'flex flex-col gap-4 items-center',
-})
-
-const lightboxTheme = {
-  wrapper: lightBoxWrapper,
-  container: lightBoxContainer,
-  label: lightBoxLabel,
-  closeBtn: lightBoxCloseBtn,
-  modal: {
-    underlay: lightBoxModalUnderlay,
-    overlay: lightBoxModalOverlay,
-    dialog: lightBoxModalDialog,
-  },
-}
-
-export default lightboxTheme

package/src/theme/Radio/index.ts

@@ -1,31 +0,0 @@
-import { tv } from 'tailwind-variants'
-
-export const radioLabel = tv({
-  base: `text-black flex flex-row items-center hover:cursor-pointer focus-ring-black`,
-  variants: {
-    isDisabled: {
-      true: 'text-gray-6',
-    },
-  },
-})
-
-export const radio = tv({
-  base: `w-6 h-6 mt-0.5 mr-2.5 rounded-full border-2 border-gray-2 shrink-0 hover:cursor-pointer flex items-center justify-center`,
-  variants: {
-    isDisabled: {
-      true: 'border-gray-6',
-    },
-    isFocused: {
-      true: `outline-black [outline-offset: 2px]`,
-    },
-  },
-})
-
-export const selectedMark = tv({
-  base: `hidden w-4 h-4 bg-gray-300 rounded-full`,
-  variants: {
-    selected: {
-      true: 'block text-white',
-    },
-  },
-})

package/src/theme/RadioGroup/index.ts

@@ -1,14 +0,0 @@
-import { tv } from 'tailwind-variants'
-
-export const radioGroup = tv({
-  base: `block`,
-  variants: {
-    isDisabled: {
-      true: 'opacity-60 pointer-events-none',
-    },
-  },
-})
-
-export const radioGroupItemsGroup = tv({
-  base: `flex flex-col gap-4 py-8`,
-})

package/src/theme/Search/index.ts

@@ -1,20 +0,0 @@
-import { tv } from 'tailwind-variants'
-
-export const searchInput = tv({
-  base: 'p-4 w-full outline-0 search-cancel:appearance-none',
-  variants: {
-    isDisabled: {
-      true: 'opacity-60 pointer-events-none',
-    },
-  },
-})
-
-export const searchIcon = tv({
-  base: `
-    box-border 
-    absolute 
-    right-4 
-    focus-ring-black
-    outline-0
-  `,
-})