@okam/stack-ui 1.25.2 → 1.25.3

package/src/theme/Accordion/index.tsx

@@ -0,0 +1,101 @@
+import { tv } from 'tailwind-variants'
+import type { TToken } from '../../providers/Theme/interface'
+
+export const accordionContainer = tv({
+  base: '[border-radius: 32px] p-1.5 focus:outline-none text-color-1-500',
+  defaultVariants: {
+    textAlign: 'left',
+    isOpen: false,
+  },
+  variants: {
+    textAlign: {
+      center: 'text-center',
+      left: 'text-left',
+    },
+  },
+})
+
+export const accordionButton = tv({
+  base: 'grid overflow-hidden w-full items-center border-b-2 border-color-1-500 focus-ring-black',
+  variants: {
+    titleBold: {
+      true: 'font-bold',
+    },
+    textAlign: {
+      center: 'grid-cols-[3rem_1fr_3rem] pl-0 sm:pl-0',
+      left: 'grid-cols-[1fr_3rem]',
+    },
+    bgColor: {
+      gray: 'bg-gray-300',
+      white: 'bg-white',
+    },
+  },
+  defaultVariants: {
+    titleBold: false,
+    textAlign: 'left',
+    bgColor: 'white',
+  },
+})
+
+export const accordionTitle = tv({
+  base: '',
+  defaultVariants: {
+    textAlign: 'left',
+  },
+  variants: {
+    textAlign: {
+      center: 'justify-self-center col-start-2',
+      left: 'justify-self-start',
+    },
+  },
+})
+
+export const accordionIcon = tv({
+  base: 'text-color-1-500 min-h-12 rotate-90 min-w-12 rounded-full flex items-center justify-center transition duration-500 transform ml-auto aspect-square',
+  variants: {
+    isOpen: {
+      true: '-rotate-90',
+      false: '',
+    },
+  },
+})
+
+export const accordionRegion = tv({
+  base: `
+    font-body 
+    text-inherit
+    h-auto
+    grid
+  `,
+  defaultVariants: {
+    textAlign: 'left',
+  },
+  variants: {
+    textAlign: {
+      center: 'grid-cols-[3rem_1fr_3rem] px-6 text-center',
+      left: 'grid-cols-[1fr_3rem] text-left',
+    },
+  },
+})
+
+export const accordionContent = tv({
+  base: 'overflow-hidden flex flex-col gap-2 items-start',
+  defaultVariants: {
+    textAlign: 'left',
+  },
+  variants: {
+    textAlign: {
+      center: 'col-start-2',
+      left: '',
+    },
+  },
+})
+
+export const accordionTheme = {
+  container: (props: TToken) => accordionContainer(props),
+  button: (props: TToken) => accordionButton(props),
+  title: (props: TToken) => accordionTitle(props),
+  icon: (props: TToken) => accordionIcon(props),
+  region: (props: TToken) => accordionRegion(props),
+  content: (props: TToken) => accordionContent(props),
+}

package/src/theme/Alerts/index.ts

@@ -0,0 +1,97 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1,167 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,56 @@
+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