@okam/stack-ui 1.25.3 → 1.25.4

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
-  `,
-})

package/src/theme/ShareButton/index.tsx

@@ -1,76 +0,0 @@
-import { tv } from 'tailwind-variants'
-
-export const shareButtonContainer = tv({
-  base: 'flex print:hidden relative',
-  defaultVariants: {
-    listDirection: 'row',
-  },
-  variants: {
-    listDirection: {
-      row: 'flex-row',
-      column: 'flex-col',
-    },
-  },
-})
-
-export const shareButton = tv({
-  base: 'relative z-20 !bg-color-1-500 hover:!bg-color-1-400 w-16 h-16 flex justify-center items-center active:!bg-color-1-400 rounded-full text-white focus-ring-black',
-  variants: {
-    isOpen: {
-      true: '',
-      false: '',
-    },
-  },
-})
-
-export const shareButtonLinksList = tv({
-  base: '!bg-color-1-200 absolute opacity-0 invisible flex transition duration-300 items-center p-0 bg-primary-1 z-0 rounded-b-full rounded-t-full',
-  defaultVariants: {
-    listDirection: 'row',
-  },
-  variants: {
-    listDirection: {
-      row: 'flex-row pl-14 h-16 left-0',
-      column: 'flex-col [width:calc(100% + .5rem)] pt-14 w-16 top-0',
-    },
-    isOpen: {
-      true: 'opacity-100 visible',
-      false: '',
-    },
-  },
-})
-
-export const shareButtonLink = tv({
-  base: `
-    flex
-    items-center
-    justify-center
-    cursor-pointer
-    bg-color-1-200
-    hover:bg-color-1-300
-    w-full
-    text-color-1-500
-    rounded-none
-    p-2
-    focus-ring-black
-    z-10
-    has-focus-ring:z-20
-  `,
-  defaultVariants: {
-    listDirection: 'row',
-  },
-  variants: {
-    listDirection: {
-      row: 'last:rounded-r-full h-full',
-      column: 'last:rounded-b-full',
-    },
-  },
-})
-
-export const shareButtonIcon = tv({
-  base: 'text-white',
-})
-
-export const shareButtonLinkIcons = tv({
-  base: '',
-})

package/src/theme/SidePanel/index.ts

@@ -1,9 +0,0 @@
-import { tv } from 'tailwind-variants'
-
-export const sidePanelWrapper = tv({
-  base: 'm-auto fixed right-0 top-0 bottom-0 w-full max-w-[512px] [&>div]:h-full',
-})
-
-export const sidePanelContainer = tv({ base: 'h-full w-full flex justify-end' })
-
-export const sidePanelInnerContainer = tv({ base: 'bg-black h-full w-full overflow-y-auto' })

package/src/theme/TextArea/index.ts

@@ -1,25 +0,0 @@
-import { tv } from 'tailwind-variants'
-
-export const textArea = tv({
-  base: `
-    w-full
-    min-h-32
-    rounded-2xl
-    px-6
-    h-12
-    border-2
-    border-solid
-    transition
-    duration-300
-    ease-in-out
-    text-gray-2
-    placeholder:text-gray-2
-    focus-ring-black
-    
-  `,
-  variants: {
-    isError: {
-      true: 'border-red-500',
-    },
-  },
-})

package/src/theme/Typography/index.tsx

@@ -1,44 +0,0 @@
-import { tv } from 'tailwind-variants'
-
-const typography = tv({
-  variants: {
-    size: {
-      h1: `text-5xl`,
-      h2: `text-4xl`,
-      h3: `text-3xl`,
-      h4: `text-2xl`,
-      h5: `text-xl`,
-      h6: `text-lg`,
-      leading: `text-md font-bold leading-normal`,
-      paragraph: `text-md inline`,
-      footnotes: `text-sm`,
-      xs: `text-xs`,
-    },
-    font: {
-      body: `font-body`,
-    },
-    weight: {
-      normal: `font-normal`,
-      light: `font-light`,
-      bold: 'font-bold',
-    },
-    color: {
-      gray: `text-gray-500`,
-      white: `text-white`,
-    },
-    isError: {
-      true: 'text-sm text-error py-3',
-    },
-    align: {
-      center: 'text-center',
-      left: 'text-left',
-      right: 'text-right',
-    },
-  },
-  defaultVariants: {
-    size: 'paragraph',
-    font: 'body',
-  },
-})
-
-export default typography