import { tv } from 'tailwind-variants';

const baseButton = tv({
  base: ['leading-tight', 'inline-block', 'font-semibold', 'border', 'border-transparent', 'rounded', 'disabled:cursor-not-allowed', 'disabled:opacity-40', 'focus-visable:ring'],
  variants: {
    appearance: {
      outlined: ''
    },
    isInGroup: {
      true: ['rounded-none first:rounded-l last:rounded-r', '[&:not(:first-child):not(:last-child)]:rounded-none', '[&:not(:last-of-type)]:-me-[1px]']
    },
    intent: {
      default: '',
      primary: '',
      success: '',
      warning: '',
      danger: ''
    },
    size: {
      xs: 'text-sm px-2 py-1',
      sm: 'text-sm px-3 py-2',
      md: 'text-base px-4 py-2',
      lg: 'text-base px-5 py-4',
      xl: 'text-xl px-6 py-5'
    }
  },
  compoundVariants: [
  // APPEARANCE: outlined
  {
    appearance: 'outlined',
    intent: 'default',
    class: 'text-default-700 hover:text-background border-default-700 hover:bg-default-700'
  }, {
    appearance: 'outlined',
    intent: 'primary',
    class: 'text-primary hover:text-primary-foreground border-primary hover:bg-primary'
  }, {
    appearance: 'outlined',
    intent: 'success',
    class: 'text-success hover:text-success-foreground border-success hover:bg-success'
  }, {
    appearance: 'outlined',
    intent: 'warning',
    class: 'text-warning hover:text-warning-foreground border-warning hover:bg-warning'
  }, {
    appearance: 'outlined',
    intent: 'danger',
    class: 'text-danger hover:text-danger-foreground border-danger hover:bg-danger'
  }],
  defaultVariants: {
    size: 'md',
    intent: 'default'
  }
});
const button = tv({
  extend: baseButton,
  base: [''],
  variants: {
    appearance: {
      default: '',
      outlined: '',
      minimal: '',
      custom: ''
    }
  },
  compoundVariants: [
  // APPEARANCE: default
  {
    appearance: 'default',
    intent: 'default',
    class: 'bg-default-800 text-default-100 hover:bg-default-800/80'
  }, {
    appearance: 'default',
    intent: 'primary',
    class: 'bg-primary-500 text-primary-foreground hover:bg-primary-500/80'
  }, {
    appearance: 'default',
    intent: 'success',
    class: 'bg-success-500 text-success-foreground hover:bg-success-500/80'
  }, {
    appearance: 'default',
    intent: 'warning',
    class: 'bg-warning-500 text-black hover:bg-warning-500/80'
  }, {
    appearance: 'default',
    intent: 'danger',
    class: 'bg-danger text-danger-foreground hover:bg-danger/80'
  },
  // APPEARANCE: minimal
  {
    appearance: 'minimal',
    intent: 'default',
    class: 'text-default-700 hover:text-default-foreground hover:bg-default'
  }, {
    appearance: 'minimal',
    intent: 'primary',
    class: 'text-primary hover:text-primary-foreground hover:bg-primary'
  }, {
    appearance: 'minimal',
    intent: 'success',
    class: 'text-success hover:text-success-foreground hover:bg-success'
  }, {
    appearance: 'minimal',
    intent: 'warning',
    class: 'text-warning hover:text-warning-foreground hover:bg-warning'
  }, {
    appearance: 'minimal',
    intent: 'danger',
    class: 'text-danger hover:text-danger-foreground hover:bg-danger'
  },
  // APPEARANCE: custom
  {
    appearance: 'custom',
    intent: 'default',
    class: 'text-default-700'
  }, {
    appearance: 'custom',
    intent: 'primary',
    class: 'text-primary'
  }, {
    appearance: 'custom',
    intent: 'success',
    class: 'text-success'
  }, {
    appearance: 'custom',
    intent: 'warning',
    class: 'text-warning'
  }, {
    appearance: 'custom',
    intent: 'danger',
    class: 'text-danger'
  }],
  defaultVariants: {
    size: 'md',
    intent: 'primary'
  }
});
const toggleButton = tv({
  extend: baseButton,
  base: [''],
  variants: {
    isSelected: {
      true: ''
    }
  },
  compoundVariants: [{
    appearance: 'outlined',
    intent: 'default',
    isSelected: true,
    class: 'bg-default-800 text-default-50 hover:bg-default-800/80 dark:bg-default dark:text-default-950 dark:hover:bg-default/40'
  }, {
    appearance: 'outlined',
    intent: 'primary',
    isSelected: true,
    class: 'bg-primary text-primary-foreground hover:bg-primary/80'
  }, {
    appearance: 'outlined',
    intent: 'success',
    isSelected: true,
    class: 'bg-success text-success-foreground hover:bg-success/80'
  }, {
    appearance: 'outlined',
    intent: 'warning',
    isSelected: true,
    class: 'bg-warning text-warning-foreground hover:bg-warning/80'
  }, {
    appearance: 'outlined',
    intent: 'danger',
    isSelected: true,
    class: 'bg-danger text-danger-foreground hover:bg-danger/80'
  }]
});
const buttonGroup = tv({
  base: ['inline-flex items-center justify-center h-auto']
});

const chip = tv({
  slots: {
    base: ['leading-tight', 'disabled:cursor-not-allowed', 'disabled:opacity-40', 'whitespace-nowrap', 'inline-flex items-center justify-between box-border'],
    content: ['flex-1 text-inherit font-normal'],
    dot: ['w-2', 'h-2', 'ml-1', 'rounded-full'],
    closeButton: ['p-0.5']
  },
  variants: {
    isDisabled: {
      true: 'opacity-40'
    },
    appearance: {
      default: '',
      outlined: '',
      faded: ''
    },
    intent: {
      default: {
        dot: 'bg-default-800 dark:bg-default-700',
        closeButton: ['bg-default-400', 'text-default-foreground dark:text-default-background', 'dark:bg-default-600', 'hover:bg-default-400/60 dark:hover:bg-default-600/60']
      },
      primary: {
        dot: 'bg-primary',
        closeButton: ['bg-primary-700', 'text-background', 'hover:bg-primary-700/60']
      },
      success: {
        dot: 'bg-success',
        closeButton: ['bg-success', 'text-background', 'hover:bg-success/60']
      },
      warning: {
        dot: 'bg-warning',
        closeButton: ['bg-warning', 'text-background', 'hover:bg-warning/60']
      },
      danger: {
        dot: 'bg-danger',
        closeButton: ['bg-danger', 'text-background', 'hover:bg-danger/60']
      }
    },
    size: {
      sm: {
        base: 'text-xs px-1 h-6',
        content: 'px-1',
        closeButton: 'text-xs'
      },
      md: {
        base: 'text-sm px-1 h-7',
        content: 'px-2',
        closeButton: 'text-sm'
      },
      lg: {
        base: 'text-lg px-2 h-8',
        content: 'px-2',
        closeButton: 'text-lg'
      }
    },
    radius: {
      none: 'rounded-none',
      sm: 'rounded',
      lg: 'rounded-lg',
      full: 'rounded-full'
    }
  },
  compoundVariants: [
  // APPEARANCE: default
  {
    appearance: 'default',
    intent: 'default',
    class: {
      base: 'bg-default-800 text-default-50 dark:bg-default dark:text-default-950'
    }
  }, {
    appearance: 'default',
    intent: 'primary',
    class: {
      base: 'bg-primary text-primary-foreground'
    }
  }, {
    appearance: 'default',
    intent: 'success',
    class: {
      base: 'bg-success text-success-foreground'
    }
  }, {
    appearance: 'default',
    intent: 'warning',
    class: {
      base: 'bg-warning text-warning-foreground'
    }
  }, {
    appearance: 'default',
    intent: 'danger',
    class: {
      base: 'bg-danger text-danger-foreground'
    }
  },
  // APPEARANCE: faded
  {
    appearance: 'faded',
    intent: 'default',
    class: {
      base: 'text-default-700 border border-default-700 bg-default-400/20'
    }
  }, {
    appearance: 'faded',
    intent: 'primary',
    class: {
      base: 'text-primary border border-primary bg-primary-300/20'
    }
  }, {
    appearance: 'faded',
    intent: 'success',
    class: {
      base: 'text-success border border-success bg-success-300/20'
    }
  }, {
    appearance: 'faded',
    intent: 'warning',
    class: {
      base: 'text-warning border border-warning bg-warning-300/20'
    }
  }, {
    appearance: 'faded',
    intent: 'danger',
    class: {
      base: 'text-danger border border-danger bg-danger-300/20'
    }
  },
  // APPEARANCE: outlined
  {
    appearance: 'outlined',
    intent: 'default',
    class: {
      base: 'text-default-700 border border-default-700'
    }
  }, {
    appearance: 'outlined',
    intent: 'primary',
    class: {
      base: 'text-primary border border-primary'
    }
  }, {
    appearance: 'outlined',
    intent: 'success',
    class: {
      base: 'text-success border border-success'
    }
  }, {
    appearance: 'outlined',
    intent: 'warning',
    class: {
      base: 'text-warning border border-warning'
    }
  }, {
    appearance: 'outlined',
    intent: 'danger',
    class: {
      base: 'text-danger border border-danger'
    }
  }],
  defaultVariants: {
    size: 'md',
    intent: 'default',
    appearance: 'default',
    radius: 'full'
  }
});

const progressBar = tv({
  slots: {
    base: ['overflow-hidden w-full bg-content3 dark:bg-content2'],
    label: ['flex justify-between pb-1 gap-2 leading-tight'],
    progress: ['']
  },
  variants: {
    isIndeterminate: {
      true: {
        progress: ['animate-loading origin-left']
      }
    },
    intent: {
      default: {
        progress: 'bg-default-800 dark:bg-default'
      },
      primary: {
        progress: 'bg-primary-500'
      },
      success: {
        progress: 'bg-success-500'
      },
      warning: {
        progress: 'bg-warning-500'
      },
      danger: {
        progress: 'bg-danger-500'
      }
    },
    size: {
      xs: {
        base: 'h-1',
        progress: 'h-1',
        label: 'text-xs'
      },
      sm: {
        base: 'h-2',
        progress: 'h-2',
        label: 'text-sm'
      },
      md: {
        base: 'h-4',
        progress: 'h-4'
      },
      lg: {
        base: 'h-8',
        progress: 'h-8',
        label: 'text-lg'
      }
    },
    radius: {
      none: 'rounded-none',
      sm: 'rounded',
      lg: 'rounded-lg',
      full: 'rounded-full'
    }
  },
  defaultVariants: {
    size: 'md',
    intent: 'default',
    radius: 'sm'
  }
});

const closeButton = tv({
  slots: {
    base: 'rounded-full hover:bg-default-100 transition transition-200 focus-visable:ring text-inherit',
    icon: 'size-[1em]'
  },
  variants: {
    size: {
      xs: 'text-sm p-1',
      sm: 'text-base p-2',
      md: 'text-xl p-2',
      lg: 'text-2xl p-3',
      xl: 'text-4xl p-3'
    }
  },
  defaultVariants: {
    size: 'md'
  }
});

const listbox = tv({
  base: 'w-full flex flex-col gap-0.5 outline-none p-1'
});
const listboxItem = tv({
  slots: {
    base: ['flex', 'group', 'gap-2', 'items-center', 'justify-between', 'relative', 'px-2', 'py-1.5', 'w-full', 'h-full', 'box-border', 'rounded', 'subpixel-antialiased', 'outline-none', 'cursor-pointer', 'tap-highlight-transparent'],
    descriptionWrapper: 'w-full flex flex-col items-start justify-center',
    label: 'flex-1 text-sm font-normal truncate',
    description: ['w-full', 'text-xs', 'text-foreground-500', 'group-hover:text-current'],
    selectedIcon: ['text-inherit', 'w-4', 'h-4', 'flex-shrink-0'],
    shortcut: ['px-1', 'py-0.5', 'rounded', 'font-sans', 'text-foreground-500', 'text-xs', 'border', 'border-default-300', 'group-data-is-active:border-current']
  },
  variants: {
    appearence: {
      default: {
        base: ''
      },
      outlined: {
        base: 'border border-transparent bg-transparent'
      },
      faded: {
        base: ['border border-transparent']
      }
    },
    intent: {
      default: {},
      primary: {},
      secondary: {},
      success: {},
      warning: {},
      danger: {}
    },
    isActive: {
      true: {
        base: []
      }
    },
    withDivider: {
      true: {
        base: ['mb-1.5']
      }
    },
    isDisabled: {
      true: {
        base: 'opacity-disabled pointer-events-none'
      }
    },
    isSelected: {
      true: {
        base: ''
      }
    }
  },
  defaultVariants: {
    appearence: 'default',
    intent: 'default'
  },
  compoundVariants: [
  // appearence: default
  {
    appearence: 'default',
    intent: 'default',
    class: {
      base: ['data-is-active:bg-default', 'data-is-active:text-default-foreground']
    }
  }, {
    appearence: 'default',
    intent: 'primary',
    class: {
      base: ['data-is-active:bg-primary-500', 'data-is-active:text-primary-foreground']
    }
  }, {
    appearence: 'default',
    intent: 'success',
    class: {
      base: ['data-is-active:bg-success-500', 'data-is-active:text-success-foreground']
    }
  }, {
    appearence: 'default',
    intent: 'warning',
    class: {
      base: ['data-is-active:bg-warning-500', 'data-is-active:text-warning-foreground']
    }
  }, {
    appearence: 'default',
    intent: 'danger',
    class: {
      base: ['data-is-active:bg-danger-500', 'data-is-active:text-danger-foreground']
    }
  }, {
    appearence: 'default',
    intent: 'primary',
    isActive: true,
    class: {
      shortcut: ['text-primary-foreground']
    }
  }, {
    appearence: 'default',
    intent: 'success',
    isActive: true,
    class: {
      shortcut: ['text-success-foreground']
    }
  }, {
    appearence: 'default',
    intent: 'warning',
    isActive: true,
    class: {
      shortcut: ['text-warning-foreground']
    }
  }, {
    appearence: 'default',
    intent: 'danger',
    isActive: true,
    class: {
      shortcut: ['text-danger-foreground']
    }
  },
  // appearence: outlined
  {
    appearence: 'outlined',
    intent: 'default',
    class: {
      base: ['data-is-active:border-default-700', 'data-is-active:text-default-700']
    }
  }, {
    appearence: 'outlined',
    intent: 'primary',
    class: {
      base: ['data-is-active:border-primary', 'data-is-active:text-primary']
    }
  }, {
    appearence: 'outlined',
    intent: 'success',
    class: {
      base: ['data-is-active:border-success', 'data-is-active:text-success']
    }
  }, {
    appearence: 'outlined',
    intent: 'warning',
    class: {
      base: ['data-is-active:border-warning', 'data-is-active:text-warning']
    }
  }, {
    appearence: 'outlined',
    intent: 'danger',
    class: {
      base: ['data-is-active:border-danger', 'data-is-active:text-danger']
    }
  },
  // appearence: faded
  {
    appearence: 'faded',
    intent: 'default',
    class: {
      base: ['data-is-active:bg-default-400/20', 'data-is-active:border-default-700', 'data-is-active:text-default-700']
    }
  }, {
    appearence: 'faded',
    intent: 'primary',
    class: {
      base: ['data-is-active:bg-primary-300/20', 'data-is-active:border-primary', 'data-is-active:text-primary']
    }
  }, {
    appearence: 'faded',
    intent: 'success',
    class: {
      base: ['data-is-active:bg-success-300/20', 'data-is-active:border-success', 'data-is-active:text-success']
    }
  }, {
    appearence: 'faded',
    intent: 'warning',
    class: {
      base: ['data-is-active:bg-warning-300/20', 'data-is-active:border-warning', 'data-is-active:text-warning']
    }
  }, {
    appearence: 'faded',
    intent: 'danger',
    class: {
      base: ['data-is-active:bg-danger-300/20', 'data-is-active:border-danger', 'data-is-active:text-danger']
    }
  }]
});

const dropdownContent = tv({
  base: 'bg-content1 w-[260px] rounded border border-default-200'
});

const popover = tv({
  base: 'bg-content1 rounded border border-default-200',
  variants: {
    size: {
      sm: 'w-40',
      md: 'w-64',
      lg: 'w-96',
      xl: 'w-[34rem]'
    }
  },
  defaultVariants: {
    size: 'md'
  }
});

const divider = tv({
  base: 'shrink-0 bg-default-200 border-none',
  variants: {
    orientation: {
      horizontal: 'w-full h-[1px]',
      vertical: 'h-full w-[1px]'
    }
  },
  defaultVariants: {
    orientation: 'horizontal'
  }
});

const notificationsContainer = tv({
  base: ['w-full', 'max-h-full', 'overflow-hidden', 'px-4', 'fixed', 'max-w-lg', 'z-[1000]'],
  variants: {
    placement: {
      'top-left': 'top-0 left-0',
      'top-center': 'top-0 left-2/4 translate-x-[-50%]',
      'top-right': 'top-0  right-0',
      'bottom-left': 'bottom-0 left-0',
      'bottom-center': 'bottom-0 left-2/4 translate-x-[-50%]',
      'bottom-right': 'bottom-0 right-0 '
    }
  },
  defaultVariants: {
    placement: 'bottom-right'
  }
});

const btn = 'transition transition-200 focus-visible:ring';
const notificationCard = tv({
  slots: {
    base: 'py-3 px-4 overflow-hidden flex items-center justify-between relative min-h-16 text-sm rounded shadow transition-all transition-200 ease-in-out',
    message: 'grow',
    customActions: 'flex flex-nowrap',
    customActionButton: btn + ' first:ml-4 last:-mr-2 font-semibold py-1 px-2 rounded',
    closeButton: btn + ' inline-block p-2 ml-2 -mr-2 rounded-full'
  },
  variants: {
    appearance: {
      info: {
        base: 'text-white bg-default-900 dark:text-foreground dark:bg-default-200',
        closeButton: 'hover:bg-default-800 dark:hover:bg-default-300',
        customActionButton: 'hover:bg-default-800 dark:hover:bg-default-300'
      },
      success: {
        base: 'bg-success text-success-foreground',
        closeButton: 'hover:bg-success-600',
        customActionButton: 'hover:bg-success-600'
      },
      warning: {
        base: 'bg-warning text-warning-foreground',
        closeButton: 'hover:bg-warning-600',
        customActionButton: 'hover:bg-warning-600'
      },
      error: {
        base: 'bg-danger text-danger-foreground',
        closeButton: 'hover:bg-danger-600',
        customActionButton: 'hover:bg-danger-600'
      }
    }
  },
  defaultVariants: {
    appearance: 'info'
  }
});
const zoomOut = {
  leaveTo: {
    transform: 'scale(0.80)',
    opacity: '0'
  },
  leave: {
    transform: 'translate3d(0,0,0)'
  }
};
const notificationEnteringFrom = {
  right: {
    transform: 'translate3d(125%, 0, 0)'
  },
  left: {
    transform: 'translate3d(-125%, 0, 0)'
  },
  top: {
    transform: 'translate3d(0, -125%, 0)'
  },
  bottom: {
    transform: 'translate3d(0, 125%, 0)'
  }
};
const notificationTransitions = {
  slideFromTopLeft: {
    ...zoomOut,
    enter: {
      ...notificationEnteringFrom.left
    }
  },
  slideFromTopCenter: {
    ...zoomOut,
    enter: notificationEnteringFrom.top
  },
  slideFromTopRight: {
    ...zoomOut,
    enter: notificationEnteringFrom.right
  },
  slideFromBottomLeft: {
    ...zoomOut,
    enter: notificationEnteringFrom.left
  },
  slideFromBottomCenter: {
    ...zoomOut,
    enter: notificationEnteringFrom.bottom
  },
  slideFromBottomRight: {
    ...zoomOut,
    enter: notificationEnteringFrom.right
  }
};

const obscurer = `before:bg-gradient-to-b before:to-content1 before:from-content1/75 before:absolute before:left-0 before:w-full before:h-4 before:-top-4 before:content-['_']`;
const overlay = tv({
  base: 'z-20 will-change-transform overflow-auto',
  variants: {
    enableFlexContent: {
      true: 'flex items-center fixed inset-0 flex-col'
    },
    inPlace: {
      true: 'absolute'
    }
  }
});
const backdrop = tv({
  base: 'fixed inset-0 select-none z-10 ',
  variants: {
    type: {
      none: '',
      transparent: '',
      blur: 'bg-overlay/[.45] backdrop-blur',
      faded: 'bg-overlay/[.45]'
    },
    inPlace: {
      true: 'absolute'
    }
  }
});
const modal = tv({
  slots: {
    base: 'flex flex-col shrink-0 relative text-content1-foreground bg-content1 rounded my-24 w-full outline-none overflow-hidden z-0',
    closeButton: 'absolute top-2 right-2 z-10 dark:hover:bg-content2',
    header: 'font-bold text-xl p-4 rounded-tl rounded-tr',
    body: 'p-4 grow overflow-y-auto',
    footer: `${obscurer} flex justify-end items-center relative border-t border-default-200 bg-content2 p-4`
  },
  variants: {
    size: {
      xs: 'modal--xs',
      sm: 'modal--sm',
      md: 'modal--md',
      lg: 'modal--lg',
      xl: 'modal--xl',
      full: 'modal--full'
    },
    isCentered: {
      true: 'my-auto'
    }
  }
});
const drawer = tv({
  slots: {
    base: 'flex flex-col absolute text-content1-foreground bg-content1 w-full h-full z-0 shadow',
    closeButton: 'absolute top-2 right-2 z-10 dark:hover:bg-content2',
    header: 'font-bold text-xl p-4 rounded-tl rounded-tr',
    body: 'p-4 grow overflow-y-auto',
    footer: `${obscurer} flex justify-end items-center relative border-t border-default-200 bg-content2 p-4`
  },
  variants: {
    size: {
      xs: '',
      sm: '',
      md: '',
      lg: '',
      xl: '',
      full: ''
    },
    placement: {
      top: 'top-0 right-0 left-0',
      bottom: 'bottom-0 right-0 left-0',
      left: 'top-0 bottom-0 left-0',
      right: 'top-0 bottom-0 right-0'
    }
  },
  compoundVariants: [
  // vertical
  {
    placement: ['top', 'bottom'],
    size: 'xs',
    class: 'drawer--vertical-xs'
  }, {
    placement: ['top', 'bottom'],
    size: 'sm',
    class: 'drawer--vertical-sm'
  }, {
    placement: ['top', 'bottom'],
    size: 'md',
    class: 'drawer--vertical-md'
  }, {
    placement: ['top', 'bottom'],
    size: 'lg',
    class: 'drawer--vertical-lg'
  }, {
    placement: ['top', 'bottom'],
    size: 'xl',
    class: 'drawer--vertical-xl'
  }, {
    placement: ['top', 'bottom'],
    size: 'full',
    class: 'drawer--vertical-full'
  },
  // horizontal
  {
    placement: ['right', 'left'],
    size: 'xs',
    class: 'drawer--horizontal-xs'
  }, {
    placement: ['right', 'left'],
    size: 'sm',
    class: 'drawer--horizontal-sm'
  }, {
    placement: ['right', 'left'],
    size: 'md',
    class: 'drawer--horizontal-md'
  }, {
    placement: ['right', 'left'],
    size: 'lg',
    class: 'drawer--horizontal-lg'
  }, {
    placement: ['right', 'left'],
    size: 'xl',
    class: 'drawer--horizontal-xl'
  }, {
    placement: ['right', 'left'],
    size: 'full',
    class: 'drawer--horizontal-full'
  }]
});
const slideTransition = {
  enterActive: {
    transition: 'transform 0.2s cubic-bezier(0.37, 0, 0.63, 1)'
  },
  leaveActive: {
    transition: 'transform 0.2s cubic-bezier(0.37, 0, 0.63, 1)'
  }
};
const overlayTransitions = {
  fade: {
    enter: {
      opacity: '0'
    },
    enterActive: {
      transition: 'opacity 0.2s linear'
    },
    leave: {
      opacity: '1'
    },
    leaveActive: {
      transition: 'opacity 0.2s linear'
    }
  },
  zoom: {
    enter: {
      opacity: '0',
      transform: 'scale(0.8)'
    },
    enterActive: {
      transition: 'all 0.2s ease-in-out'
    },
    leave: {
      opacity: '1',
      transform: 'scale(1)'
    },
    leaveActive: {
      transition: 'all 0.2s ease-in-out'
    }
  },
  slideFromLeft: {
    enter: {
      transform: 'translateX(-100%)'
    },
    leave: {
      transform: 'translateX(0%)'
    },
    ...slideTransition
  },
  slideFromRight: {
    enter: {
      transform: 'translateX(100%)'
    },
    leave: {
      transform: 'translateX(0%)'
    },
    ...slideTransition
  },
  slideFromTop: {
    enter: {
      transform: 'translateY(-100%)'
    },
    leave: {
      transform: 'translateY(0%)'
    },
    ...slideTransition
  },
  slideFromBottom: {
    enter: {
      transform: 'translateY(100%)'
    },
    leave: {
      transform: 'translateY(0%)'
    },
    ...slideTransition
  },
  scale: {
    enter: {
      opacity: '0',
      transform: 'scale(0.95)'
    },
    enterActive: {
      transitionProperty: 'transform, opacity',
      transitionDuration: '200ms',
      transitionTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)'
    },
    enterTo: {
      opacity: '1',
      transform: 'translate(scaleX(1) scaleY(1))'
    },
    leave: {
      opacity: '1',
      transform: 'translate(scaleX(1) scaleY(1))'
    },
    leaveActive: {
      transitionProperty: 'transform, opacity',
      transitionDuration: '100ms',
      transitionTimingFunction: 'cubic-bezier(0.4, 0, 1, 1)'
    },
    leaveTo: {
      opacity: '0',
      transform: 'scale(0.95)'
    }
  }
};

const label = tv({
  base: 'text-foreground inline-block font-semibold leading-tight pb-1',
  variants: {
    size: {
      sm: '',
      md: '',
      lg: ''
    }
  },
  defaultVariants: {
    size: 'md'
  }
});
const hint = tv({
  base: 'text-default-400 text-xs pb-1 last:pb-0',
  variants: {
    size: {
      sm: '',
      md: '',
      lg: ''
    }
  },
  defaultVariants: {
    size: 'md'
  }
});
const feedback = tv({
  base: 'text-xs pt-1',
  variants: {
    isError: {
      true: 'text-danger'
    },
    size: {
      sm: 'text-xs',
      md: '',
      lg: 'text-sm'
    }
  },
  defaultVariants: {
    size: 'sm'
  }
});
const input = tv({
  base: ['appearance-none', 'flex-1', 'w-full', 'bg-white dark:bg-default-100', 'text-default-900', 'placeholder-default-400', 'text-base text-foreground', 'border', 'border-default-400', 'rounded', 'leading-tight', 'focus:ring', 'focus:outline-none', 'focus:border-primary-400', 'disabled:border-default-200 disabled:text-default-500', 'aria-invalid:border-danger-400', 'aria-invalid:focus:ring-danger-400'],
  variants: {
    size: {
      sm: 'p-2',
      md: 'p-3',
      lg: 'p-4'
    }
  },
  defaultVariants: {
    size: 'md'
  }
});
const textarea = tv({
  extend: input,
  base: 'min-h-24'
});
const checkboxRadioBase = tv({
  base: ['appearance-none', 'inline-block', 'align-middle', 'select-none', 'shrink-0', 'h-[1em] w-[1em]', 'text-base', 'text-primary', 'border border-default-400', 'bg-white dark:bg-default-100', 'checked:bg-origin-border checked:border-transparent dark:checked:bg-current checked:bg-current checked:bg-center checked:bg-no-repeat checked:disabled:bg-default-300'],
  variants: {
    size: {
      sm: '',
      md: '',
      lg: ''
    }
  },
  defaultVariants: {
    size: 'md'
  }
});
const checkbox = tv({
  extend: checkboxRadioBase,
  base: ['checked-bg-checkbox', 'rounded-sm'],
  variants: {
    size: {
      sm: '',
      md: '',
      lg: ''
    }
  },
  defaultVariants: {
    size: 'md'
  }
});
const radio = tv({
  extend: checkboxRadioBase,
  base: ['checked-bg-radio', 'rounded-full'],
  variants: {
    size: {
      sm: '',
      md: '',
      lg: ''
    }
  },
  defaultVariants: {
    size: 'md'
  }
});
const select = tv({
  slots: {
    base: [],
    trigger: [input(), 'flex items-center justify-between', 'disabled:cursor-not-allowed'],
    placeholder: 'text-default-400',
    listbox: 'scroll-py-6 max-h-64',
    icon: 'w-5 h-5'
  }
});

const formInput = tv({
  slots: {
    base: 'flex flex-wrap	flex-row',
    label: 'flex-[1_100%]',
    input: '',
    hint: 'flex-[1_100%]',
    feedback: 'flex-[1_100%]'
  },
  variants: {
    size: {
      sm: '',
      md: '',
      lg: ''
    }
  },
  defaultVariants: {
    size: 'md'
  }
});
const formTextarea = tv({
  extend: formInput
});

const base = tv({
  slots: {
    base: 'flex flex-wrap	flex-row items-center',
    labelContainer: 'leading-tight flex items-start',
    inputContainer: 'flex items-center',
    label: 'font-normal pl-2 pb-0',
    hint: 'pl-2 flex basis-full	before:content-["_"] before:inline-block before:w-[1em] before:h-[1em] shrink-0'
  },
  variants: {
    size: {
      sm: {
        label: 'text-sm'
      },
      md: '',
      lg: ''
    }
  },
  defaultVariants: {
    size: 'md'
  }
});
const formCheckbox = tv({
  extend: base,
  slots: {
    checkbox: ''
  }
});
const formRadio = tv({
  extend: base,
  slots: {
    radio: ''
  }
});
const baseGroup = tv({
  slots: {
    base: '',
    label: 'pb-1 last:pb-0',
    hint: 'pb-1 last:pb-0',
    feedback: 'pt-0 flex-[1_100%]'
  },
  variants: {
    isInline: {
      true: {
        base: 'flex flex-wrap	flex-row items-start',
        label: 'pr-4 pb-0',
        hint: 'pr-4 pb-0',
        feedback: 'pr-4 pb-0'
      }
    }
  }
});
const formCheckboxGroup = tv({
  extend: baseGroup,
  slots: {
    formCheckbox: 'pb-1 last:pb-0'
  },
  variants: {
    isInline: {
      true: {
        formCheckbox: 'pr-4 pb-0'
      }
    }
  }
});
const formRadioGroup = tv({
  extend: baseGroup,
  slots: {
    formRadio: 'pb-1 last:pb-0'
  },
  variants: {
    isInline: {
      true: {
        formRadio: 'pr-4 pb-0'
      }
    }
  }
});

const formSelect = tv({
  slots: {
    base: 'flex flex-wrap	flex-row',
    label: 'flex-[1_100%]',
    select: '',
    hint: 'flex-[1_100%]',
    feedback: 'flex-[1_100%]'
  },
  variants: {
    size: {
      sm: '',
      md: '',
      lg: ''
    }
  },
  defaultVariants: {
    size: 'md'
  }
});

export { overlay as A, overlayTransitions as B, popover as C, progressBar as D, radio as E, select as F, textarea as G, toggleButton as H, button as a, backdrop as b, buttonGroup as c, checkbox as d, chip as e, closeButton as f, divider as g, drawer as h, dropdownContent as i, feedback as j, formCheckbox as k, formCheckboxGroup as l, formInput as m, formRadio as n, formRadioGroup as o, formSelect as p, formTextarea as q, hint as r, input as s, label as t, listbox as u, listboxItem as v, modal as w, notificationCard as x, notificationTransitions as y, notificationsContainer as z };
//# sourceMappingURL=form-select-CW5kX795.js.map
